Page 1

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‌

First designed in 1974 for US Department of Transport http://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 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


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 (‌ 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‌ 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


SEARCH

Sometimes conventions can conflict In this instance, context is everything

or‌

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


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?


<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


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

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


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

Icons for Interaction  

Icons for Interaction

Read more
Read more
Similar to
Popular now
Just for you