Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make icons make sense: solving symbols for global audiences

7,121 views

Published on

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

Published in: Spiritual, Technology

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

×