April 14th, 2021

Build quality Microsoft Teams apps with these best practices: Part 2

Erin Bailie
Program Manager

We’re excited to continue along in this blog series to provide you the best practices for building high quality Microsoft Teams apps that will enable engaging experiences and delight users. In the first part of this series, we covered the basics of getting started and the best practices you should follow when it comes to designing collaborative scenarios, integrating app authentication, building chat bots, utilizing adaptive cards, and using task modules. In part 2, we cover building and designing tab apps, message extensions, mobile experiences, meeting apps, and notifications.

This is the second of a 3-part blog series compiled of best practices that will guide you through developing high quality, impactful and engaging apps for Microsoft Teams. View Part 1 and Part 3 in the series for additional best practices.

Tabs for Teams

Tabs provide a UX unique to Teams – a canvas for hosting a UI directly in Teams. Like a bookmarked webpage, tabs provide a view which users can return to time and time again.

Tabs can be configured for channels, chat, and personal scopes, and can be unique in each of those scopes. Personal tabs are important drivers of employee productivity, and channel tabs drive collaboration and information sharing. Group chat tabs are special in that they also power the tab views for Meetings Extensibility.

General Tab Guidance

Questions to ask yourself:

  • Do tabs use Teams-styled navigation, such as breadcrumb trails or hamburger menus instead of left rails?
  • Do tabs have fewer than three levels of navigation?
  • Do tabs use multi-window capabilities for complex editing workflows?
  • Are Help and Settings menus available from the tab header?

A Contoso tab contains simple, Teams-styled navigation with a filter menu

A Contoso tab contains simple, Teams-styled navigation with a filter menu instead of a left rail. It contains key actions like (1) Settings, (2) Rename and (3) Remove from the top rail. Help could be listed in the top rail as well.

Channel Tabs

Question to ask yourself.

  • When the tab is added to a channel, does the associated bot (when applicable) post to the team to provide content that is relevant to the tab that’s been added?

The Contoso bot posts a helpful message to a channel when a tab is added.

The Contoso bot posts a helpful message to a channel when a tab is added.

Personal Tabs

Questions to ask yourself:

  • For personal tab, is there an ability to share content from the personal experience to other team members?
  • Does the personal tab show a view that is unique for the user?
    • This can be achieved by aggregating content from multiple sources into a single view, or only showing information that’s relevant to the user.

A Contoso personal tab aggregates personalized content

A Contoso personal tab aggregates personalized content, giving a user a view of project tasks across many projects.

More guidance:

Message Extensions

Question to ask yourself:

  • Does the message extension provide a 0-term query such as “last used” to encourage engagement?

When users invoke message extensions, they have the intention to reference a recently used item; pre-populate message extension search with recently updated items to reduce user effort and drive faster result.

A Contoso Message Extension shows recently used items

A Contoso Message Extension shows recently used items without requiring a user to enter a search term.

More guidance:

Teams Mobile experience

Question to ask yourself:

  • Is the app fully usable on mobile with no issues with responsiveness, usability, or mobile policies?

In today’s hybrid workplace, mobile functionality is critical to employee productivity and workflows. Building an app UI that is designed to work on mobile ensures your users will be able to continue their workflows regardless of which device they’re using.

The Contoso app uses Adaptive Cards

The Contoso app uses Adaptive Cards which are designed to scale on mobile views.

Meeting apps

Question to ask yourself:

  • Do the meeting app tabs have role-based views for the meeting organizer and participants?

Meetings Extensibility is a Teams feature built from overwhelming customer requests for improved collaboration and app experiences in Teams meetings. User needs change depending on the user’s role within a meeting, so ensure that content presented in a meetings app tab is tailored to the audience.

More guidance:

Notifications

Question to ask yourself:

  • Does the app provide relevant notifications in the activity feed or via bot message when there has been activity in the app?

App notifications in Teams keep users informed of important updates in your service while allowing them to remain in their collaborative context. Apps which use notifications drive richer engagement by bringing important updates to Teams and allowing immediate workflow response.

The Contoso app pushes notifications to the Activity Feed

The Contoso app pushes notifications to the Activity Feed when changes are made.

More guidance:

We’re excited to be providing you these best practices and hope that these will help guide you on your journey for building high quality Teams apps! Next week, we will cover Part 3 of our blog series exploring considerations that must be thought through before publishing your Teams app into our marketplace.

Happy coding!

Author

Erin Bailie
Program Manager