Icons in interfaces (Breaking Borders)

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, how effective are icons at conveying information? This talk 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
2. @mstandage Icons in interfaces User experience, typography and information design
4. What are icons? @mstandage Icons in interfaces
11. a symbol or graphic representation on a screen of a program, option, or window. @mstandage – Oxford English dictionary Icons in interfaces
12. What do icons do? @mstandage Icons in interfaces
13. 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.
15. 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.
17. 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.
20. 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.
23. Icons in use: why and how designers use or miss-use them @mstandage Icons in interfaces
24. 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
25. 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.
27. 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.
29. 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.
31. 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.
33. ‘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
34. 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.
35. 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.
37. 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.
39. Concreteness @mstandage Icons in interfaces – Rogers, Y. (1989). Icon design for the user interface. International Reviews of Ergonomics, 3, pp.129–154.
41. 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.
43. What are the characteristics of successful/unsuccessful icons? @mstandage Icons in interfaces
44. To conclude @mstandage Icons in interfaces
45. Always test your icons with users @mstandage Icons in interfaces
46. Familiarity is the most significant correlation to meaningfulness @mstandage Icons in interfaces
47. Use icons without labels cautiously and only if absolutely necessary @mstandage Icons in interfaces
48. @mstandage mstandage.com Thank you