Navigation

Are hollow icons harder to understand?

By Dmitry Dragilev | Web Design | Dec 2, 2013

With 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.

Share this post
Comments (no login required)
  • Ivanov Karmazov

    Ultimately I think it depends on context. Whether an icon is outlined or solid is not that much different from a visual perspective. However, from a cognitive perspective, unlike letters and words, visual objects or actions are learned through solid shapes. Therefore, I think the solid shape approach to iconography makes more sense.

    I agree that a few solid shapes don’t have the ability to confound somebody to the point of losing all understanding but at the end of the day I think solid shape icons make more sense.

    My personal opinion of course :)

    • http://dandigangi.me/ Dan DiGangi

      I think context hits the nail on the head with the use of these icons. But, if we want to abstract the icons away as just individual elements outside their given context, then I’d say that solid will hold its own better than outlined.

      (More commonly I mean, some icons are served better through an outline design)

  • http://eichefam.net Paul

    I feel that contrast plays an important part of icon recognition. Hollow icons take that contrast away.

  • http://420creative.com/ Angie Herrera

    While my preference is for solid icons (generally speaking), as Ivanov said, it depends on context. We’re used to solid icons in general, so it seems that we’re able to process them faster. Of course, that’s just speculation on my part – I’m no scientist. :) With that in mind, if hollow icons become more of the norm, will our brains start to recognize them faster?

  • Eduardo

    It depends on the icon’s size. at 16px and below solid icons looks like a full square or circle

  • Nica Lorber

    There is always a tension between evolving design and maintaining usability.

    I think solid icons are way easier to understand. Quicker recognition supports speed as a design principle – which matters a lot.

  • Darius

    All this debate without any studies or scientific data to back it up…without any evidence pointing in either direction, this is merely a conversation about aesthetics, not cognition.

  • Anvesh Dunna

    If you notice the example test above, shapes which have shapes within (or contours which have contours within) are more preferred with solid filling. The chat bubble icon was preferred with the outline.
    Also when it comes to smaller sizes, its difficult to get a proper pixel bitmap for outlined icons.

  • Anvesh Dunna

    “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.”

    Its more than this context. Its about how you define as hollow icons/solid icons.

  • Rakel

    The solid is definitely easier to read and more clear, but it doesn’t mean that you could never use an outlined icon if the design called for it.

  • Ron

    Also an interesting article about the subject: http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/

  • http://61designstreet.com/ Arianna

    The hollow icon are the best source to indicates that the file is not in a “source” directory.

  • pierre lebailly

    As everybody said it is not realy a scientific assertion. It depends of the context. As we can see in your survey chat icon is more recognised hollow rather fully and it is cultural. Because in our real word since we are child we see hollow bubble in all comics…
    And I want to add it is possible to use in hollow or not mode the same shape to forward a different message like a hollow letter to explain there is no mail in your mailbox and a fully one to explain you received mails…..