user experience agency

How Do Icons Aid the User Experience?

Research

What’s the History of Iconography?

The History of Iconography

• Icons have long been the best method for human interaction

• Objects, occasions, and events have long been summarised with icons

• They underpin religion & culture around the world and are understood by all

• They provide instant communication for all viewers

Some Stone-Age ‘icons’: Pre-speech communication

Iconography in Web Design

• Icons have this same effect in the field of web design:

1. They communicate instantly2. They can explain actions3. They attract attention and draw the eye4. They speak in a universal language5. They make analysis and comprehension

simple and clear

The Apple homepage makes excellent use of icons to explain, aid navigation and communicate

Research

What are the Benefits of Using Icons?

Speeds up User Comprehension

• Websites are easily scanned• Features within each page are

instantly explained• Sections and separate elements are

easily pulled out so that the user can jump to the content of interest

• This improves navigation and user enjoyment

Custom furniture maker J.Alexander (http://jawoodworking.com/) uses icons to quickly summarise the content within

They can be Used to Explain Actions

• Navigational elements can be converted to icons

• This speeds up a users experience on the site, as well as demystifying it

• Recognisable icons can jump out to a user through familiarity

• More information can be processed in less time

Although not a piece of web design, this plane exit diagram explains, simply, the means of escape without words, and is very quickly understood.

Attracts attention to Important Elements

• Specific areas of web pages can be pulled out with icons

• This usually applies to call-to-actions that present the main site message, such as download, contact etc.

• These need to be familiar so that users know what to be drawn to!

Instantloop (http://www.instantloop.com) make use of an enormous telephone to draw the users eye to the main call-to-action

They Provide a Universal Language

• Icons are universal• Messages can be conveyed to your

audiences no matter what language they speak

• It is important to remember, however, that not all images are the same to everyone:

Flags are an obvious and simple way to communicate universally, used here to help the user choose their language (www.eurolanguages.com)A red British ‘Postbox’ and a blue U.S. ‘mailbox’

Allow for Instant Data Analysis Through Infographics

• Graphics can make the maths much easier to digest

• Tables, charts and other graphics are very quick to grasp

• Other icons for analysis and comparison include; ticks and crosses, arrows, smiley faces etc.

An infographic from Jeremy Fleischer (www.blackdropstudios.net) that presents data in an interesting and informative way for the viewer

Design

What Makes for Good Icon Design?

• Icons need to work in conjunction with other graphics on your site

• Within this, icons sets need to have an over-riding style and theme.

• Planning out a whole set of icons beforehand (sometimes even future-proofing sets with icons your client might not have even thought about) will help you to create a unified style

Icons Need to Work Together

These icons from Artua (www.artua.com) demonstrate a consistency of style, size and colour palette within a range of varied objects.

Don’t Use Text Within an Icon, Or Web Design Elements

• Icons should not contain any text,• This immediately restricts your icons

to the language the text is in• With smaller icons, text is hard to

read• Avoid use of elements that appear

elsewhere on your site, such as menus and other interface elements,

• This can be confusing for your users The first icon demonstrates the confusing nature of interface elements within an icon and the second shows how text can inhibit international understanding

Create Differentiation Between Your Icons

• All icons within a set should look unique

• A uniform style does not mean that the icons should look identical

• Confusion can arise when two icons look similar

These icons have a very distinct, recognisable style but offers enough differentiation that each icon stands out

Evaluate

In Conclusion

How Do Icons Aid The User Experience?

• Why are icons excellent for improving user experience?

1. Icons are essential for good, simple, clear web design

2. They promote understanding, regardless of spoken language

3. They speed up understanding and perception

4. They draw the eye to key areas and calls-to-action

5. They can aid navigation around a web page

• What makes a well designed icon?1. Well designed icons are familiar and

eye-catching2. They are different enough to not

confuse a viewer, but still work in harmony

3. They are a separate, independent element separate from text or other interface elements, helping then to pop off the screen.

Implement

How We’ve Put Icons Into Action

• A large icon is provided for each section to aid navigation

• This also helps to locate themselves on the site

• Sub-level icons for Media Type help pull out these sections

• All icons have a similar style, but the added detail level of the larger ones helps to draw them out and distinguish them

Ingenuity

• On the CIC site we’ve used icons to pull out top-level sections

• They are unified by a simple, clever use of colour and simple vector style

• Effective use of colour brings out the main calls-to-action at the top of the page

• Language settings at the top of the page use universally recognisable flags to promote understanding

CIC

• Icons are used to pull out the 4 main sections at the top of the page

• Each helps to clarify the topic• Within each hero section tick icons

help to solidify the points being made to the viewer and break up text

Barclays Credit Focus

Tom WallisGraphic Designer

zabisco.com

Thank you!