Icons for Interaction by Jakob Wells

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 communication These Argentinean cave paintings are from 100,000 years ago

35 YEARS AGOâ&#x20AC;Ś

First designed in 1974 for US Department of Transport http://www.aiga.org/content.cfm/symbol-signs

30 YEARS AGOâ&#x20AC;Ś

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 started When I was about 11 our famiily got an Acorn Electron (32k RAM!)

This is how icons used to be constructed, with unique numbers and the VDU statement

MANY HOURS SPENT HERE! I spent many hours planning icons and characters using this grid Many 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 favicon The real test of an icon designer Favicons 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 unpredictable Lewis Francis has done the work for you.

iPhone Favicons

apple-touch-icon.png - 57x57px

This is particularly relevant if you have a web app, an iPhone favicon would be a good idea Easy to deploy - no link tag needed

I'm going to pick on the Songbird site as the first example Most important icon uses harsh black and white Green background pushes the content forward

MOST IMPORTANT!

I'm going to pick on the Songbird site as the first example Most important icon uses harsh black and white Green background pushes the content forward

SUMMARISING FEATURES

This is the most common use of icons at the moment Features 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 words Note the use of tooltips

OVERCOME LANGUAGE BARRIERS

McDonalds commissioned a series of icons for nutrient information Symbols and colours were usability tested for 109 countries

HELP USERS WITH FORMS

Name:

G. Moff Tarkin

Email:

moffy at death.star

HELP USERS WITH FORMS

Name:

G. Moff Tarkin

Email:

moffy at death.star

Incorrect field highlighted with warning colours

HELP USERS WITH FORMS

Name:

G. Moff Tarkin

Email:

moffy at death.star

Let's see it without colour Colourblind users might not see the colour the same way so the meaning is lost

AAAARRRRGGHHH!!!

Colourblindness means that I can't tell if these lights are green or red The smaller the area of colour, the harder it is This sort of device is hell to me The 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!

HELP USERS WITH FORMS

Name:

G. Moff Tarkin

Email:

moffy at death.star

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 meaning Also note the context - not at the top of the form but attached to the relevant item

TOO MUCH!

Name:

G. Moff Tarkin

Address 1

The Death Star

Address 2

Orbiting Yavin

Phone

THX 1138

Email:

moffy at death.star

However, we don't need an icon for every entry Design becomes noisy User less likely to discover meaning Solution may be to use light grey icons, or remove them

CLEARER!

Name:

G. Moff Tarkin

Address 1

The Death Star

Address 2

Orbiting Yavin

Phone

THX 1138

Email:

moffy at death.star

Compare it with this version The error is clearer.

Aiding navigation

Ikea nav with icons removed - it becomes harder to scan the categories

Pre-warn users of behaviour In this case the dropdown of a hidden menu Aliased Pixel art - small size

CONSISTENCY

Couldn't imagine media players without icons Mimics real life object (e.g DVD player)

CONTROLS

MOOD

Love them or hate them we use emoticons to show mood/intention

TAKE HOMES

Use icons to: Summarise text Draw attention Explain actions and behaviours Overcome language barriers Aid navigation (â&#x20AC;Ś and add interest!)

WORKFLOW #1: CHOOSING THE RIGHT METAPHOR

These icons from a hand dryer sum up why Iove icons and the thinking behind them

IS THERE A CONVENTION?

Which Icon symbol was the most recognisable?

a lowercase i is accepted for information

LIFE BEFORE CONVENTIONSâ&#x20AC;Ś There are conventions in the online world too In the old days iconizing RSS feeds was a mish mash

First appeared in Firefox 0.9 Created by Stephen Horlander Now widely adopted, thanks to Microsoft's decision to use it Already 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

Sometimes conventions can conflict In this instance, context is everything

orâ&#x20AC;Ś

ZOOM

+ SEARCH

Adding another simple icon makes this clearer

ZOOM

NO CONVENTIONS what about when there are no conventions? thats where the fun begins! this is from a local nursery yet, from a distance, it looks like a child being dragged to nursery

Wahh!

NO CONVENTIONS what about when there are no conventions? thats where the fun begins! this is from a local nursery yet, from a distance, it looks like a child being dragged to nursery

Gradients may be shown as a ratio i.e. 20% = 1:5 OLD FAMILIAR OBJECTS

Level crossing without barrier or gate ahead

Level crossing without barrier

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 ideas Great for colour and style inspiration too CandyBar, 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 from FW is my favourite Inkscape is a good open-source choice But ideal app not yet created

XT E T N O C + Y N A P M O C IN E T A CRE This is achieved by not designing icons in isolation Design icons together, and in context ensures consitency

CONSISTENCY

Vimeo uses a good consistent Colour and Style

CONSISTENT LIGHTING

(TOP LEFT)

COOL PUSH BACK

NEUTRAL

WARM PULL FORWARD

So for icons that don't need to noticed instantly, use neutral or cool colours For attention or status, use warmer colours

OFF

STOP, DANGER

DISABLED

WARNING

OK, READY

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-pixels Sub pixels mean fuzzy artwork Fireworks feels best at pixel sharpness, but not perfect

BLACK OFTEN TOO HARSH Try to avoid solid black, as it's too harsh In 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 useless Nice site John Lewis, but the basket is so small it's unrecognisable

Too Small

Sometimes icons are simply useless Nice site John Lewis, but the basket is so small it's unrecognisable

Too fussy

Background and border

Clear!

WORKFLOW #3: DEPLOYING

FORMATS

‣ old

school

‣ no

alpha transparency

GIF

‣ widely

Lack of alpha transparency is main problem But widely supported Good for pixel icons

supported

FORMATS

‣ alpha

transparency

PNG

‣ widely

supported

‣ hacks

to work in

This is the main one Worth using hacks for IE6 for transparency

IE 6

GIF

PNG allows for much more flexibility Especially if you need to change theme to high contrast

GIF

PNG

FORMATS

‣ It

moves!

‣ supported

in Opera and Firefox

‣ One

APNG

to watch out

for

‣ animatedpng.com

Opera uses some animated png's in it's interface .png extension Animation doesn't have to mean irritation For example - spinners/throbbers/loading icons Drawing attention to changes like the yellow fade

FORMATS

‣ supported

in Opera and Firefox

‣ Vectors

bitmaps

SVG

‣ scalable

Good for Linux desktop icons Good for vimeo style icons with flat colour Resolution Independence - might be useful?

not

NEVER JPEG!

Of course, you would never use jpeg would you?

If text is vital to understanding, use title and/or alt attribute

<img> tag method PROS Alt & Title attributes to give meaning Easy to deploy

CONS Higher initial page load

32x6402 pixels (52k)

Mobile Me make use of sprites to cut down on initial http requests To the extent that it's one image, 6402 px high Very high development overhead but worth it for the optimisation benefits Beware space and zoom issues

32x6402 pixels (52k)

CSS sprites method PROS

CONS

Faster initial load

Longer development time

Easier to position Fits with 'designing in company'

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.

TAKE HOMES

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

ICONS for INTERACTION http://delicious.com/ jonhicks/icondesigntalk