Icons in interfaces (UX in the City)

D628cae497f1f6c18186701f6acac301?s=47 mstandage
April 21, 2017

Icons in interfaces (UX in the City)

Icons often play an integral role in modern computer interfaces. 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 poor use of icons and poor icons can have a negative impact on user experience.

I will present a study of icons commonly found in mobile operating systems. The study demonstrates the characteristics of effective icons and how these characteristics relate to icon comprehension and a user's ability to interpret the icon function relationship. Drawing on existing research in the area, I will show a schema for icon characteristics and how these interplay with the icon's ability to convey meaning. In addition, I will draw on real-world examples of both effective and ineffective icon use.

The session 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

April 21, 2017
Tweet

Transcript

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

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

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

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

    program, option, or window. @mstandage – Oxford English dictionary Icons in interfaces
  13. Icon Index Symbol

  14. ‘Cat’ Symbol Concept Referent Refers to Symbolises Stands for

  15. What do icons do? @mstandage Icons in interfaces

  16. 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.
  17. None
  18. None
  19. 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.
  20. None
  21. 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.
  22. None
  23. None
  24. 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.
  25. None
  26. None
  27. Icons in use: why and how designers use or miss-use

    them @mstandage Icons in interfaces
  28. 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
  29. 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.
  30. None
  31. 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.
  32. None
  33. 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.
  34. None
  35. 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.
  36. None
  37. ‘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
  38. Users will use context to interpret icons, but it can’t

    be relied upon to aid users understanding @mstandage Icons in interfaces
  39. 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.
  40. 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.
  41. None
  42. 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.
  43. None
  44. Concreteness @mstandage Icons in interfaces – Rogers, Y. (1989). Icon

    design for the user interface. International Reviews of Ergonomics, 3, pp.129–154.
  45. None
  46. 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.
  47. None
  48. What are the characteristics of successful/unsuccessful icons? @mstandage Icons in

    interfaces
  49. To conclude @mstandage Icons in interfaces

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

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

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

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