Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Icons in interfaces (UX in the City)

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.

mstandage

April 21, 2017
Tweet

More Decks by mstandage

Other Decks in Design

Transcript

  1. a symbol or graphic representation on a screen of a

    program, option, or window. @mstandage – Oxford English dictionary Icons in interfaces
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Icons in use: why and how designers use or miss-use

    them @mstandage Icons in interfaces
  7. 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
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. ‘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
  13. Users will use context to interpret icons, but it can’t

    be relied upon to aid users understanding @mstandage Icons in interfaces
  14. 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.
  15. 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.
  16. 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.
  17. Concreteness @mstandage Icons in interfaces – Rogers, Y. (1989). Icon

    design for the user interface. International Reviews of Ergonomics, 3, pp.129–154.
  18. 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.