in Design, Digital, User Experience | Blog Posts

Introduction

There’s a persistent trend in both websites and apps to replace useful button labels with icons. It’s a trend that needs to reverse – icons should complement labels but not replace them.

The hamburger menu

UX Designer James Foster did A/B tests on the ubiquitous hamburger menu. He found that the word “menu” on its own performed better than the three-line “hamburger menu”.
Based on this and my previous AB test, a flat hamburger icon may not be ideal on a responsive website (remember this is a website not an app). Using the word MENU (and making it look like a button) could be more helpful for visitors.

This does not mean that users do not understand the hamburger/sandwich – it could be that the word MENU draws more attention.

The search icon

Katie Sherwin from Nielsen Norman Group wrote about the pros and cons of the magnifying glass icon. One of the primary findings was that “The magnifying glass alone makes it much harder to locate the search”. It wasn’t all bad news as far as icons go however.

Users understand the icon enough that, when styled appropriately, spelling out the word “Search” as a label is no longer required.

Users recognize and understand the function of the magnifying glass. They see it and associate it with search. If the icon is obvious and has a strong enough affordance that it’s clickable, a separate button labeled “Search” isn’t necessary.

But it isn’t all upside:

A downside to having only an icon for search means that the user has to wait for a search box to appear, find where to start typing, and sometimes click one more time to focus on the input field. These additional steps prolong the search process, where it would have been much faster to simply click in the text field and start typing immediately.

Icons in Microsoft Outlook

Microsoft had a usability problem with Outlook 97.

One of the problems noticed again and again among non-expert users was that people didn’t use the toolbar at all! With the exception of the “Delete” icon (which was perhaps familiar from the Windows 95 shell), people used the menus to reply, forward, and to create new messages.

How did they go about trying to fix this?

Different fixes were tried: new icons, rearrangement of the icons, positioning icons under the menus from which the commands came from.

None of those attempts worked. Nothing they did seemed to have a significant impact on the usability of the icons. Until someone had the bright idea to add labels to each of the icons indicating what it is that they do.

A before and after of the Outlook toolbar with icons and no icons
Toolbars: Outlook 97 vs. Outlook 2003. (From The importance of labels)

Icon madness in Skype

On my current project we use Skype for Business as an IM app to reduce office emails. It works really well to serve its purpose. Though I couldn’t help but notice something about the UI. Here is a screenshot of a conversation:

Screenshot of Skype for Business showing an icon heavy interface with few labels

Clearly the wisdom of the ages about usability is not passed around through Microsoft. You’d think they might have learned their lesson about usability and try and enforce standards across the organisation but it doesn’t seem to have hit home.

Not counting the 3 standard icons in the top right (minimise, maximise, close), there are a total of 13 icons. 12 of them are clickable (can you guess which one isn’t clickable?). Of those 12 clickable icons only 1 of them has a label. At a single glance its not possible to tell what all of these things do. You can hover over each icon and it will tell you its purpose, but if you aren’t looking for a specific piece of functionality you probably aren’t going to take the time to do that.

Sometimes an icon can be enough

There are two aspects two icons that are important:

  • Users can get use to an icon in your application
  • If icons proliferate around the web users start to associate them with a function
  • Icons can provide a visually distinct anchor

We’ll keep these ideas in mind as we take a look at a recent change in Google Chrome.

While browsing the web I’ll often have multiple signons to the same sites. For example different accounts for the same webapps for personal and work use. As a result I would have at least two accounts I use to sign in to Chrome. It use to be that the icon for each account would display in the top left hand corner of the browser and clicking on it would allow me to open a different profile.

Screenshot of Google Chrome with profile switcher icon in top left

In more recent versions of Chrome the profile switcher moved and became a peice of text showing the “name” of the profile you are signed in with:

Screenshot of Google Chrome with profile switcher text in top right

As well as moving the positon and removing the icon, they also added a superfluous extra click needed to switch profile. In an attempt to improve the usability of this they added a function that allows you to quickly switch to a different profile by right clicking on the name.

However, in changing this functionality Google missed something important – the profile icon served an additional purpose that they didn’t take into account. With the icon it was really quick to tell which browser window belonged to which account. Now you need to read the name of the user in the top right in order to know what window you are in – or alternatively install a different theme in each profile (which I’ve found still isn’t as intuitive as the icon was).

In this example the icon by itself was more useful than the label because users got use to the functionality (additionally they explicitly chose the icon for each account). By itself the icon took up a small amount of room and provide a visual clue to the user about the nature of the window.

The moral of the story

A lot of the time the person responsible for deciding the use of icons is a graphic designer – and not someone with any understanding of usability. The key goal is to keep the interface “simple” and “clean”. This means reducing the amount of space taken up by things like text labels (or in the case of Chrome the space taken up by a large icon).

Unfortunately these design decisions rarely seem to go through any usability testing. I’ve heard a common defence from designers, product managers and executives – “but it doesn’t look as good”. But frankly who cares? What looks good is subjective – what is easy to use can be objectively measured.

Stop replacing labels with icons (unless you have a good reason and some usability tests to back it up).

Have you got a comment, criticism or suggestion? Contact Rick on or