Next Article in Journal
Flow, Staging, Wayfinding, Personalization: Evaluating User Experience with Mobile Museum Narratives
Previous Article in Journal
Seven Years after the Manifesto: Literature Review and Research Directions for Technologies in Animal Computer Interaction
Previous Article in Special Issue
Who Is at Risk for Problematic Video Gaming? Risk Factors in Problematic Video Gaming in Clinically Referred Canadian Children and Adolescents
Article Menu

Export Article

Open AccessArticle
Multimodal Technologies Interact. 2018, 2(2), 31; https://doi.org/10.3390/mti2020031

A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective

1
School of Science and Technology, Hellenic Open University, Parodos Aristotelous 18, 26335 Patra, Greece
2
Department of Computer Engineering and Informatics, University of Patras, 26504 Patras, Greece
3
Computer and Informatics Engineering Department, Western Greece University of Applied Sciences (TEI of Western Greece), Meg. Alexandrou 1, 26334 Patra, Greece
*
Author to whom correspondence should be addressed.
Received: 30 April 2018 / Revised: 22 May 2018 / Accepted: 30 May 2018 / Published: 4 June 2018
(This article belongs to the Special Issue Interactive Web)
Full-Text   |   PDF [3745 KB, uploaded 4 June 2018]   |  

Abstract

A key factor influencing the effectiveness of a user interface is the usability resulting from its design, and the overall experience generated while using it, through any kind of device. The two main design trends that prevail in the field of user interface design is skeuomorphism and flat design. Skeuomorphism was used in UI design long before flat design and it is built upon the notion of metaphors and affordances. Flat design is the main design trend used in most UIs today and, unlike skeuomorphic design, it is considered as a way to explore the digital medium without trying to reproduce the appearance of the physical world. This paper investigates how users perceive the two design approaches at the level of icon design (in terms of icon recognizability, recall and effectiveness) based on series of experiments and on data collected via a Tobii eye tracker. Moreover, the paper poses the question whether users perceive an overall flat design as more aesthetically attractive or more usable than a skeuomorphic equivalent. All tested hypotheses regarding potential effect of design approach on icon recognizability, task completion time, or number of errors were rejected but users perceived flat design as more usable. The last issue considered was how users respond to functionally equivalent flat and skeuomorphic variations of websites when given specific tasks to execute. Most tested hypotheses that website design affects task completion durations, user expected and experienced difficulty, or SUS (System Usability Scale) and meCUE questionnaires scores were rejected but there was a correlation between skeuomorphic design and increased experienced difficulty, as well as design type and SUS scores but not in both websites examined. View Full-Text
Keywords: skeuomorphic design; flat design; eye tracking; effectiveness; recall; metaphor; SUS; meCUE skeuomorphic design; flat design; eye tracking; effectiveness; recall; metaphor; SUS; meCUE
Figures

Figure 1

This is an open access article distributed under the Creative Commons Attribution License which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. (CC BY 4.0).
SciFeed

Share & Cite This Article

MDPI and ACS Style

Spiliotopoulos, K.; Rigou, M.; Sirmakessis, S. A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective. Multimodal Technologies Interact. 2018, 2, 31.

Show more citation formats Show less citations formats

Note that from the first issue of 2016, MDPI journals use article numbers instead of page numbers. See further details here.

Article Metrics

Article Access Statistics

1

Comments

[Return to top]
Multimodal Technologies Interact. EISSN 2414-4088 Published by MDPI AG, Basel, Switzerland RSS E-Mail Table of Contents Alert
Back to Top