Skip to main content

Google explains how they tweaked Gmail’s lefthand pane for easier navigation

Google on Monday talked about a subtle yet important design change that allows for faster navigation in the Gmail web interface. The company wanted to solve a problem where scrolling the message list in your browser also scrolled the lefthand navigation pane, making it cumbersome to effectively comb through a large message list and at the same time access labels, the chat interface and other gadgets placed in the leftmost column.

They played with two possible solutions (see the above image) calling for both the floating label sections that expands when you are mousing over the Inbox label and the fixed design before settling on a solution combining the two (below). As explained in a blog post:

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.

They also agonized over the timing and triggering behavior of the expanding labels section in order to minimize accidental triggering. The sections expand only upon moving your mouse below the Inbox label and keeping it there for a moment.

FTC: We use income earning auto affiliate links. More.

You’re reading 9to5Google — experts who break news about Google and its surrounding ecosystem, day after day. Be sure to check out our homepage for all the latest news, and follow 9to5Google on Twitter, Facebook, and LinkedIn to stay in the loop. Don’t know where to start? Check out our exclusive stories, reviews, how-tos, and subscribe to our YouTube channel

Manage push notifications

notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications
notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications