{"status":"ok","message-type":"work","message-version":"1.0.0","message":{"indexed":{"date-parts":[[2026,4,13]],"date-time":"2026-04-13T12:41:53Z","timestamp":1776084113830,"version":"3.50.1"},"reference-count":35,"publisher":"MDPI AG","issue":"2","license":[{"start":{"date-parts":[[2018,6,4]],"date-time":"2018-06-04T00:00:00Z","timestamp":1528070400000},"content-version":"vor","delay-in-days":0,"URL":"https:\/\/creativecommons.org\/licenses\/by\/4.0\/"}],"content-domain":{"domain":[],"crossmark-restriction":false},"short-container-title":["MTI"],"abstract":"<jats:p>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.<\/jats:p>","DOI":"10.3390\/mti2020031","type":"journal-article","created":{"date-parts":[[2018,6,4]],"date-time":"2018-06-04T12:14:30Z","timestamp":1528114470000},"page":"31","update-policy":"https:\/\/doi.org\/10.3390\/mdpi_crossmark_policy","source":"Crossref","is-referenced-by-count":38,"title":["A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective"],"prefix":"10.3390","volume":"2","author":[{"given":"Konstantinos","family":"Spiliotopoulos","sequence":"first","affiliation":[{"name":"School of Science and Technology, Hellenic Open University, Parodos Aristotelous 18, 26335 Patra, Greece"}]},{"ORCID":"https:\/\/orcid.org\/0000-0003-3743-3777","authenticated-orcid":false,"given":"Maria","family":"Rigou","sequence":"additional","affiliation":[{"name":"Department of Computer Engineering and Informatics, University of Patras, 26504 Patras, Greece"}]},{"given":"Spiros","family":"Sirmakessis","sequence":"additional","affiliation":[{"name":"Computer and Informatics Engineering Department, Western Greece University of Applied Sciences (TEI of Western Greece), Meg. Alexandrou 1, 26334 Patra, Greece"}]}],"member":"1968","published-online":{"date-parts":[[2018,6,4]]},"reference":[{"key":"ref_1","first-page":"8","article-title":"The rise of flat design","volume":"36","author":"Johnson","year":"2013","journal-title":"Target Mark."},{"key":"ref_2","doi-asserted-by":"crossref","unstructured":"Basalla, G. (1988). The Evolution of Technology, Cambridge University Press.","DOI":"10.1017\/CBO9781107049864"},{"key":"ref_3","unstructured":"Oxford Dictionary (2014, November 14). Skeuomorph\u2014Definition of Skeuomorph. Available online: https:\/\/en.oxforddictionaries.com\/definition\/skeuomorph."},{"key":"ref_4","unstructured":"Rose, P. (2013). Skeuomorphism as an Affordance: A principle for interaction and user interface design. BSc Dissertation Digital Art and Technology, School of Art & Media, University of Plymouth."},{"key":"ref_5","unstructured":"(2017, November 24). WHATIS Definition: Skeuomorphim. Available online: http:\/\/whatis.techtarget.com\/definition\/skeuomorphism."},{"key":"ref_6","unstructured":"Usability First (2016, December 17). Usability Glossary. Available online: http:\/\/www.usabilityfirst.com\/glossary\/affordance."},{"key":"ref_7","unstructured":"Designmodo (2016, November 19). Skeuomorphism in User Interface Design, What Is It?. Available online: http:\/\/designmodo.com\/skeuomorphism-ui-design\/."},{"key":"ref_8","unstructured":"Gibson, J. (1979). The Ecological Approach to Visual Perception, Houghton Mifflin."},{"key":"ref_9","unstructured":"(2016, February 02). Affordances and Design. Available online: https:\/\/www.jnd.org\/dn.mss\/affordances_and.html."},{"key":"ref_10","unstructured":"(2017, December 15). Apple\u2019s History of Skeuomorphism. Available online: http:\/\/eggfreckles.net\/favorite\/skeuomorphism\/."},{"key":"ref_11","unstructured":"(2016, November 02). XD Essentials: The Importance and Evolution of Icon Design. Available online: https:\/\/blogs.adobe.com\/creativecloud\/xd-essentials-the-importance-and-evolution-of-icon-design."},{"key":"ref_12","unstructured":"Designmodo (2017, January 12). Principles of Flat Design. Available online: http:\/\/designmodo.com\/flat-design-principles\/."},{"key":"ref_13","unstructured":"Turner, A.L. (2016, November 20). The History of Flat Design: Efficiency, Minimalism, Trendiness. Available online: http:\/\/thenextweb.com\/dd\/2014\/03\/19\/history-flat-design-efficiency-minimalism-made-digital-world-flat\/."},{"key":"ref_14","unstructured":"Nielsen Norman Group (2016, November 22). Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users. Available online: https:\/\/www.nngroup.com\/articles\/flat-design."},{"key":"ref_15","unstructured":"Oswald, D., and Kolb, S. (2014, January 4\u20135). Flat design vs. skeuomorphism\u2014Effects on learnability and image attribution in digital product interfaces. Proceedings of the E&PDE 16th International Conference on Engineering and Product Design Education, Enschede, The Netherlands."},{"key":"ref_16","doi-asserted-by":"crossref","first-page":"130","DOI":"10.1504\/IJMLO.2014.062350","article-title":"Skeuomorphism or flat design: Future directions in mobile device user interface (UI) design education","volume":"8","author":"Page","year":"2014","journal-title":"Int. J. Mob. Learn. Organ."},{"key":"ref_17","unstructured":"Lindh, M. (2018, January 7\u201311). Beyond a Skeuomorphic Representation of Subtractive Synthesis. Proceedings of the MILC\u201918, Tokyo, Japan."},{"key":"ref_18","unstructured":"Hou, K.-C., and Ho, C.-H. (2013, January 26\u201330). A preliminary study on aesthetic of apps icon design. Proceedings of the 5th International Congress of the International Association of Societies of Design Research (IASDR Congress 2013), Tokyo, Japan."},{"key":"ref_19","unstructured":"(2018, February 20). Flat Design Done Wrong. Available online: http:\/\/vanseodesign.com\/web-design\/flat-design-done-wrong\/."},{"key":"ref_20","unstructured":"(2016, January 12). When Flat Design Falls Flat. Available online: https:\/\/www.webpagefx.com\/blog\/web-design\/when-flat-design-falls-flat\/."},{"key":"ref_21","doi-asserted-by":"crossref","unstructured":"Gross, S., Bardzell, J., and Bardzell, S. (2014, January 16\u201319). Skeu the evolution: Skeuomorphs, style, and the material of tangible interactions. Proceedings of the 8th International Conference on Tangible, Embedded and Embodied Interaction (TEI 2014), Munich, Germany.","DOI":"10.1145\/2540930.2540969"},{"key":"ref_22","doi-asserted-by":"crossref","first-page":"1659","DOI":"10.4028\/www.scientific.net\/AMM.635-637.1659","article-title":"Two typical symbols in human-machine interactive interface","volume":"635\u2013637","author":"Li","year":"2014","journal-title":"Appl. Mech. Mater."},{"key":"ref_23","doi-asserted-by":"crossref","unstructured":"Marcus, A. (2014). Cutting edge design or a beginner\u2019s mistake?\u2014A semiotic inspection of iOS7 icon design changes. 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, 22\u201327 June 2014), Springer.","DOI":"10.1007\/978-3-319-07668-3"},{"key":"ref_24","doi-asserted-by":"crossref","unstructured":"Abascal, J., Barbosa, S., Fetter, M., Gross, T., Palanque, P., and Winckler, M. (2015). Flat design vs. traditional design: Comparative experimental study. Human-Computer Interaction\u2014INTERACT 2015, Proceedings of the 15th IFIP TC 13 International Conference, Bamberg, Germany, 14\u201318 September 2015, Springer. Part II (Lecture Notes in Computer Science, 9297).","DOI":"10.1007\/978-3-319-22668-2"},{"key":"ref_25","unstructured":"Nielsen Norman Group (2018, January 04). Flat UI Elements Attract Less Attention and Cause Uncertainty. Available online: https:\/\/www.nngroup.com\/articles\/flat-ui-less-attention-cause-uncertainty\/."},{"key":"ref_26","doi-asserted-by":"crossref","unstructured":"Zhao, P., Ouyang, Y., and Xu, M. (2017). Contrastive analysis on emotional cognition of skeuomorphic and flat icon. Advanced Graphic Communications and Media Technologies, Springer.","DOI":"10.1007\/978-981-10-3530-2"},{"key":"ref_27","unstructured":"Nielsen, J. (2016, February 15). Quantitative Studies: How Many Users to Test?. Available online: http:\/\/www.nngroup.com\/articles\/quantitative-studies-how-many-users."},{"key":"ref_28","doi-asserted-by":"crossref","first-page":"379","DOI":"10.3758\/BF03195514","article-title":"Beyond the five-user assumption: Benefits of increased sample sizes in usability testing","volume":"35","author":"Faulkner","year":"2003","journal-title":"Behav. Res. Methods Instrum. Comput."},{"key":"ref_29","first-page":"34","article-title":"How to specify the participant group size for usability studies: A practitioner\u2019s guide","volume":"5","author":"Macefield","year":"2009","journal-title":"J. Usability Stud."},{"key":"ref_30","unstructured":"Tractinsky, N. (2016, February 20). Visual Aesthetics. The Encyclopedia of Human-Computer Interaction. Available online: https:\/\/www.interaction-design.org\/literature\/book\/the-encyclopedia-of-human-computer-interaction-2nd-ed\/visual-aesthetics."},{"key":"ref_31","unstructured":"Norman, D. (2016, February 20). Is Perceived Usability\/Aesthetics More Important than Real. Available online: https:\/\/www.jnd.org\/dn.mss\/is_perceived_usabili.html."},{"key":"ref_32","doi-asserted-by":"crossref","first-page":"253","DOI":"10.1080\/00207590701396674","article-title":"Usability, aesthetics and emotions in human\u2013technology interaction","volume":"42","author":"Mahlke","year":"2007","journal-title":"Int. J. Psychol."},{"key":"ref_33","doi-asserted-by":"crossref","unstructured":"Tullis, T., and Albert, W. (2013). Self-reported metrics. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics, Morgan Kaufmann.","DOI":"10.1016\/B978-0-12-415781-1.00006-6"},{"key":"ref_34","unstructured":"Rybarczyk, Y., Cardoso, T., Rosas, J., and Camarinha-Matos, L. (2014). Body ownership of virtual avatars: An affordance approach of telepresence. Innovative and Creative Developments in Multimodal Interaction Systems, Springer."},{"key":"ref_35","doi-asserted-by":"crossref","unstructured":"Rybarczyk, Y., Coelho, T., Cardoso, T., and De Oliveira, R. (2014). Effect of avatars and viewpoints on performance in virtual world: Efficiency vs. telepresence. EAI Endorsed Trans. Creative Technol.","DOI":"10.4108\/ct.1.1.e4"}],"container-title":["Multimodal Technologies and Interaction"],"original-title":[],"language":"en","link":[{"URL":"https:\/\/www.mdpi.com\/2414-4088\/2\/2\/31\/pdf","content-type":"unspecified","content-version":"vor","intended-application":"similarity-checking"}],"deposited":{"date-parts":[[2025,10,11]],"date-time":"2025-10-11T15:07:16Z","timestamp":1760195236000},"score":1,"resource":{"primary":{"URL":"https:\/\/www.mdpi.com\/2414-4088\/2\/2\/31"}},"subtitle":[],"short-title":[],"issued":{"date-parts":[[2018,6,4]]},"references-count":35,"journal-issue":{"issue":"2","published-online":{"date-parts":[[2018,6]]}},"alternative-id":["mti2020031"],"URL":"https:\/\/doi.org\/10.3390\/mti2020031","relation":{},"ISSN":["2414-4088"],"issn-type":[{"value":"2414-4088","type":"electronic"}],"subject":[],"published":{"date-parts":[[2018,6,4]]}}}