Post on 27-Jan-2015
description
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