The benefit of iconography in ux

The benefit of
iconography in
UX

Stone-Age ‘icons’: pre-speech communication 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

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?

Faster 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

Explaining actions

• 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

Attract attention to important elements

• 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

Universal language
• 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.

UK postbox U.S. mailbox

Infographics
• 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.

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

Unified does not mean identical

• 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

How do icons aid the user experience?

Why are icons excellent for improving
user experience?
• Icons are essential for good, What creates a well-designed icon?
simple, clear web design • Well-designed icons are
• They promote understanding, familiar and eye-catching
regardless of spoken language • They are different enough to
• They speed up understanding and not cause confusion, but work
perception in harmony with each other
• They draw the eye to key areas and the site
and calls-to-action • They are a separate,
• They can aid navigation around a independent element separate
web page 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

The benefit of iconography in ux

More Related Content

What's hot (20)

Similar to The benefit of iconography in ux (20)

More from Entropii (9)

The benefit of iconography in ux