Linköping University | Department of Computer Science Master thesis, 30 ECTS | Datateknik 2017 | LIU-IDA/LITH-EX-A--17/038--SE Designing for usability of 3D configuration in E-commerce – Interactive design of 3D in web applications Design för användbarhet i 3D-konfigurering inom e- handel Alfred Axelsson Supervisor : Anders Fröberg Examiner : Erik Berglund Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och admin- istrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sam- manhang som är kränkande för upphovsmannenslitterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/. Copyright The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circum- stances. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con- sent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping Uni- versity Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. c Alfred Axelsson Abstract Mass production of consumer products is both wasteful and limit the consumers’ power to influence the design of what they are buying. When shopping for a product, the customer must choose between a range of specific products with limited variations. What if the customer could make all the design choices, creating and buying the product according to his or her own needs? A 3D product generator holding a configurable model of a product was created to re- place static content in online stores and give creative power to customers. This work aimed at creating an effective 3D product generator by evaluating how users experience the de- sign of and interaction with it, and finding general design goals when introducing interac- tive 3D content in static 2D environments. A prototype of a 3D product generator in a generic online storefront was implemented in two iterations, improving on and evaluating the design through usability testing. The evaluation of the final prototype suggested that the interface was indeed effective in both design and interaction. This work concludes that user feedback is crucial to creating a successful user experience, which in turn is important when creating interfaces for product configuration. Acknowledgments First, I would like to thank everyone at SkyMaker AB for supporting me, with special shout- outs to my mentor Jonathan Brandtberg for his help throughout the project and our discus- sions, and to Kristofer Skyttner for giving me this opportunity. Furthermore, I want to thank Erik Berglund and Anders Fröberg for their supervision and help in completing this thesis. I also want to thank everyone who helped me by participating in the usability tests. This could not have been done without your help, thank you. Finally, I want to thank my family and the friends who have supported me both during my work on this project, but also during the entirety of my time at Linköping University. iv Contents Abstract iii Acknowledgments iv Contents v List of Figures vii List of Tables viii 1 Introduction 1 1.1 Aim............................................ 1 1.2 Research questions . 1 1.3 Delimitations . 2 1.4 Project Context . 2 2 Theory 3 2.1 Web design practices . 3 2.1.1 Interface design . 4 2.1.2 Visual Hierarchy . 4 2.1.3 2D vs 3D . 5 2.2 Usability testing . 6 2.2.1 Planning before testing . 6 2.2.2 Collecting and analyzing the results . 8 2.3 Focus groups . 10 2.4 Confidence interval . 10 3 Method 12 3.1 Implementation . 13 3.1.1 Prototyping . 13 3.1.2 Iterating the design with usability testing . 13 3.1.3 Formative evaluation of the prototype interface . 14 3.2 Evaluation . 16 3.2.1 Recruiting participants . 16 3.2.2 Test session . 16 3.2.3 Data collection and analysis . 17 3.3 Motivation . 17 4 Results 18 4.1 Implementation . 18 4.1.1 Wireframes . 18 4.1.2 Initial prototype . 19 4.1.3 Formative usability test . 21 v 4.1.4 Final prototype . 22 4.2 Evaluation . 24 5 Discussion 27 5.1 Results . 27 5.1.1 Prototype . 27 5.1.2 Formative results . 28 5.1.3 Summative results . 28 5.2 Method . 28 5.2.1 An iterative process . 29 5.2.2 Usability testing . 29 5.2.3 Sources of information . 30 5.3 The work in a wider context . 31 5.3.1 Societal aspects . 31 5.3.2 Ethical aspects . 31 6 Conclusion 32 6.1 Future work . 33 Bibliography 34 A Appendix A 36 A.1 Wireframes . 36 B Appendix B 40 B.1 Test plan formative test . 40 B.2 Test plan summative test . 43 C Appendix C 45 C.1 Prototype 1 . 45 D Appendix D 48 D.1 Prototype 2 . 48 List of Figures 3.1 Overview of the method . 12 4.1 Final Wireframe . 19 4.2 Screenshots of the first prototype (detailed images can be found in appendix C) . 20 4.3 Task times from the formative study . 21 4.4 Task success from the formative study . 22 4.5 Screenshots of the final prototype (detailed images can be found in appendix D) . 24 4.6 Average number of errors per task from summative study . 25 4.7 Percentage of users that made an error per task from summative study . 26 A.1 First wireframe . 37 A.2 Second wireframe . 38 A.3 Final Wireframe in more detail . 39 C.1 Screenshot of Prototype 1 (initial screen) . 46 C.2 Screenshot of Prototype 1 (modified screen) . 47 D.1 Screenshot of Prototype 2 (initial screen) . 49 D.2 Screenshot of Prototype 2 (modified screen) . 50 vii List of Tables 3.1 Characteristics of participants in formative study . 15 3.2 Characteristics of participants in validation test . 16 4.1 List of issues found during the formative tests . 23 4.2 Actual characteristics of participants in the summative test . 25 viii 1 Introduction Millions of users interact with web applications every day. Websites are designed with a purpose and are adapted to the content, the functionality and hopefully, its users. User Ex- perience (UX) is the experience of this interaction. T. Tullis and B. Albert [19] believe that the user experience is defined by three characteristics. These can be summarized as the observ- able or measurable experience of a user interacting with an interface. Interface design, how interaction is performed and how the system responds are some aspects of creating the user experience. When shopping for a product online, the customer has to choose between a range of spe- cific products with various features and designs as well as different prices. Then each prod- uct might come with varied measurements and colors. But the choices are still limited to the range of products the producer chose to manufacture. What if the customer could make all these choices him- or herself using a 3D product generator? First choosing a base product, then designing it using the available parameters and finally adding extra features to create the exact product that he or she was looking for. To enable this, we must make sure that it is easy for the customer to understand how to interact with the product generator and utilize all its features. 1.1 Aim This work focuses on evaluating how users experience the design of and interaction with a 3D product generator in an online store. The goal is to create an effective user interface for the generator by iterating the design with usability testing. The process aims at finding general design goals when creating usable interfaces and introducing interactive 3D content in static 2D environments. 1.2 Research questions By implementing a design based on research and then iterate it with usability tests the design will be evaluated and used to answer the following research question. 1 1.3. Delimitations 1. How should the interaction with a 3D product generator in a web application be de- signed to achieve high effectiveness in terms of usability, allowing users to easily reach their goals and complete their tasks? 1.3 Delimitations To limit the scope of this work, the following delimitations have been defined. This allow for a more precise focus and help the decision process during implementation.