Comments on the usability of icons

I wanted to jot down a few thoughts on this article about “hollow icons”, since a couple people asked me for a little more explanation. I don’t have an active blog (and medium.com doesn’t have a good comment feature), so this was a convenient place to do it.

The article discussed how the visual design of a UI icon could affect the cognitive load involved in reading, or visually processing, the icon. I’m skeptical of the article’s claims, so I’ll explain why, without any disrespect for the author or his interest in investigating the issue. Actually, I think there are serious usability problems with some current app design trends, especially with “the lead that iOS7 created precedent with,” so I share the interest in critiquing these trends and finding better solutions.

On to the article.

First, although I’m far from an expert on visual processing, I’m not sure what evidence there is for the idea that the brain is “tracing” the edges of the icons, or that the hollow icon has to be traced twice. I would agree that the hollow icons present more visual noise than the solid ones, but I’m not sure to what extent this affects efficiency (the time it takes to process the icon) as opposed to mere aesthetics (i.e. whether or not the user finds the interface pleasing to look at). If anything, visual noise could interfere with the scannability of the overall interface, which is certainly a usability concern, but that’s a slightly different discussion.

Second, the cited paper on word recognition, if I understand it correctly, does not actually support the idea that users read the “shapes” of words instead of the letters. That aside, icons and words are very different things, and I’m not sure that a model of word recognition can be directly translated to icons.

Third, I don’t think icons are comparable to letters, either. There may be a little overhead in learning a new icon (regardless of its design style), but once the icon is learned, we’re just talking about the user’s ability to recognize the icon. And in many cases, the user shouldn’t even need to learn anything because icons can (should) be pictographic–a trash can icon is self-explanatory. The fact that there are only 26 letters and a much larger number of icons doesn’t mean it takes longer to recognize an icon, provided that the user is able to recognize it. On the other hand, it is a problem when there isn’t enough differentiation between icons, and the user can’t tell the difference between two very similar icons. Another major problem is when icons are cryptic: the user doesn’t recognize the pictogram because it’s too abstract, or the user does recognize the pictogram but doesn’t understand its meaning. If there’s a risk that users won’t understand or learn an icon, especially when designing for novice users, and for infrequent users who won’t even have the opportunity to learn over the course of multiple interactions, the designer should use a label instead of or in addition to the icon. (And if the designer is in doubt, test it, and if you can’t test it, just add the label.)

Finally, the assumption behind the whole discussion is that cognitive load matters. Except in the cases described above (e.g. stopping my task to try and make sense of a cryptic icon is definitely a huge cognitive load), if one icon takes a few extra milliseconds for the eye to process, I don’t think that’s a problem. Efficiency can be important when reading text, but we don’t read icons the way we read text, and I’d argue that users do not need to be able to be efficient when recognizing icons. I can think of an exception, however, and that’s when a user needs to recognize an icon in a toolbar containing a large number of icons. In this case, one does need to be able to scan the toolbar and identify the right button without interrupting one’s primary task. I think it would be a great idea to do an experiment (assuming someone thinks it’s worthwhile) on whether or not hollow icons interfere with the usability of a toolbar. That said, it’s still more important to (a) remove visual noise, (b) ensure that icons are well-differentiated from each other, and (c) ensure that icons are meaningful and learn-able (I’d say intuitive, but I don’t think that word should ever be used, which you can ask me about another day).

Once again, I think there’s a need for some serious discussion in the UI design world about the relationships between visual design and usability–usability continually falls by the wayside when new trends emerge, so this topic of hollow icons was a great question to raise. And I completely agree that one should not make design decisions based on trends or to “fit in” with the platform unless, of course, the design goal is explicitly to be trendy. On a related topic, I haven’t had a chance to look through this in detail yet, but it sounds like Jakob Nielsen is critiquing the “flat design” trend, which certainly encourages our line of thought.