Near the end of my time at Google, I focused on complex browsing tasks, including information work, comparison shopping, and trip planning. What emerged was tab groups.
Mobile
For most people, mobile browsers serve limited use cases. We do quick tasks on the go, but wait for our desktops for anything particularly complicated. I led an effort to question this assumption: to research what makes complex tasks hard to perform on mobile devices, and then to see how far we can push them.
We observed common elements that make tasks complex: the necessity of assembling and comparing multiple pages, and then saving those pages across a longer time period. After a variety of more experimental prototypes, I conceived of our chosen solution: tab groups.
Our particular approach to tab groups involves a hierarchical tab switcher and a group-scoped tab strip.
Featured on Google's company blog.
Desktop
On desktop, multi-session, complex tasks are more common and assumed. Tab groups would help people identify tabs within active tasks quicker and ignore those tabs that represent inactive tasks. The challenge here was to introduce this functionality in a way that's additive while not complicating everyday tab management.
Prior designers working on this before me made the interaction design decision to extend the existing tab strip rather than create a secondary panel. I think this is wise: it minimizes new concepts users have to learn.
I defined the final UI: a colored tag and underline. This was complicated for a few reasons:
-
For our target users, this UI would be visible on screen almost all day while they worked, browsed the internet, or screen shared. It needed to not be distracting.
-
At the same time, it needed to be visible enough to help identify the location of tabs at a glance - one of the key value props of tab groups.
-
The UI needed to have clear contrast against the myriad of styles the Chrome toolbar can have: customizable colors, image backgrounds, dark mode, etc.
We iterated on all sorts of shapes for the indicate. The underline solution I defined is subtle yet visible, and echoes the shape of both Chrome's tabs and Google's Material Design tabs.
The colored underline solution also uses only one color, making it easier to ensure appropriate contrast with text and toolbar. We explored various dynamic color palettes, and in the end, I defined a color palette based on Google's Material colors, with two variants for light and dark backgrounds.
Featured on Google's company blog.