Bangalore / New York City

Microsoft Teams: Slash command for quick access

MICROSOFT TEAMS

Slash command for quick access

 

Image above: Screenshot of typing ‘/’ and accessing important features without navigating away from the primary task window.

ABOUT MICROSOFT TEAM

Microsoft Teams is the chat based application for better collaboration in the workplace. It’s part of the Office 365 suite. It was released in March 2017. It is used by 329k organisations (September, 2018).

ROLES AND RESPONSIBILITIES

I was part of the founding team in the newly-formed Bangalore office in August 2017 and helped scale the design team scale from 3 to 7.

I was the design owner for 2 key features - Slash scenarios for quick access to files and calendar along with creating the framework for accessibility for the navigation bar. I collaborated with PMs and engineers in a distributed team to map out the scope of the feature along with executing the designs end-to-end.

DESIGN CONSTRAINTS

One of the constraints was helping users accomplish tasks without remembering complicated shortcuts. So we used placeholder text and limited the commands’ combination to 3.

 

Slash command for quick access

Slash command was introduced to help tech-savvy users or keyboard users to quickly perform tasks or navigate within Teams.

ReSPOnsible:

I was responsible for scoping out the scenarios for Files and Calendar along with creating the framework for accessibility for the navigation bar.

Design constraints:

One of the constraints was helping users accomplish tasks without remembering complicated shortcuts. So we used placeholder text and limited the commands’ combination to 3.

 

1. Sample flow to open Files using Slash ‘/’

 

Annotations: #1 Type Slash to discover quick access items; #2 /files + Enter to open recent files; #3 Default state includes recent individual and shared files; #4 Hover state; #5 Keyword search

 
 

2. Keyboard accessibility with Shift + F10 in Teams 

Challenges of accessing “hidden buttons” using keyboard: As seen in the above image, accessing the hover state buttons using keyboard was one of the key concerns. While the intent was to give users a faster way to manipulate files using the mouse in the list view itself, the same task gets extremely time-consuming on the keyboard. So to ensure consistent experience, we decided to limit the number of hidden buttons to 3 and only focus on tasks that are frequently performed.

 
 

3. Inspiration: Mouse & keyboard accessibility in Outlook

Deliberations over the right keyboard shortcut: Another challenge in designing accessibility was deciding appropriate shortcuts that could be easily adopted. Unfortunately Shift + F10 is not as intuitive as an arrow button. But since most of our users are also Outlook users, Shift + F10 (#3b) was deemed appropriate.

Screenshot of screen with Shift + F10.

Screenshot of screen with Shift + F10.

 
 

IMPLEMENTATION STATUS:

Slash command was rolled out in January’18 | Style guide collaborator: Caleb Warren | Press release for Slash published here.