Why Distinct Icon Outlines Help Users Scan Faster

by on 08/04/11 at 10:05 pm

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. If you want to make your icons fast and easy to scan, use distinct outlines over uniform ones.

Why Distinct Icon Outlines Help Users Scan Faster

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.


Why Distinct Icon Outlines Help Users Scan Faster Why Distinct Icon Outlines Help Users Scan Faster

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

24 Responses to “Why Distinct Icon Outlines Help Users Scan Faster”

  1. Mike G - Lime Rocket

    Aug 5th, 2011

    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

    Aug 5th, 2011

    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

    Aug 5th, 2011

    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

    Aug 5th, 2011

    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

    Aug 5th, 2011

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

  6. cmack

    Aug 5th, 2011

    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.

    • anthony

      Aug 6th, 2011

      • x5315

        Aug 6th, 2011

        Why didn’t you reference these in the article itself? Rather than offering a snappy comment when someone asks.

        Thanks for posting the actual research though.

        • Steven

          Aug 10th, 2011

          The initial comment was quite presumptous and downright attacking him, a snappy comment is what he should’ve expected. Asking for references to his claims is one thing, assuming there are none and basically calling someone unprofessional is downright offensive. That said: if only to prevent these sorts of things research-reference below articles is always a good idea.

      • Christopher Burd

        Aug 16th, 2011

        I’ve read three of the four research papers you posted, and none of them seem to support the claim you’re making.

        The closest is the Fleetword/Byrne paper from Rice University. Indeed, it suggest icons with distinctive outlines work better, but it also says that makes no difference whether the icon has a border or not (which seems to the be the point of your graphics).

        Am I missing something here?

        • anthony

          Aug 17th, 2011

          The visual distinction via shape is the difference here. Shape outlines have more visual contrast to our eyes than straight edges all around. Bordered icons can still work, but users will rely on color more than the shape.

          I didn’t post the research in the article because I believe it’s important for designers to independently think about design ideas and arrive at their own conclusions using reason, instead of being non-thinking robots who follow research like it’s the law. People are thinking animals and the best designers can see what’s right and what’s not without research.

  7. Manisha

    Aug 5th, 2011

    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

    Aug 5th, 2011

    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

    Aug 5th, 2011

    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

      Aug 8th, 2011

      “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

    Aug 6th, 2011

    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

    Aug 8th, 2011

    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

      Jun 5th, 2014

      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

    Sep 5th, 2011

    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

    Sep 18th, 2011

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

  14. Robin

    Oct 21st, 2011

    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

    Sep 21st, 2013

    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

    Nov 12th, 2013

    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 Comment