Search, Navigation, & Add-ons, oh my!
How Simplify v2 wrangles everything around your content.
|Aug 24|| 8||12|
“Like Lucky Charms spewed all over the screen”
Gmail’s chrome is a sea of icons and buttons that take up too much space and distract from the primary content. Adam Barker, an old friend and ex-Gmail designer, used to compare this kind of design to Lucky Charms being spewed all over the screen.
To be fair, the above screenshot is an extreme. You can minimize the navigation and hide the add-ons if you don’t use them. This increases the amount of screen dedicated to content, but the nav is still a long string of icons with demanding red badges. And then the content is stretched across the screen, making it harder to read despite fewer distracting icons. This might be worse:
Simplify v1 addressed this by:
Merging the app and action bar into one bar
Hiding the navigation completely when it is minimized
Condensing the add-on tray to a single button so you don’t have to hide it
Applying a maximum width to the content so that white space can envelop and highlight what you are reading
But, there are a number of flaws in Simplify v1’s attempts to fix all these things.
One example is how Simplify v1 merged the app bar and the action bar. Wedging the search box into the upper-right corner makes for a search box that is too small and prone to breaking when Gmail changes. I have never thought this was the best design, just the best design I could provide given Gmail's DOM (how the interface is structured in the code).
I’ve sought to address this and other issues with Simplify v2 to make Simplify better in all regards.
Search, front and center
For starters, the search box is now large and centered:
To achieve this, the search box is minimized to a single button on the right when you select or open a message.
The same applies in a conversation:
In the vertical reading pane, I moved search above the list and the actions above the message. Search is never minimized as you select or move between messages.
Navigation quick access on hover
It is nice to have the left navigation fully hidden but it is also harder to access. Gmail has a nice solution for this: you can hover over any of the icons and the nav peeks open so you can use it and automatically closes once your mouse leaves the area. My only complaint is the transition is a bit sluggish.
Simplify v2 brings this functionality back via mousing over the menu button and instantly showing the nav (no transition needed):
I expected to like this hover interaction but was surprised how much I liked it. The nav is much easier to use and keep minimized. The GIF doesn’t do it justice — you’ll have to use it and see for yourself.
Hide the navigation in conversation view
A trick I took out of Superhuman’s book is to hide the navigation when you open a message for total focus. You can still hover over the menu button and use the nav but you can’t keep it open. If people don’t love this, I may make a Simplify setting that lets people keep it open, but I hope people love it.
Update: In beta testing, people didn’t like having the nav auto-hide upon opening a message in part because the transition was jarring. So now I dim the nav and hide the unread counts instead. Hovering over the nav brings it to full opacity and unhides the unread counts.
Chat, it’s own thing
I’ve also moved chat out of the nav and into its own button. The full roster is exposed when you hover or click on the Hangouts button.
Two things to note about chat:
There is a setting to keep chat in the nav for easier access if you prefer.
This may have to be rethought with the swapping of Hangouts for Chat and Rooms.
App bar & Add-ons: fewer buttons with easier access
Lastly, Simplify v1 has a hodgepodge approach to dealing with the various icons in the app bar (Settings, Help, App Switcher, Offline, Reading pane toggle, and any number of 3rd party extensions). Some are removed, some hidden, some moved, and some left alone.
Likewise, while moving the add-ons tray into a single icon above compose was elegant, the implementation is a bit hard to use, as the tray closes as soon as your mouse strays off the narrow tray.
Simplify v2 remedies these shortcomings. The entire app bar and the add-ons tray are all accessible by simply hovering over the profile image in the top right.
Bonus round: Menus can look nice too!
One of my early projects as a Gmail designer was redesigning labels. We elevated labels out of the More menu into a “Move to” and a “Label as” menu that still exist today. But somehow over the years, the visual design of these menus and Gmail menus in general have eroded.
Things don’t line up. Large left gutters are always applied. The highlight is full bleed except when it isn’t. Death by a thousand cuts. It eats at me.
So I fixed them. And I applied the improved style to all menus in Gmail.
Sometimes it is the little things. ☺️
Much better, but still more to come
All of these changes add up not just a better experience but a more reliable experience across the many unique Gmail setups (well over 2,500 by my calculations). Soon you will be able to try it out for yourself and let me know what you think.
There are a number of things that are still on my to do list for Simplify v2. Some will make the initial launch but most will have to wait until v2.1 as I don’t want to delay shipping v2 any longer than I need to.
Change the “Add to tasks” icon so is more distinct from the Snooze icon
Show more Snooze options either from past or settings
Let you hide actions you never use
Add a sweep action that lets you archive lots of messages at once (likely in a future update)
Saved searches (they won’t have unread counts in the nav like labels, but I think easy access to complex or often used searches is useful even without them)
If someone forwarded this to you and you liked it, you should subscribe to hear more about Simplify! I don’t post that often and you can unsubscribe at any time.