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
3. @mstandage Icons in interfaces User experience, typography and information design
5. What are icons? @mstandage Icons in interfaces
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
44. Concreteness @mstandage Icons in interfaces – Rogers, Y. (1989). Icon design for the user interface. International Reviews of Ergonomics, 3, pp.129–154.
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.
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