Your SlideShare is downloading. ×
0
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...
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-...
25 YEARS AGO




Now we get to where my interest in icons first started
When I was about 11 our famiily got an Acorn Electr...
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...
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 ...
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
Le...
iPhone Favicons




       apple-touch-icon.png - 57x57px


This is particularly relevant if you have a web app, an iPhone...
I'm going to pick on the Songbird site as the first example
Most important icon uses harsh black and white
Green background...
MOST IMPORTANT!




I'm going to pick on the Songbird site as the first example
Most important icon uses harsh black and wh...
SUMMARISING FEATURES



This is the most common use of icons at the moment
Features are highlighted and summarized
Also wo...
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 ...
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



Incorrec...
HELP USERS WITH FORMS




  Name:                G. Moff Tarkin


  Email:               moffy at death.star



Let's see ...
AAAARRRRGGHHH!!!




Colourblindness means that I can't tell if these lights are green or red
The smaller the area of colo...
HELP USERS WITH FORMS




  Name:                 G. Moff Tarkin


  Email:                 moffy at death.star



Using a...
TOO MUCH!


    Name:            G. Moff Tarkin


    Address 1        The Death Star


    Address 2        Orbiting Yavi...
CLEARER!


    Name:             G. Moff Tarkin


    Address 1         The Death Star


    Address 2        Orbiting Yav...
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                         CONTROLS




Couldn't imagine media players without icons
Mimics real life object (e.g...
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
    ...
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
Al...
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                         or…   ZOOM


Sometimes conventions can conflict
In 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 nursery
yet, fr...
Wahh!




                        NO CONVENTIONS

what about when there are no conventions?
thats where the fun begins!
th...
Gradients may be shown as a ratio i.e. 20% = 1:5
     OLD FAMILIAR OBJECTS




     Level crossing                        ...
We also keep libraries of icons to get ideas
Great for colour and style inspiration too
CandyBar, Littlesnapper, Evernote ...
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
CRE ATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolation
Design icons together, and in context en...
CRE ATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolation
Design icons together, and in context en...
CONSISTENCY




Vimeo uses a good consistent Colour and Style
CONSISTENT LIGHTING


        (TOP LEFT)
COOL

                                                                            PUSH
                                   ...
OFF                                     STOP, DANGER




                DISABLED                                WARNING

...
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
Fir...
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, m...
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...
Too fussy




Background and       Clear!
border
WORKFLOW #3:

  DEPLOYING
FORMATS



                                       ‣ old school
                                       ‣ no alpha
         ...
FORMATS



                                       ‣ alpha
                                             transparency

     ...
GIF                               GIF   PNG




PNG allows for much more flexibility
Especially if you need to change theme...
FORMATS


                                        ‣ It moves!
                                        ‣ supported in
     ...
FORMATS



                                      ‣ supported in
                                         Opera and Firefox...
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"
   ...
<img src="/images/icon_covered_rv.png"
       alt="Covered RV &amp; Boat Parking"
       title="Covered RV &amp; Boat Park...
<img> tag method

     PROS                 CONS


Alt & Title          Higher initial page
attributes to give   load
mean...
32x6402 pixels (52k)




Mobile Me make use of sprites to cut down on initial http requests
To the extent that it's one im...
32x6402 pixels (52k)




Mobile Me make use of sprites to cut down on initial http requests
To the extent that it's one im...
CSS sprites method

     PROS                 CONS


Faster initial load   Longer
                      development time
E...
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

     ...
ICONS for
INTERACTION

http://delicious.com/
jonhicks/icondesigntalk
Tính tương tác của Icon trong thiết kế
Upcoming SlideShare
Loading in...5
×

Tính tương tác của Icon trong thiết kế

1,006

Published on

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

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,006
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Tính tương tác của Icon trong thiết kế"

  1. 1. JON HICKS : HICKSDESIGN
  2. 2. ICONS for INTERACTION (not just decoration)
  3. 3. FIRST, LET ME TAKE YOU ON A JOURNEY…
  4. 4. 100,000 YEARS AGO Icons are the earliest form of written communication These Argentinean cave paintings are from 100,000 years ago
  5. 5. 35 YEARS AGO… First designed in 1974 for US Department of Transport http://www.aiga.org/content.cfm/symbol-signs
  6. 6. 30 YEARS AGO… The arrival of the graphical UI (for the Xerox Star) http://www.digibarn.com/collections/software/xerox-star/
  7. 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. 8. This is how icons used to be constructed, with unique numbers and the VDU statement
  9. 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. 10. Games like Chuckie Egg!
  11. 11. HOW DO ICONS AID INTERACTION? So lets look at how we can use icons for interaction
  12. 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. 13. Simple & clear - rule for all icons
  14. 14. Uses transparent edges to blend well on light + dark backgrounds
  15. 15. No transparency means that the edges look fuzzy
  16. 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. 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. 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. 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. 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. 21. EXPLAIN ACTIONS Explaining actions, rather than spelling them out
  22. 22. DRAW ATTENTION TO CHANGES Loose definition of an 'icon', but it still counts!
  23. 23. USING CONVENTIONS Using Familiarity/conventions to aid users to find services
  24. 24. COMPARISONS A picture is worth a thousand words Note the use of tooltips
  25. 25. OVERCOME LANGUAGE BARRIERS McDonalds commissioned a series of icons for nutrient information Symbols and colours were usability tested for 109 countries
  26. 26. HELP USERS WITH FORMS Name: G. Moff Tarkin Email: moffy at death.star
  27. 27. HELP USERS WITH FORMS Name: G. Moff Tarkin Email: moffy at death.star Incorrect field highlighted with warning colours
  28. 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. 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. 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. 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. 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. 33. Aiding navigation
  34. 34. Ikea nav with icons removed - it becomes harder to scan the categories
  35. 35. Pre-warn users of behaviour In this case the dropdown of a hidden menu Aliased Pixel art - small size
  36. 36. Pre-warn users of behaviour In this case the dropdown of a hidden menu Aliased Pixel art - small size
  37. 37. CONSISTENCY CONTROLS Couldn't imagine media players without icons Mimics real life object (e.g DVD player)
  38. 38. MOOD Love them or hate them we use emoticons to show mood/intention
  39. 39. TAKE HOMES Use icons to: Summarise text Draw attention Explain actions and behaviours Overcome language barriers Aid navigation (… and add interest!)
  40. 40. WORKFLOW #1: CHOOSING THE RIGHT METAPHOR
  41. 41. These icons from a hand dryer sum up why Iove icons and the thinking behind them
  42. 42. IS THERE A CONVENTION? Which Icon symbol was the most recognisable?
  43. 43. a lowercase i is accepted for information
  44. 44. LIFE BEFORE CONVENTIONS… There are conventions in the online world too In the old days iconizing RSS feeds was a mish mash
  45. 45. 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
  46. 46. GOOGLE IMAGE SEARCH So how do you find what the convention is? First stop is a google search
  47. 47. ICONFINDER.NET Iconfinder can also be useful to help to find out existing conventions
  48. 48. SEARCH or… ZOOM Sometimes conventions can conflict In this instance, context is everything
  49. 49. + SEARCH ZOOM Adding another simple icon makes this clearer
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. We also keep libraries of icons to get ideas Great for colour and style inspiration too CandyBar, Littlesnapper, Evernote or just a folder
  54. 54. WORKFLOW #2: PRODUCTION So what kinds of Icon are you likely to be involved in?
  55. 55. SKETCHING
  56. 56. TOOLS Many apps to choose from FW is my favourite Inkscape is a good open-source choice But ideal app not yet created
  57. 57. CRE ATE IN COMPANY + CONTEXT This is achieved by not designing icons in isolation Design icons together, and in context ensures consitency
  58. 58. CRE ATE IN COMPANY + CONTEXT This is achieved by not designing icons in isolation Design icons together, and in context ensures consitency
  59. 59. CONSISTENCY Vimeo uses a good consistent Colour and Style
  60. 60. CONSISTENT LIGHTING (TOP LEFT)
  61. 61. 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
  62. 62. OFF STOP, DANGER DISABLED WARNING OK, READY NETWORK ISSUES Be warned that cultural differences mean different meanings too.
  63. 63. GLOBAL COLOUR If you're using Illustrator - make use of the Global Colour feature to keep colour consistency.
  64. 64. 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
  65. 65. BLACK OFTEN TOO HARSH Try to avoid solid black, as it's too harsh In this document icon example, 50% grey is better
  66. 66. HIGHLIGHTING EDGES This is a style choice as much as anything, but it does have a purpose. The edges appear crisper, more defined.
  67. 67. Even small style differences can lead to unrecognisablility
  68. 68. Cute detail but it adds noise A convention obscured by unnecessary detail
  69. 69. Sometimes icons are simply useless Nice site John Lewis, but the basket is so small it's unrecognisable
  70. 70. Too Small Sometimes icons are simply useless Nice site John Lewis, but the basket is so small it's unrecognisable
  71. 71. Too fussy Background and Clear! border
  72. 72. WORKFLOW #3: DEPLOYING
  73. 73. FORMATS ‣ old school ‣ no alpha transparency ‣ widely supported GIF Lack of alpha transparency is main problem But widely supported Good for pixel icons
  74. 74. FORMATS ‣ alpha transparency ‣ widely supported ‣ hacks to work in PNG IE 6 This is the main one Worth using hacks for IE6 for transparency
  75. 75. GIF GIF PNG PNG allows for much more flexibility Especially if you need to change theme to high contrast
  76. 76. 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
  77. 77. 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?
  78. 78. NEVER JPEG! Of course, you would never use jpeg would you?
  79. 79. <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
  80. 80. <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
  81. 81. <img> tag method PROS CONS Alt & Title Higher initial page attributes to give load meaning Easy to deploy
  82. 82. 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
  83. 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. 84. 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
  85. 85. Isn't pretty with images off, but still makes sense. CSS Sprites makes little sense here
  86. 86. FAMFAMFAM.COM If you don't want to create your own icons, there are great free resources, like Mark James's famfamfam.
  87. 87. 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
  88. 88. ICONS for INTERACTION http://delicious.com/ jonhicks/icondesigntalk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×