Bài trình bày của tác giả JON HICKS, là designer của trình duyệt Opera.

1. JON HICKS : HICKSDESIGN

2. ICONS for
INTERACTION
(not just decoration)

3. FIRST,
LET ME TAKE YOU
ON A JOURNEY…

4. 100,000 YEARS AGO
Icons are the earliest form of written communication
These Argentinean cave paintings are from 100,000 years ago

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

6. 30 YEARS AGO…
The arrival of the graphical UI (for the Xerox Star)
http://www.digibarn.com/collections/software/xerox-star/

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

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

9. 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

10. Games like Chuckie Egg!

11. HOW DO
ICONS AID
INTERACTION?
So lets look at how we can use icons for interaction

12. 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

13. Simple & clear - rule for all icons

14. Uses transparent edges to blend well on light + dark backgrounds

15. No transparency means that the edges look fuzzy

16. 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.

17. 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

18. 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

19. 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

20. 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

21. EXPLAIN ACTIONS
Explaining actions, rather than spelling them out

22. DRAW ATTENTION
TO CHANGES
Loose definition of an 'icon', but it still counts!

23. USING CONVENTIONS
Using Familiarity/conventions to aid users to find services

24. COMPARISONS
A picture is worth a thousand words
Note the use of tooltips

25. OVERCOME LANGUAGE BARRIERS
McDonalds commissioned a series of icons for nutrient information
Symbols and colours were usability tested for 109 countries

26. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star

27. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star
Incorrect field highlighted with warning colours

28. 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

29. 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!

30. 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

31. 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

32. 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.

33. Aiding navigation

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

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

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

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

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

40. TAKE HOMES Use icons to:
Summarise text
Draw attention
Explain actions and
behaviours
Overcome language
barriers
Aid navigation
(… and add interest!)

41. WORKFLOW #1:
CHOOSING THE
RIGHT METAPHOR

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

43. IS THERE A
CONVENTION?
Which Icon symbol was the most recognisable?

44. a lowercase i is accepted for information

45. LIFE BEFORE CONVENTIONS…
There are conventions in the online world too
In the old days iconizing RSS feeds was a mish mash

46. 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

47. GOOGLE IMAGE SEARCH
So how do you find what the convention is?
First stop is a google search

48. ICONFINDER.NET
Iconfinder can also be useful to help to find out existing conventions

49. SEARCH or… ZOOM
Sometimes conventions can conflict
In this instance, context is everything

50. +
SEARCH ZOOM
Adding another simple icon makes this clearer

51. 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

52. 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

53. Gradients may be shown as a ratio i.e. 20% = 1:5
OLD FAMILIAR OBJECTS
Level crossing Level crossing
without barrier without barrier
or gate ahead
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

54. We also keep libraries of icons to get ideas
Great for colour and style inspiration too
CandyBar, Littlesnapper, Evernote or just a folder

55. WORKFLOW #2:
PRODUCTION
So what kinds of Icon are you likely to be involved in?

56. SKETCHING

57. TOOLS
Many apps to choose from
FW is my favourite
Inkscape is a good open-source choice
But ideal app not yet created

58. CRE ATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolation
Design icons together, and in context ensures consitency

59. CRE ATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolation
Design icons together, and in context ensures consitency

60. CONSISTENCY
Vimeo uses a good consistent Colour and Style

61. CONSISTENT LIGHTING
(TOP LEFT)

62. 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

63. OFF STOP, DANGER
DISABLED WARNING
OK, READY NETWORK ISSUES
Be warned that cultural differences mean different meanings too.

64. GLOBAL COLOUR
If you're using Illustrator - make use of the Global Colour feature to keep colour consistency.

65. 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

66. BLACK OFTEN TOO HARSH
Try to avoid solid black, as it's too harsh
In this document icon example, 50% grey is better

67. HIGHLIGHTING EDGES
This is a style choice as much as anything, but it does have a purpose.
The edges appear crisper, more defined.

68. Even small style differences can lead to unrecognisablility

69. Cute detail but it adds noise
A convention obscured by unnecessary detail

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

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

72. Too fussy
Background and Clear!
border

73. WORKFLOW #3:
DEPLOYING

74. FORMATS
‣ old school
‣ no alpha
transparency
‣ widely supported
GIF
Lack of alpha transparency is main problem
But widely supported
Good for pixel icons

75. FORMATS
‣ alpha
transparency
‣ widely supported
‣ hacks to work in
PNG IE 6
This is the main one
Worth using hacks for IE6 for transparency

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

77. FORMATS
‣ It moves!
‣ supported in
Opera and Firefox
‣ One to watch out
for
APNG
‣ 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

78. FORMATS
‣ supported in
Opera and Firefox
‣ Vectors not
bitmaps
SVG ‣ scalable
Good for Linux desktop icons
Good for vimeo style icons with flat colour
Resolution Independence - might be useful?

79. NEVER JPEG!
Of course, you would never use jpeg
would you?

80. <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

81. <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

82. <img> tag method
PROS CONS
Alt & Title Higher initial page
attributes to give load
meaning
Easy to deploy

83. 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

84. 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

85. CSS sprites method
PROS CONS
Faster initial load Longer
development time
Easier to position
Loss of alt
Fits with attribute
'designing in
company' Potential issues
with text resizing

86. Isn't pretty with images off, but still makes sense.
CSS Sprites makes little sense here

87. FAMFAMFAM.COM
If you don't want to create your own icons, there are great free resources, like Mark James's
famfamfam.

88. 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

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