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.

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.

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”

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

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

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.

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

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.

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 )

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.

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

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.

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.

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.

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.

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.