Official Gmail Blog
News, tips and tricks from Google's Gmail team and friends.
Designing Gmail’s new left navigation
December 5, 2011
Posted by Jason Cornwell, User Experience Designer
One of our goals for
Gmail's new look
was to make Gmail feel more like a native application with independently scrolling panels rather than a website that scrolls as a single page. This design approach brings with it many advantages: the search box and primary navigation are always in the same place, your inbox unread count is always visible, etc. As with any design decision there were challenges with making this change. People with lots of labels might have their chat contacts pushed entirely off the screen and those with gadgets, like the Google Docs or Calendar gadgets, might have to scroll the left panel past both the labels and the chat contacts in order to see them.
We went through a number of different design revisions to try and address these issues as elegantly as possible. We experimented with several accordion designs, which stack sections on top of each other but only allow one or two to be open at a time.
We also experimented with designs that involved only one scrolling region, but showed fewer entries per section.
The final design combines aspects of both approaches. It is a ducking accordion design with only two sections. The bottom section has two tabs, one for chat and one for gadgets, with room to add more tabs in the future. The upper section, which contains labels, expands to show all of the visible labels when you mouse over it. This allows you to see chat contacts but still give quick access to the labels. Best of all, you can easily adjust the balance between labels and chat to fit your own personal preference by dragging the divider between the sections up and down.
This design went through a number of iterations as well. We carefully adjusted the timing and triggering behavior of the expanding labels section to minimize accidental triggering. We noticed in usability testing that having the labels section expand when you are mousing over the Inbox label delete didn't work for everyone. We tweaked the system only to expand if you moved your mouse below the inbox label and keep it there for a moment. We also tried to ensure that if you are moving your mouse to click on a particular label or chat contact, that label or chat contact will never move out from under you.
The end result is a system that is more flexible, more responsive, and always keeps your chat contacts and unread count visible without adding a lot of complexity or requiring too much clicking around.
Labels
buzz
calendar
Gmail Blog
Google Apps Blog
Google Calendar
googlenew
Inbox
Inbox by Gmail
labs
mobile
Offline
reader
tasks
tip
Archive
2016
Sep
Aug
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Aug
Jul
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Jul
Jun
May
Apr
Mar
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2007
Dec
Nov
Oct
Sep
Aug
Jul
Feed
Google
on
Follow @gmail
Follow
Give us feedback in our
Product Forum
.
Get posts via email
Email:
Powered by
Google Groups
Useful Links
About Gmail
Gmail for Mobile
Gmail for Work
Follow