Icons serve as an important visual aid in any graphical communication. Their primary function is to serve as a common visual language, removing the possibility of open interpretation or ambiguity.
Presenting your content or messages in a clear, concise manner will facilitate your user’s experience by guiding them to where they want to go. Icons are the perfect way to succinctly convey written content via visual cue whilst adding interest to a design.
Web users have become proficient at scanning pages for content that is relevant and interesting to them. We are naturally attracted to bright colours, faces and illustrations. Clever use of iconography directs users to what we want them to see. When used correctly, icons can increase conversion rates and improve page stay times.
How to best use icons
Icons are best used in conjunction with text-based content. Ideally, they should accurately represent the content, indicating a function, or information to a user. If the icon is imprecise, the conflict between the function and icon could confuse the user.
One of the biggest issues with a set of icons can be when they don’t follow a consistent style; some have round edges, while others have straight and there is a disparity in the level of detail.
This is a great example; the set of icons below have very few graphical features in common; drop shadows, colour, detail, size, edges and shapes all vary from one icon to another.
The image below demonstrates a uniform set of icons. The designer has created custom shapes that share the same graphical style; they have utilised the same triangle in all three icons, immediately relating them to one another.
Another basic rule to be mindful of is excessive use of icons, they are supporting graphics and should not be used to represent every piece of information on your site. A great example of this is the website below, it contains a whopping 85 icons! Yes, you read correctly… 85.
The designer would have been better off summarising this information into succinct paragraphs, pairing it with real life photography and housing the second level information on deeper pages.
Users will most likely find themselves overwhelmed and intimidated by the amount of choices they’re presented with.
When to use icons
1. To draw attention to products, services, menus or features
Pagodabox have used iconography as the hero on the homepage of their site. Immediately we’re presented with a list of service offerings to navigate to. This is a fantastic way to display a large amount of content, grouping multiple items into a fun and unique interactive graphic.
2. To indicate content to users on text-heavy pages
Another great way to use icons is to incorporate them into large areas of text-based content. Using small icons to represent each paragraph of content gives us a clue as to what the content is about, allowing us to scan the page and isolate information that is most relevant to us. It also makes this section of the page more visually interesting.
3. In graphs or diagrams
4. Supporting Calls-to-Action
Use icons to emphasise a call to action. Resume Baking have used icons and the placement of arrows to entice the user to click the large call to action button in the center of the page. This is strikingly effective – even I had to avoid the temptation to click!
With the emergence of parallax and multi-directional navigation, directional icons have become commonplace.