Buttons

Why Distinct Icon Outlines Help Users Scan Faster

Icons are visual cues that help users use interfaces more efficiently. Instead of reading each word on an interface, users can scan for the icon that represents the task they’re trying to do.

However, sometimes scanning icons can take longer than expected if the icons don’t have distinct outlines. Research has found that icon shape affects icon search performance. If you want to make your icons fast and easy to scan, use distinct outlines over uniform ones.

Uniform outlines make the shape of your icons look the same. Since they all look the same, it’s hard for any particular icon to stand out when users scan them. Instead, they have to focus more intently on the icon pictures because of the visual noise surrounding the icons. The user’s visual path will hit the background borders first before they can fixate on the icon.

Distinct outlines shows the unique shape of each icon without any visual noise. This means users can see the icons immediately without getting interrupted by background borders. When users scan, the distinct outlines work as subtle cues that tell users if they have found the right icon. If they had to look for the icon again, they can scan for it faster because they’ll be able to recognize the icon by its unique shape.

This concept is similar to how all caps makes text harder to scan. With all caps text, you lose the shape of each word and the visual cues that help users scan. Shape contrast is an important characteristic for both icons and text. It adds to the beauty of your interface and makes it easier to use. Use distinct outlines on your icons to help users scan them faster. That way the shape of your beautiful icons won’t go to waste.


JOIN OUR NEWSLETTER
Get notified when we publish our next article

eBooks

Toolkits

Affiliates

elegant wordpress themes chemicloud.com hosting

Article written by anthony

Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.

This Post Has 24 Comments

  1. Mike G - Lime Rocket Reply

    Interesting idea however in practice icons cannot be guaranteed to be displayed on a blank and or consistent canvas. This is why the UX and UI usually requires you use a common background and shape. This common shape allows us to ensure the icons are contrasted regardless of the theme the user has chosen for their mobile or tablet.

    Now my personal taste is for nice border less icons but UX is not about us it’s about the device & the user 😉

  2. Geert Reply

    Having said that, the icons with the uniform outline look like iPhone icons 🙂 I guess the uniform icon outline still works if they use very distinct colours?

  3. Alex Sbardella Reply

    Interesting point. This poses quite some difficulty for mobile apps, since generally all icons are going to be used as buttons, and therefore will be bound to have a uniform surrounding (at least if you’re following e.g. iOS standards).

  4. Greg Reply

    I would agree with that however would the icons in the square surrounds be closer to their counterparts if they were white on dark rather than grey on dark?

  5. Rob Haswell Reply

    So when are you going to design your social sharing icons?

  6. cmack Reply

    Interesting idea but this would be a whole lot more believable if there were experimental data to the claims up.

    It’s actually pretty annoying that you would present these statements as fact on such a reputable site without, apparently, doing any testing of your claims.

  7. Manisha Reply

    Just because icons have Uniform Background colors, their difference in shape is not lost.

    The only difference here is it that in one case its White shape on black background and black shape on white background- both cases, the shape is discernible to the same extent

  8. Tony Reply

    Interesting point. As the previous comments states, the uniform icon looks more like button and are more recognizable as something clickable. Distinct icon may look like pictogram that are not clickable. Depending on the overall design, it may take a while to determine if it’s something clickable or not. Especially true for example when some pictogram exist (for example like the logo of this university: http://www2.hull.ac.uk/fass/images/hull_logo.jpg the pictogram )

  9. Jc Reply

    If you were to use the shape of the uniform icons, the white (strongly contrasting) background and changed the border to the same color as the icon itself you could accomplish a nice comprimise between the two.

    • NCS Reply

      “uniform icons, the white (strongly contrasting) background and changed the border to the same color ”

      This idea won’t work… the BORDER will be interpreted as another “thing” by the eye (and brain) leaving even more elements to process.
      A background was a quiet (grey?) that could be tuned out would work. Perhaps a drop shadow could help delineate a click-able area (box) without creating extraneous visual information.

  10. agentfin Reply

    This is the same principle that is applied to package design when considering the brand blocking in stores. You may have noticed how these days all your conditioner bottles are actually upside down? Yes, part of that is because conditioner is more viscous and gets stuck at the bottom of the bottle when there’s not much left. . .

    But no, manufacturers don’t really care about that. What they do care about is that you can quickly choose between shampoo and conditioner out of the sea of bottles at the shelf. Even more important than that? If the two bottles look like they go together physically, you’ll be more inclined buy them together.

    . . . coming to you from the other side of the UX world.

  11. Michael Nguyen Reply

    From the examples that Anthony provided in this post, I agree that the non-uniform icons are easier to scan. However, we are looking at the “trees,” not the “forest.” We need to look at the application that those icons are designed for and ask ourselves what the requirements are. For example, if the requirements call for “scannable” and “uniform” icons, then I wouldn’t design the icons like those on the left. I would design the icons with a light background border and light background (the rounded-corner square) and make the inside shape stand out. Also, the distinct icons on the right lose their visual cue as clickable buttons as Tony mentioned.

    My point is we need to design icons to fit in the overall application and its requirements. A bad example (icons on the left) of uniform icons doesn’t mean that uniform icons don’t have a place. Personally, I use both kinds of icons depending on the situation/application.

    • Kelly Browning Reply

      That’ exactly what I would do. I would include a light background for each icon, to provide a stronger sense of gestalt and to reinforce the grid for horizontal / vertical scanning.

  12. Dutch icon designer Reply

    I see your point. When you show the icons like this you are totally right. But different interfaces demand different solutions. For touchscreen devices it feels better to tap a button instead of a ‘loose’ icon. I think the uniform outline form you used in your example has too little contrast which makes it ‘annoying’ to look at.

  13. korpus Reply

    In the example of article it is not obvious that dictinct icon outlines better

  14. Robin Reply

    The two examples aren’t completely comparable… I’d like to see ones that were just black and white, with equal contrast. Dark grey on white is a lot different than light grey on black.

  15. Pixotico Reply

    Well, nice idea, but I may not agree to it, a lot of times the icons with visual noise are more easy to read, of they just fit better and communicate better with the user.. everything is from case to case I think.

  16. Colin Reply

    Is it clickable? A button needs to be obviously a button, or people won’t click it. And it also needs to be noticeable from about 4 feet away from the screen (naturally, less for mobile).

    Using icons that can easily be mistaken for static images confuses users. They want a button to look like a button. Part of the problem with trendy flat UI is that you cannot tell the difference between a button on a coloured background, or simply a coloured container with some text in it. Same thing with icons.

    Colour psychology is also important (how many moaned when Apple removed coloured icons from OSX?).

    The rule is that icons should be as intuitive as possible for those unfamiliar with the system, and a shorthand for those that have learned the system by rote.

    Your user feedback will tell you whether or not you have got it right.

Leave a Reply

Your email address will not be published. Required fields are marked *