Affordances and Metaphors Revisited: Testing Flat vs. Skeuomorph Design with Digital Natives and Digital Immigrants

The arguments about skeuomorph versus flat design have so far been based on comparatively lit-tle evidence and were largely dominated by strong opinions voiced in informal online media. This paper presents an a/b-study to assess the strengths and weaknesses of these design approaches with the distinct user groups applying them. First results gave no clear indications of which ap-proach could be considered the best. Surprisingly, however, older and inexperienced users experi-enced more problems using “naturalistic” skeuomorph interfaces than abstract flat interfaces. As a result, the concept of skeuomorph design enabling the use of real-world knowledge to enhance novice user’s learnability is cast into doubt.

Content

Author and article information

Contributors

David Oswald

Conference

Publication date: July 2018

Publication date (Print): July 2018

Pages: 1-11

Affiliations

[1 ] Hochschule für Gestaltung

Schwäbisch Gmünd, Germany

Article

DOI: 10.14236/ewic/HCI2018.57

SO-VID: 61b4ffde-ca3a-48f1-a035-b718b53849ab

License:

This work is licensed under a Creative Commons Attribution 4.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/

Conference name: Proceedings of the 32nd International BCS Human Computer Interaction Conference

Conference acronym: HCI

Conference number: 32

Conference location: Belfast, UK

Conference date: 4 - 6 July 2018

Conference sponsor: Electronic Workshops in Computing (eWiC)

Conference theme: Human Computer Interaction Conference

History

Product

1477-9358 BCS Learning & Development

Self URI (article page): https://www.scienceopen.com/hosted-document?doi=10.14236/ewic/HCI2018.57

Self URI (journal page): https://ewic.bcs.org/

REFERENCES

Apple 2008 iPhone Human Interface Guide-lines
Apple 2013 iOS7 Human Interface Guide-lines
N. Bilton 2013 The Flattening of Design http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design April 9 2018
A. F. Blackwell 2006 The reification of meta-phor as a design tool, ACM Transactions on Computer-Human Interaction, 13, 4 490 530
B. Buxton 1990 The Natural Language of Interaction: A Perspective on Non-Verbal Dia-logues In Brenda Laurel (ed.). The Art of Hu-man-Computer Interface Design, Addison-Wesley, Reading 405 416
I. BurmistrovT. ZlokazovaA. IzmalkovaA. Leonova 2015 Flat Design vs Traditional Design: Comparative Experimental Study Hu-man-Computer Interaction – INTERACT 2015, Springer 106 114
L. Clum 2013 A Look at Flat Design and Why It’s Significant http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant/ April 9 2018
M. ChoS. KwonN. NaK. LeeH.J. Suk 2015 The Elders Preference for Skeu-omorphism as App Icon Style Proceedings of ACM Conference on Human Factors in Com-puting Systems CHI EA ’15 899 904
J.H. CreagerD.J. Gillan 2016 Toward Un-derstanding the Findability and Discover-ability of Shading Gradients in Almost-Flat Design Proceedings of the Human Factors and Ergo-nomics Society 2016 Annual Meeting 339 343
Sean Dexter. 2017 Flat Design: Why you should question Nielsen Norman’s research on the trendy design style http://medium.com/@seandexter1/flat-design-why-you-should-question-nielsen-normans-research-on-the-trendy-design-style-39a991517e02 April 9 2018
W. Gaver 1991 Technology affordances Proceedings of the SIGCHI conference on Human factors in computing systems 79 84
J.J. Gibson 1979 The Ecological Approach to Visual Perception. Houghton Mifflin
R. Keller 1998 A Theory of Linguistic Signs, Oxford University Press, New York
H. JungH. WiltseM. WibergE. Stolterman 2017 Metaphors, materialities, and affordanc-es: Hybrid morphologies in the design of inter-active artifacts Design Studies 53 24 46
Lomonosov Moscow State University Labora-tory of Work Psychology 2018 Flat design vs realistic (―skeuomorphic‖) design: The bibliog-raphy http://www.flatisbad.com April 9 2018
M. LückenG. BruderF. Steinicke 2015 Evaluation von Buttons im Kontext des Gestal-tungsstils Flat Design Mensch und Computer 2015 Tagungsband 307 310
K. Meyer 2017 Flat UI Elements Attract Less Attention and Cause Uncertainty http://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty April 9 2018
C. Morris 1971 Writings on a General Theory of Signs, Mouton, The Hague
D. Norman 1988 Psychology of Everyday Things. Basic Books
D. Norman 1999 Affordance, conventions, and design Interactions 6, 3 38 43
D. Norman 2008 Signifiers, not Affordances. ACM Interactions, 15, 6
D. Oswald 2013 Dynamic Sense-Making in Use Processes of Digital Products – A Semiotic Approach to User Interface Design Proceed-ings of AISDR 2013, 5th International Con-gress of International Association of Societies of Design Research
C.S. Peirce 1956 Logic as Semiotic: The Theory of Signs, In The Philosophy of Peirce: Selected Writings, Routledge & Kegan Paul London 98 119
M. Prensky 2001 Digital Natives, Digital Im-migrants, On the Horizon, 9, 5, MCB Univ. Press
J. Raskin 1994 Intuitive Equals Familiar Communications of the ACM. 37, 9 September 1994 17
T. SchneidermeierF. HertleinC. Wolff 2014 Changing Paradigm – Changing Expe-rience? Comparative Usability Evaluation of Windows 7 and Windows 8 Proceedings of Design, User Experience, and Usability DUXU 2014 Springer 371 382
B.F. Skinner 1953 Science And Human Be-havior
C. StickelH. PohlJ. Milde 2014 Cutting Edge Design or a Beginner’s Mistake? A Semi-otic Inspection of iOS7 Icon Design Changes Proceedings of Design, User Experience, and Usability DUXU 2014 Springer 358 369
D. WigdorD. Wixon 2014 Brave NUI World: Designing Natural User Interfaces for Touch and Gesture, Elsevier Science, Saint Louis

Comments

Comment on this article

[1] Apple 2008 iPhone Human Interface Guide-lines

[2] Apple 2013 iOS7 Human Interface Guide-lines

[3] N. Bilton 2013 The Flattening of Design http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design April 9 2018

[4] A. F. Blackwell 2006 The reification of meta-phor as a design tool, ACM Transactions on Computer-Human Interaction, 13, 4 490 530

[5] B. Buxton 1990 The Natural Language of Interaction: A Perspective on Non-Verbal Dia-logues In Brenda Laurel (ed.). The Art of Hu-man-Computer Interface Design, Addison-Wesley, Reading 405 416

[6] I. BurmistrovT. ZlokazovaA. IzmalkovaA. Leonova 2015 Flat Design vs Traditional Design: Comparative Experimental Study Hu-man-Computer Interaction – INTERACT 2015, Springer 106 114

[7] L. Clum 2013 A Look at Flat Design and Why It’s Significant http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant/ April 9 2018

[8] M. ChoS. KwonN. NaK. LeeH.J. Suk 2015 The Elders Preference for Skeu-omorphism as App Icon Style Proceedings of ACM Conference on Human Factors in Com-puting Systems CHI EA ’15 899 904

[9] J.H. CreagerD.J. Gillan 2016 Toward Un-derstanding the Findability and Discover-ability of Shading Gradients in Almost-Flat Design Proceedings of the Human Factors and Ergo-nomics Society 2016 Annual Meeting 339 343

[10] Sean Dexter. 2017 Flat Design: Why you should question Nielsen Norman’s research on the trendy design style http://medium.com/@seandexter1/flat-design-why-you-should-question-nielsen-normans-research-on-the-trendy-design-style-39a991517e02 April 9 2018

[11] W. Gaver 1991 Technology affordances Proceedings of the SIGCHI conference on Human factors in computing systems 79 84

[12] J.J. Gibson 1979 The Ecological Approach to Visual Perception. Houghton Mifflin

[13] R. Keller 1998 A Theory of Linguistic Signs, Oxford University Press, New York

[14] H. JungH. WiltseM. WibergE. Stolterman 2017 Metaphors, materialities, and affordanc-es: Hybrid morphologies in the design of inter-active artifacts Design Studies 53 24 46

[15] Lomonosov Moscow State University Labora-tory of Work Psychology 2018 Flat design vs realistic (―skeuomorphic‖) design: The bibliog-raphy http://www.flatisbad.com April 9 2018

[16] M. LückenG. BruderF. Steinicke 2015 Evaluation von Buttons im Kontext des Gestal-tungsstils Flat Design Mensch und Computer 2015 Tagungsband 307 310

[17] K. Meyer 2017 Flat UI Elements Attract Less Attention and Cause Uncertainty http://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty April 9 2018

[18] C. Morris 1971 Writings on a General Theory of Signs, Mouton, The Hague

[19] D. Norman 1988 Psychology of Everyday Things. Basic Books

[20] D. Norman 1999 Affordance, conventions, and design Interactions 6, 3 38 43

[21] D. Norman 2008 Signifiers, not Affordances. ACM Interactions, 15, 6

[22] D. Oswald 2013 Dynamic Sense-Making in Use Processes of Digital Products – A Semiotic Approach to User Interface Design Proceed-ings of AISDR 2013, 5th International Con-gress of International Association of Societies of Design Research

[23] C.S. Peirce 1956 Logic as Semiotic: The Theory of Signs, In The Philosophy of Peirce: Selected Writings, Routledge & Kegan Paul London 98 119

[24] M. Prensky 2001 Digital Natives, Digital Im-migrants, On the Horizon, 9, 5, MCB Univ. Press

[25] J. Raskin 1994 Intuitive Equals Familiar Communications of the ACM. 37, 9 September 1994 17

[26] T. SchneidermeierF. HertleinC. Wolff 2014 Changing Paradigm – Changing Expe-rience? Comparative Usability Evaluation of Windows 7 and Windows 8 Proceedings of Design, User Experience, and Usability DUXU 2014 Springer 371 382

[27] B.F. Skinner 1953 Science And Human Be-havior

[28] C. StickelH. PohlJ. Milde 2014 Cutting Edge Design or a Beginner’s Mistake? A Semi-otic Inspection of iOS7 Icon Design Changes Proceedings of Design, User Experience, and Usability DUXU 2014 Springer 358 369

[29] D. WigdorD. Wixon 2014 Brave NUI World: Designing Natural User Interfaces for Touch and Gesture, Elsevier Science, Saint Louis

Celebrating 65 years of The Computer Journal - free-to-read perspectives - bcs.org/tcj65