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.

Toolkits