icons for interaction
DESCRIPTION
Slides from a presentation Jon Hicks gave on icons.TRANSCRIPT
JON HICKS : HICKSDESIGN
ICONS for INTERACTION(not just decoration)
FIRST, LET ME TAKE YOU ON A JOURNEY…
100,000 YEARS AGO
Icons are the earliest form of written communicationThese Argentinean cave paintings are from 100,000 years ago
35 YEARS AGO…
First designed in 1974 for US Department of Transporthttp://www.aiga.org/content.cfm/symbol-signs
30 YEARS AGO…
The arrival of the graphical UI (for the Xerox Star)http://www.digibarn.com/collections/software/xerox-star/
25 YEARS AGO
Now we get to where my interest in icons first startedWhen I was about 11 our famiily got an Acorn Electron (32k RAM!)
This is how icons used to be constructed, with unique numbersand the VDU statement
MANY HOURS SPENT HERE!
I spent many hours planning icons and characters using this gridMany icon designers started out by creating sprites for games
Games like Chuckie Egg!
HOW DO ICONS AID
INTERACTION?
So lets look at how we can use icons for interaction
FAVICONS!
The one that everyone here must've created is a .ico faviconThe real test of an icon designerFavicons are the signposts for your site or app
Simple & clear - rule for all icons
Uses transparent edges to blend well on light + dark backgrounds
No transparency means that the edges look fuzzy
lewisfrancis.com/ud/faviconic/
You're not limited to 16px, but browser support varies and results can be unpredictableLewis Francis has done the work for you.
apple-touch-icon.png - 57x57px
iPhone Favicons
This is particularly relevant if you have a web app, an iPhone favicon would be a good ideaEasy to deploy - no link tag needed
I'm going to pick on the Songbird site as the first exampleMost important icon uses harsh black and whiteGreen background pushes the content forward
MOST IMPORTANT!
I'm going to pick on the Songbird site as the first exampleMost important icon uses harsh black and whiteGreen background pushes the content forward
SUMMARISING FEATURES
This is the most common use of icons at the momentFeatures are highlighted and summarized Also works as decoration - breaks up text blocks
EXPLAIN ACTIONS
Explaining actions, rather than spelling them out
DRAW ATTENTION TO CHANGES
Loose definition of an 'icon', but it still counts!
USING CONVENTIONS
Using Familiarity/conventions to aid users to find services
COMPARISONS
A picture is worth a thousand wordsNote the use of tooltips
OVERCOME LANGUAGE BARRIERS
McDonalds commissioned a series of icons for nutrient informationSymbols and colours were usability tested for 109 countries
HELP USERS WITH FORMS
Name:
Email:
G. Moff Tarkin
moffy at death.star
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Incorrect field highlighted with warning colours
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Let's see it without colourColourblind users might not see the colour the same wayso the meaning is lost
AAAARRRRGGHHH!!!
Colourblindness means that I can't tell if these lights are green or redThe smaller the area of colour, the harder it isThis sort of device is hell to meThe classic question I'm often asked is "How do you manage at traffic lights?"I'm fine, as long as they don't turn them upside down!Context can help!
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Using an icon means that there is a unique shape to convey meaning(This can and should be backed up by explanatory text)Don't use colour alone to convey meaningAlso note the context - not at the top of the form but attached to the relevant item
Name:
Email:
G. Moff Tarkin
moffy at death.star
Address 1
Address 2
The Death Star
Orbiting Yavin
Phone THX 1138
TOO MUCH!
However, we don't need an icon for every entryDesign becomes noisyUser less likely to discover meaningSolution may be to use light grey icons, or remove them
CLEARER!
Name:
Email:
G. Moff Tarkin
moffy at death.star
Address 1
Address 2
The Death Star
Orbiting Yavin
Phone THX 1138
Compare it with this versionThe error is clearer.
Aiding navigation
Ikea nav with icons removed - it becomes harder to scan the categories
Pre-warn users of behaviourIn this case the dropdown of a hidden menuAliased Pixel art - small size
Pre-warn users of behaviourIn this case the dropdown of a hidden menuAliased Pixel art - small size
CONSISTENCY CONTROLS
Couldn't imagine media players without iconsMimics real life object (e.g DVD player)
MOOD
Love them or hate themwe use emoticons to show mood/intention
Use icons to:
Summarise text
Draw attention
Explain actions and behaviours
Overcome language barriers
Aid navigation
(… and add interest!)
TAKE HOMES
WORKFLOW #1:
CHOOSING THE RIGHT METAPHOR
These icons from a hand dryer sum up why Iove iconsand the thinking behind them
IS THERE ACONVENTION?
Which Icon symbol was the most recognisable?
a lowercase i is accepted for information
LIFE BEFORE CONVENTIONS…
There are conventions in the online world tooIn the old days iconizing RSS feeds was a mish mash
First appeared in Firefox 0.9Created by Stephen HorlanderNow widely adopted, thanks to Microsoft's decision to use itAlready hard to imagine anything else
GOOGLE IMAGE SEARCH
So how do you find what the convention is?First stop is a google search
ICONFINDER.NET
Iconfinder can also be useful to help to find out existing conventions
SEARCH ZOOMor…
Sometimes conventions can conflictIn this instance, context is everything
+SEARCH ZOOM
Adding another simple icon makes this clearer
NO CONVENTIONS
what about when there are no conventions?thats where the fun begins!this is from a local nurseryyet, from a distance, it looks like a child being dragged to nursery
NO CONVENTIONS
Wahh!
what about when there are no conventions?thats where the fun begins!this is from a local nurseryyet, from a distance, it looks like a child being dragged to nursery
108
Distance to‘STOP’ line
ahead
Crossroads Junction onbend ahead
T-junction withpriority over
vehicles fromthe right
Staggeredjunction
Distance to‘Give Way’line ahead
Warning signsMostly triangular
Double bend firstto left (symbol
may be reversed)
Bend to right(or left if symbol
reversed)
Roundabout Uneven road Plate belowsome signs
Dualcarriageway
ends
Roadnarrows onboth sides
Two-way trafficstraight ahead
Two-waytraffic crossesone-way road
Road narrows onright (left if
symbol reversed)
Traffic signals Slippery road Steep hillupwards
Gradients may be shown as a ratio i.e. 20% = 1:5
Steep hilldownwards
Traffic signalsnot in use
The priority through route is indicated by the broader line.
Level crossingwith barrier or
gate ahead
Level crossingwithout barrieror gate ahead
Level crossingwithout barrier
Tramscrossingahead
Opening orswing bridge
ahead
Falling orfallen rocks
Low-flying aircraftor sudden
aircraft noise
Tunnel ahead
Traffic mergingfrom left ahead
OLD FAMILIAR OBJECTS
So what do we do if there are no conventions?We use our best guess! Sometimes, old familiar objects are more recognisable symbols, even if they aren't relevant anymore
We also keep libraries of icons to get ideasGreat for colour and style inspiration tooCandyBar, Littlesnapper, Evernote or just a folder
WORKFLOW #2:
PRODUCTION
So what kinds of Icon are you likely to be involved in?
SKETCHING
TOOLS
Many apps to choose fromFW is my favourite Inkscape is a good open-source choiceBut ideal app not yet created
CREATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolationDesign icons together, and in context ensures consitency
CREATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolationDesign icons together, and in context ensures consitency
CONSISTENCY
Vimeo uses a good consistent Colour and Style
(TOP LEFT)
CONSISTENT LIGHTING
WARM
PUSH BACK
COOL
PULLFORWARD
NEUTRAL
So for icons that don't need to noticed instantly, use neutral or cool coloursFor attention or status, use warmer colours
OFF
OK, READY
DISABLED
STOP, DANGER
WARNING
NETWORK ISSUES
Be warned that cultural differences mean different meanings too.
GLOBAL COLOUR
If you're using Illustrator - make use of the Global Colour feature to keep colour consistency.
Whatever app you use, watch your pixels! Reducing and enlarging artwork means sub-pixelsSub pixels mean fuzzy artworkFireworks feels best at pixel sharpness, but not perfect
BLACK OFTEN TOO HARSH
Try to avoid solid black, as it's too harshIn this document icon example, 50% grey is better
HIGHLIGHTING EDGES
This is a style choice as much as anything, but it does have a purpose.The edges appear crisper, more defined.
Even small style differences can lead to unrecognisablility
Cute detail but it adds noise
A convention obscured by unnecessary detail
Sometimes icons are simply uselessNice site John Lewis, but the basket is so small it's unrecognisable
TooSmall
Sometimes icons are simply uselessNice site John Lewis, but the basket is so small it's unrecognisable
Background and border
Too fussy
Clear!
WORKFLOW #3:
DEPLOYING
‣ old school
‣ no alpha transparency
‣widely supportedGIF
FORMATS
Lack of alpha transparency is main problemBut widely supportedGood for pixel icons
‣ alpha transparency
‣widely supported
‣ hacks to work in IE 6PNG
FORMATS
This is the main oneWorth using hacks for IE6 for transparency
GIF GIF PNG
PNG allows for much more flexibilityEspecially if you need to change themeto high contrast
APNG
‣ It moves!
‣ supported in Opera and Firefox
‣One to watch out for
‣ animatedpng.com
FORMATS
Opera uses some animated png's in it's interface.png extensionAnimation doesn't have to mean irritationFor example - spinners/throbbers/loading iconsDrawing attention to changes like the yellow fade
SVG
‣ supported in Opera and Firefox
‣ Vectors not bitmaps
‣ scalable
FORMATS
Good for Linux desktop iconsGood for vimeo style icons with flat colourResolution Independence - might be useful?
NEVER JPEG!
Of course, you would never use jpegwould you?
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
<link rel="icon" type="image/gif" href="/somepath/image.gif" />
<link rel="icon" type="image/png"href="/somepath/image.png" />
Adding favicons using the correct image type
<img src="/images/icon_covered_rv.png" alt="Covered RV & Boat Parking" title="Covered RV & Boat Parking" />
If text is vital to understanding, use title and/or alt attribute
PROS CONS
<img> tag method
Alt & Title attributes to give meaning
Easy to deploy
Higher initial page load
32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requestsTo the extent that it's one image, 6402 px highVery high development overheadbut worth it for the optimisation benefitsBeware space and zoom issues
32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requestsTo the extent that it's one image, 6402 px highVery high development overheadbut worth it for the optimisation benefitsBeware space and zoom issues
PROS CONS
CSS sprites method
Faster initial load
Easier to position
Fits with 'designing in company'
Longer development time
Loss of alt attribute
Potential issues with text resizing
Isn't pretty with images off, but still makes sense.CSS Sprites makes little sense here
FAMFAMFAM.COM
If you don't want to create your own icons, there are great free resources, like Mark James's famfamfam.
Keep it simple and memorable
If there is a convention - use it
Don't be abstract, or too detailed
Reduce the number of colours and icons
Be consistent - don't design icons in isolation
TAKE HOMES
http://delicious.com/jonhicks/icondesigntalk
ICONS for INTERACTION