The benefit of

iconography in

UX

History of icons • Icons have been a method

of human interaction for

many, many years

• Objects, occasions and

events have long been

summarised with icons

• Icons underpin religion &

culture around the world

and have mass

understanding

• They provide instant

communication for

viewers

Stone-Age ‘icons’: pre-speech communication

Icons in web design

Icons have the same effect in the

field of web design:

• They communicate instantly

• They can explain actions

• They attract attention

• They speak in a universal

language

• They make analysis and

comprehension simple and clear

What are the benefits

of using icons?

• 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

Faster user comprehension

• Navigational elements can be converted to icons

• This quickens a user’s experience on the site, as well as demystifying it

• Recognisable icons are easily identified through familiarity

• More information can be processed in less time

Explaining actions

• Specific areas of web pages can be drawn out or highlighted with icons.

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

• These need to be universally familiar visuals for quicker recognition by the user

Attract attention to important elements

• Messages can be conveyed to your audience, irrespective of their verbal language.

• It is important to remember, however, that not all images are the same to everyone – consider this when designing icons.

Universal language

UK postbox U.S. mailbox

• Enables instant data analysis

• Graphics can make the mathematics much easier to understand

• Tables, charts and other graphics make it quicker to grasp and digest the message

• Other icons for analysis & comparison include: ticks, crosses, arrows etc.

Infographics

What creates good

icon design?

Icons need to work together

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

• Within this, icon sets need to have an overarching style and theme

• Planning out a whole set of icons beforehand will help you to create a unified style

Keep it simple – no text, no web design elements

• Icons should not contain any text – it immediately restricts your icons to the language of the text

• With smaller icons, text would be difficult to read

• Avoid use of elements that appear elsewhere on your site, such as menus or other interface elements; this can be confusing

• All icons within a set should look unique

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

• Confusion can arise two icons look too similar

• Create differentiation between your icons

Unified does not mean identical

How do icons aid the user experience?

Why are icons excellent for improving user experience?

• Icons are essential for good, simple, clear web design

• They promote understanding, regardless of spoken language

• They speed up understanding and perception

• They draw the eye to key areas and calls-to-action

• They can aid navigation around a web page

What creates a well-designed icon?

• Well-designed icons are familiar and eye-catching

• They are different enough to not cause confusion, but work in harmony with each other and the site

• They are a separate, independent element separate from text or other interface elements, helping to highlight them.

How we have used icons

to enhance design

CIC

• We 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 are easily

recognised universally

Barclays Creditfocus

• Icons are used to draw

attention to the 4 main

sections at the top of the page

• Each icon helps to give an

instant indication of the topic

• Tick icons help to solidify the

points being made to the user

and to break up the text

design. using scientific reasoning & creative thinking

experience design consultancy

We are an independent ‘Experience Design Consultancy’ – bringing together scientific reasoning and creative

thinking. We've made our home in the heart of London and work locally and globally on digital and service design

projects for brands, corporates, non-profits and even other agencies.

Our clients and partners tell us we're different because we add value to their projects and pioneer as well as practice

User Centred Design (UCD); just take a look at our case studies and intelligence reports online.

When working with us, you can expect best-in-class project deliverables - we have a unique model for understanding

and creating audience personas, plus our symbolic visual languages for information architecture and service design

make ideas clear to stakeholders and specs ready for implementation. We also train aspiring UX professionals and

have talent ranging from responsive interface & interaction design to infographics, visual communication and

engaging digital content.

Social dialogues at [twitter/facebook]/entropii

Talk to us directly on +44 (0) 207 0420 380

Connect with us on LinkedIn

Invite us {anywhere} to see you

Visit us in London

Service Design