Teemu Korpilahti, Masood Masoodian
pp. 241 – 276, download
(https://doi.org/10.55612/s-5002-054-010)
Abstract
The design of the icon of a mobile application can have a major impact on its success, by attracting users’ attention and perhaps persuading them to install it on their devices. In the case of the continued use of an application, its icon also has an important role to play in terms of its recognition. In this paper, we take a qualitative approach in identifying different roles that the visual design properties of complexity, concreteness and familiarity play in contributing to the appeal and performance of an application icon during different phases of its use – from first exposure to assurance and continued use. We also discuss several theories which we consider relevant to this research, using case studies of the icons of three mobile applications. We then conclude by proposing that the design of an application icon should take into account the maturity level of the application, and the specific phases of its use for which its icon should be optimized.
Keywords: Visual design, visual design properties, icon design, user interface design, mobile application, icon use, user journey, consumer journey.
References
1. McDougall S., Reppa I, Kulik J et al : What makes icons appealing? The role of processing fluency in predicting icon appeal in different task contexts. Applied Ergonomics 55 pp.156-172. doi:https://doi.org/10.1016/j.apergo.2016.02.006 (2016).
2. Nakamura C., Zeng-Treitler Q : A taxonomy of representation strategies in iconic communication. International Journal of Human-Computer Studies 70(8) pp.535-551. doi:https://doi.org/10.1016/j.ijhcs.2012.02.009 (2012).
3. Lodding K.N. : Iconic Interfacing. IEEE Computer Graphics and Applications 3(2) pp.11-20. doi:https://doi.org/10.1109/MCG.1983.262982 (1983).
4. Webb J.M., Sorenson PF, Lyons NP : An Empirical Approach to the Evaluation of Icons. SIGCHI Bull. 21(1) pp.87-90. doi:https://doi.org/10.1145/67880.67894 (1989).
5. Rogers Y. : Icons at the interface: their usefulness. Interacting with Computers 1(1) pp.105-117 (1989).
6. Purchase H. : Defining multimedia. IEEE MultiMedia 5(1) pp.8-15. doi:https://doi.org/10.1109/93.664737 (1998).
7. Gaver W.W. : Auditory Icons: Using Sound in Computer Interfaces. Human–Computer Interaction 2(2) pp.167-177. doi:https://doi.org/10.1207/s15327051hci0202_3 (1986).
8. Blattner M.M., Sumikawa DA, Greenberg RM : Earcons and Icons: Their Structure and Common Design Principles (Abstract Only). SIGCHI Bull. 21(1) pp.123-124. doi:https://doi.org/10.1145/67880.1046599 (1989).
9. Wang H., Hung S, Liao C : A survey of icon taxonomy used in the interface design. In: Anonymous ACM, pp. 203-206 (Aug 28, 2007).
10. McDougall S.J.P., Reppa I : Why do I like It? the Relationships between Icon Characteristics, user Performance and Aesthetic Appeal. Proceedings of the Human Factors and Ergonomics Society Annual Meeting 52(18) pp.1257-1261. doi:https://doi.org/10.1177/154193120805201822 (2008).
11. Rizvanoglu K. : Generating guidelines for choosing appropriate metaphors in GUIs through the analysis of cross-cultural understanding of metaphorical icons: an explorative study with French and Turkish users on an e-learning site. Digital Creativity 21(3). doi:https://doi.org/10.1080/14626268.2010.483686 (2010).
12. Jylhä H., Hamari J : An icon that everyone wants to click: How perceived aesthetic qualities predict app icon successfulness. International Journal of Human-Computer Studies 130 pp.73-85. doi:https://doi.org/10.1016/j.ijhcs.2019.04.004 (2019).
13. Abdullah, R., Hübner, R.: Pictograms, Icons and Signs. Thames & Hudson Ltd., London (2006).
14. Phillips, Barbara J. ; Mcquarrie, Edward F. ; Griffin, W. Glenn : How Visual Brand Identity Shapes Consumer Response. Psychology & Marketing 31(3) pp.225-236. doi:https://doi.org/10.1002/mar.20689 (2014).
15. Jun J.W., Cho C, Kwon H.J. : The role of affect and cognition in consumer evaluations of corporate visual identity: Perspectives from the United States and Korea. Journal of Brand Management 15(6) pp.382-398. doi:https://doi.org/10.1057/bm.2008.11 (2008).
16. Henderson P.W., Cote J.A. : Guidelines for Selecting or Modifying Logos. Journal of Marketing 62(2) pp.14. doi:https://doi.org/10.2307/1252158 (1998).
17. Honeywill P. : Designing Icons for the Graphical User Interface. Digital Creativity 10(2). doi:https://doi.org/10.1076/digc.10.2.67.3254 (1999).
18. Moon H., Han S, Chun J et al : A Design Process for a Customer Journey Map: A Case Study on Mobile Services: A Design Process for a Customer Journey Map. Human Factors and Ergonomics in Manufacturing & Service Industries 26. doi:https://doi.org/10.1002/hfm.20673 (2016).
19. Carbone L., Haeckel S : Engineering Customer Experiences. Marketing Management 3 (1994).
20. Shaw C., Ivens J : Building great customer experiences. Palgrave Macmillan, New York (2002).
21. Lemon K.N., Verhoef PC : Understanding Customer Experience Throughout the Customer Journey. Journal of Marketing 80(6) pp.69-96. doi:https://doi.org/10.1509/jm.15.0420 (2016).
22. Byrne M.D. : Using icons to find documents: simplicity is critical. In: Anonymous Association for Computing Machinery, New York, NY, USA (1993).
23. Stotts D.B. : The usefulness of icons on the computer interface: Effect of graphical abstraction and functional representation on experienced and voice users. Proceedings of the Human Factors and Ergonomics Society Annual Meeting 1 pp.453 (1998).
24. Isherwood S.J., McDougall SJP, Curry MB : Icon Identification in Context: The Changing Role of Icon Characteristics With User Experience. Human Factors: The Journal of the Human Factors and Ergonomics Society 49(3). doi:https://doi.org/10.1518/001872007X200102 (2007a).
25. Basecamp : Basecamp: Project Management & Team Communication Software. https://basecamp.com/. October 2022.
26. Airbnb : Vacation Rentals, Homes, Experiences & Places – Airbnb. https://www.airbnb.com/. Accessed October 2022.
27. Instagram : Instagram. https://www.Instagram.com/. Accessed October 2022.
28. Mollerup P. : Marks of Excellence. Phaidon Press Limited, London (1997).
29. Fajardo, Tatiana ; Zhang, Jiao ; Tsiros, Michael : The Contingent Nature of the Symbolic Associations of Visual Design Elements: The Case of Brand Logo Frames. Journal of Consumer Research 43(4) pp.549. doi:https://doi.org/10.1093/jcr/ucw048 (2016).
30. Bird L. : Advertising: Eye-catching logos all too often leave fuzzy images in minds of consumers. Wall Street Journal (1991).
31. Choi J.H., Lee HJ : Facets of simplicity for the smartphone interface: A structural model. International Journal of Human Computer Studies 70(2). doi:https://doi.org/10.1016/j.ijhcs.2011.09.002 (2012).
32. Treisman A.M., Gelade G : A feature-integration theory of attention. Cognitive Psychology 12(1) pp.97-136. doi:https://doi.org/10.1016/0010-0285(80)90005-5 (1980).
33. Treisman A., Gormican S : Feature analysis in early vision: Evidence from search asymmetries. Psychological Review 95(1) pp.15-48. doi:https://doi.org/10.1037/0033-295X.95.1.15 (1988).
34. Lidwell W., Holden K, Butler J : Universal Principles of Design. Rockport Publishers, Massachusetts (2003).
35. Whatsapp : Whatsapp. https://www.whatsapp.com. Accessed October 2022.
36. García M., Badre AN, Stasko JT : Development and validation of icons varying in their abstractness. Interacting with Computers 6(2) pp.191-211. doi:https://doi.org/10.1016/0953-5438(94)90024-8 (1994).
37. Korpilahti T. : Approaches to Interface Icon Classification. In: Kurosu M (ed), Human-Computer Interaction. Theories, Methods, and Human Issues – 20th International Conference, {HCI} International 2018, vol 10901. Springer, pp. 126-137 (2018).
38. Rogers Y., Oborne DJ : Pictorial communication of abstract verbs in relation to humanâÂÂcomputer interaction. British Journal of Psychology 78(1) pp.99-112. doi:https://doi.org/10.1111/j.2044-8295.1987.tb02229.x (1987).
39. Ullman M.T. : Contributions of memory circuits to language: the declarative/procedural model. Cognition 92(1-2) pp.231-270. doi:https://doi:10.1016/j.cognition.2003.10.008 (2004).
40. Grobert J., Cuny C, Fornerino M : Surprise! We changed the logo. Journal of Product & Brand Management 25(3) pp.239-246. doi:https://doi.org/10.1108/JPBM-06-2015-0895 (2016).
41. Mehrabian A., Russell JA : An approach to environmental psychology. MIT Press (1974).
42. ISO 9241-210 : Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems. International Standard, 2. (2019).
43. Butler K.A. : Usability Engineering Turns 10. Interactions 3(1) pp.58-75. doi:https://doi.org/10.1145/223500.223513 (1996).
44. Desimone R., Duncan J : Neural Mechanisms of Selective Visual Attention. Annual review of neuroscience 18 pp.193-222. doi:https://doi.org/10.1146/annurev.ne.18.030195.001205 (1995).
45. Ware C. : Visual Thinking for Design, 1st edn. Morgan Kaufmann Publishers, Burlington (2008).
46. Microsoft : Microsoft. https://www.microsoft.com/. Accessed October 2022.
47. Zoom : Zoom. https://zoom.us/. Accessed October 2022.
48. Foodora : Foodora. https://www.foodora.fi/. Accessed October 2022.
49. Wolt : Wolt. https://wolt.com/. Accessed October 2022.
50. Line : Line. https://line.me/. Accessed October 2022.
51. Infiniti : Infiniti. https://www.infinitiusa.com/. Accessed October 2022.
52. Google : Google. https://about.google/products/. Accessed October 2022.
53. Angry Birds : Angry Birds. https://www.angrybirds.com/. Accessed October 2022.
54. Pan Y., Lin B, Zhao Y et al : Working memory biasing of visual perception without awareness. Attention, Perception, & Psychophysics 76(7) pp.2051-2062. doi:https://doi.org/10.3758/s13414-013-0566-2 (2014).
55. Fukuda K., Woodman GF : Visual working memory buffers information retrieved from visual long-term memory. Proceedings of the National Academy of Sciences of the United States of America 114(20) pp.5306-5311. doi:https://doi.org/10.1073/pnas.1617874114 (2017).
56. Phillips B.J., McQuarrie EF, Griffin WG : The Face of the Brand: How Art Directors Understand Visual Brand Identity. Journal of Advertising 43(4) pp.318-332. doi:https://doi.org/10.1080/00913367.2013.867824 (2014).
57. Nike : Nike. https://www.nike.com/. Accessed October 2022.
58. Dihiansan J. : Connecting the dots: How we put a smile on the Basecamp logo. – Signal v. Noise. https://signalvnoise.com/posts/3965-connecting-the-dots-how-we- put-a-smile-on-the-basecamp-logo (2015).
59. Liu J., Li J, Feng L et al : Seeing Jesus in toast: Neural and behavioral correlates of face pareidolia. Cortex 53 pp.60-77. doi:https://doi.org/10.1016/j.cortex.2014.01.013 (2014).
60. Rolls E.T. : Neurons in the cortex of the temporal lobe and in the amygdala of the monkey with responses selective for faces. Human neurobiology 3(4) pp.209-222. (1984).
61. Taubert J., Wardle SG, Flessert M et al : Face Pareidolia in the Rhesus Monkey. Current Biology 27(16) pp.2505-2509.e2. doi:https://doi.org/10.1016/j.cub.2017.06.075 (2017).
62. Tsao D.Y. : A Cortical Region Consisting Entirely of Face-Selective Cells. Science 311(5761) pp.670-674. doi:https://doi.org/10.1126/science.1119983 (2006).
63. DesignStudio : Airbnb – Belong anywhere | DesignStudio. https://design.studio/work/air-bnb. Accessed October 2022.
64. Digiday : The best (and filthiest) tweets about Airbnb’s new logo – Digiday. https://digiday.com/marketing/10-best-reactions-airbnbs-revamped-logo/. Accessed October 2022.
65. Clio Awards : Airbnb – Airbnb Rebrand | Clios. https://clios.com/awards/winner/design/airbnb/airbnb-rebrand-394. Accessed October 2022.
66. Pachal P. : What the designer of the old Instagram icon thinks of the new one. https://mashable.com/2016/05/11/instagram-old-icon-designer/?europe=true (2016). Accessed October 2022.
67. Langenfeld N. : History of the Polaroid Camera https://www.sutori.com/en/story/history-of-the-polaroid-camera–Ag1tvQmMVmHZPffv5fweFDcs. October 2022.