The document discusses the benefits of using icons in user experience (UX) design. It provides examples of how icons: 1) Can communicate instantly and explain actions in a way that is faster for users to comprehend than text alone. Icons make websites and elements within them easily scannable and intuitive. 2) Draw attention to important elements and calls-to-action using familiar, recognizable visuals. This helps users quickly understand the primary purpose and functions of a design. 3) Speak a "universal language" that can convey messages to audiences regardless of spoken language barriers. Well-designed icons promote clear understanding through familiar shapes and meanings.

1. The benefit of
iconography in
UX

2. 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

3. 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

4. What are the benefits
of using icons?

5. 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

6. 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

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

8. 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

9. 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.

10. What creates good
icon design?

11. 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

12. 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

13. 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

14. 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.

15. How we have used icons
to enhance design

16. 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

17. 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

18. design. using scientific reasoning & creative thinking

19. 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

20. Service
Design