DEGREE PROJECT IN TECHNOLOGY, FIRST CYCLE, 15 CREDITS STOCKHOLM, SWEDEN 2018 The Role of User Interface Design in a Digital Document Reader NAM PHAM AND YUROU ZHAO KTH ROYAL INSTITUTE OF TECHNOLOGY SCHOOL OF ELECTRICAL ENGINEERING AND COMPUTER SCIENCE The Role of User Interface Design in a Digital Document Reader Bachelor Degree Project in User Interface Design Nam Pham and Yurou Zhao 2 Abstract User Interface Design is the center concept of this thesis. It was used throughout this thesis in order to remedy the design issue of a product called Loredge. Loredge was a digital document reader that contained a Library page with a very simple design. The ultimate goal was to create design suggestions that provides users with a lot of convenience in navigating items for Loredge’s Library page. The solution was proposed by introducing the design process and the concept of Human-Centered Design, which were the essentials in compliance with Loredge users’ desires. The end results demonstrated some interesting facts about users that researchers did not think about at the beginning, which was very helpful to recognize what users want the most for themselves. Despite some predictable answers, the outcome indeed gave the problem a potential solution. The solution was to introduce categories/groups to users and design for menus and buttons that helps user filter out the items they want to navigate. This was implemented to digital mock-ups using a wireframing tool called Axure. The mock-ups could be found within this degree project. Keywords: navigating experience, digital document reader, human-centered design, human-computer interaction, front-end development, user interface design, user experience, design analysis, user research, design process, efficiency analysis, Axure 3 4 Sammanfattning Användargränssnitt är centrumkonceptet för denna avhandling. Det användes under hela denna avhandling för att avhjälpa designproblemet av en produkt som heter Loredge. Loredge var en digital dokumentläsare som innehöll en bibliotekssida med en mycket enkel design. Det ultimata målet var att skapa designförslag som ger användarna mycket bekvämlighet i navigeringsdokument för Loredges bibliotekssida. Lösningen föreslogs genom att introducera designprocessen och konceptet Human-Centered Design, vilka var nödvändiga i enlighet med Loredge-användarnas önskemål. Slutresultatet visade några intressanta fakta om användare som forskare inte tänkte på i början, vilket var till stor hjälp för att känna igen vad användarna vill ha mest för sig själva. Trots vissa förutsägbara svar gav utfallet verkligen problemet en potentiell lösning. Lösningen var att introducera kategorier / grupper till användare och design för menyer och knappar som hjälper användaren att filtrera ut de dokument som de vill navigera. Detta implementerades för digital mock-ups med hjälp av ett wireframing verktyg som heter Axure. Mock-ups kunde hittas inom detta examensarbete. Nyckelord: Navigationserfarenhet, digital dokumentläsare, human-centrerad design, interaktion mellan människor och datorer, front-end-utveckling, användargränssnitt, användarupplevelse, designanalys, användarforskning, designprocess, effektivitetsanalys, Axure 5 Glossary pdf Portable Document Format ACM Association for Computing Machinery GUI Graphical User Interface HCI Human-Computer Interaction HCD Human-centered Design KTH Kungliga Tekniska Högskola (Royal Institute of Technology Sweden) TUI Text-based User Interface UI User Interface URL Uniform Resource Locator 6 Table of Contents Abstract ...................................................................................................... 3 1. Introduction ......................................................................................... 9 1.1 Background ........................................................................................................................................................................ 9 1.2 Problem .............................................................................................................................................................................. 11 1.3 Purposes and Goals ...................................................................................................................................................... 11 1.4 Benefits, Ethics, and Sustainability ...................................................................................................................... 11 1.5 Methods .............................................................................................................................................................................. 12 1.6 Stakeholders ..................................................................................................................................................................... 13 1.7 Delimitations ................................................................................................................................................................... 13 1.8 Outline ................................................................................................................................................................................ 14 2. Theoretical Background ....................................................................... 15 2.1 Human-Centered Design ........................................................................................................................................... 15 2.2 Navigation Experience ................................................................................................................................................ 15 2.3 Designing for People: The Five Commandments .......................................................................................... 16 2.4 UI Design Principles .................................................................................................................................................... 16 2.5 User Research and Requirements Analysis ..................................................................................................... 17 2.5.1 Direct Methods ............................................................................................................................................................... 17 2.5.2 Indirect Methods ...................................................................................................................................................... 18 2.6 Direct Manipulation ..................................................................................................................................................... 19 3. Design Process ..................................................................................... 21 3.1 Defining the Problems ................................................................................................................................................ 21 3.2 User Research (Online Questionnaire) on Some Detailed Choices ..................................................... 22 3.3 Layout Prototyping ....................................................................................................................................................... 23 3.4 First Iteration of Usability Testing ....................................................................................................................... 23 3.5 Second Iteration of Usability Testing .................................................................................................................. 23 4. Developments ..................................................................................... 25 4.1 End-users’ Questionnaire on Some Detailed Choices ................................................................................ 25 4.2 First Iteration of Usability Testing ....................................................................................................................... 29 4.3 Second Iteration of Usability Testing ................................................................................................................. 37 5. Results ................................................................................................ 43 7 5.1 End-users’ Feedback on Online Questionnaire ............................................................................................. 43 5.2 Outcome of First Usability Testing ....................................................................................................................... 46 5.3 Outcome of Second Usability Testing ................................................................................................................. 47 6. Conclusion .......................................................................................... 49 References ................................................................................................ 53 Appendix 1 ................................................................................................. 55 8 1. Introduction This bachelor degree project consists of two students enrolled in the programme of Information and Communication Technology at Royal Institute of Technology Sweden (KTH), in cooperation with a start-up company called Loredge to deliver a suggestion for their product, which is a digital document reader. The students could be considered as the researchers for this project and they contributed to this thesis with equal effort. The degree project was carried on under the supervision of two lecturers at