Make icons make sense Solving symbols for global audiences Patrick Hofmann  UX Designer • Sydney @phofmann gplus.to/pman f...
<ul><li>Agenda </li></ul><ul><li>1 Guessing game </li></ul><ul><li>2 Simplification </li></ul><ul><li>3 Distinction </li><...
<ul><li>Welcome!  </li></ul><ul><li>   My name is  Patrick Hofmann </li></ul><ul><li>   I studied technical writing but ...
<ul><li>Me and my wombmates </li></ul><ul><li>   If we’re genetically, demographically, virtually identical, are we the s...
<ul><li>Guessing game </li></ul>1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
Guessing game 1
<ul><li>Placement and context </li></ul><ul><li>What is this? </li></ul>   Pointing upward?    Signalling importance?  ...
Placement and context What is this?    On a flag?    On a calculator?    In a screen interface?    On a building?    ...
   On a shopping mall map?    On a food package or recipe?    On a mobile phone? Placement and context What is this?
   On a machine dial or knob?    On a milk carton or bottle?    On a browser? Placement and context What is this?
Placement and context What is this?    In the aisle of a  hardware store?    In the margin of a user guide?    In a car...
<ul><li>Important factors for any icon </li></ul><ul><li>   Familiarity </li></ul><ul><li>   Placement </li></ul><ul><li...
<ul><li>Simplicity </li></ul>2
<ul><li>Simplicity </li></ul>2
<ul><li>Simplicity </li></ul>2
<ul><li>Simplicity </li></ul>2
<ul><li>Simplicity </li></ul>2
<ul><li>Distinction </li></ul>3
<ul><li>Distinction </li></ul>3
<ul><li>Distinction </li></ul>3
Landmarks 4
<ul><li>Bank </li></ul>
<ul><li>Hospital </li></ul>
<ul><li>Stadium </li></ul>
<ul><li>Business </li></ul>
<ul><li>Place of worship </li></ul>
<ul><li>5 </li></ul><ul><li>Age groups </li></ul>
<ul><li>Why are  age groups important to consider? </li></ul><ul><li>   The social information age has expanded our  rang...
<ul><li>Studying younger users </li></ul><ul><li>   Conducted a series of tests with 5- to 15-year olds in the US, Canada...
<ul><li>Television </li></ul>
<ul><li>Telephone </li></ul>
<ul><li>Movie listings or video files </li></ul>
<ul><li>Music files or audio streams </li></ul>
<ul><li>Write </li></ul>
<ul><li>Save a file </li></ul>
<ul><li>The impact of age groups on our work </li></ul><ul><li>   As technology expands, our audiences expand </li></ul><...
<ul><li>6 </li></ul>Takeaways
<ul><li>Takeaways </li></ul><ul><li>   Icons should be instantly recognised, not read and analysed </li></ul><ul><li>   ...
<ul><li>Takeaways </li></ul><ul><li>   Size does matter:  Your icon must be recognisable even if it’s very small </li></u...
aiga.org dafont.com commons.wikimedia.org thenounproject.com images.google.com Takeaways    Visit these great sources of ...
<ul><li>Beware of falling </li></ul>
<ul><li>Beware of falling </li></ul>
<ul><li>Beware of falling </li></ul>
<ul><li>Beware of falling cows </li></ul>
<ul><li>Beware of hungry cows </li></ul>
So...    Who’s learned something about icons?
So...    Who’s learned something about icons?    Who thinks I’m a nutter?
So...    Who’s learned something about icons?    Who thinks I’m a nutter?
So...    Who’s learned something about icons?    Who thinks I’m a nutter?    Who thinks I’m charming?
So...    Who’s learned something about icons?    Who thinks I’m a nutter?    Who thinks I’m charming?
<ul><li>Thanks   ! </li></ul><ul><li>Questions? </li></ul>[email_address] @phofmann gplus.to/pman
Upcoming SlideShare
Loading in...5
×

Make icons make sense: solving symbols for global audiences

3,274

Published on

Keynote presentation delivered by Patrick Hofmann at Technical Communication UK 2011 (21 September)

Published in: Spiritual, Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,274
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
78
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Make icons make sense: solving symbols for global audiences

  1. 1. Make icons make sense Solving symbols for global audiences Patrick Hofmann UX Designer • Sydney @phofmann gplus.to/pman facebook.com/phofmann [email_address]
  2. 2. <ul><li>Agenda </li></ul><ul><li>1 Guessing game </li></ul><ul><li>2 Simplification </li></ul><ul><li>3 Distinction </li></ul><ul><li>4 Landmarks </li></ul><ul><li>5 Age groups </li></ul><ul><li>6 Takeaways </li></ul>Make icons make sense Solving symbols for global audiences Patrick Hofmann UX Designer • Sydney
  3. 3. <ul><li>Welcome! </li></ul><ul><li> My name is Patrick Hofmann </li></ul><ul><li> I studied technical writing but have spent most of my career as a technical illustrator, visual interaction designer, and now a user experience designer in Sydney </li></ul><ul><li> Despite their challenges, I like icons </li></ul>Patrick Hofmann ?
  4. 4. <ul><li>Me and my wombmates </li></ul><ul><li> If we’re genetically, demographically, virtually identical, are we the same users? </li></ul><ul><li> If we are unique in our experiences and interests, do we use and interpret things differently? </li></ul>
  5. 5. <ul><li>Guessing game </li></ul>1
  6. 6. Guessing game 1
  7. 7. Guessing game 1
  8. 8. Guessing game 1
  9. 9. Guessing game 1
  10. 10. Guessing game 1
  11. 11. Guessing game 1
  12. 12. Guessing game 1
  13. 13. Guessing game 1
  14. 14. Guessing game 1
  15. 15. Guessing game 1
  16. 16. Guessing game 1
  17. 17. Guessing game 1
  18. 18. <ul><li>Placement and context </li></ul><ul><li>What is this? </li></ul> Pointing upward?  Signalling importance?  Directing movement?
  19. 19. Placement and context What is this?  On a flag?  On a calculator?  In a screen interface?  On a building?  On a medicine bottle?
  20. 20.  On a shopping mall map?  On a food package or recipe?  On a mobile phone? Placement and context What is this?
  21. 21.  On a machine dial or knob?  On a milk carton or bottle?  On a browser? Placement and context What is this?
  22. 22. Placement and context What is this?  In the aisle of a hardware store?  In the margin of a user guide?  In a cartoon above someone’s head?
  23. 23. <ul><li>Important factors for any icon </li></ul><ul><li> Familiarity </li></ul><ul><li> Placement </li></ul><ul><li> Context </li></ul><ul><li> Juxtaposition </li></ul><ul><li> Simplicity  Distinction </li></ul>
  24. 24. <ul><li>Simplicity </li></ul>2
  25. 25. <ul><li>Simplicity </li></ul>2
  26. 26. <ul><li>Simplicity </li></ul>2
  27. 27. <ul><li>Simplicity </li></ul>2
  28. 28. <ul><li>Simplicity </li></ul>2
  29. 29. <ul><li>Distinction </li></ul>3
  30. 30. <ul><li>Distinction </li></ul>3
  31. 31. <ul><li>Distinction </li></ul>3
  32. 32. Landmarks 4
  33. 33. <ul><li>Bank </li></ul>
  34. 34. <ul><li>Hospital </li></ul>
  35. 35. <ul><li>Stadium </li></ul>
  36. 36. <ul><li>Business </li></ul>
  37. 37. <ul><li>Place of worship </li></ul>
  38. 38. <ul><li>5 </li></ul><ul><li>Age groups </li></ul>
  39. 39. <ul><li>Why are age groups important to consider? </li></ul><ul><li> The social information age has expanded our range of users </li></ul><ul><li> A 6-year-old and a 96-year-old both use the same product </li></ul><ul><li> We use visuals that do not satisfy all age groups -- especially younger </li></ul>
  40. 40. <ul><li>Studying younger users </li></ul><ul><li> Conducted a series of tests with 5- to 15-year olds in the US, Canada, Switzerland, Australia and New Zealand </li></ul><ul><li> Asked children to sketch specific concepts or answer a series of visual “flash cards” </li></ul><ul><li> Here are the outcomes </li></ul>
  41. 41. <ul><li>Television </li></ul>
  42. 42. <ul><li>Telephone </li></ul>
  43. 43. <ul><li>Movie listings or video files </li></ul>
  44. 44. <ul><li>Music files or audio streams </li></ul>
  45. 45. <ul><li>Write </li></ul>
  46. 46. <ul><li>Save a file </li></ul>
  47. 47. <ul><li>The impact of age groups on our work </li></ul><ul><li> As technology expands, our audiences expand </li></ul><ul><li> As we localise or internationalise our icons, we must look at age </li></ul><ul><li> Like our users, our icons grow old as well </li></ul><ul><li> Test, test, test -- any way you can </li></ul>
  48. 48. <ul><li>6 </li></ul>Takeaways
  49. 49. <ul><li>Takeaways </li></ul><ul><li> Icons should be instantly recognised, not read and analysed </li></ul><ul><li> Icons need to present a single, core message </li></ul><ul><li> In a grid or series, icons need to be distinguishable </li></ul><ul><li> Consider age-groups as cultures </li></ul><ul><li> Test, test, test any way you can! </li></ul>
  50. 50. <ul><li>Takeaways </li></ul><ul><li> Size does matter: Your icon must be recognisable even if it’s very small </li></ul><ul><li> Design your icon at actual size </li></ul>
  51. 51. aiga.org dafont.com commons.wikimedia.org thenounproject.com images.google.com Takeaways  Visit these great sources of inspiration
  52. 52. <ul><li>Beware of falling </li></ul>
  53. 53. <ul><li>Beware of falling </li></ul>
  54. 54. <ul><li>Beware of falling </li></ul>
  55. 55. <ul><li>Beware of falling cows </li></ul>
  56. 56. <ul><li>Beware of hungry cows </li></ul>
  57. 57. So...  Who’s learned something about icons?
  58. 58. So...  Who’s learned something about icons?  Who thinks I’m a nutter?
  59. 59. So...  Who’s learned something about icons?  Who thinks I’m a nutter?
  60. 60. So...  Who’s learned something about icons?  Who thinks I’m a nutter?  Who thinks I’m charming?
  61. 61. So...  Who’s learned something about icons?  Who thinks I’m a nutter?  Who thinks I’m charming?
  62. 62. <ul><li>Thanks ! </li></ul><ul><li>Questions? </li></ul>[email_address] @phofmann gplus.to/pman
  1. A particular slide catching your eye?

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

×