Flat design vs

realistic (“skeuomorphic”) design:

The bibliography

 

This is a list of academic articles, usability testing based publications and expert opinions evaluating flat vs realistic (rich, “skeuomorphic”) design.

 

If you think that we missed something, please let us know!

 

 

2016
 

Isaković, Maša; Sedlar, Urban; Volk, Mojca; Bešter, Janez (2016) Usability pitfalls of diabetes mHealth apps for the elderly, Journal of Diabetes Research, 2016, Article ID 1604609 | DOI: 10.1155/2016/1604609 | PDF

Flat design of mHealth app for elderly users caused usability problems like difficulties in differentiating between a button and an image or text.

 
 

2015

 

Burmistrov, Ivan; Zlokazova, Tatiana; Izmalkova, Anna; Leonova, Anna (2015) Flat design vs traditional design: Comparative experimental study, in: J. Abascal, S. Barbosa, M. Fetter, T. Gross, P. Palanque, M. Winckler (Eds.) Human-Computer Interaction – INTERACT 2015: 15th IFIP TC 13 International Conference (Bamberg, Germany, September 14–18, 2015): Proceedings, Part II (Lecture Notes in Computer Science, 9297), Cham: Springer, 106-114 | DOI: 10.1007/978-3-319-22668-2_10 | PDF

Experimental research showing that flat design means higher cognitive load, longer performance times and more errors. Flat design approach should be reconsidered in favor of the design principles developed over decades of research and practice of HCI and usability engineering.

 

Meyer, Kate (2015) Long-term exposure to flat design: How the trend slowly decreases user efficiency | Link

“Clickable UI elements with absent or weak visual signifiers condition users over time to click and hover uncertainly across pages – reducing efficiency and increasing reliance on contextual cues and immediate click feedback. Young adult users may be better at perceiving subtle clickability clues, but they don’t enjoy click uncertainty any more than other age groups.”

 

Meyer, Kate (2015) The characteristics of minimalism in web design | Link

“Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography.”

 

Dönmez, Onur; Yaman, Fatih; Karasu, Hatice Pelin; Avcı, Elif; Kabakçı Yurdakul, Işıl; Şahin, Yusuf; Akay, Elif (2015) Designing mobile applications for hearing impaired children: Guidelines from the field, in: D. Slykhuis, G. Marks (Eds.) Proceedings of Society for Information Technology & Teacher Education International Conference 2015, SITE 2015 (Las Vegas, NV, United States, March 1-6, 2015), Chesapeake: Association for the Advancement of Computing in Education (AACE), 2962-2964 | PDF

Hearing impaired Turkish schoolchildren experienced difficulties with flat UI. Authors conclude:

Flat design does not work: Project group has initially favoured recently popular flat design paradigm. All images, interactive elements and buttons were designed as flat that had no shadows, highlights or emboss. However flat designed interactive elements did not give the “touchable/clickable” impression to students. <...> Fruitful options for indicating interactive elements were using 3D button styles, shades and highlights.”

 

Chakraborty, Abhishek; Hargude, Akshay Narayan (2015) Dabbawala: Introducing technology to the dabbawalas of Mumbai, in: Proceedings of the 17th International Conference on Human-Computer Interaction with Mobile Devices and Services: Adjunct (MobileHCI’15), New York: ACM, 660-667 | DOI: 10.1145/2786567.2793685 | PDF

Usability evaluation of a mobile app with users (tiffin carriers in Mumbai) revealed that participants had trouble distinguishing between text boxes, labels and buttons. As a result, developers replaced their original flat design with gradients and added skeuomorphism.

 

Cho, Minji; Kwon, Soyoung; Na, Nooree; Suk, Hyeon-Jeong; Lee, KunPyo (2015) 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 (CHI EA ’15), New York: ACM, 899-904 | DOI: 10.1145/2702613.2732887 | PDF

Korean elders preferred skeuomorphic icons over flat ones.

 

Kuan, Pei-Hsuan; Huang, I-Chen; Wang, Yuan; Li, MingZhao; Duh, Henry Been-Lirn (2015) TAS MOVE: The processes of applying flat design in an efficiency require mobile application, in: V. Popovic, A. Blackler, D.-B. Luh, N. Nimkulrat, B. Kraal, Y. Nagai (Eds.) IASDR2015 INTERPLAY Proceedings (2-5 November 2015, Brisbane, Australia), Brisbane: Queensland Univerisity of Technology, 1175-1188 | PDF

Authors describe the process of flat design for a mobile travel app and the results of its usability testing with five users. Most users accomplished the tasks successfully but there were problems differentiating between clickable and non-clickable objects.

 

Lücken, Malte; Bruder, Gerd; Steinicke, Frank (2015) Evaluation von Buttons im Kontext des Gestaltungsstils Flat Design, in: S. Diefenbach, N. Henze, M. Pielot (Hrsg.) Mensch und Computer 2015 – Tagungsband, Stuttgart: Oldenbourg Wissenschaftsverlag, 307-310 | PDF

Experimental study of flat and 3D buttons, with and without border, with and without shadow, showed that button border is important for button clickability and reaction time. There were no other significant differences between different bordered button types. Also a small difference in subjective preference of more flat buttons was found among younger users when compared to users aged 40+.

 

Bunz, Mercedes (2015) School will never end: On infantilization in digital environments – Amplifying empowerment or propagating stupidity?, in: D. M. Berry, M. Dieter (Eds.) Postdigital Aesthetics: Art, Computation and Design, Basingstoke: Palgrave Macmillan, 191-202 | DOI: 10.1057/9781137437204_15 | PDF

Author analyzes recent trend on infantilization and stupiditization of user interfaces taking flat design as an example of this tendency.

 

Hoy, Amy (2015) “Flat design”? Destroying Apple’s legacy… or saving it | Link

“The direction of iOS 7, 8 and 9 is simply wrong. This is not an aesthetic argument. It’s wrong based on 40+ years of computer-human interaction research.”

 

Meyer, Kate (2015) Flat design: Its origins, its problems, and why Flat 2.0 is better for users | Link

“Flat design is a web-design style that became popular around 2012. It is still widely used today, and its overuse can cause serious usability problems. One of the biggest usability issues introduced by flat design is the lack of signifiers on clickable elements. Flat 2.0 may provide a better alternative.”

 

Ash, Tim (2015) An open letter to “minimalist” sites | Link

An article about three harmful trends in modern webdesign: “The lunacy of hidden desktop menus”, “The preposterous return of the splash screen”, “The insanity of ghost buttons”.

 

Johnson, Greg (2015) Flat Design Decreases Usability. So Stop | Link

“Flat design takes everything we’ve learned about affordance over the past 15 years and throws it out the window in the quest for the simplest interface we can pass off as an interface. The problem is that now it all looks like a flat brochure. Where’s the interactive design gone?”

 

Schiff, Eli (2015) Fall of the designer Part I: Fashionable nonsense | Link

“Flat design emerged as a convenient set of training wheels for shortsighted front-end developers and the increasingly disposable visual designers who blindly embraced the aesthetic. However, whether or not flat design would go on to increase interfaces’ enjoyment or usability for users was not a matter of importance for these designers or developers.”

 

Curtis, Ambrose (2015) Rhetoric of Flat Design and Skeuomorphism in Apple’s iOS Graphical User Interface, Master of Arts Thesis, Kingston: University of Rhode Island, vi+59 p. | Link | PDF

A rhetoric analysis of skeuomorphism and flat design in iOS interfaces. Author argues that these two design techniques – which are often argued to be in complete opposition – are actually the same in terms of many of the rhetorical strategies they rely on.

 

Pan, Yue; Stolterman, Erik (2015) What if HCI became a fashion-driven discipline?, interactions, 22, (6), 50-53 | DOI: 10.1145/2828430 | PDF

Pan, Yue; Stolterman, Erik (2015) What if HCI becomes a fashion driven discipline?, in: Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (CHI ’15), New York: ACM, 2565-2568 | DOI: 10.1145/2702123.2702544 | PDF

Flat design is considered a shining example of fashion thinking trend in modern HCI.

 

Treder, Marcin (2015) 5 dangers of flat design | Link

“All 5 dangers might be summed up in a single sentence: Flat Design is hard.”

 
 
2014
 

Schneidermeier, Tim; Hertlein, Franziska; Wolff, Christian (2014) Changing paradigm – Changing experience?: Comparative usability evaluation of Windows 7 and Windows 8, in: Aaron Marcus (Ed.) Design, User Experience, and Usability: Theories, Methods, and Tools for Designing the User Experience: Third International Conference, DUXU 2014, Held as Part of HCI International 2014 (Heraklion, Crete, Greece, June 22-27, 2014): Proceedings, Part I, Cham: Springer, 371-382 (Lecture Notes in Computer Science, 8517) | DOI: 10.1007/978-3-319-07668-3_36 | PDF

A comparative usability study of Windows 8 (flat interface) and its predecessor Windows 7 (rich interface) showed that Windows 7 was superior to Windows 8 in each of three aspects of usability: effectiveness, efficiency and satisfaction.

 

Stickel, Christian; Pohl, Hans-Martin; Milde, Jan-Thorsten (2014) Cutting edge design or a beginner’s mistake? – A semiotic inspection of iOS7 icon design changes, in: Aaron Marcus (Ed.) Design, User Experience, and Usability: Theories, Methods, and Tools for Designing the User Experience: Third International Conference, DUXU 2014, Held as Part of HCI International 2014 (Heraklion, Crete, Greece, June 22-27, 2014): Proceedings, Part II, Cham: Springer,358-369 (Lecture Notes in Computer Science, 8518) | DOI: 10.1007/978-3-319-07626-3_33 | PDF

This work follows an ongoing discussion on the implications of skeuomorphic vs. flat design for interface design. The findings suggest that missing information due to design simplification is a major issue for less user acceptance. This study shows that especially flat design affords a more careful focus on the semantics of the used elements.

 

Oswald, David; Kolb, Steffen (2014) Flat design vs. skeuomorphism – Effects on learnability and image attributions in digital product interfaces, in: Erik Bohemia, Arthur Eger, Wouter Eggink, Ahmed Kovacevic, Brian Parkinson, Wessel Wits (Eds.) Design Education & Human Technology Relations: Proceedings of the 16th International Conference on Engineering and Product Design Education (E&PDE 2014) (University of Twente, The Netherlands, 4-5 September 2014), Westbury: Institution of Engineering Designers, 402-407 | Link | PDF

A longitudinal survey on how the reception of iOS 6 vs iOS 7 intefaces by the university students (aged between 19 and 42) changed over time.

 

Li, Chunfu; Shi, Huiting; Huang, Jingjing; Chen, Luying (2014) Two typical symbols in human-machine interactive interface, Applied Mechanics and Materials, 635-637, 1659-1665 | DOI: 10.4028/www.scientific.net/AMM.635-637.1659 | PDF

Flat icons scored higher on semantic scales such as “timeliness” and “simplicity”, but they fared worse than realistic icons in “identity”, “interest” and “familiarity” aspects.

 

Page, Tom (2014) Skeuomorphism or flat design: Future directions in mobile device User Interface (UI) design education, International Journal of Mobile Learning and Organisation, 8 (2), 130-142 | DOI: 10.1504/IJMLO.2014.062350 | PDF

A questionnaire survey was undertaken by design students to establish their awareness of skeuomorphism and their opinion of its relevance in UI design. The results showed a lack of knowledge about the areas of UI design, but once fully explored they agreed that skeuomorphism is relevant but not as a stand-alone process. However, it has been identified as a design tool that may be used in conjunction with other processes as shown by Google UI design exploring skeuominimalism.

 

Noessel, Chris (2014) Your flat design is convenient for exactly one of us | Link

“Pure, flat design doesn’t just get rid of dead weight. It shifts a burden.”

 

McGough, Oliver (2014) Flat design is going too far | Link

“It just feels as if the internet has lost it’s ‘Wow Factor’. I’m becoming tired of being confronted by the same template site after site. It feels as if every designer is being handed a set of 8-10 WordPress templates to deal with, and adapting sufficiently. Where’s the creativity gone, and when will it return?”

 

Hornor, Tara (2014) Why the flat design trend is hurting usability | Link

“Two large complaints about flat designs are that they are not intuitive and are simply way too confusing. Without the visual cues that help users know which icons are buttons, interfaces and websites leave many users frustrated.”

 

Gross, Shad; Bardzell, Jeffrey; Bardzell, Shaowen (2014) Skeu the evolution: Skeuomorphs, style, and the material of tangible interactions, in: Proceedings of the 8th International Conference on Tangible, Embedded and Embodied Interaction (TEI ’14), New York: ACM, 53-60 | DOI: 10.1145/2540930.2540969 | PDF

We examine skeuomorphs – holdovers from previous functional material requirements – as they pertain to the design of tangible interactions. We offer several definitions of skeuomorphs from different disciplines, seeking to distinguish among different types and uses to explore skeuomorphs’ potential value for designing tangible user interfaces. Through critical analysis of several skeuomorphic designs, both GUI and TUI, we show that skeuomorphs are far from being limited to mere sensual metaphors; some types of interaction can be characterized as skeuomorphic. Finally, we offer three specific ways that skeuomorphic evolution can be present in design, with diverse implications for materiality, user experience, and style.

 

Winkelnkemper, Felix; Keil, Reinhard (2014) Zwischen Design und Flexibilität – Zur Ergonomie des Flat Design, in: M. Koch, A. Butz & J. Schlichter (Hrsg.) Mensch und Computer 2014 – Tagungsband, München: Oldenbourg Wissenschaftsverlag, 2014, 255-264 | PDF

Evaluation of flat design from basic ergonomics and human perception criteria.

 
 
2013
 

Hou, Kai-Chun; Ho, Chun-Heng (2013) A preliminary study on aesthetic of apps icon design, in: Proceedings of 5th International Congress of the International Association of Societies of Design Research 2013 (IASDR Congress 2013) (Tokyo, August 26-30, 2013) | Link | PDF

Contrary to initial expectations of researchers, in this study Taiwanese users preferred skeuomorphic icons over flat ones in 75:25 proportion.

 

Linowski, Jakub (2013) Calling bull$#!%: On flat design | Link

“The fundamental thing about flat design is that it is a restrictive trend that ought to be questioned. Perhaps it’s cheaper to develop, design or maintain, but if taken in its literal interpretation it could result in a lower quality user interface. I believe that being respectful of people’s perception, attention, memory and the human ability to register depth, wins at the end of the day over following any stylistic fad.”

 

Enders, Jessica (2013) Flat UI and forms | Link

“What is simplicity and clarity? It’s the user knowing exactly what to do, and how to do it, with a minimum of effort. Achieving this kind of user experience means finding the right balance – not just going flat for flatness’s sake. When it comes to forms – frustrating experiences even at the best of times – it means knowing that less isn’t always simpler.”

 

Belveal, Roger (2013) Where have all the affordances gone? | Link

“The essence of the graphical user interface was not graphic design by graphic designers for graphic designers. It was to enable and empower users to interact with computers by way of visual representation of the functionality and the means to interact with it.

 

Edwards, James (2013) We can’t rely on color | Link

“What concerns me is that we’re throwing away design components which actually served an important purpose – powerful and well-understood visual cues, like borders, bevels and shadows. A design response to this will inevitably be more reliance on color and typography, and this in turn might lead to more accessibility problems.”

 

Debus, Rick (2013) When flat design falls flat | Link

iOS 7’s and Windows 8’s versions of flat design often sacrifice usability and well-established design best practices for flatness. To be fair, both Apple and Microsoft are listening to criticism.”

 

Bradley, Steven (2013) Flat design done wrong | Link

The Web isn’t Print. It’s funny how we sometimes understand that the web is different from print and sometimes we don’t. Just as we’re realizing that the web doesn’t come with the fixed dimension of print, we’re forgetting that it can offer more than a flat piece of paper. The web has depth. Treating it as though it’s a single flat dimension is just as dishonest as making digital objects look like real world physical ones.”

 
 
2012
 

Svennerberg, Gabriel (2012) Design for clickability | Link

“Making things clickable is done for a single purpose, to get people to click on them. Yet, a lot of times, designers fail to make links or buttons look clickable. In fact, while this might seem like a no-brainer, a lot of sites get it wrong.”

 
 
 
 
© 2016 Lomonosov Moscow State University, Laboratory of Work Psychology