Hollow Icons
Why hollow icons are more work for your users and ultimately create cognitive fatigue.
2015 — Onward: Update at the end of the article.
The original article from 2013:
Recently, someone asked me to critique some new mobile work they’d done. The app looked pretty great overall, but some of the design was following the lead that iOS7 created precedent with. They were designing to “fit in” on the platform.
It motivated me to share why the practice of creating or using hollow/thin line icons in a user interface is, generally, not a great idea. Even to fit in on a platform.
Take a look at the example above. The red lines indicate areas where cognitive load is occurring. Your brain traces the shapes on the first row an average of twice as much. Your eye scans the outside shape and then scans the inner line to determine if there is value in the “hollow” section.
Icons without this empty core are processed as definite and only the outer lines are processed. Depending on the outline of the shape, this happens pretty fast. No matter the shape, though, the hollow icons take more time to process.
This phenomenon has been documented (and debated) tirelessly with how the brain processes reading of words (;tldr is that you read ‘shapes’ not individual letters).
The icon situation is a more complex issue than words sadly. There are only 26 letters in the latin alphabet. Icons are potentially, innumerable meaning you’d have to learn more “letters” over time to understand more icons.
Most people won’t do this, they’ll just tire of the design and decide they don’t like it. It’s probably part of a larger reason why a lot of people have been complaining about iOS7 (I know, I know, lots of people like it too), but that’s not the topic of this idea, it’s just an example of a system-wide hollow icon use.
Choosing to use hollow icons for the sake of lightness / very-modern aesthetic is not the issue, it’s that to sacrifice the usefulness of what an icon does (aide in reading speed) for aesthetic feeling is really bad. Don’t follow bad design decisions to appease a platform.
Design above it.
Update (2 years later): This article was published has been viewed by an INSANE number designers across the industry. It was featured by Medium and many other design blogs. Lots of people have taken the observation almost personally?, writing really nasty and rude emails and follow up posts (some of the rude ones couldn’t even discern from UI Icons and illustrations) ¯\_(ツ)_/¯. Not the greatest, but it is nice to know who those people are in the relatively small world of design.
More importantly, other great folks have written well-researched studies about this topic and presented data about the findings. Ironically, the data often points to the fact that the icons take more time to process (but they point out its not statistically significant). Some studies also introduced bias or extraneous information that wasn’t initially even discussed here. One even did a test that blocked mobile usage and forced desktop browsing for the test. So that seems like *not* mobile research to me, but hey! All good.
Overall and anyway, it’s been awesome to see people care about this piece of user interfaces so much that they are doing studies instead of just swallowing the pills Apple gave us with iOS 7. Despite biased or irrelevant information in some studies, you are badasses in my mind and take your craft seriously. Thank you.
Thanks to everyone (even the butt heads) who read this and replied/wrote posts about it. We’re all trying to make rad stuff and knowing how and why is the best way to do it. Best wishes whether you fill your icons in or not :)
