Research on the Perception of Progress Bar Distortions Bachelor’s Thesis Marek Augustin Masaryk University Faculty of Informatics Brno, Fall 2018 These pages are where the Statement of an Author and the official signed assignment are located in the printed version of the document. These pages are where the Statement of an Author and the official signed assignment are located in the printed version of the document. Declaration Hereby I declare that this thesis is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Marek Augustin Advisor: Mgr. Marek Žuži Aknowledgement I would like to thank my supervisor Mgr. Marek Žuži for all the advices, friendliness and sup- port he gave me during the whole semester I was preparing this thesis. I would also like to thank Mgr. Vojtěch Juřík for all the time he dedicated to giving me an insight to the basics of psychol- ogy research. Abstract In today’s software, the usage of progress phenomenon of “second shown progress bar” bars (of any type) is very high and users come has been discovered. across them everywhere, from their personal computers to public places, like ATMs. Some of the processes that are being visualized by the progress bars consist of multiple subpro- cesses, of which some might have a variable speed that may cause decelerations or stops of the progress bar. This work aims to broaden the research made by Harrison et al. about progress bar distor- tions that can reduce an overall percieved time of progress bar loading. This has been done by designing and creating a website with questionnaire, and then conducting two sep- arate experiments (laboratory and public). Based on collected data, the work describes mutual relationships between different dis- torting functions, and rates their strength to reduce the perceived time. In addition, a new Keywords human—computer interaction, design, user experience, progress bar, distortions, Peak- and-End effect Contents 1 Introduction 13 2.2.3.4 Wireframes 31 2 Background 17 2.2.3.5 High-Fidelity Prototype 34 2.1 Human—Computer Testing 34 Interaction 18 2.3 Visualizations 36 2.1.1 Human 18 2.3.1 Different Ways to Visualize 2.1.1.1 Input-Output Channels 18 the Progress of a Process 36 2.1.1.2 Human Memory 20 2.3.2 Types of Progress Bars 38 2.1.1.3 Thinking 21 2.3.2.1 Bar Type 38 2.1.1.4 Emotion 22 2.3.2.2 Circular Type 39 2.1.2 Computer 23 2.3.2.3 Animated Type 39 2.1.2.1 Input Devices 23 2.3.2.4 Segmented type 40 2.1.2.2 Output Devices 24 2.3.2.5 In combination with 2.2 User Experience 25 other elements 40 2.2.1 UX Roles 25 2.3.3 Distortions on Progress Bars (Existing Research) 40 2.2.2 Usability 26 3 Methodology 45 2.2.2.1 Importance of Usability 27 3.1 Concept 46 2.2.3 UX Lifecycle 28 3.1.1 Problems with “Rethinking 2.2.3.1 Creating Concept 29 the Progress Bar” by Harrison et al. 46 2.2.3.2 Researching 30 3.1.2 Broadening the Research 2.2.3.3 Sketching 31 and Conceptual Changes 47 3.1.3 Expectations 52 4.2 Public results 82 3.2 Design 54 4.2.1 General Evaluation 82 3.2.1 Sketching 54 4.2.2 The Interindividual Differences 3.2.2 Wireframes 56 Among Tested Public Sample 87 3.2.3 High-Fidelity Prototype 58 4.2.2.1 Specialization 88 3.3 Implementation 62 4.2.2.2 Gender 88 3.3.1 The Guide Part 63 4.2.2.3 Age 89 3.3.2 The Comparison Part 64 4.3 Discussion 90 3.4 Testing 66 5 Conclusion 95 3.4.1 Pilot Testing 66 5.1 Future work 98 3.4.2 Main Testing 67 5.2 Sources 100 3.4.2.1 Laboratory Testing 67 5.3 Archive 103 3.4.2.2 Public Testing 68 4 Results 73 4.1 Laboratory Results 74 4.1.1 General Evaluation 74 4.1.2 The Interindividual Differences Among Tested Laboratory Sample 79 4.1.2.1 Specialization 80 4.1.2.2 Gender 80 12 1 Introduction1 13 User experience, as a part of Human—Com- which results in pausing or decelerations on puter Interaction, is a fast expanding area progress bars. According to Harrison et al. including social and cognitive sciences to- [1], these effects tend to make progress bar gether with design and other fields. It focuses be perceived as longer then if the progress on simplifying and designing graphical user bar was loading for the same time period but interfaces to be easily learnable and usable with a linear character of loading. Due to this as well as pleasantly presented. Interfaces fact, Harrison suggested that distortions of may consist of various elements of which one the projected data might improve the overall might also be a progress bar. impression of the process length. Moreover, he claims that using a Peak-and-End effect [2] Progress bars are graphical visualizations can even make progress bar look faster than showing the progress of currently executed it is. 14 processes so that the user can easily imagine the amount of work already done and how The aim of this work is to verify some of the much time should he or she expect that it will questionable results of the original work by take to finish the rest. Progress bars are wide- Harrison et al. and also to broaden the re- ly used in entertainment as well as in profes- search by investigating unexamined distort- sional software. Therefore, users can come ing functions and their mutual relations when into contact with this element everywhere they are used on progress bars. Another focus from computer games, mobile applications of this work will be on the behavior of users and ATMs to software they use for their work. facing the distortions. To increase the rele- vance of results, the study will consist of two The problem with progress bars is, that of- experiments performed in two different en- ten unexpected delays of processes occur, vironments. Collected data will then be also implementation itself. The end focuses on used to research how an environment, spe- a description of the testing techniques used cialization, and age can affect the final results. during the experiment and how they were ap- By studying these functions and their proper- plied. ties, it will be possible to say if some functions Result part then presents the resulting data can suppress a negative behavior of progress based on conducted experiments, separately bars without knowing what the behavior will the laboratory experiment results and public be like (e.g., if it will stop, slow down or load experiment results. A discussion is then initi- linearly). ated to discuss the actual meaning of the col- The work is divided into five chapters. The fol- lected information and their impact on soft- lowing chapter is a summary of the Human— ware development. Computer Interaction as a science. That is 15 Last part is a summary of the whole work. It followed by introducing user experience (UX), presents conclusions of the results and intro- what do UX experts do and how does devel- duces how future work might extend the ex- opment of user interfaces look like. This part isting studies. is closed by a description of visualizations, especially the use of progress bars, and exist- ing research on them. The third part is dedicated to the experi- ments themselves. Starting from the concept description, followed by the design develop- ment from early stages like sketching to the 16 2 Background2 17 2.1 Human—Computer Interaction Human—Computer Interaction (HCI) is a sci- 2.1.1.1 Input-Output Channels entific discipline researching a relationship Input-output channels are ways how the user between people and computers. It is a mul- physically interacts with the interface. Major- tidisciplinary science merging computer sci- ity of the input-output channels are human ence, cognitive sciences, design, sociology senses used to receive and emit information and often other sciences altogether. Experts via sensory organs. of this field research both new and current 18 ways of interaction with computers. One of Vision is a primary source of information for the topics that HCI deals with is designing a general population [3] in which the user graphical user interfaces and elements used sees what is displayed at a screen. Vision is in them. also one of the most complex activities, but it can be divided into two stages: “the physi- 2.1.1 Human cal reception of the stimulus from the outside Talking about a human in connection with a world, and the processing and interpretation computer, there are various factors that HCI of that stimulus” [3, p. 14]. In some ways, the deals with. The ones, which affect the inter- human vision is limited by physiological ca- face design process are input-output chan- pabilities (ability to see just a small range of nels, memory, the way how humans think, frequencies of light, ability to focus on one emotions and individual differences of users. point at the time only [fixations], etc.). Nev- ertheless, a human mind is also able to per- carrier. [3, p.