Icons vs. Text

Aside from petty discussions on whether Google is evil or not, design-wise it’s an exciting time to watch the evolution of their products. Services across the board are being redesigned, some from the ground-up. There are even traces of an emerging consistency between the web-services and the Android operating system.

One trend in particular I’m following with great interest, and that is the move from text-labels to icons. Here’s Gmail:

gmailbuttons

It’s interesting because Google used to be a bastion of usability, and having only icons goes against what I’ve learned on the matter (which is that icon + text label reads best, only text label reads okay, icon only reads the least). So why did Google do this?

Google’s a big company. They’re known for being data-driven. So much, in fact, that they were once criticized for A/B testing shades of blue. Which means unless Larry Page has uprooted every previous principle the company was founded on (which I doubt), I’m pretty sure they’re watching the numbers on this one, and I’d be lying if I said I wasn’t interested in the results on their icon vs. text-label A/B tests. The fact that the icons are still there in Gmail tells me that either the negative impact of icon-only navigation was negligible, or that the decision to go with icons only was forced through despite.

Icon-only navigation can be gorgeous, sure, and well-designed icons or icons based on established metaphors can be really easy to read. The trash-can, for example, is hard to get wrong. But surely some actions can’t easily be translated to icons only? Here’s the Android 4 camera app:

android-camera

In the above screen capture, I’ve opened up the photo configuration pane. From left — the ellipsis means “more settings”, “SCN” is short for “scene”, the plus/minus is “exposure”, the “AW” is “white balance” set to “auto”, and the lightning is “flash mode” set to off. The icons are gorgeous, but some of them don’t read very well. Particulary SCN means they threw in the towel on an icon.

So where did the whole “icons first” trend start? Android, maybe. From the brand new design guide:

Action bar icons are graphic buttons that represent the most important actions people can take within your app. Each one should employ a simple metaphor representing a single concept that most people can grasp at a glance.

You should really head over to the design guide, the icons really are beautiful, and they are a core aspect of Android 4 apps. To put it briefly: Android 4 apps rely heavily on the action-bar. The action-bar is a bar across the top of the operating system. On phones it features an app icon and app name on the left, and as many icon-buttons as there’s room for on the right. If there are more buttons than there’s room for, these buttons go in to the “action overflow” button, which is the small ellipsis. Click the ellipsis and the icons are shown in a dropdown menu by their text-label counterparts. It’s discussed at length on the Android Developers blog.

As beautiful as icons can be, is the lack of text-labels sacrificing usability? Here’s Photoshop Touch for Android:

pstouch-1-600x375

Compare and contrast with desktop Photoshop and the UI is a far cry. Obviously the two apps are no-where near feature parity, but UI-wise the difference is stark. The Android app relies on the clean, uncluttered iconography whereas the desktop app fills the top of system-bar with text-labelled dropdown menus.

I really don’t know what’s best. On the one hand, icons certainly make for a prettier UI. If screen real-estate is at a premium, icons can be smaller than text-labels, and the uniform size can make them easier to fit in a clean grid. Icons need no translation either, which is nice. On the other hand, a text label can say what the button does. Right there. On the button.

Responses to “Icons vs. Text”

  1. Even though I’ve clicked it dozens of times I’ll still hover over the spam icon for the tool tip to appear telling me the button’s function.

    Same with the delete button as I’m always fearful that I’ll mark as spam some debug emails which will bite me later when I wonder where newer ones come through..

    I much prefer text+icon.

    • Joen says:

      In the case of the spam icon, I do exactly the same, I hover over before I click. Which obviously means it’s a bad design.

      I’m completely confident in clicking the trash-can though.

  2. Robin says:

    Related note: they’ve also recently taken out the + icon from the new tab icon in Chrome, in the betas it’s just a blank button.

    http://code.google.com/p/chromium/issues/detail?id=98264

    • Robin says:

      Side note, I really like the new(?) design. I’m loving the blue and grays plus the single column design.

      • Joen says:

        Thanks!

        Re: the Chrome button, I’ve seen that — I check out the Canary build once in a while to see what’s new. I don’t think that’s as big a deal — and I suppose that’s the thing about icons vs. text — if it’s a button you’ll use ALL THE TIME, you’d learn what it did even if the new tab button was a minus.

        It’s more iffy in cases like “Report Spam”, which I use more oftne than I like in Gmail, yet when I use it I stutter.

  3. Kieran says:

    Nice analysis. Interestingly, it seems Google have added an option to revert back to text: https://plus.google.com/103345707817934461425/posts/6xHVneF1wYn

    Apparently their original justification was internationalisation — words with varying lengths across languages were too tricky to fit into a single interface. I’m not sure I’d agree it was a worthwhile trade-off, although I’m sure it saves them (a tiny amount of) money on designers!

    But the usability of the new interface really puzzles me. It breaks so many rules of usability — no consistency (buttons appear, disappear, and move around), nesting scrollbars, etc, I find it hard to believe that it works better empirically. (I’d also be eager to see data on that.)

    I get the feeling that the whole re-design was driven by marketers with an irrepressible urge to re-brand, rather than any particular need to improve what was a highly effective UI. Oh, that and they had to try to ram Google Plus down everyone’s throats since it wasn’t doing too well on its own.

    It’s an interesting test case, actually — can a modern tech company, which is obliged by its shareholders to perpetually grow, maintain a perfectly functional product without feature creep? Past examples (e.g. MS Word) suggest not.

Leave a Reply