Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

enter image description here

The image here is

  1. old gmail
  2. new gmail, when no mail is selected
  3. new gmail, when mail is selected
  4. new delicious

To me, the buttons are unlabeled and tough to discover.

I don't believe the icons do a good enough job to make labels redundant. Also I noticed:

  1. the Gmail toolbar changes entirely when a mail is selected, whereas the old toolbar was (reassuringly) constant
  2. the delicious edit and share buttons (encircled) are tough to discover and don't have on-hover tooltips

My first reaction to this was "backward step", since they made the options tougher to discover.

But other sites seem to be converging to this style, a design language that tries to be as sparse as possible. It's definitely good for iPads and netbooks with extremely high resolutions.

Is such a design language worth it, or too tough to decipher?

share|improve this question
    
Hieroglyphics are so last millenium... –  Izkata Dec 21 '11 at 15:46
1  
Do you know what! I still forget what the damn archive button looks like! –  whoami Dec 22 '11 at 16:44

7 Answers 7

up vote 20 down vote accepted

I’ll answer your question with a question. Given the standard that iconic labels should have text tooltips, why isn’t there a standard that text labels should have graphic tooltips?

The main reason: For nearly all cases, text labels are sufficient by themselves and an icon wouldn’t improve anything. Iconic labels, in contrast, tend to be inadequate by themselves. So, yes, Gmail is harming discoverability. It’s not acceptable for users to grope a UI with the mouse to read what each command does. Users should just be able to read it. That Spam icon is particularly atrocious. I’d expect it means “flag this letter as important” –just the opposite of what is does. Apps should have good information hierarchy, but there are better ways to do that than using undecipherable symbols for minor or advanced commands (e.g., size, weight, color).

The alternative to hiding non-applicable commands is the disable them (I don’t know what Gmail used to do). The decision to hide versus disable can be complicated, but to summarize, you should disable if an action is not currently available, but the user can do something to make it available (e.g., change a selection), so, offhand, I think Gmail should use disabling, not hiding. The problem with hiding is that users may conclude the command is never available –that the feature is simply not supported by the app (if they failed to notice it when it was visible). It can also, as you note, make it harder to find the non-hidden controls if they move around to fill empty space created by hiding controls.

So why are designs converging to this inferior design language? IMO, fashion. To get that trendy mobile-look on your desktop. With limited screen space, mobile apps are more likely to use hiding and icons to squeeze everything in. Now desktop web sites are aping the mobile look to be cool like mobile apps, ignoring that the rules change when screens get larger. I see no excuse for using so much gray on gray, except that gray is the new black. It's especially bad on mobile apps, which may be used in sunlight and you need as much contrast as possible. Fashion-chasing use of gray for active controls also undermines its use to mean disabled, so that may be another reason Gmail chooses to hide controls. It’s about trying to be simple-looking, not simple to use.

Arguably, Gmail and others may be trying to be consistent with their mobile apps (I’d bet Gmail mobile app users are also Gmail web app users), but they could’ve done better. They could’ve used both the Spam icon and the word “Spam” for the desktop version to maintain compatibility with the mobile app while providing better discoverability for the desktop –and better education on the icon’s meaning when the user transitions to mobile. Actually, “Spam” is such a short word, I can’t see any reason not to use it on the mobile version instead of the icon, so we’re back to being simple-looking, not simple to use.

share|improve this answer
2  
The "appearing" buttons are not a big issue in this case since they are also available when you access the content of the mail. In this way, if the user misses the buttons, he can still access the functionality one level deeper in the navigation structure. –  Pau Giner Dec 21 '11 at 20:15
1  
Re: discoverability, I would agree that glyphs will require more initial effort than text labels. However, isn't this mostly a one-time investment? Once you've learned it, there is less interface in your way of the message content (and the glyphs are visually distinct from the largely text email bodies). –  peteorpeter Dec 22 '11 at 20:36
1  
Not everything can be discoverable‌​, especially not for an application as complex as Gmail. Advanced features are supposed to fall into the background while features for novice users are immediately available. –  Ben Brocka Dec 22 '11 at 21:21
2  
@peteorpeter: Glyphs are only easier for functions that you use often. For functions that are used fairly rarely you still have to mouse hunt the correct one. –  Illotus Dec 25 '11 at 10:57

The icons used in the new Gmail do a great job of explaining what the button does. IF you are unsure, hover of them and you get a well designed tooltip describing that button.

enter image description here

Of course, these buttons only appear once an email is selected. At first it caught me slightly off guard "Where did all the buttons go?!" but after that first time, it has been preferable.

You only see what you need. If you can't use the button at a specific time, why see it?

In terms of these buttons being greyscale, this is a good move. They fade back and help bring the content forward. When using Gmail, you don't want to focus on the buttons, you want to focus on the content. The same goes for the Delicious button, it shouldn't be competing for your attention. It is easily recognizable for anyone who knows their logo, and if not, mouse over it to find out, which they don't currently offer but should.

share|improve this answer

As Matt stated, on hover the buttons explain themselves. Gmail is employing a mix of recognition and recall by using relatable icons. The less intuitive and more abstract ones (the storage box, spam flag) are more advanced controls which are often ignored. Note the major controls (send, compose) are written out explicitly. The major call-to-action button on a given page is actually highlighted in red to boot; before you write an email the Compose button is red, once you start writing the Send button is red.

This layout allows the primary actions to be called out with text labels but lets the advanced functions fall into the background, while at the same time optimizing for scanning. The icons fall out of focus for those who don't use them (and likely don't care to) but for advanced users they're easy to remember and locate; scanning for icons (that you recognize) is often faster than scanning over text labels, as some reading is still involved.

The "grayscale" issue you bring up seems tangental to the rest, but the issue here is contrast. Contrast is extremely important, and many graphic designers disregard effective contrast in UI elements to make the page look "nicer"(much to the chargin of many of us concerned with usability and UX).

In the Delicious example the icons are almost invisible; it looks like the UI is really just a couple of bumps on the UI. Gmail's icons are much more pronounced and readily visible. I wouldn't call any of the Gmail buttons low contrast except perhaps the checkbox button, mostly because of the thin lines.

share|improve this answer

Delicious has a long history of becoming less and less usable (hi, Yahoo!), with the possible exception of adding images in the latest iteration. Like all big software companies, they and Google will have some employees who would rather change the existing design to one they (or the committee) like better (contrary to timeless advice) rather than leaving it alone. On the surface, the changes indicate a shift towards supporting power users over newbies: Recall and a knowledge of tooltips (which I'd guess less than 30% of web users consciously know how to use) rather than patient reading and recognition is necessary to use the new interfaces efficiently.

The main problem with an icon-only design is when icons are not universal. All the universally recognizable icons available today are based on pre-Internet designs (such as stop signs and arrows), and actions like "edit" and "tag" do not have such universal designs in the real world. Even the historical diskette icon is disappearing as the real-world item is increasingly unrecognizable by actual users.

share|improve this answer
3  
Was agreeing with everything up until; Even the historical diskette icon is disappearing as the real-world item is increasingly unrecognizable by actual users. Just because a floppy diskette doesn't exist anymore does not remove the knowledge that when seen within software equates to save. –  Aaron McIver Dec 21 '11 at 14:52
    
It is not disappearing for the individual users, but the knowledge is disappearing from the user base since an increasing percentage of them have never seen a diskette. At some point only librarians, geeks and collectors will know what the symbol once meant. –  l0b0 Dec 21 '11 at 14:56
2  
It's common place though. When you learn software X, it has a save icon which is often times represented as a diskette. Disregarding what a diskette is or how it came to be, the knowledge of a diskette icon being representative of save will live long past the life of the diskette. –  Aaron McIver Dec 21 '11 at 14:59
    
@AaronMcIver Most new users think of the floppy disk icon as "the little TV" –  Izkata Dec 21 '11 at 15:47
4  
It's not a floppy disk icon anymore, its' a save icon. ux.stackexchange.com/questions/3117/… –  Ben Brocka Dec 21 '11 at 16:14

I would say the new Gmail feels more intuitive than the old one. First and foremost the main goals they had with the new design was to make it cleaner, more intuitive and simpler to use. And personally I think they have made great effort on all those points.

The old design, whilst being consistent with its buttons, as I remember it still displayed buttons which in a current view didn't have any function binding to it. Eg. the "Report spam" which didn't do anything until you had checked one or emore mails in the checkbox column or was reading an email. Still it was present, among other buttons, while it didn't fill any function. This will crowd the function button bar with functions that aren't even accessible, causing confusion to the common user.

Furthermore I think the design choice of switching from text-buttons to icon-buttons is a good one. Personally I think it gives a sense of order and if you're unsure of any of the metaphors a tool-tip describing the function is immediate at hover. Still this is up to every individual, some prefer a descriptive text instead of an icon to be used in the buttons.

I think the conversation representation is better in the new design with its inclusion of Google+ profile, plus it displays the collapsed messages in a less "clustered" way than the old one.

I'm sorry, but IMO I think the new design is better. =)

share|improve this answer

To me, the new Gmail is a minimalistic version of the ribbon feature in MS Office which also hide buttons that cant be used.

Whether to show or hide the labels has to do with how often someone will use the tool. If I use Gmail several times a day I will learn where to find the buttons and what the Spam-icon means.

share|improve this answer
    
"ribbon feature" the ribbon (IMO) is a different take on the menu, making it persistent (when out of mouse focus) and giving it a better layout. Gmail toolbar is definitely a toolbar. Toolbars can hide or show themselves on context, but should never change drastically like Gmail's does. –  aitchnyu Dec 23 '11 at 5:00

Well -- when it comes to buttons, icons and labels -- IMHO, there are things that just needs no label, like the floppy disk that no one uses today, but associate it with "save" all the time, the trash can with delete. So once these become as they say "iconic" -- you need no words to explain them.

Google is trying to make their interfaces as simple and effective as possible. I believe that clean design is hard and I personally like the new approach of google (me being a UI/UX designer myself)

share|improve this answer
1  
I wouldnt immediately recognize the print, trash, paste icons without some color for contrast, though, the way Google designed them with gray rectangles. As for "iconic", 4/6 of those icons have ambiguous meanings, forcing us to rely heavily on context. Even the 'select' icon looks like a 'remove' by representing a square with a 'minus'. As for "as simple and effective as possible" I agree completely, but I would vouch for the old design as being simpler. –  aitchnyu Dec 23 '11 at 4:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.