MAUU5900 MASTER THESIS in Universal Design of ICT September 2020 < Universal Design & Usability investigation into Flat Design and Skeuomorphic interfaces. Case study of a News website > <John Nwachukwu Okoye> Department of Computer Science Faculty of Technology, Art and Design Preface The completion of this Master thesis is in fulfilment of the requirements of a Master studies in Universal Design of ICT at Oslo Metropolitan University. The thesis aims to investigate the usability and universal design in skeuomorphism and flat design with a case study of a news media website. My sincere gratitude goes to my supervisor Pietro Murano, for his continuous support and valuable comments and guidance. I am also indebted to the participants recruited in this research, for taking out time to be part of this. I am indebted to all the professors and teaching assistants that were instrumental in imparting knowledge into me in the two years of this Master program. I am also thankful for my colleagues and friends I made on this journey. You all have been an encouragement to be better. Finally, I am grateful for the support of my family, which was priceless. I am thankful to God for seeing me through this incredible journey to its successful completion. Oslo, September 2020 Department of Computer Science, Oslomet. John Nwachukwu Okoye ii iii Abstract Skeuomorphism and Flat Design are the predominant user interface design approaches in technology. Skeuomorphism is a design approach that tries to maintain a link between the digital interface components and real-world equivalents. Interface components such as icons and buttons project a resemblance in appearance or function to real-world items by employing metaphors. Flat design, on the other hand, creates interfaces with a flat and 2-dimensional feel, excluding ornamental features and real-world metaphors. These design trends have their strengths and weaknesses. This study puts importance on determining which design approach provides better conditions for higher performance, improved usability and universal design. Ensuring that any user irrespective of impairments can efficiently utilise an interface is paramount to universal design. This study investigated the effects of these design approaches on visually unimpaired users and visually impaired short-sighted user when using a news media website. Two website prototypes with each design approach where designed and used to perform user experiments. Post experiment questionnaires on usability and user satisfaction were conducted, and user perceptions were qualitatively analysed, leading to the statistical analysis of data from the laboratory styled user experients. The difference in performance in terms of task completion time was mostly not significant between both interface types and between both user groups. The flat designed interface faired better in usability and user satisfaction ratings and was also more likely to be attuned to the principles of universal design. After a comprehensive consultation of literary works related to this study, no systematic studies have explored the main design trends regarding how they affect people living with physical impairments and how they can accommodate universal design dictates. Therefore, this is a unique research, and if implemented on a larger scale with further specifications, would be invaluable to advancing usability and universal design in human-computer interaction. iv Table of Contents Preface ........................................................................................................................................ i Abstract...................................................................................................................................... iv Table of Contents ......................................................................................................................... i List of Tables ............................................................................................................................. iv List of Figures ............................................................................................................................. v List of Acronyms ........................................................................................................................ vi 1 Introduction ......................................................................................................................... 1 1.1 Problem Statement ...................................................................................................... 5 1.2 Research Questions .................................................................................................... 7 2 Literature Review ................................................................................................................ 8 2.1 Design ......................................................................................................................... 8 2.1.1 Affordances .......................................................................................................... 9 2.1.2 Metaphors ............................................................................................................. 9 2.2 Skeuomorphism ..........................................................................................................10 2.3 Flat Design .................................................................................................................11 2.4 The Go-Between .........................................................................................................13 2.5 Interface Types ...........................................................................................................14 2.6 Universal Design .........................................................................................................14 2.7 Usability ......................................................................................................................15 2.8 Technology in News Media .........................................................................................16 3 Methodology ......................................................................................................................17 3.1 Prototyping .................................................................................................................19 3.1.1 Skeuomorphic Prototype ......................................................................................22 3.1.2 Flat Prototype ......................................................................................................23 3.2 Measuring Usability .....................................................................................................24 3.3 Experiment Design ......................................................................................................25 3.3.1 Hypothesis ...........................................................................................................25 3.3.2 Users ...................................................................................................................26 3.3.3 Variables ..............................................................................................................26 3.3.4 Apparatus and Materials ......................................................................................27 3.3.5 Procedure ............................................................................................................28 3.3.6 Ethical Considerations .........................................................................................29 3.4 Post Experiment Questionnaire...................................................................................30 4 Results ...............................................................................................................................32 4.1 Quantitative Results ....................................................................................................34 4.1.1 Task 1 ..................................................................................................................34 4.1.2 Task 2 ..................................................................................................................35 4.1.3 Task 3 ..................................................................................................................37 4.1.4 Task 4 ..................................................................................................................38 4.1.5 Task 5 ..................................................................................................................39 4.1.6 Task 6 ..................................................................................................................40 4.1.7 Question 1 ...........................................................................................................41 4.1.8 Question 2 ...........................................................................................................43 4.1.9 Question 3 ...........................................................................................................44 4.1.10 Question 4 ...........................................................................................................45 4.1.11 Question 5 ...........................................................................................................45 4.1.12 Question 6 ...........................................................................................................47