This is obviously a comparison on specifically the English UI. This analysis may not be relevant compared to other languages.
 |
| Search Bar (Old vs New) |
Search Bar
-removal of Search Web button-removal of "Show search options" link
-removal of "Create a filter" link
-change icon, increase visibility with color contrast
-addition of small arrow icon in search box as 'advanced search' toggle
Result: + Reduced Clutter
 |
| Old Advanced Search Panel vs New Advanced Search Dialog |
-repositioning of fields
-compressed dialog box instead of full panel
-advanced search dropdown/filter creation
Result: + Minimize Space Usage
The switch to a dialog box is a good choice for an improved search interface by compacting the form and minimizing space usage. Modifying the form to a vertical form style follows a good practice (that I learned from Luke Wroblewski's book, Web Form Design) that leads to a more straightforward flow for the user to progress (from top to bottom) as opposed to the old design which had 2 vertical rows and lack of a clear path through the search form.
 |
| Old Highlighted Tabs vs New Dropdown Tab Selector |
-compression of multiple tabs into one dropdown
-displaying current section in large text button makes state of UI much more clear and more visible
Result: + Reduced Clutter/Better State Representation
 |
| Old "Compose mail" button vs New "COMPOSE" button |
-text reduction
-size increase
-text capitalization
Result: + Increased visibility
This button style correlates to similar changes of the "Create" button in Google Docs and Google Calendar. This is definitely a plus for consistency.
 |
| Old Folders/Labels vs New Folders/Labels |
-not much difference
-mainly aesthetic differences:
--highlight is now just a subtle bar indicator
--sharp corners now for label color indicator
Result: +/- Neutral
 |
| Chat/Calendar Toggle View Icons |
Chat/Calendar Minimize Icons + Chat Resize
-Allows for more control of sidebar UI
-prevents overwhelming UI clutter
Result: + Cleaner UI
 |
| Old Control Bar vs New Control Bar Views |
-controls/actions are now more relevant to the user's accessible options
-Archive button is no longer as prominent (no bold, and reduced width)
-icons only with mouseover labels, may take getting used to
-icons aren't overtly obvious, but I guess learnable
-increased button height, easier to click
-consistent button sizes
Result: + Actions are now more relevant to state of the user view
There's still a few problems with the responsiveness of showing the right controls, but hopefully this gets fixed soon. I'd also prefer the archive button to be separate and a little more prominent. I'm also hesitant on the fully icon-based UI but I think it may be a better step to make it universal for all languages.
Notification Bar
-a little annoying with floating in between other elements/crossing lines
-different color makes the notification box more distinct from the other UI elements
Result: +/- Uncomfortable spacing and placement, but color change makes the notification more visible
 |
| New Display Density options |
-allows for view customizability
Result: + Actions are now more relevant to state of the user view
This new feature is definitely a welcome addition giving users some freedom to change the spacing on the screen. Definitely useful for certain users who may choose to view their e-mail window in a small screen, or for those who have different display sizes.
 |
| Old message list (upper) vs New message list (lower) |
Message List
-removing "move" icon graphic
-shifting importance icon to left
-increased whitespace among icons
-change of checkbox icon
-change of star icon
-change of event icon
-change of file attachment icon
Result: + Easier to view data
The subtle icon changes are complementary to the overall change towards the minimalist aesthetic. As a designer, the shift of the importance icon to the left and placed together with the checkbox and star features as a strong move to group related indicators and allows for easier understanding. This also creates a stronger line of readability with the tags/subject titles as they are now lined up (on an invisible left align) and much more visible against the whitespace of the sender names. (Although they were lined up before, the placement of the importance indicator beside them to the left in the old interface reduces a visual edge line of where the user should start reading.)
 |
| Old Letter View vs New Letter View |
Letter View
-small font changes
-color changes
-button modifications
-user icons
Result: + Cleaner UI
The shift towards icon-based buttons and the use of subtle placeholder text to remove action buttons reduces space usage. The addition of icons to identify the sender supports clarity of message ownership.
 |
| Top section advertisements: Old vs New |
-increased whitespace
-separation between functionality and advertisement
-removal of arrows/ad surfing functionality
-increased visibility with color contrast
-declaration that it's an ad
Result: + Cleaner UI
The separation of the advertisement from the interface creates a more relaxed visual style without having everything crammed together. The increased color contrast makes the ad more visible, that's great for advertisers and also makes it easier for the user's eyes. The removal of the ad surfing functionality makes sense for the most part - who scrolls through the ads for fun?
Other notes
-addition of a scroll bar for the message list is great for a more consistent interface (with the similar visual style, also preventing disappearing scroll bars) and also removing the reliance on the browser for the scroll bar style
Conclusion
I initially felt like I didn't like the new interface.
But after doing an analysis and comparison of the changes, the new UI is an improvement in almost every single way. I'm going to attribute the first impression of discomfort to the sudden change. My final evaluation leads me to conclude that the modifications vastly improve Gmail's UI with minimal drawbacks.
This was only a specific analysis of Gmail's new interface, but the changes to Google's other platforms such as Google Docs, Blogger, YouTube, and Google Calendar create a unified interface style to represent Google as a brand.
1 comment:
That was fascinating. As a user I'm completely unaware of the visual design framework running under the hood of my experience. This post is kind of like a magician reviewing the latest illusion.
Post a Comment