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.

icons-sum3

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.

triangles

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.

Screen Shot 2014-03-12 at 1.46.54 PM

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.

Screen Shot 2014-02-19 at 10.23.14 AM


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.

Screen Shot 2014-02-19 at 10.38.22 AM

3. In graphs or diagrams

Urban gap have used iconography extensively throughout their website. Incorporating icons with simple JavaScript animations makes this site exciting to interact with and encourages users to engage with their content.

Screen Shot 2014-02-19 at 10.33.13 AM

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!

Screen Shot 2014-02-19 at 11.01.56 AM

5. Directional

With the emergence of parallax and multi-directional navigation, directional icons have become commonplace.

The possibilities for icons are endless; they’re exceptionally popular across a range of websites. Here are a handful of well-known Australian websites that use iconography.

Screen Shot 2014-02-19 at 11.39.11 AM

Screen Shot 2014-02-19 at 11.26.36 AM

Screen Shot 2014-02-19 at 11.27.29 AM

Screen Shot 2014-02-19 at 11.28.13 AM

Screen Shot 2014-02-19 at 11.30.12 AM

Screen Shot 2014-02-19 at 11.30.59 AM

Screen Shot 2014-02-19 at 11.31.33 AM

Screen Shot 2014-02-19 at 11.32.20 AM