Are grayscale buttons with icons usable and effective?

Question

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?

Answer 1

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 to 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.

Answer 2

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.

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.

Answer 3

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.

Answer 4

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.

Answer 5

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 more 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. =)

Answer 6

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.

Answer 7

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)