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.

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