The impact of the visual perception of shaded and flat objects on the usability of almost flat user interfaces Kevin O’Connell MSc User Experience Design Dún Laoghaire Institute of Art, Design and Technology Supervisors: Dr. Hilary Kenna, Dr. Andrew Errity April 2018 Declaration Statement I hereby certify that the material, which I now submit for assessment on the programme of study leading to the award of Master of Science, is entirely my own work and has not been taken from the work of others except to the extent of such work which has been cited and acknowledged within the text of my own work. No portion of the work contained in this thesis has been submitted in support of an application for another degree or qualification to this or any other institute. __________________________ Kevin O’Connell 30 April, 2018 i Acknowledgments I would like to thank my family for their support during the many months of work to produce this research. Many thanks to Joe O’Donaghue, who assisted me with the JavaScript component of the web application. I could not have completed the project without his valuable input. Thanks to Pat Hamilton and Peter Johnson for proofreading my work. Thanks to friends who assisted me with early user testing, and thanks to Sue Reardon who assisted me with IADT testing. Finally, the support provided by my project supervisors, and IADT staff, was unparalleled. The measured input of Hilary Kenna and Andrew Errity refined my approach to the research question yet expanded the scope to provide for what was to be a highly challenging and rewarding research experience. ii Abstract Studies into the visual design of user interfaces indicate that the dilution of signifiers on almost flat interfaces can lead to ‘click uncertainty’ (Meyer, 2015). This research study examines the impact of the visual perception of shaded and flat objects (signifiers) on the usability of almost flat user interfaces. Specifically, the study looks to answer the question “Can the use of shaded objects improve the visual perception of perceived affordances (signifiers) in almost flat user interfaces?” Prior research details the perception of shape from shading which suggests that the application of shading can enhance the clickability, discoverability and findability of user interface elements on almost flat interfaces. These studies fall short in the investigation of visual perception with respect to higher fidelity interfaces that utilise Gestalt visual design principles. This thesis details a methodology for the examination of visual perception of perceived affordances in an almost flat user interface. The project extended prior research through the use of A/B testing of two web sites. The sites tested the visual perception of shaded (A test) and flat (B test) objects (signifiers). Thirty six participants were recruited for between-subjects testing. Testing measured response times between shaded (A test) and flat (B test) target identification. The test artefacts utilised Gestalt visual design guidelines, coupled with gamification principles. The results suggest that there is no significant difference in response times between shaded and flat target identification, which would indicate that shaded targets do not improve visual perception of perceived affordances in almost flat user interfaces. This contradicts prior research by Creager (2017), where results from experiments revealed that shaded objects had the benefit of high findability in almost flat environments, and that convex gradients consistently conveyed a sense of depth and a raised three-dimensional shape, which was effective for reliably signifying clickability. However, the use of gamification principles was generally positively favoured by the test participants. iii Table of Contents 1 Introduction ........................................................................................................................................ 1 1.1 Keywords ..................................................................................................................................... 1 2 Literature review ................................................................................................................................. 2 2.1 Introduction ................................................................................................................................ 2 2.2 Visual Perception ....................................................................................................................... 2 2.2.1 Ganzfeld and visual perception ....................................................................................... 2 2.2.2 Gestalt .................................................................................................................................. 3 2.3 Affordances and Signifiers ........................................................................................................ 9 2.4 Skeuomorphism ........................................................................................................................ 11 2.5 The historical basis of Flat and Almost Flat design ............................................................ 15 2.5.1 Modernism ........................................................................................................................ 15 2.5.2 International Typographic Style (Swiss Style) .............................................................. 17 2.5.3 Pioneers and influences of the movement ................................................................... 17 2.5.4 How Modernism and International Typographic Style influenced contemporary user interface design ......................................................................................................................... 22 2.6 Flat design ................................................................................................................................. 23 2.7 Almost flat design/Skeuominimalism ................................................................................... 26 2.8 Summary of existing research ................................................................................................. 28 2.9 Findability, clickability and discoverability: use of shaded gradients ................................ 29 2.10 Research problem identified ................................................................................................... 29 2.10.1 Overview ........................................................................................................................... 29 2.10.2 Perception of shape from shading ................................................................................ 30 2.10.3 Perceptual biases in the interpretation of 3D shape from shading .......................... 33 2.10.4 Toward Understanding the Findability and Discoverability of Shading Gradients in Almost-Flat Design .......................................................................................................................... 36 2.10.5 Understanding the Findability and Perceived Clickability of Shaded and Flat Objects in Almost-flat Interfaces ................................................................................................... 37 2.11 Research Question ................................................................................................................... 40 3 Research methodology ..................................................................................................................... 41 3.1 Colour and contrast ................................................................................................................. 41 3.2 Targets and distractors ............................................................................................................ 42 3.3 Procedure .................................................................................................................................. 44 3.4 Required prototype(s), techniques and technologies used to prototype .......................... 44 3.4.1 Investigation of existing reaction games ....................................................................... 44 iv 3.4.2 Techniques and technologies used to prototype ......................................................... 45 3.4.3 Choice of form factor...................................................................................................... 46 3.4.4 Advantages and disadvantages of each form factor.................................................... 46 3.5 Design methodology ................................................................................................................ 47 3.6 Testing methodology ............................................................................................................... 48 3.6.1 Testing during application development ...................................................................... 48 3.6.2 Testing for the experiment: recruiting testers, ages and capabilities ........................ 49 3.6.3 Screening test candidates ................................................................................................ 49 3.6.4 Conducting the tests ........................................................................................................ 49 3.6.5 Environmental setup ....................................................................................................... 50 3.6.6 Data collection.................................................................................................................