Advertisement

Skeuomorph Versus Flat Design: User Experience and Age-Related Preferences

  • Nils Backhaus
  • Anna Katharina Trapp
  • Manfred Thüring
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 10919)

Abstract

The “right” design of graphical user interfaces (GUI) may help to provide positive user experience and to support users in dealing with the complexity of technological artifacts. We compared two design strategies for GUIs: skeuomorph and flat design. For this purpose, two interface versions of a smart phone operating system (flat and skeuomorph) were created. Since skeuomorph design uses metaphors from the non-digital world, we expected that it is preferred by elderly users (digital immigrants) compared to young users who might choose the modern flat design (digital natives). To test this assumption, we conducted a study (N = 24) with younger and elderly users by combining a standardized usability testing scenario, a user experience questionnaire (meCUE), and a half-standardized interview. Our results indicate that there is a significant difference between the two age groups. Elderly users showed a preference for skeuomorph design whereas the younger generation favored the flat design. Practical consequences and theoretical implications of these findings are discussed on the basis of the CUE model (Components of User Experience).

Keywords

Skeuomorph design Flat design User experience CUE model Hygienic and motivational factors Graphical user interfaces (GUIs) Preferences Age 

Notes

Acknowledgements

We thank Meike Schröder who contributed significantly to this paper and conducted the data collection during her Master Thesis.

References

  1. 1.
    Gu, B.: East meets west on flat design: convergence and divergence in Chinese and American user interface design. Tech. Commun. 63(3), 231–247 (2016)Google Scholar
  2. 2.
    Bollini, L.: Beautiful interfaces. From user experience to user interface design. Des. J. 20(sup1), S89–S101 (2017)Google Scholar
  3. 3.
    Blitz, J.H.: Skeuomorphs, pottery, and technological change: skeuomorphs, pottery, and technological change. Am. Anthropol. 117(4), 665–678 (2015)CrossRefGoogle Scholar
  4. 4.
    Blackwell, A.F.: The reification of metaphor as a design tool. ACM Trans. Comput.-Hum. Interact. 13(4), 490–530 (2006)CrossRefGoogle Scholar
  5. 5.
    Wu, L., Lei, T., Li, J., Li, B.: Skeuomorphism and flat design: evaluating users’ emotion experience in car navigation interface design. In: Marcus, A. (ed.) DUXU 2015. LNCS, vol. 9186, pp. 567–575. Springer, Cham (2015).  https://doi.org/10.1007/978-3-319-20886-2_53CrossRefGoogle Scholar
  6. 6.
    Lakoff, G., Johnson, M.: Metaphors We Live By. University of Chicago Press, Chicago (2003)CrossRefGoogle Scholar
  7. 7.
    Oswald, D., Kolb, S.: Flat design vs. skeuomorphism–effects on learnability and image attributions in digital product interfaces. In: Proceedings of the 16th International Conference on Engineering and Product Design Education, Twente (2014)Google Scholar
  8. 8.
    Hou, K.-C., Ho, C.-H.: A preliminary study on aesthetic of apps icon design. In: 5th International Congress of the International Association of Societies of Design Research (2013)Google Scholar
  9. 9.
    Shahid, S., ter Voort, J., Somers, M., Mansour, I.: Skeuomorphic, flat or material design: requirements for designing mobile planning applications for students with autism spectrum disorder. In: Proceedings of the 18th International Conference on Human-Computer Interaction with Mobile Devices and Services Adjunct, New York, NY, pp. 738–745 (2016)Google Scholar
  10. 10.
    Zhou, A.: Cybernetics and human-computer interaction: case studies of modern interface design. In: IEEE Conference on Norbert Wiener in the 21st Century, Boston, MA, pp. 1–6 (2014)Google Scholar
  11. 11.
    Schneidermeier, T., Hertlein, F., Wolff, C.: Changing paradigm – changing experience? In: Marcus, A. (ed.) DUXU 2014. LNCS, vol. 8517, pp. 371–382. Springer, Cham (2014).  https://doi.org/10.1007/978-3-319-07668-3_36CrossRefGoogle Scholar
  12. 12.
    Gross, S., Bardzell, J., Bardzell, S.: Skeu the evolution: skeuomorphs, style, and the material of tangible interactions. In: Proceedings of the 8th International Conference on Tangible, Embedded and Embodied Interaction, New York, NY, pp. 53–60 (2014)Google Scholar
  13. 13.
    Stickel, C., Pohl, H.-M., Milde, J.-T.: Cutting edge design or a beginner’s mistake? – a semiotic inspection of iOS7 icon design changes. In: Marcus, A. (ed.) DUXU 2014. LNCS, vol. 8518, pp. 358–369. Springer, Cham (2014).  https://doi.org/10.1007/978-3-319-07626-3_33CrossRefGoogle Scholar
  14. 14.
    ISO 9241-210, Ergonomics of human-system interaction, Part 210: Human-centred design for interactive systems. International Organization for Standardization, Geneva (2010)Google Scholar
  15. 15.
    Thüring, M., Mahlke, S.: Usability, aesthetics and emotions in human–technology interaction. Int. J. Psychol. 42(4), 253–264 (2007)CrossRefGoogle Scholar
  16. 16.
    Hassenzahl, M.: The interplay of beauty, goodness, and usability in interactive products. Hum.-Comput. Interact. 19(4), 319–349 (2004)CrossRefGoogle Scholar
  17. 17.
    Hassenzahl, M., Tractinsky, N.: User experience - a research agenda. Behav. Inf. Technol. 25(2), 91–97 (2006)CrossRefGoogle Scholar
  18. 18.
    Minge, M., Thüring, M., Wagner, I., Kuhr, C.V.: The meCUE questionnaire: a modular tool for measuring user experience. In: Soares, M., Falcão, C., Ahram, T.Z. (eds.) Advances in Ergonomics Modeling, Usability & Special Populations, vol. 486, pp. 115–128. Springer International Publishing, Cham (2017)CrossRefGoogle Scholar
  19. 19.
    Minge, M., Thüring, M.: Hedonic and pragmatic halo effects at early stages of User Experience. Int. J. Hum.-Comput. Stud. 109, 13–25 (2018)CrossRefGoogle Scholar
  20. 20.
    Pandab, P.: Ingredients of Good Design: Affordance, Emotion and Complexity (2013). https://www.researchgate.net/publication/266899536
  21. 21.
    Pelet, J.-É., Taieb, B.: From skeuomorphism to flat design: when font and layout of m-commerce websites affect behavioral intentions. In: Martínez-López, F.J., Gázquez-Abad, J.C., Ailawadi, K.L., Yagüe-Guillén, M.J. (eds.) Advances in National Brand and Private Label Marketing, pp. 95–103. Springer International Publishing, Cham (2017)CrossRefGoogle Scholar
  22. 22.
    Jung, H., Wiltse, H., Wiberg, M., Stolterman, E.: Metaphors, materialities, and affordances: Hybrid morphologies in the design of interactive artifacts. Des. Stud. 53, 24–46 (2017)CrossRefGoogle Scholar
  23. 23.
    Norman, D.A.: Emotional Design: Why We Love (or hate) Everyday Things. Basic Books, New York (2005)Google Scholar
  24. 24.
    Pucillo, F., Cascini, G.: A framework for user experience, needs and affordances. Des. Stud. 35(2), 160–179 (2014)CrossRefGoogle Scholar
  25. 25.
    Li, C.F., Shi, H.T., Huang, J.J., Chen, L.Y.: Two typical symbols in human-machine interactive interface. Appl. Mech. Mater. 635–637, 1659–1665 (2014)CrossRefGoogle Scholar
  26. 26.
    Zhang, X., Wang, Q., Shi, Y.: Contrastive analysis on emotional cognition of Skeuomorphic and flat icon. In: Zhao, P., Ouyang, Y., Xu, M., Yang, L., Ouyang, Y. (eds.) Advanced Graphic Communications and Media Technologies, pp. 225–232. Springer Singapore, Singapore (2017)CrossRefGoogle Scholar
  27. 27.
    Page, T.: Skeuomorphism or flat design: future directions in mobile device User Interface (UI) design education. Int. J. Mob. Learn. Organ. 8(2), 130 (2014)CrossRefGoogle Scholar
  28. 28.
    Xi, T., Wu, X.: The influence of different style of icons on users’ visual search in touch screen interface. In: Rebelo, F., Soares, M. (eds.) AHFE 2017. AISC, vol. 588, pp. 222–232. Springer, Cham (2018).  https://doi.org/10.1007/978-3-319-60582-1_22CrossRefGoogle Scholar
  29. 29.
    Prensky, M.: Digital natives, digital immigrants part 1. Horizon 9(5), 1–6 (2001)CrossRefGoogle Scholar
  30. 30.
    Oksman, V.: Young people and seniors in finnish ‘Mobile Information Society’. J. Interact. Media Educ. 2006(2), 2 (2006)CrossRefGoogle Scholar
  31. 31.
    Cho, M., Kwon, S., Na, N., Suk, H.-J., Lee, K.: The elders preference for Skeuomorphism as App icon style. In: Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human Factors in Computing Systems, New York, NY, pp. 899–904 (2015)Google Scholar
  32. 32.
    Blaynee, J., Kreps, D., Kutar, M., Griffiths, M.: Collaborative HCI and UX: longitudinal diary studies as a means of uncovering barriers to digital adoption. In: Proceedings of British HCI 2016 Conference Fusion, Bournemouth, UK (2016)Google Scholar
  33. 33.
    Sha, C., Li, R., Chang, K.: Color affects the usability of smart phone icon for the elderly. In: Duffy, Vincent G. (ed.) DHM 2017. LNCS, vol. 10287, pp. 173–182. Springer, Cham (2017).  https://doi.org/10.1007/978-3-319-58466-9_17CrossRefGoogle Scholar
  34. 34.
    Robbins, W.H.: Design Practices in Mobile User Interface Design. California Polytechnic State University, San Luis Obispo (2014)Google Scholar
  35. 35.
    Cohen, J.: A power primer. Psychol. Bull. 112(1), 155–159 (1992)CrossRefGoogle Scholar
  36. 36.
    Minge, M., Riedel, L., Thüring, M.: Modulare evaluation von Technik. Entwicklung und Validierung des meCUE Fragebogens zur Messung der user experience. In: Grundlagen und Anwendungen der Mensch-Technik-Interaktion. 10. Berliner Werkstatt Mensch-Maschine-Systeme, Berlin, pp. 28–36 (2013)Google Scholar
  37. 37.
    Chen, H., Cohen, P., Chen, S.: How big is a big odds ratio? interpreting the magnitudes of odds ratios in epidemiological studies. Commun. Stat. - Simul. Comput. 39(4), 860–864 (2010)MathSciNetCrossRefGoogle Scholar
  38. 38.
    Mayring, P.: Qualitative content analysis: theoretical foundation, basic procedures and software solution, Klagenfurt (2014)Google Scholar
  39. 39.
    Herzberg, F.: Work and the Nature of Man. Crowell, New York (1966)Google Scholar
  40. 40.
    Tuch, A.N., Hornbæk, K.: Does Herzberg’s notion of hygienes and motivators apply to user experience? ACM Trans. Comput.-Hum. Interact. 22(4), 1–24 (2015)CrossRefGoogle Scholar
  41. 41.
    Backhaus, N.: Nutzervertrauen und – erleben im Kontext technischer Systeme. Technische Universität Berlin (2017)Google Scholar
  42. 42.
    Gilly, M.C., Zeithaml, V.A.: The elderly consumer and adoption of technologies. J. Consum. Res. 12(3), 353–357 (1985)CrossRefGoogle Scholar
  43. 43.
    Pohlmeyer, A.E.: Identifying Attribute Importance in Early Product Development. Technische Universität Berlin (2011)Google Scholar

Copyright information

© Springer International Publishing AG, part of Springer Nature 2018

Authors and Affiliations

  • Nils Backhaus
    • 1
  • Anna Katharina Trapp
    • 2
  • Manfred Thüring
    • 2
  1. 1.Group 2.3 Human Factors, ErgonomicsFederal Institute for Occupational Safety and HealthBerlinGermany
  2. 2.Cognitive Psychology and Cognitive ErgonomicsTechnical University BerlinBerlinGermany

Personalised recommendations