Make icons make sense: solving symbols for global audiences

6,997 views

Published on

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

Published in: Spiritual, Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total views
6,997
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
100
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Make icons make sense: solving symbols for global audiences

  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. <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. <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. <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. <ul><li>Guessing game </li></ul>1
  6. Guessing game 1
  7. Guessing game 1
  8. Guessing game 1
  9. Guessing game 1
  10. Guessing game 1
  11. Guessing game 1
  12. Guessing game 1
  13. Guessing game 1
  14. Guessing game 1
  15. Guessing game 1
  16. Guessing game 1
  17. Guessing game 1
  18. <ul><li>Placement and context </li></ul><ul><li>What is this? </li></ul> Pointing upward?  Signalling importance?  Directing movement?
  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.  On a shopping mall map?  On a food package or recipe?  On a mobile phone? Placement and context What is this?
  21.  On a machine dial or knob?  On a milk carton or bottle?  On a browser? Placement and context What is this?
  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. <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. <ul><li>Simplicity </li></ul>2
  25. <ul><li>Simplicity </li></ul>2
  26. <ul><li>Simplicity </li></ul>2
  27. <ul><li>Simplicity </li></ul>2
  28. <ul><li>Simplicity </li></ul>2
  29. <ul><li>Distinction </li></ul>3
  30. <ul><li>Distinction </li></ul>3
  31. <ul><li>Distinction </li></ul>3
  32. Landmarks 4
  33. <ul><li>Bank </li></ul>
  34. <ul><li>Hospital </li></ul>
  35. <ul><li>Stadium </li></ul>
  36. <ul><li>Business </li></ul>
  37. <ul><li>Place of worship </li></ul>
  38. <ul><li>5 </li></ul><ul><li>Age groups </li></ul>
  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. <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. <ul><li>Television </li></ul>
  42. <ul><li>Telephone </li></ul>
  43. <ul><li>Movie listings or video files </li></ul>
  44. <ul><li>Music files or audio streams </li></ul>
  45. <ul><li>Write </li></ul>
  46. <ul><li>Save a file </li></ul>
  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. <ul><li>6 </li></ul>Takeaways
  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. <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. aiga.org dafont.com commons.wikimedia.org thenounproject.com images.google.com Takeaways  Visit these great sources of inspiration
  52. <ul><li>Beware of falling </li></ul>
  53. <ul><li>Beware of falling </li></ul>
  54. <ul><li>Beware of falling </li></ul>
  55. <ul><li>Beware of falling cows </li></ul>
  56. <ul><li>Beware of hungry cows </li></ul>
  57. So...  Who’s learned something about icons?
  58. So...  Who’s learned something about icons?  Who thinks I’m a nutter?
  59. So...  Who’s learned something about icons?  Who thinks I’m a nutter?
  60. So...  Who’s learned something about icons?  Who thinks I’m a nutter?  Who thinks I’m charming?
  61. So...  Who’s learned something about icons?  Who thinks I’m a nutter?  Who thinks I’m charming?
  62. <ul><li>Thanks ! </li></ul><ul><li>Questions? </li></ul>[email_address] @phofmann gplus.to/pman

×