MS teams header reflow specs

The why?

1. Users are not able to multitask effectively.
2. Teams was breaking Windows 11’s snap layout even at common sizes.
3. Windows has requested that we support at least 500px in width. Previously, our minimum was 720px in width.
4. The European Accessibility Act (EAA), passed in 2019, is a market access directive that creates new obligations for certain consumer offerings in the European Union (EU). It establishes standards for accessibility requirements across various products and services. The EAA is unique, as it can act on behalf of customers.

Implications:
Non-compliant products and services may not be offered in the EU. Government regulators may issue fines, consumers may file lawsuits, and Microsoft can be ordered to stop selling or even recall Microsoft Teams.

The opportunity & Requirement

From a design team standpoint, this is a really good policy to have, as it gives us the opportunity to make Teams much more accessible. We can now support zooming up to 200% and resizing the window down to 360px, ensuring the app works properly with snap layouts.
What is the requirement?

The Teams window can now target a minimum effective pixel size of:
- 360px wide by 502px high (portrait)
- 502px wide by 360px high (landscape)

Where do these dimensions come from?

100% zoom is the default zoom level when a user launches Teams for the first time. The minimum required window size can be viewed as:
- 360px wide by 502px high (portrait) or 502px wide by 360px high (landscape) at 100% zoom
- 720px wide by 1004px high (portrait) or 1004px wide by 720px high (landscape) at 200% zoom

A 360px window size at 100% zoom is equivalent to a 720px window size at 200% zoom.

The approach is that if the app is designed and implemented to be responsive down to a 360px window width, it will address many of the experience gaps related to meeting accessibility requirements.

Below is an illustrated example of what this looks like for the end user when they view a 720px wide window zoomed to 200%:
Key breakpoints where the shell layout changes:

1440px and above
1280px – 1439px
1024px – 1279px
946px – 1023px
768px – 945px (100% zoom)
720px – 767px (100% zoom)
640px – 719px (110% zoom)
480px – 639px (150% zoom)
360px – 479px (200% zoom)

Responsibility

Four designers were given the opportunity to create a reflow framework for Teams, which could become the standard for all other Teams experiences to follow. Daisy Geng, Vivian Hsu, Sagar Narayan Shastry, and I were fortunate enough to work on this project.

I had the opportunity to work on two specific areas:
1. Designing the reflow framework for Teams entity headers
2. Designing the keyboarding framework for reflow

This project will focus on the first part — designing a reflow header framework for Teams entity headers.

Different types of entity headers

We have multiple types of entity headers in Teams, and part of the challenge was to ensure they all follow the same reflow framework.

Here are the different entity headers we have in Teams:
1:1 Chat
Group Chat — Untitled
Group Chat — Named
Meeting Chat
Channel
Platform
Calendar

We started the design work with Meeting Chat, as it is the most complex of all the entity headers.

Header anatomy

If you look at the Teams header, both the left-hand side (LHS) and the right-hand side (RHS) serve specific purposes:

1. LHS (Left-hand side) helps users understand where they are in the app and how many tabs that particular entity has.
2. RHS (Right-hand side) provides quick access to the most critical actions, such as starting a call, adding people to a chat, or opening contextual panes (Info pane, Copilot, Notes, Find in Chat).

LHS of header Slots

Here are the available slots on the left-hand side (LHS) of the header. Any combination of headers should be built using these defined slots. The guidance for using these slots is provided below.

Available Slots on the Left-Hand Side (LHS) of the Header:
Slot 1: Icon Slot
Slot 2: Avatar Slot
Slot 3: Header Title
Slot 4: Subtitle, Tab Dropdown, Information, Menu Button
Slot 5: Icon Slot
Slot 6: Tab Slot

Any header combination should be constructed using these slots. The specific guidance for using each slot is provided below.

Interaction

RHS of header Slots

We mapped out similar patterns for all header components. Now, let’s look at the right-hand side (RHS) of the header.

Here are the available slots on the RHS of the header. Any combination of header content should be built using these defined slots. The guidance for using these slots is provided below.

Available Slots on the Right-Hand Side (RHS) of the Header:

Slot 1: Label Slot
Slot 2: Icon Button Slot / Button Slot
Slot 3: Icon Button Slot / Button Slot
Slot 4: Icon Button Slot / Button Slot
Slot 5: Icon Button Slot
Slot 6: Icon Button Slot
Slot 7: Icon Button Slot
Slot 8: Icon Button Slot — Hoisting Slot
Slot 9: Icon Button Slot

Any combination of header content should be constructed using these slots. Specific guidance for slot usage is provided below.

Reflow

Once we mapped out all the slots, we began designing the header reflow from 1440px and above down to 360px. Meeting Chat was the first header we designed, as it is the most complex one.

Meeting chat

This illustrates the shell’s responsive behavior at a wireframe level. Designers are not expected to specify changes at every single breakpoint listed below; rather, these breakpoints serve as key points to snap to when more granular adjustments are needed as the window size changes.

Keyboarding

All headers will have 3 tab stops:
- Toolbar
- Tabs
- Toolbar

‍Shortcut to navigate between tabs:
Press Alt + 1 / 2 / 3

Button type and tooltips

These are the keyboard states for different headers.

Impact

On average, 23% of users resize their Teams window below 720px, and 19% resize it below 640px. Microsoft Teams is currently used by more than 320 million people worldwide. Adoption of reflow is steadily increasing as more users take advantage of snap layouts and multitasking with reflow enabled in Teams.

Team

Design: Suvo Ray
Design lead: Daisy Geng, Vivian Hsu
PM: Cindy Zhoa, Brett Humphrey
Engineer: Alycia Bhargava, Don Wise, Rohit Pagariya