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.
Book
Affiliate
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 😉
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?
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).
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?
So when are you going to design your social sharing icons?
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.
Actually, there’s plenty of research that suggests that visually distinct icons help users scan faster. Since you asked, here they are:
http://chil.rice.edu/research/pdf/FleetwoodIcons.pdf
http://student-iat.ubalt.edu/students/nagle_j/612researchpaper.pdf
http://student-iat.ubalt.edu/students/harless_j/docs/jharless_Research_Paper_FINAL.pdf
https://cs.senecac.on.ca/~bth740/pages/content/myths.html
Anything else I can help you with?
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.
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).
Am I missing something here?
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 still work, but users may rely on color more than the shape.
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
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.
. . . coming to you from the other side of the UX world.
The Dark (Advertising) Side
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.
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.
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.
In the example of article it is not obvious that dictinct icon outlines better
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.
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.