Use words not icons for button labels

28 Oct 2016

Generally speaking, words are more effective than icons for button labels. See the below from Gmail:

Gmail (which is being phased out in favour of Inbox) has an option to change the labels of buttons from the default, icons, to words. Perplexing.

I’m not sure why Google specifically chose to use icons as the default yet also provide a setting to change the button labels to words. There’s a saying that goes, if you want to see where the designers disagreed, look at the settings menu.

Icons themselves aren’t bad but when they are relied on heavily, or solely, it can be an issue. An icon is a representation of a concept. It is a level of abstraction away from using the word which describes that concept. So there is room for error in interpreting the icon. For example:

This is a screenshot of the default Notes app on OSX. The top menu bar is filled with buttons that have icon labels. When glancing over it I can interpret most of them, but not all of them. That leaves me (or any user) in a frustrating position. I have to click a button without knowing what it does to understand it. Whenever a user makes an action it should be obvious beforehand what the action will accomplish. It shouldn’t be guesswork. Try this menu instead:

Now the user knows what the buttons represent. The user might not know what the action will be (if I click on “Media” what does that actually do?) but at least the user knows what the buttons represent.

Icons are smaller. Icons look prettier. I think this dangerous combination is encouraging UI designers to make poor decisions when designing interfaces. Icons are great and have their place but they shouldn’t be relied on too heavily.