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. @mstandage mstandage.com
    Icons in interfaces
    Considerations for using icons in
    modern interfaces

    View Slide

  2. View Slide

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

    View Slide

  4. View Slide

  5. What are icons?
    @mstandage Icons in interfaces

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. a symbol or graphic representation
    on a screen of a program, option,
    or window.
    @mstandage
    – Oxford English dictionary
    Icons in interfaces

    View Slide

  13. Icon Index Symbol

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  17. View Slide

  18. View Slide

  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.

    View Slide

  20. View Slide

  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.

    View Slide

  22. View Slide

  23. View Slide

  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.

    View Slide

  25. View Slide

  26. View Slide

  27. Icons in use: why and how
    designers use or miss-use them
    @mstandage Icons in interfaces

    View Slide

  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

    View Slide

  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.

    View Slide

  30. View Slide

  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.

    View Slide

  32. View Slide

  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.

    View Slide

  34. View Slide

  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.

    View Slide

  36. View Slide

  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

    View Slide

  38. Users will use context to interpret
    icons, but it can’t be relied upon to
    aid users understanding
    @mstandage Icons in interfaces

    View Slide

  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.

    View Slide

  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.

    View Slide

  41. View Slide

  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.

    View Slide

  43. View Slide

  44. Concreteness
    @mstandage Icons in interfaces
    – Rogers, Y. (1989). Icon design for the user interface. International Reviews of Ergonomics, 3,
    pp.129–154.

    View Slide

  45. View Slide

  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.

    View Slide

  47. View Slide

  48. What are the characteristics of
    successful/unsuccessful icons?
    @mstandage Icons in interfaces

    View Slide

  49. To conclude
    @mstandage Icons in interfaces

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. @mstandage mstandage.com
    Thank you

    View Slide