False Simplicity

Sometimes, what appears on the surface to be simple is actually far from it. For example, there’s a trend in Twitter clients to use icons instead of text labels for buttons. Just icons, no text at all. These icons don’t take much space, look elegant and maintain that simple feel of Twitter, except…they’re actually just confusing.

Here’s an example from Tweetdeck:

Tweetdeck icon controls

Maybe it’s just me, but these icons are almost impossible to figure out. Ok, the first one looks like refresh, fine. But then, a stick? A wrench? A question mark? An alert sign? When you do find out what these things represent, it makes more sense. The stick is actually single column view—the icon is meant to represent that single column. Some others…not so much: the alert icon is for logging out?!

I use Tweetdeck occasionally and I keep forgetting what all these icons mean. The top right corner isn’t the only once icon controls are used—they’re everywhere on Tweetdeck. They’re also everywhere on most other Twitter clients.

Lining up a set of small icons might achieve a “simple look”, but it doesn’t help you make a simple to use interface. This is especially true if you’re not differentiating your icons with color and clarifying meaning with text labels. Icons in interfaces can work, but they should be used as additional visual aids rather than the primary method of labeling buttons.

Here’s what Jef Raskin has to say about icons:

In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners. […] Although it is true that tiny icons can take less screen space than labels, you have to ask: At what cost? The smaller a button, the longer it takes to operate it, and the more difficult it is to find; also, it is difficult to make a small icon distinctive.

Icons aren’t all bad though. They can look good and add meaning, provided they’re used in the right way. Icons are effective when there are at most a dozen of them, they are all visually distinct, they represent the concepts clearly and they are typically larger than the text label would be. Just because those icon controls look simple doesn’t mean they really are.

author picture Written by Dmitry Fadeyev
Published on September 24, 2010