Are hollow icons harder to understand?

Wdd Logo.
December 02, 2013
Are hollow icons harder to understand?.

thumbnailWith the release of iOS7, Apple made the most significant changes to their application design guidelines to date. iOS7’s design language emphasizes a light, almost minimalist aesthetic approach to interface controls, including all the iconography used to label actions and views within an app.

While this change certainly modernized and simplified Apple’s operating system, it also impacted how people understand and use it. As some argue, this was not necessarily a change for the better.

In particular, the move to outlined (vs. solid) icons in Apple’s design guidelines has spurred significant debate. These symbols are used extensively in mobile apps to explain what’s possible and how to get things done. They need to communicate quickly and clearly. But do they?

Software designer Aubrey Johnson wrote an article arguing that they don’t and stated simply: Hollow icons are more work for your users.” Audrey’s argument boils down to the idea that complex (outlined) shapes are harder to parse and understand than simple solid shapes that contain less visual elements. Less visual elements, means faster parsing, and thereby faster understanding. From a Gestalt perspective, Aubrey’s argument seems to make sense but not everyone agrees.

Bobby Solomon, for instance, wrote a counter article stating: You’ve probably stored hundreds if not thousands of symbols in your head, so I’m not sure how a few hollow icons’ are going to completely confound you” 

Bobby points out that written language is essentially a set of hollow icons” and that we readily process and understand them while reading every day. Fair enough, but context may play a critical role as language is a set of symbols we interpret the same way every day many times a day. A set of icons within an app is never going to get that kind of exposure. In an interface, iconography needs to communicate — whether we’re familiar with it or not.

Caesar Wong chimed in to the debate as well on Quora by highlighting several sources that detail how images are processed by our eyes. Caesar’s personal conclusion was that the whole debate is more about art than science. 

So what do you think? Which icons are easier to understand at first glance: outlined (hollow) icons or their solid (filled in) icons?

How did you vote? Should icon design take its lead from its context, or does legibility supercede context? Let us know your thoughts in the comments.

Featured image/​thumbnail, uses hollow icon set image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Read Next

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…