icons for interaction

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 &amp; Boat Parking" title="Covered RV &amp; 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