Content and conversations, all at once using tabs
Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all within a team’s organic workflow. When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible from key conversations.
A good tab should display the following characteristics:
Tabs work best when they’re built to address a specific need. Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in.
Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab.
Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab.
Find ways to notify users about tab activity by posting cards to a conversation, for example.
Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand.
Make sure you’re granting access to the right people at the right time. Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration.
Your tab canvas presents a good opportunity to brand your experience. Incorporate your own logos, colors, and layouts to communicate personality.
Your logo is an important part of your identity and a connection with your users. So be sure to include it.
- Place your logo in the left or right corner or along the bottom edge
- Keep your logo small and unobtrusive
Please work with our visual style so your service feels like a part of Teams.
This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.
Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.
Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.
Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.
Types of tabs
Always include a default state
Include a default state to make tabs easy to set up even if your tab is configurable.
Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but clicking it can shows the entire bug in a tab.
In many cases, the name of your app may make a great tab name. But consider naming your tabs according to the functionality they provide.