Icons in interfaces (Breaking Borders)

D628cae497f1f6c18186701f6acac301?s=47 mstandage
February 15, 2017

Icons in interfaces (Breaking Borders)

With the rise of mobile devices and the responsive web, designers of interfaces are using icons more and more to convey important pieces of information to users. But, how effective are icons at conveying information? This talk will give designers of icons and those who specify icons for interfaces practical advice on icon choice, a framework for evaluating the potential effectiveness of an icon and tips for testing icons.

D628cae497f1f6c18186701f6acac301?s=128

mstandage

February 15, 2017
Tweet

Transcript

  1. @mstandage mstandage.com Icons in interfaces Considerations for using icons in

    modern interfaces
  2. @mstandage Icons in interfaces User experience, typography and information design

  3. None
  4. What are icons? @mstandage Icons in interfaces

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. a symbol or graphic representation on a screen of a

    program, option, or window. @mstandage – Oxford English dictionary Icons in interfaces
  12. What do icons do? @mstandage Icons in interfaces

  13. Portray concepts @mstandage Icons in interfaces – Hicks, J. (2011).

    The icon handbook. United Kingdom: Five Simple Steps. – Black, A., Lund, O., Walker, S. and Luna, P. (n.d.). Gower Handbook of Information Design. Farnham: Gower.
  14. None
  15. Navigation @mstandage Icons in interfaces – Kacmar, C. and Carey,

    J. (1991). Assessing the usability of icons in user interfaces. Behaviour & Information Technology, 10(6), pp.443-457. – Niemelä, M. and Saarinen, J. (2000). Visual Search for Grouped versus Ungrouped Icons in a Computer Interface. Human factors, 42(4), pp.630-635.
  16. None
  17. Association @mstandage Icons in interfaces – Peraya, Daniel. (1998). Structures

    et functionnement semiotiques des icones de logiciels et d’environnements informatiques standardizes (ILEIS), Recherches en comunicationm n° 10, TECFA, Unité des technologies éducatives, Université de Geneve. – Niemelä, M. and Saarinen, J. (2000). Visual Search for Grouped versus Ungrouped Icons in a Computer Interface. Human factors, 42(4), pp.630-635.
  18. None
  19. None
  20. Branding @mstandage Icons in interfaces – Hicks, J. (2011). The

    icon handbook. United Kingdom: Five Simple Steps. – Black, A., Lund, O., Walker, S. and Luna, P. (n.d.). Gower Handbook of Information Design. Farnham: Gower.
  21. None
  22. None
  23. Icons in use: why and how designers use or miss-use

    them @mstandage Icons in interfaces
  24. Picture superiority affect: pictures and images are more likely to

    be remembered than words. @mstandage Icons in interfaces – Paivio, A., Rogers, T. and Smythe, P. (1968). Why are pictures easier to recall than words?. Psychonomic Science, 11(4), pp.137-138
  25. They distil lengthy processes into concise forms to improve the

    efficiency of an interface @mstandage Icons in interfaces – Caplin, S. (2001). Icon design. New York: Watson-Guptill Publications.
  26. None
  27. Icons may improve perceived ease of use, even if they

    have little effect on usability @mstandage Icons in interfaces – Wiedenbeck, S. (1999). The use of icons and labels in an end user application program: An empirical study of learning and retention. Behaviour & Information Technology, 18(2), pp.68-82.
  28. None
  29. No icon in a software product can stand alone and

    be understood by the global audience’ @mstandage Icons in interfaces – Haramundanis, K. (1996). Why icons cannot stand alone. SIGDOC Asterisk J. Comput. Doc., 20(2), pp.1-8.
  30. None
  31. Icon-only interfaces perform significantly worse than label-only and icon-label interfaces

    @mstandage Icons in interfaces – Wiedenbeck, S. (1999). The use of icons and labels in an end user application program: An empirical study of learning and retention. Behaviour & Information Technology, 18(2), pp.68-82.
  32. None
  33. ‘The icon is not widely recognised and is often confused

    with the “opens in a new window” icon.’ @mstandage Icons in interfaces – designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk
  34. Icon characteristics @mstandage Icons in interfaces – Mcdougall, S., Curry,

    M. and de Bruijn, O. (1999). Measuring symbol and icon characteristics: Norms for concreteness, complexity, meaningfulness, familiarity, and semantic distance for 239 symbols. Behavior Research Methods, Instruments, & Computers, 31(3), pp.487-519. – Isherwood, S., McDougall, S. and Curry, M. (2007). Icon Identification in Context: The Changing Role of Icon Characteristics With User Experience. Human factors, 49(3), pp.465-476.
  35. Familiarity @mstandage Icons in interfaces – Brems, D. and Whitten,

    W. (1987). Learning and Preference for Icon-Based Interface. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 31(1), pp.125-129. – Holloway, J. and Bailey, J. (1996). Don’t use a product’s developers for icon testing. In: Proceedings of CHI’96 Short papers.. New York: ACM. – Koutsourelakis, C. and Chorianopoulos, K. (2010). Icons in mobile phones: Comprehensibility differences between older and younger users. Information Design Journal, 18(1), pp.22-35.
  36. None
  37. Semantic distance @mstandage Icons in interfaces – Mcdougall, S., Curry,

    M. and de Bruijn, O. (1999). Measuring symbol and icon characteristics: Norms for concreteness, complexity, meaningfulness, familiarity, and semantic distance for 239 symbols. Behavior Research Methods, Instruments, & Computers, 31(3), pp.487-519. – Isherwood, S., McDougall, S. and Curry, M. (2007). Icon Identification in Context: The Changing Role of Icon Characteristics With User Experience. Human factors, 49(3), pp.465-476.
  38. None
  39. Concreteness @mstandage Icons in interfaces – Rogers, Y. (1989). Icon

    design for the user interface. International Reviews of Ergonomics, 3, pp.129–154.
  40. None
  41. Visual Complexity @mstandage Icons in interfaces – Rogers, Y. (1989).

    Icon design for the user interface. International Reviews of Ergonomics, 3, pp.129–154. – García, M., Badre, A. and Stasko, J. (1994). Development and validation of icons varying in their abstractness. Interacting with Computers, 6(2), pp.191-211.
  42. None
  43. What are the characteristics of successful/unsuccessful icons? @mstandage Icons in

    interfaces
  44. To conclude @mstandage Icons in interfaces

  45. Always test your icons with users @mstandage Icons in interfaces

  46. Familiarity is the most significant correlation to meaningfulness @mstandage Icons

    in interfaces
  47. Use icons without labels cautiously and only if absolutely necessary

    @mstandage Icons in interfaces
  48. @mstandage mstandage.com Thank you