Research on the Perception of Progress Bar Distortions

Home , Progress bar, Splash screen, Throbber

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 support 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 psychology 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 subprocesses, 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 distortions 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 separate experiments (laboratory and public). Based on collected data, the work describes mutual relationships between different distorting 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 relevance 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 existing research on them. The third part is dedicated to the experiments themselves. Starting from the concept description, followed by the design development 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. 25] On the contrary in computer ceive incomplete information and complete it environment users are not very used to use on its own based on our experience and hab- haptic systems. As the technology evolves, its. These two facts are very often used in the scientists come up with various inventions process of prototyping a user interface. that allow users to perceive computer data via touch such as haptic gloves or Virtuix Omni Secondly, a human brain is used to perceive a treadmill (treadmill designed for virtual real- large amount of information through hearing ity walking) [4] which are now not very pub- and touch. Hearing can help a user get orient- licly usable though. ed in the interface or notify him or her that an event has occurred. To notify the user, mul- Lastly, a movement, as an output channel, tiple sound types might be used to announce takes a big part in interaction with computer different events, but one sound might differ mostly when a user tries to forward an an- 19 in a way the user will perceive it based on its swer from the brain to a computer. The time cultural differences and experience. From a required to perceive the stimuli via sensory UX (see Chapter 2.2) perspective the sound receptors, send it to the brain, process it and is a great supportive element but not a pri- perform a response can be then divided into mary information carrier. The frequent lack reaction time and movement time. [3] of sound output device or muted interface could cause that a user would possibly miss an important information which might cause great problems. Talking about haptic perception (touch), in everyday life it is an important information 2.1.1.2 Human Memory a certain time until it will be able to process it. “A sensory memory exists for each senso- Memory is an essential part of human behav- ry channel: iconic memory for visual stimuli, ior not only in the digital environment. Every- echoic memory for aural stimuli and haptic body’s memories allow themselves to form memory for touch. (…) Information is passed their unique personality, to know how to in- from sensory memory into short-term mem- teract with objects and situations happening ory by attention, thereby filtering the stimuli around, to be able to communicate, walk or to only those which are of interest at a given have relationships. time.” [3, p. 28] When designing user interfaces, a designer Short-term memory acts as a working unit to must know how human memory works. Be- store data that a person processes and needs 20 cause every part of the memory has its own to keep them in mind until a given task is com- limits, the UX experts (see Chapter 2.2.1) pleted. [3] A simple example might be storing examine the interfaces so that a user under- the beginning of sentence during reading the stands the workflow and does not get lost in rest of the sentence or remembering subto- the application. tals during simple computations. Short-term “It is generally agreed that there are three memory is very quickly accessible (approxi- types of memory or memory function: sen- mately 70 msec), but ages very rapidly too. sory buffers, short-term memory or working In contrary long-term memory represent a memory, and long-term memory…” [3, p. 28] memory storing the data for a substantially Sensory memory represents a tool that al- longer time. In fact, every piece of informa- lows the brain to store some information for tion that a person has ever learned is stored there. Long-term memory stores significantly though). [3] In some cases (usually during a larger amounts of information but requires a lack of essential information) this type of rea- longer time to access it. The access time does soning might be misapplied. not increase with the time a person remem- Inductive reasoning is first of creative thinking bers the data. where the human brain creates conclusions 2.1.1.3 Thinking based on a person’s experience and patterns that he or she is used to. Conclusions based Although the science still evolves, and arti- on this type of reasoning are not very easy ficial intelligence gets better and better, the to disprove and to convince a person that an way people think and process the data they idea he or she came up with might have been have perceived makes the biggest difference wrong. between human brain and machine or brain 21 of any other living species. It is possible to A third one, abductive reasoning, is the next divide the way people think into two catego- step of presuming information based on our ries—reasoning and problem solving. experience with the environment that humans live in. Once we have seen a pattern of prem- Reasoning represents humans’ creativity of ises and their conclusion, we tend to apply speculating about things they do not know similar conclusions to situations with even anything about based on information they al- partially different premises. “This can lead ready have, and it has three types. to problems in using interactive systems. If Deductive reasoning deduces logically neces- an event always follows an action, the user sary conclusions from given premises (it does will infer that the event is caused by the ac- not have to correspond to our notion of truth tion unless evidence to the contrary is made available. If, in fact, the event and the action into more subproblems. A limitation is that are unrelated, confusion and even error often these processes are using short-term mem- result.” [3, p. 42] ory, which means limited memory and access speed. To solve a problem, the human brain On the contrary from reasoning, problem helps itself by using analogies. “One sugges- solving is a process of figuring out how to deal tion is that this is done by mapping knowledge with a problem that a person has not been ex- relating to a similar known domain to the new posed to yet based on its knowledge or ex- problem—called analogical mapping. Simi- perience. According to Gestalt theory [5], the larities between the known domain and the problem solving can be of two types—repro- new one are noted, and operators from the ductive (solving a problem based on previous known domain are transferred.” [3, p. 45] experience) and productive (“involves insight 22 and restructuring of the problem” [3, p. 43]). 2.1.1.4 Emotion Because of insufficient evidence to support this theory, new theories have been made up. Human behavior is strongly affected by emotions. According to William James [7], people Problem space theory [6] invented by Newell respond to physical perceptions by experi- and Simon is based on a fact that human solv- encing emotions. That means that people ing procedure consists of problem states that firstly respond physically (pumping testoster- represent subproblems between a starting one into veins when there is a danger, sweat- point and the end goal (this heuristic is called ing when expecting risky situation…) and that means-end analysis). A person tries to solve triggers the actual emotional feelings. a problem by comparing the starting and end states and construct subproblems that It has been proven that feeling bad emotions, are often easily solvable or might be divided such as stress or anger, may lead to making a task, a person would usually be able to com- 2.1.2.1 Input Devices plete, harder and, in some cases, even incom- One of the most usual types of input informa- pletable. In contrary positive emotions may tion is text. For transferring text from a human make a person improve their performance in mind into the computer the most used device solving problems or performing tasks. is a keyboard which is a typewriter-style [8] instrument using keys that are being pressed 2.1.2 Computer by the user to type words. Keyboard has a These days the computers are a big part of lot of cultural mutations from keyboards with everyday human life, and so the devices in different signs to those which have different different situations require different attitude. letter arrangement. Mobile devices used to The conditions (environment, situation, size, offer alternative versions such as keyboards specific user requirements) in which a user with availability to press the button multiple 23 uses the computer, often implies the way how times to type in a different letter or T9 that is is it being controlled. In some conditions, the its “intelligent” alternative (user clicks once, size of a device does not allow the user to use but the device suggests the words) but current keyboard/mouse or it is not possible to inter- trend is to use swipe keyboard [9] that allows act with a computer using their hands at all. users to type even faster or handwriting rec- For these purposes, there are multiple ways ognition. Another way to input text might be to interact with a computer. speech recognition. To select, position or point users usually use either mouse or touchpad for personal computers and touch-sensitive screens for mobile devices mostly to keep them portable. Other display information to a larger number of us- devices may be trackball, joystick or stylus ers. Another technology being more and more (used mostly for drawing and writing). It is used these days are 3D monitors or monitors also possible to control the computer via eye with 3D glasses that allow users to perceive gaze. [3] the data in a 3-dimensional representation. 2.1.2.2 Output Devices Apart from the digital representation of data displayed on a screen, it is possible to visual- For interaction from computer to user, bit- ize data physically. The most common device map 2D display screens have strong domina- is a printer (toner-based printers, liquid inkjet tion. Displays have several types based on the printers, solid ink printers, dye-sublimation resolution, display ratio, technology, etc. The printers, thermal printers) that allow users 24 most used screen resolution in January 2018 to have data printed on a paper. Moreover, was 1366 × 768px, and the display ratio was printers allowing users to print 3D models are 16:9 [10] but manufacturers tend to imple- starting to be strongly popular. ment higher and higher resolutions as the technologies improve for example so-called fullHD (1920 × 1080px). Display technologies differ from the type of a device, but the most commonly used are LCD, gas-plasma technology displays and histori- cal CRT monitors. An alternative to these screens may be a projector mostly used to 2.2 User Experience

There is a lot of different definitions of User determined by a multitude of factors so vast Experience (UX) design and various sources that no one person, team, or even technology often differ. According to Nigel Bevan, the can claim to be responsible for it.” [12]. One definition of user experience in ISO FDIS thing that usually all the definitions have in 9241-210 states as: “A person‘s perceptions common is that user experience is a discipline and responses that result from the use and/ that focuses on studying users’ perception of or anticipated use of a product, system or a digital environment and how do users in- service” [11]. Compared to that Leah Buleh teract with it. The goal of a user experience formed a definition as follows: “…‘user ex- expert then is to analyze or improve the en- 25 perience’ is a general term that describes vironment to make user’s experience more not only a professional practice, but also a pleasant or, on the contrary, to prevent a user resulting outcome. To be a user experience to have a bad experience. designer means to practice a set of methods and techniques for researching what users 2.2.1 UX Roles want and need, and to design products and User experience design process consists of services for them. Thought good UX, you are various tasks. Therefore several specializa- trying to reduce the friction between the task tions have been developed among all the ex- someone wants to accomplish and the tool perts. An expert can have one or more roles, that they are using to complete that task. The depending on individual cases. resulting user experience that someone has is • UX designer. Designer’s work consists of • UX analyst. UX analyst is in charge of creating prototypes (mostly low-fidelity), testing with users—from prototype test- developing the concept and workflow ing to interviews. He or she then analyzes of the product and communication with the outputs of testing and forwards them both customer and the rest of the team. to the rest of the team. He or she also takes part in the research • Visual designer. Visual designer’s respon- phase, in testing the prototypes, analysis sibility is to create the final design of the and the development of a product. application from the graphic design per- • UX researcher. Researchers are in charge spective. of defining the target user groups of end • Technical writer. Writers are in charge of users, communicating with them, re- 26 creating the text part of the application. searching their characteristics, a motiva- All the text, labels and descriptions have tion of using the product, what do they do to be brief and clear to the user. and do not like, their needs, fears, inter- • ests, limitations. UX manager. UX manager is in charge of the whole UX team. He or she delegates • Interaction designer. The work of interac- the work to the individuals and is respon- tion designer is mostly focused on proto- sible for the resulting work. typing the interface in the way that users clearly understand what every compo- 2.2.2 Usability nent’s function is. He or she usually has Usability is a measurement of how easy it is knowledge of graphic design as well as to learn and use an interface for both infre- psychology, sociology, and programming. quent and frequent users. To have a powerful product with various features does not always was able to study terminal commands to be imply that the usability of the product is high. able to use a computer. That forced inventors [13] By improving the usability, the designer to come up with a graphical user interface makes learning and using of the product less (GUI). The more people learned how to use a difficult, therefore more pleasant to the user. computer and its GUI the more utilization of a computer in daily life has come up. New us- 2.2.2.1 Importance of Usability ages often require new solutions. In this case, These days, the IT technologies are so strong- new solutions to deal with presenting user ly connected to people’s lives that very often, data in a nice, clear and usable way. people do not even realize that they are using Even though usability is hotly debated topic them. From using a refrigerator to wearing an these days, there are and will always be ten- electronic watch, the computers (sometimes dencies to create software that can solve any 27 in very simple design) are all around. problem but is very poorly designed. This In early times of IT, the interfaces were very practice might resolve into three scenarios— hard to learn to use. In fact, lots of users ap- users will try to use the product but because preciated this hardness as a barrier between a they will not be able to cooperate with it, they regular population that consumes the results will stop using it, and the product vendor will of complicated calculations and IT experts lose their customer. Another scenario is that who are capable of entering the data into the users will have troubles with learning to use system. As time went on, the computers be- this software but in some time, they will be came more generally used and so the inter- able to perform most of the tasks (maybe will faces had to change because not everybody not even know that the software provides using features that are deeply hidden). Third, last and the most dangerous scenario is that a user will use the product, but in a way the interface was not designed for, which may cause unwanted consequences. A perfect example of all three cases is an emergency-response system developed for the San Jose Police Department. The police- men were so confused by the interface that it Figure 1, UX Lifecycle, source: [3, p.53] caused lots of unnecessary delays and mis- takes that might have been crucial. The situ- a phase where the whole concept of the prod- 28 ation has resulted in many political disputes uct is designed, which means describing the and lawsuits. [13] main functionalities, analyzing which of the researched users should be targeted, thinking 2.2.3 UX Lifecycle what feel the product should have. In the implementation phase the team finally creates The whole UX lifecycle consists of four stag- prototypes (low-fidelity, high-fidelity) and es—analysis, design, implementation, evalu- during the evaluation phase, the prototypes ation (see Figure 1). The analysis represents are being tested to determine what changes starting research, talking to people, asking are needed to make them better, more us- them about their interests, what do they miss able, more pleasing to use. After finalizing in today’s products—all that for better un- the last step, the whole lifecycle repeats until derstanding the potential user. The design is there are no changes needed. 2.2.3.1 Creating Concept With these fundamental ideas, the researcher creates personas. Persona is an abstract typi- Most often the main idea or concept of a cal user for purposes of knowing what type of product is already created before it gets to a users does the team design and develop the UX team. Despite this fact, the UX team (of- application for. For each application, there ten in cooperation with experts from other fields) is responsible for finishing the idea and are multiple personas, and each of them rep- giving it a strict structure, so the whole team resents a single archetype of future users. of developers knows their goals. Difference between typical users in a concept stage and personas is that personas are de- The so-called concept statement is a brief but signed very specifically so that the whole de- exact description of main features and ideas veloping team can feel like they know the per- of the future product. It is important to write sona in person. Every persona should include 29 it in the way that a person unfamiliar with any following at least characteristics: of the ideas would be able to understand it. A minimum that any concept statement should • Name. Best practice is to use a form like contain is: John, the Company Manager so that it is easy to recall what persona a team mem- • What is the system name? ber is talking about in later stages of the • Who are the system users? design process. • What will the system do? • Demographics. What is the persona’s • What problem(s) will the system solve? age, gender, relationship status, children, ethnic background, education, work- • What is the design vision and what are the ing status, job, income, financial invest- emotional impact goals? [3] ments, spending habits, political prefer- 2.2.3.2 Researching ence, rents or owns… Research begins with more precise target- • Goals and values. What is the persona ing the final users. The researcher identifies trying to achieve? who are the actual real people, who will be • Hangouts. Identification of both physi- using the product based on the concept state- cal and cyber spaces where the persona ment. Thanks to this kind of standardization, hangs out. it is usually possible to determine what places these people usually stay, what hobbies they • Psychographics. What does the persona have, what company they work, what their like or dislike? What entertainments, position is. sports, hobbies, food, drink, and travel 30 does the persona like? After finding a suitable candidate and set- ting an appointment with him, it is a great • Challenges and pain points. Specification practice to visit him right in the environment of what hinders the persona from achiev- where they would use the future product. If ing its identified goals? What problems is it their work, it is usually important to con- does it have? What are its needs? tact their employers to get approval for visit- • Relevance. Why will the application mat- ing them. The environment of an appointment ter? What are the persona’s benefits of is important for purposes of observing their finding a solution? [14] typical work routines, how they behave, what other problems they solve. It is better to observe them before interviewing, because the questions might affect their behavior during the working process and so that the observed phenomena might be distorted. An even bet- about how the application will look like. To do ter case is if it is possible to observe multiple so the first thing to start with is start sketching subjects (respondents). A UX researcher then and drawing basic features of the product. It can try to act as focusing on one subject while is important to point out that sketching is still observing someone else and eliminate a fac- not prototyping. [13] Sketches provide a visu- tor of stress or nervousness. al image of ideas designers have in their mind. After the observation comes an interview Moreover, the sketched image serves as help phase. The type and amount of questions de- for an imagination to improve the first ideas. pend on a type of a project, whether the con- In drawn sketches the elements that do not cept is already fully designed, or the design- fit the prototype or are used inappropriately ers still search for ideas of features the user is stand out more than just in the mind so it is missing in existing products. The researcher easier to detect potential bugs. 31 writes down all the notes and tries to moder- For staying focused on the functional design ate the interview so that the respondent says and concept of the feature, it is advised to as much of his opinions and ideas as possible. draw only black and white sketches, in an ex- Once all the research is done, the researcher ceptional case hatching can be used. then updates its concept, personas, and sto- ryboards with newly discovered observations. 2.2.3.4 Wireframes Next step after brainstorming with paper is 2.2.3.3 Sketching creating first prototypes. Wireframes (or low- Once the UX researcher finishes with research, fidelity prototypes) are schematic diagrams the team starts to build up the first ideas [13] showing the inner structure of every page in the product (example Figure 2). They are delity prototype so that designers and partici- used to identify the elements that will be dis- pants of usability testing are not distracted by played on the page or screen, such as navi- colors, shapes, shadows, pictures and focus gation, content sections, imagery or media on the actual application workflow, concept, needs, form elements, calls to action (CTAs). functionality, and usability. [15] Their main goals are to show the layout To design low-fidelity prototypes exist a large of the elements on the page, the workflow in amount of applications. From online ones like the application and how every element works. Wireframe.cc1, Figma2 or Balsamiq mockups3 Wireframes are as well as sketches black and to desktop ones like Adobe XD4, Axure RP5, white only (grey may be used too). Adobe Photoshop6 or Adobe Illustrator7. To prototype such design there only a few Once the prototype is finished, the UX team 32 graphical elements used. Most often they are tests its usability (see Chapter 2.2.2). If there lines, boxes (rectangles, ellipses), pictures re- are any problems that should be solved, the placed with crossed rectangles with label and designer corrects the prototype and tests it labels that some designers prefer to have in again. This process repeats until no problems multiple weights and sizes. To describe the are detected. functionality of the elements, the designer uses annotations, which represent the display and interaction rules, error messaging, 1 https://wireframe.cc/ 2 https://www.figma.com/ content sources and other properties that are 3 https://balsamiq.cloud/ hard to visualize by drawing. [15] 4 https://www.adobe.com/cz/products/xd.html 5 https://www.axure.com/ These descriptions are placed in the low-fi- 6 https://www.adobe.com/cz/products/photoshop.html 7 https://www.adobe.com/cz/products/illustrator.html Figure 2, Example of wireframe created in Balsamiq, source: https://balsamiq.com/products/ 2.2.3.5 High-Fidelity Prototype important to find out if there are some problems with functionalities, with usability, with After consulting, testing and improving the users being confused about some features/ low-fidelity prototype, the designer can start elements, with users getting lost in the inter- with designing the high fidelity prototype. face or unavailability to conduct some tasks. It is based on the previous prototype, but this There are many ways to test and evaluate the time the focus is not only on the concept and interfaces and following are the most used. usability but also on the visual appearance • Usability Testing. One of the most used of individual elements and the product as a testing methods. [15] There are four types whole. In this step, the designer designs the of usability testing: Exploratory (to test product in enough accuracy and fidelity as preliminary concepts and evaluate their 34 the final product should look like. That means promise), Assessment (to test features that every element should have its own color, during implementation), Comparison (to shape, meaningful annotation (if needed) and assess one design against another) and effects (if needed). Validation (to certify that features meet This prototype is then tested, and if it passes, certain standards). [16] The concept of it is given directly to the developers to get im- usability testing is to give respondents a plemented. prototype or a live demo and investigate how they use the interface, what prob- Testing lems they face and what suggestions they have. Their workflow is observed, some- Whenever designers finish their prototype, times recorded, and after the testing ana- it has to be tested, whether it is usable. It is lyzed to conclude improvements. • A/B testing. During this type of testing, • Other methods. One of them is eye-track- the analyst sets a single feature of which ing that is being used to monitor user’s they want to analyze the performance. eye movement. Another way to study Respondents are divided into two groups user’s focus is by the first-click method (or more of equal size). Group A then that inspects where the user clicked first receives a design version A, as well as or blur method that is used to find out if Group B receives version B. Respondents users can distinguish elements without are then left to use their application on seeing them sharp. a regular basis and the system collects information about their behavior in the background. After a certain time (the duration might differ depending on a prod- 35 uct), all the collected data are analyzed, and the analyst tries to figure out which of versions A and B of the system had better results on the hypothesis he or she has created. • Questionnaire. It is an easy-to-use and broadly-used technique to test both usability and user’s satisfaction with using the product. It is also very easily usable because of not hard preparation and quite easy analysis and evaluation. 2.3 Visualizations

Visualization is a transformation from one 2.3.1 Different Ways to Visualize data form into another. These operations the Progress of a Process may also change the dimensionality of the data. [17] The main purpose to visualize data Even though the UX was not a very hot topic is to present (usually) a large amount of data in the beginnings of graphical user interfaces, in a more friendly way or to visualize abstract the usability of not giving the users any feed- structures in a way that human brain can pro- back once a process has started to execute cess and understand them. was very poor. Therefore, the need to indicate the process is running, or even the prog- 36 Visualizations are being used since ancient ress of it, was increasing and lots of different history when people used to visualize things solutions to deal with this problem have been and people that were important for them on created. their walls. People then started to visualize their ideas, significant incidents, maps, The most basic solution is to notify users that etc. The invention of a computer helped to the process has started its execution. The improve and develop new methods so that simplest way to do that is to show a label people began to be able to visualize large that the process has started and that it has amounts of data without the need of using a ended. Unfortunately, this solution might be large number of human resources. problematic during longer time periods of the processes because it evokes feelings that the process got stuck or is awaiting user input. To at least partially prevent this feeling, it is pos- ate to combine this method with others like sible to use an animated element (throbber showing an animation or percentage for the [18], gif file or progress bars with indetermi- currently running subprocess. Another form nate state [see next Chapter 2.3.2]) that will of the same concept is to show currently run- be moving during the time of execution, so it ning subprocess with subprocesses that have evokes that the process did not get stuck and not been executed yet. This type helps more is still running. to form an idea about the time that will the rest of the process take to finish. Eventually, It is also important to notify the user once the the last type is a mix of previous two. The user process ends, ideally not just by hiding the can see all the parts of the process and is also animation but by notification element such as able to distinguish what parts have been fin- a label, check mark or similar. This method ished and what parts are about to come. reduces the stress the user might be dealing 37 with, especially during short periods of time Another way to show the progress of a pro- but during processes taking longer time, less cess is to show a ratio between finished and experienced users might still have problems unfinished subprocesses. One representation with suspecting the process to be stuck. of the ratio might be a fraction, i.e., “Process- ing task 3/12”. Another way to represent the To reduce the potential anxiety of users ratio is to show the percentage of finished during longer processes, it is helpful to no- tasks. A percentage can also be used for the tify them once some part of the process has currently executed subprocess, which is usu- been successfully executed. The easiest way ally being used as a supportive element with to do so is to list the parts or subprocesses other methods, like a fractal representation that have been finished. Ideally, it is appropri- of finished subprocesses or to use percentage indicators for computer-human interfaces” instead of the element with an indeterminate [20]. Progress bars can be used at multiple state. places within the application. Whenever they are used in the center of the screen, they rep- A splash screen is another type of process ex- resent that whole content of a screen is going ecution representation. It is a graphical ele- to load once the process finishes. If they are ment usually shown during the loading all the used in a different location, the location indi- required components at the start or during cates where the user should expect the con- the use of an application. The element covers tent to load. a whole or big part of the screen, is usually graphically stylized and might contain other loading elements like percentage or progress 2.3.2 Types of Progress Bars 38 bar. Considering as progress bar anything that fills its inner parts throughout the time in order to One of the most used methods is to represent visualize progress (even though the element the progress of a process as a progress bar. A does not have a bar shape), it is possible to progress bar is a bar that proportionally fills find various types of these elements having a its inner part as much of the subprocesses different impact on user’s perception. have been executed. At the end of the main process, the progress bar should be fully 2.3.2.1 Bar Type filled. The first appearance of progress bar was in 1979 by Mitchell Model [19], and six Bar type (often called linear [21], example years later Brad Myers continued with a paper Figure 3) is probably the most often seen of “The importance of percent-done progress progress bars in today’s applications. The bar consists of two parts, the track part that has (usually starting at the top side of a circle). a constant width and represents the whole [21] Apart from that, circular type progress amount of time of the process. The second bar usually requires less space to be used, so part, a loader, is (or should be, see Chapter it is often used both in the middle of blank 2.3.3) a projection of already finished subpro-

Figure 3, Example of progress bar cesses. 39 Figure 4, Example of progress bar 2.3.2.2 Circular Type Circular type (example Figure 4), as well as page but, unlike the bar type, also in little bar type, consists of two parts—inner or out- space where the bar would not fit. er (or upper and lower). The main difference between bar and circular type is that circu- 2.3.2.3 Animated Type lar has a round shape. The center of a circle There are countless many types of animations might be both hollow, so it is just a rounded among all the progress indicators. One of the line, or full so that the whole shape gets filled most basic ones is the animation of the inner throughout the time from 0 to 360 degrees part of the indicator while is it loading. That means that the value of a loader part does not designer, the loader part has visible segments load discreetly but continuously. That causes too or not. The segmentation can be applied the users to perceive the loading as a more to both bar and circular types of a progress natural phenomenon that he or she is used to bar and basically adds them a discrete type from a regular life. of a loading effect. Another way to animate the progress bar is to 2.3.2.5 In combination with other animate the fill colors of a loader part. Again, elements there are more options to do so, for example by pulsating the fill color from one shade of Progress bars can be (and often are) used in the color to a lighter or darker one. Another combination with other elements. Most fre- option is to fill the loader with color ribbing quently it is a combination with text, especial- 40 and to move these ribs across it. ly numbers. Writing a number or percentage of finished tasks can support the information 2.3.2.4 Segmented type given by progress bar very well. These elements can be situated either inside the prog- Another type are progress bars that have the ress bar or in the immediate vicinity of it. The track part split into segments. Once a certain text can also describe individual parts of the number of subprocesses finish their execu- progress bar (i.e. download part, installation tion the segment gets filled. The segments part, copying files part…). can have equal width or can be separated by the estimated time-consumption of subprocesses which might differ, therefore the width of segments would differ too. Depending on a 2.3.3 Distortions on Progress Bars perceived. The conclusion of the experi- (Existing Research) ment says that people perceived a progress bar loading for 5 seconds the same length In 2007 Chris Harrison et al. discovered that as a progress bar with a backward increasing using various visual techniques, the user’s speed of ribbing lasting 5.61 seconds. In oth- perception of time can be affected and even er words, the ribbed progress bar with back- intentionally distorted. [1] ward increasing movement felt 11% faster The study, Chris Harrison et al. conducted in than a standard solid color progress bar. 2010, has discovered that using moving rib- Progress bars are often used with processes bing in the loader part of the progress bar whose estimated time durations might change causes users to perceive process’ time dura- during the execution. Due to that users often tion distortedly. For example, by using back- suffer from frustration evoked by prolonga- 41 ward moving ribbing, the progress bar af- tion of the time estimation or pauses of the fected users to think the process has finished progress bar loader. Therefore, another study earlier than if it had linear progress. Specifi- by Chris Harrison et al. conducted in 2007 fo- cally, backward decreasing and backwards cused on distorting the visualized progress of increasing movement of the ribs were statis- the progress bars. [22] tically most preferred over all other move- ments tested. The study compared linear progress with eight different distortions represented by math- They continued with expanding the research ematical functions—“Early Pause”, “Late and tried to measure how much faster the Pause”, “Slow Wavy”, “Fast Wavy”, “Power”, progress bars with backward movement are “Inverse Power”, “Fast Power”, “Inverse Fast Power”. The experiment was done on 22 participants with a mean age of approximately 37, all computer scientists. During the experiment, the participants saw two serially shown loadings of progress bars and then they selected which, if some, of those bars, felt faster or if they felt as they have the same duration. This study concluded that wavy distortions felt significantly slower than linear loading, in contrary to “Power” and “Fast Power” distortions (functions with Peak-and-End effect [2]) 42 that felt faster than the linear one.

43 44 Methodology3 45 3.1 Concept

Unfortunately, the original work has a few im- cable. Apart from that, the IT specialists are perfections that I do not consider as crucial, a very specific focus group for any kind of UX but they might become problematic while testing. Since they use different kinds of user broadening the research. Therefore, it is im- interfaces on daily a basis and do know lots portant to correct those imperfections and of shortcuts and facilitations, they are used based on these changes develop the concep- to elements that an average user is often not tual model of the research itself. to and are able to cope with difficult situations more easily. Therefore, the chosen sample 46 3.1.1 Problems with “Rethinking might have affected the results, especially on the Progress Bar” by Harrison et al. such a small amount of respondents. The first one is that Harrison et al. used an un- Another questionable factor is that users the representative sample of respondents of 22 research has been realized in their own of- people (14 male, 8 female), all from two com- fices. The author has not mentioned whether puter research laboratories. One of the most the environmental conditions during the test- important UX principles is that the research ing were controlled or not (i.e., were there should be done on a broad amount of people other colleagues during the testing?). If they with a different personal background. The were, on the one hand, the moderator pro- group of respondents having only IT special- vided guided testing so that users could ask ists is very narrow to claim that the conclusion anytime they did not completely understand the team of Chris Harrison is generally appli- the assignment or had any problem. Also as- suming from the paper that there were no parison. Therefore, I assume letting users distractions during the testing, the users were compare 45 different pairs of progress bars not disturbed by any other factors from the could affect the relevance of the results. surrounding world. On the other hand, the ecological validity could be improved by al- 3.1.2 Broadening the Research and lowing the users face everyday distortions Conceptual Changes (i.e., listening to music, people around talking). Although I assume the original work has imperfections, I do not suppose that these im- During the testing, the progress bars loading perfections could have an essential effect on took 5.5 seconds each. From short empiri- the statistical preference. cal research, I conducted, I assume that such length is not sufficient enough to show the Supposing that the original conclusions are 47 characteristics of different distortions. That is correct, to see what functions are dominant connected to another problem that on certain over the others, and to be able to add them to distortions, especially on the wavy ones, such an ordered system created by Harrison et al., a short time period has not behaved naturally new functions were created. The dominance and users would not get in touch with such be- of function means that the function can sup- havior of progress bars in real life very often. press the effect of other function that makes the progress bar to be perceived as slower or According to the pilot testing (see Chapter faster than it actually is. I have selected one 3.4.1) of this research, some of the users representative from each of the hierarchy started to lose their attention even before groups [1, p. 117, Figure 3] and composed its they finished their 20th 8-second-length com- functions together. Figure 5, “Linear” function Figure 6, “Wave after Power” function

Figure 7, “Wave after Early Pause” function Figure 8, “Early Pause after Power” function Figure 9, “Power” function In contrary from the original work, the domain of rating values has been enlarged to be able to distinguish the rate how much does one function seem faster to the user than another. The domain has been modified from original values -1, 0, 1 to new -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5. To deal with the problem of an unrepresenta- tive sample of respondents and the environment conditions, the changes were made in the following way. There were used two sam- See the final set of functions in Figure 5, 6, 7, ples of users in two different environmental 49 8, 9. The composition order of functions was conditions. selected in the way to make their characteristics more visible. The first group has been answering the questions in controlled conditions of school lab- To make the distortions as similar to real oratory. The answering was conducted in progress bar behaviors as possible the wavy groups from 4 to 12 respondents, depending representation was adjusted from Equation 1 on date. Every respondent has been spaced to Equation 2. out so that he or she did not sit next to anoth- . er respondent (to not be affected by others).

Equation 1 Equation 2 The second group was formed by public ex- To keep the user’s attention and their inter- periment and was intended to have steadier est in finishing the test (mostly for the public specialization and age distribution and to be testing), I edited the number of questions the conducted at home on the users’ computers. users had to answer. According to the pilot These factors should increase the ecological testing (see Chapter 3.4.1), the users in the validity of the whole research by allowing me post-testing interview were skeptical about to compare two different experiments both in the amount of questions asked and told me, controlled and uncontrolled environmental that the end questions were really the thresh- conditions. The public link of a website with old to start losing attention and if they were the experiment has been spread to people not asked to complete the test personally, and shared on social media. they would have probably not finished the test. In order to prevent this behavior dur- 50 The time of 5.5 seconds was evaluated to be ing the public testing, the questions were re- too short to display the characteristic trend duced to 10 per respondent in public testing of each function. Therefore, during the pilot and kept 20 (even though in original research test, the time was extended to 10 seconds. was 45) for laboratory testing. The pilot tests showed that 10 seconds is too long (see Chapter 3.4.1) to keep the user’s To prevent the results from being affected by attention and to keep relevant information the order in which the comparison pairs were about the time length in a short time memory. shown, it was needed to shuffle their order. Therefore, the time has been reduced to 8 Unlike in the original work, the concept of seconds to both keep the users focused and assigning the questions has changed to as- show enough distortion characteristics. signing the users different patterns of comparison pairs that were shown. Every pattern consists of comparing every distortion to all others with exception of comparing a distortion to itself. Therefore, for 5 different math- ematical functions used in this research, every set (pattern) had 10 questions that, for laboratory testing, were also duplicated in reverse comparison order. That was done to also keep track of the information if an order within the comparison pair affects user’s perception as Harrison et al. have claimed. That means laboratory patterns had 20 questions, 51 where respondents compared both distortion A to distortion B and distortion B to distortion A. To get answers of the same relevance from both types of testing, the public testing (having 10 questions only) had not only 4 patterns (as laboratory one) but 8 different patterns so that some users got to compare distortion A to B and some compared distortion B to A. The order of comparisons within the patterns Figure 10, The Order of Comparisons has been created as stated in Figure 10. for Laboratory experiment Changes were also made to the graphical The language used for the research interface user interface of the application. The testing was Czech. That is because I expected a ma- is web-based to allow users to complete the jority of respondents in public testing to be questionnaire from their home. At the very Czech speaking. For laboratory testing were beginning, users go through introduction, in- only Czech and Slovak speaking respondents structions and personal info form followed by invited. a preview comparison. In laboratory testing, a user also has a chance to ask the guide if any 3.1.3 Expectations information is not clear. During each comparison, the first progress bar shows, once it fin- The main focus is to find out which functions ishes it disappears and the second one shows. are dominant over the others, meaning that they can suppress the perception effect of the 52 After completion of the second bar, it disappears too and shows the comparison panel. other function. Especially whether Peak-and- Users then choose on a scale from 5 to 0 on End of a function can suppress the trends of both sides (11 buttons in total) which func- other functions that were perceived as slower tions and how much did they perceive them to than linear function. An expectation is that be faster. This feature lets users express their the function “Early Pause after Power” will feelings more accurately than just by prefer- dominate over all other functions. ring one or another option. The maximum Another focus is to find out what are the par- value of 5 was considered as large enough to tial comparisons between functions and if it sufficiently express the degree of affection by is possible that there will exist a cycle in the any of the sides based on the amounts of op- mutual comparisons. The expectation is that tions in most used questionnaires in UX stud- the functions created by composing two oth- ies. [13] er functions together, where one of them is “Power”, will be perceived as faster than a linear function, with exception to the “Wave after Early Pause” that will be perceived as slowest of all the others. The last hypothesis is that there will exist a statistical difference between answers of people of similar demography (men vs. women, technicians vs. others, millennials [23] vs. older users). 53 3.2 Design

After defining the concept of the research, The first element is a panel for telling impor- I started to design the interface using UX tant information and instructions to the user methods to create an easily usable interface before the testing. The panel has 3 parts— without bugs and ambiguous elements. title, text, action button. The panel is meant During the design process, I focused on creat- to be used in more dialogues. Therefore, it is ing a friendly environment that has been clear important for it to be universal. Also, at this and easily learnable to anybody. The reason stage, it was not sure, whether the panel is for focusing on learnability is that the applica- going to contain pictures or not. Therefore, it tion was going to be presented online without 54 was designed in a way that the pictures were the possibility of asking the moderator of the possible to insert. experiment for a help. Therefore, the instructions had to be clear and sufficiently detailed, “The personal info” form was designed in a but on the other hand, the interface had to be way that the user was unable to miss that he very clean so that the users focused only on or she has to fill the fields. Hence only three in- the task that was given at the time (reading, put fields were placed on the page and nothing watching the progress bar, etc.). else. Age input field has a property of number as an anti-affordance tool so that users can- 3.2.1 Sketching not insert any other type of string. The same applies for Specialization input field where The purpose of paper sketching was to develop ideas about the elements used in the application users can choose only from 3 predefined spe- (see Figure 11). cialization options (technical, humanitarian, Figure 11, part of the sketches drawn for the interface of a questinnaire other). To make the interface more pleasant, and right number 2. That is due to a fact that the specialization field has already predefined the testing was conducted on Czech speak- one of its values, so that approximately ⅓ of ing respondents who are used to reading from users does not have to click this field. left to right. Therefore they expect things seen first to appear on the left side and later The concept of progress bar comparison was things on the right. designed to show one progress bar at the time. After completion of the first one, it hides and shows the second one. The crucial point 3.2.2 Wireframes for interface while the progress bars are load- To design wireframes (example of rating dia- ing was, to aim respondent’s focus only to the log can be seen in Figure 12), I used the de- progress bar. Therefore no other elements signs of elements made during the previous 56 should not have been shown. step, paper sketching. These elements were developed to fit the interface. To represent the scale, radio buttons with labels have been chosen. Usage of dropdowns The main element in pages with text and form or any other element would be inappropriate was a vertical panel situated in the middle of due to the lack of information given on first a page. The rest of the page was left blank to sight when the user would only see one option keep the user’s focus on a task. at the time. The scale is designed to have two In a form, the input field for age was replaced sides with a 0 (“the neutral value”) put in the by a year of birth. That was done for two rea- middle of scale, and the further from middle sons. People are more willing to share their a radio button is, the higher value it has. The date of birth instead of their age, and it is also left side represents progress bar number 1 Figure 12, Wireframe of a rating dialog easier for them to recall what day they were all the elements have been selected. Ele- born instead of trying to figure out their actual ments are formed by rectangular shapes with age (mainly targeting the elder respondents). round corners to make them the overall feel- Also, a sex input field was added for a better ing of the website softer. view of how diverse the respondent sample was. The main color palette contains white, different shades of grey in combination with three The radio buttons (composed of a circular colors of pastel tones (see Figure 13). button and the text on its side) were trans- formed into radio buttons looking like regular buttons and containing their values inside them. Thanks to leaving it still a radio button 58 in the code, they still have the auto-deselect #ff9797 #ececec #6ad1e6 ability once another button is selected.

3.2.3 High-Fidelity Prototype #ffffff #e6e6e6 #72c8df

In the high-fidelity prototype, the wireframes, Figure 13, Color palette made in the previous step, were used. They served as a draft to design detailed prototype White color in European culture is considered that has been later used to develop the actual as color evoking calmness and purity. There- GUI and back-end (example Figure 14 and 15). fore it has been used as the main background To keep the whole page calm with no disrup- color for the page. tive elements, a flat design characteristic for The grey is used for the most used elements Texts for instruction steps were created to representing a background for other sub-ele- be sufficiently understandable for users of all ments (i.e., panel for instructions, track part kinds of computer literacy. They had to be of the progress bar, unselected radio button). sufficiently detailed and clear so the users, Due to its lightness, it does not pop up too who participated in the public experiment, much against the white page. did not need any help. Even though the users in laboratory experiment had an opportunity For text has been chosen a light black to ask for a help, the aim was to prevent them (#212529) to make the text readable on all from doing that, to make as few differences other colors of the palette but in harmony between both experiments as possible (apart with other pastel tones. The only exception from the environment itself). is white used for buttons and selected radio buttons on a scale to match with two back- 59 ground colors underneath them. Pastel blue color (#6AD1E6) was also selected to support the calmness of the whole page but to stand out of the grey shades. It is used mainly for the loader part of a progress bar and selected/hovered radio buttons (#72c8df). Pastel red (#FF9797) as an ex- pressive color is then used to draw an attention to action buttons. Figure 14, Description Dialogue Figure 15, Rating Dialogue with Value 2 in Favor for Progress Bar 2 Selected 3.3 Implementation

After finishing the design process, I imple- safely communicate with the server’s data- mented the web application on the basis of base. the high-fidelity prototype. For the main For progress bar was used a jQuery UI10 kit, structure of the website was used HTML 5 to- that has been later modified for better per- gether with CSS 3 and JavaScript. The back- formance and custom progress bar theme. end part is then developed using PHP. MySQL, an open source relational database The whole webpage was designed to be re- management system, was used for creating sponsive to various sizes of screens using a the databases. There were two databases 62 Bootstrap 4. “Bootstrap is an open source used, one for each type of research—public toolkit for developing with HTML, CSS, and and laboratory. Both had the same structure, JS” [24], that allows developer to quickly and each of them contained two tables. Table form a structure of a webpage using a respon- users is created to store information about sive grid system with prebuilt components every user, namely his sex, year of birth, spe- and jQuery8 plugins. cialization and then automatically generated Apart from that was also used a PHP mini- id (a primary key), number of the assigned framework9, consisting of predefined PDO pattern, whether he or she finished the ques- (PHP Data Objects) functions to easily and tionnaire or not and time of the last update. The answers table then contains all the an- 8 https://jquery.com/ 9 The mini-framework was provided by https://www.itnetwork.cz/. 10 https://jqueryui.com/ swers from the questionnaire. It is made of (which is a constant progress bar width) are columns standing for—id of the user who has not allowed to continue in the research. That answered (a foreign key), what step within the is done by hiding the main content of the page whole questionnaire was it, two columns for and displaying a section with instructions for answers and two columns for the number of users with a small screen. The same applies distortion that has been compared, time of to users who are not using JavaScript but the last update. To write the answers to the with different instructions. This feature is also table, the preferred distortion is a positive used in the comparison part of the website. value of the value submitted by the user, the other answer is the same value negated. The whole testing starts on index.php, where the whole research is introduced to the user. From the point of view of the code, the web- If he or she agrees to the terms and condi- site could be divided into two conceptual tions of the processing of personal data, the 63 models—the guide part and the comparison user continues to user_info.php. part. Once the user is redirected to the page, he or 3.3.1 The Guide Part she is given a personal id that is stored in the $_SESSION array as well as the pattern The guide part consists of following pages: number is assigned. After sending the index.php, user_info.php, info_page.php and completed form, the user is added to the thanks.php (files are available in the archive). database with all his attributes. The user To ensure that users always have the same then continues to the info_page.php where is conditions and progress bar width, devices of informed about the process of the testing. horizontal resolution having less than 1200px Page thanks.php is then an announcement As stated earlier, the distortions shown in a that the testing has finished. comparison were determined based on prebuilt patterns. These patterns are 2-dimen- 3.3.2 The Comparison Part sional arrays stored in $_SESSION array. Each array contains pairs of numbers, representing The comparison part consists of two pages the name of distorting functions. These func- preview.php and questionnaire.php that have tions are then stored as JavaScript functions most of their features in common with a dif- and selected during every iteration of prog- ference that in preview the data is not written ress bar loading. into the database. The progress bar has a modifiable frequency These pages contain a script that is executed of value updates and the time of length. The 64 once the user loads the page. It consists of frequency during testing has been set to 25 several steps, usually separated by setInter- frames per second and the length to 8 sec- val or setTimeout functions in order to have onds. Based on these constants and the final an exact time interval for each of the steps. value of each distorting function, the array of At the start of the comparisons, the count- input values having the same dispersions is down is set to let the user get ready and fo- created. These values are then given to a rel- cused. The comparison differs depending on evant distortion function which later returns whether it is the first comparison shown (5 a distorted value. The distorted value is then seconds) or any other (3 seconds). Once the projected to the progress bar. countdown finishes the first progress bar is The progress bar is hidden 600msecs after shown. the final value is projected, and the second one shows. Duration of the animation and execution extends these time intervals (this applies to the other time intervals too). After finishing the second progress bar, it hides, and the rating scale appears. The rating scale is a group of radio buttons, designed to look like regular buttons (, and elements were used). Therefore they keep the ability of auto- deselecting if another button is selected. Once the form is submitted, it is checked if 65 some of the radio buttons is selected (in preview.php by a simple JavaScript, in questionnaire.php by required attribute). If not, a warning text is shown, otherwise the form is successfully submitted, and the selected value written into the database. Whenever the last progress bar is shown, the user is redirected to thanks.php. 3.4 Testing

The whole testing had two parts. The first ter asking them how they would feel if they part was pilot testing that was carried out on answered the research at home without a a small sample of users with the aim of re- moderator, two respondents said that they vealing the weaknesses of the experiments. would probably quit before finishing it. Due to After finishing the pilot testing, the bugs and these responses, the changes were made to other weaknesses were fixed, and both parts the number of comparisons for public testing. of the main tasting started. From the original 20, they were reduced to 10 questions per respondent, but the amount of 66 3.4.1 Pilot Testing patterns has doubled; therefore no data were lost. Amount of respondents has been theo- The pilot testing has been conducted on four retically halved, but a large sample of respon- users with a laboratory version of the ques- dents would probably quit before finishing the tionnaire. The users had no crucial troubles questionnaire or get upset; hence this solu- with understanding the instructions during the tion was chosen. research. During the post-research interview, they had some comments and suggestions. The time length of the loading was considered too long. Therefore it has been shorten Most of the respondents agreed that the to 8 seconds that still sufficiently showed the length of the whole questionnaire was too characteristics of the function but were not long. They admitted that during the last too long. questions they got really bored and tired. Af- Another factor two of respondents com- 3.4.2 Main Testing plained about was the length of the count- The main testing consists of two separate down before every comparison (originally 5 experiments—public testing conducted on seconds). Considering their complaints, I de- anonymous users of Internet and laboratory cided to shortened all the countdowns to 3 testing conducted on respondents invited to seconds, except the first one in every ques- the environment of a laboratory. The findings tionnaire to let respondents get focused be- found in pilot testing were implemented into fore observing the loading itself. the final design of the testing application. A One of the respondents has been hesitating source code of the website is available in Ar- during the first question of the questionnaire. chive. When asked about this hesitation during the post-research interview, the respondent an- 3.4.2.1 Laboratory Testing 67 swered that he was not sure about the mean- The data collection for laboratory testing was ing of the values inside the radio buttons. To conducted in a school laboratory within 10 ensure that all the respondents do always groups counting from 1 to 12 respondents know what all the values mean, simple de- per group. Every respondent was using his scription labels were added underneath the own computer and had at least one seat on scale. each side free so that they were not affected To help respondents imagine what the in- by others (see Figure 16 and 17). In the labo- structions (before the questionnaire) are talk- ratory were no significant distractions during ing about, an image of progress bar has been the testing. added to the Instructions text. The testing was conducted using an online 3.4.2.2 Public Testing web application, having a different link than The data collection for public testing took 14 public testing (http://www.marekaugustin. days. A public link (http://www.marekaugus- cz/bp-lab). The browser used was Google tin.cz/bp-public) was sent to relatives and Chrome version 70.0.3538 in the full-screen friends, and they were asked to share the link mode. The screen the respondents used with their circle of friends. Apart from shar- was LG 32UD99 32”, with resolution set to ing a link within the friends, the link was also 3840 × 2160px. The web application was posted to 5 well-known Facebook groups running on Windows 10 Education, Intel(R) with a request to help with a bachelor thesis Core(TM) i7-8700 CPU, 32.0GB RAM and and short introduction of the thesis itself. NVIDIA GeForce GTX 1070 GPU. They inter- 68 acted with computer using mouse. Because of conducting the public testing under non-controlled environment conditions, At the beginning of the research, the users there is no information about the hardware or were informed that during the testing they are software used (exception is for the screen be- going to be comparing progress bars. They ing at least 1200px wide). were asked to turn off their mobile phones, to not communicate with others and once they finish their questionnaire to stay calmly in their seat to not disturb others. The questionnaire database was then checked by the moderator online to know when all the respondents had ended. 69 Figure 16, Laboratory Experiment Figure 17, Laboratory Experiment 72 Results Results4 73 4.1 Laboratory Results

To analyze the users’ preference between two To investigate the general preferences of par- functions (both when the order of the com- ticipants, I tested suggested differences in pared function matters and when it does not) preferences with the use of inferential statis- the same method as Harrison et al. has been tics to support my expectation about the gen- selected with modification that it is used on eral superiority of suggested function “Early a scale from -5 to 5 (instead of -1, 0, 1). The Pause after Power”. The data were normally ratings of each function pair a user has giv- distributed, so I used parametric tests for the en are summed up and later divided by the deeper analyses. 74 number of the values which produces a mean value the users have given. An example might 4.1.1 General Evaluation be function 1 versus function 2. Function 1 is I used one-way ANOVA (analysis of variance) evaluated by these values: -3, 2, 4, 0, 3, -1 to indicate suggested effect in reported pref- (therefore function 2 gets 3, -2, -4, 0, -3, and erences of participants. In the controlled lab- 1), the sum is then divided by 6 and the mean oratory conditions 46 people were tested, of value would be 0.83—positive value, there- which 33 were male and 13 female. They were fore the function 1 is preferred. This method aged from 19 to 26 (m = 21.93, med = 22, takes into account that numerous low nega- sd = 1.531), both from technical (34) and oth- tive values in combination with a few large er (12) fields. positive values may produce mean of 0. ANOVA indicated significant effect between functions (F = 28.478, df = 4, p < 0.001). The analysis of the values calculated with with “Power” the trend of a dominance of one respect to the order of functions within the of the functions is very well visible. comparison couple has shown that users tend The overall values with no respect to the or- to prefer the first function they have seen. Us- ers have selected the first function in 48% of der have proven the hypothesis that the “Early all answers, 31% the second one and 21% did Pause after Wave” function is the most domi- not prefer any. Figure 18 shows values com- nant of them all. The second strongest (fast- puted by the mean method. Rows represent est perceived) one is “Power” function, then functions that have been shown first. Espe- “Wave after Power”, “Linear” and the last is cially in comparisons of “Linear” with “Early “Early Pause after Wave”. Mean values of mu- Pause after Wave”, and “Wave after Power” tual comparisons are summarized in Figure 19. Rows represent functions that have been shown first, red values are significantly different. 75

Figure 18, Table of Relative Values Figure 19, Table of Absolute Values Post-hoc test analyses were used to find specific differences between levels. Tukey HSD test11 indicated significant difference (p < 0.05) between various functions. The data are available in Figure 20—first in the row was shown first during the comparison, red values indicate significant difference. Mean values of evaluation (against all the other functions) for every function support the results with the same dominance trend (Figure 21—values written next to the bars 76 are the mean evaluation values, values next to the name of a function are their standard deviations).

11 https://web.archive.org/web/20081017161620/http://faculty.vassar.edu/lowry/ch14pt2.html Figure 20, HSD Test Results Figure 21, Mean Values Values with a significant difference from com- function was perceived as the slowest, solid parisons without respect to the mutual or- line represents a significantly different rela- der have been then used to form a topologi- tion, dashed represents relation that was not cal order of the functions. The final order of significantly different. functions is shown in Figure 22—the leftmost

Figure 22, Topological Order of Functions 4.1.2 The Interindividual Differ- case of laboratory testing, the results were ences Among Tested Laboratory explored with respect to respondents’ specialization (specifically between respondents Sample of technical area versus other specializations), and gender. For the visual comparison To bring better insight into the issue, I further see Figure 23 (specialization) and Figure 24 explored suggested differences between the (gender). evaluation of functions by participants. In the

Figure 23, Visual Comparison Technicians vs. Others Figure 24, Visual Comparison Male vs. Female 4.1.2.1 Specialization 4.1.2.3 Age I tested differences between respondents Due to a small sample of older respondents of technical areas and respondents of other in the laboratory experiment, the analysis of specializations using Independent Samples the difference between millennials and older T-Test (assumption of normal distribution was users was not conducted. met). However, no significant differences were found between technicians and other specialization respondents. 4.1.2.2 Gender 80 With respect to gender, Independent samples T-Test (also, in this case, the assumption of normal distribution was met) were used to explore differences between males and females. Only in the case of “Early Pause and Power” function were found significant differences (t = 2.673; p = 0.008) between men (m = 0.7; sd = 1.99) and women (m = 1.34; sd = 2.22), see Figure 25.

Figure 25, Visual Comparison of Sig. Differences of “Early Pause after Power” function, Male vs. Female 81 4.2 Public results

Similarly to the laboratory testing the mean the people, who did not complete the whole method (see Chapter 4.1) has been cho- questionnaire, were eliminated). They were sen. The public testing has been conducted aged from 16 to 68 (m = 27.545, med = 23, on anonymous respondents using an online sd = 10.598), both from technical (84) and questionnaire. other (108) fields. To investigate the general preferences of ANOVA indicated significant effect between participants, the inferential statistics have functions (F = 53.827, df = 4, p < 0.001), been used again to support the expectations. similar as in the laboratory testing. 82 The results were normally distributed again; The phenomenon of users selecting the first therefore parametric tests were used for the function more often has occurred during pub- deeper analysis. lic experiment again (see the Figure 26). How- ever, the percentual difference is smaller than 4.2.1 General Evaluation in the laboratory experiment (the first func- Similarly to the laboratory condition test, I tion has been selected in 41% of cases, sec- used one-way ANOVA to indicate suggested ond one 35% and in 24% was selected zero). effect regarding reported preferences of general public users. During 14 days of testing There was no effect of visible dominance of in the public environment, 192 people con- the first seen function calculated via mean ducted the whole questionnaire (answers of values during the public experiment (see the same Figure 26). In contrary, there has been a new behavior of preferring the second func- mutual mean values and significance (see Fig- tion during comparison of “Linear” function ure 27, red values are significantly different). versus “Wave after Power” function. While not calculating with respect to the order of functions within the comparison couple, the hypothesis of “Early Pause after Wavy” function being the fastest has been proven again. Other functions had the same order within each other too, the only difference was their

Figure 26, Table of Relative Values Figure 27, Table of Absolute Values Post-hoc test analyses were used to find specific differences between levels. Tukey HSD test indicated a significant difference (p < 0.05) between various functions. The data are available in Figure 28—first in the row was shown first during the comparison, red values indicate significant difference. Mean values of evaluation (against all the other functions) for every function support the results with the same dominance trend (Fig- ure 29—values next to the bars are the mean 84 evaluation values, values next to the name of a function are their standard deviations).

Figure 28, HSD Test Results Figure 29, Mean Values Similarly to the laboratory experiment, values is shown in Figure 30—the leftmost function with a significant difference from comparisons was perceived as the slowest, solid line repre- without respect to the mutual order have sents a significantly different relation, dashed been then used to form a topological order represents relation that was not significantly of the functions. The final order of functions different.

Figure 30, Topological Order of Functions 4.2.2 The Interindividual Differ- dents, the data were explored with respect to ences Among Tested Public Sample respondents’ specialization (specifically between respondents of technical area versus Also in this experiment, I further explored other specializations, Figure 31), age (born suggested differences between the evalua- before, respectively after 1980, Figure 32), tion of functions by participants. In the case and gender (Figure 33). of testing of the public sample of respon-

Figure 31, Visual Comparison Technicians vs. Others Figure 32, Visual Comparison Older and Younger than 80 4.2.2.2 Gender With respect to gender, I used Independent samples T-Test (assumption of normal distribution was met) to explore differences between males and females. Only in the case of “Early Pause and Power” function, similarly as in the laboratory sample were found significant differences (t = 2.301; p = 0.021) between men (m = 0.11; sd = 2.17) and women (m = 0.48; sd = 2.15), see Figure 34. 88

Figure 33, Visual Comparison Male vs. Female

4.2.2.1 Specialization I tested differences between respondents of technical areas and respondents of other specializations using Independent Samples T-Test (assumption of normal distribution was met); however, no significant differences were found Figure 34, Visual Comparison of Sig. Differences of Linear between technicians and other specializations. Function, Male vs. Female 4.2.2.3 Age In the case of age, T-Test (assumption of normal distribution was met) indicated significant difference (t = 2.422; p = 0.016) between evaluation of people born before 1980 (m = 0.03; sd = 1.97) and after 1980 (m = -0.46; sd = 2.21).

89 4.3 Discussion

Thanks to the comparing new functions with nite mutual order within the functions on the two of the original ones, it is now possible to same interval of the axis. place the new functions on a number line cre- The analysis comparing laboratory testing ated by Harrison et al. [1, p. 117, Figure 4]. with the public one has not uncovered any Even though it is not possible to classify the significant differences between results col- new functions with an exact number, the to- lected from users in these two different en- pological order of functions gives us an idea vironments. The only difference between of how would they fit into the original order these two experiments was visible during the (Figure 35). Original (green points) [1], edit- 90 analysis of relative values with respect to the ed (pink points representing the investigated mutual order, specifically the comparison of functions). Bottom branches represent indefi- “Linear” and “Wave after Power” functions. In the laboratory experiment, the testing in both orders has resulted in favor of “Wave after Power” function. Compared to that, in the public testing, the results were indecisive. Both functions were once preferred over the other, but surpris- ingly, only if they were shown as second com- Figure 35, Order of Original Functions and New Ones pared function. This phenomenon has not been spotted or described yet neither by Har- of a higher number of respondents in public rison et al. and would be interesting to study testing, to prevent random ambient conditions it deeper. Considering the resulting values of to manipulate the output results. a laboratory experiment were both very close In general, females, as well as older people in to zero, I do not assume that the phenomenon public testing, tended to use a larger domain of the second function shown was a statistical of values. I suppose that older people tend exception. to use more extreme values because younger Apart from this phenomenon, it is possible to people usually have more experience with say (at the basis of balanced results between using or seeing the progress bars. From this both experiments) that the ecological validity experience, they know that the differences of a previous research, done by Harrison et al. in progress bar duration can be much bigger 91 in the laboratory environment, has been suffi- than sometimes just a slight difference that cient in a way to report relevant results that are was possible to see in this experiment. Even then applicable in real life situations. More- though females preferred to rate with higher over, it is possible to say that for future works values too, I do not suppose it was for the with progress bars conducted on a similar ba- same reason as elder users. sis of comparing two different behaviors, it is The hypothesis of technicians having different not necessary to test in both environments. answers then other specializations was not The laboratory environment in such testing confirmed. does not cause users to behave differently than they would behave in real life situation. That is The final order of tested functions says that especially advantageous due to a requirement the “Power” function in combination with any other has an effect of making the prog- the commercial sphere, this feature could be ress bars be perceived as faster than if the well-suited to enhance user experience. data were projected linearly. Therefore, it is possible to say that the “Power” function has a dominance no matter what is the second function that it is in combination with. Whether it is a function with characteristics of making the progress bar look slower or faster. In both situations, the Peak-and-End effect dominates and improves (makes faster) the final overall impression. 92 This fact enlarges the field of use of distortions in a practical use. On one hand, as Har- rison et al. have already stated, the progress bars with progress corresponding to the ap- proximated state are sufficient to visualize the ongoing process. On the other hand, thanks to the discovered facts, it is possible to use a distortion on any progress bar without knowing its future behavior (no matter if it will stop for a while, periodically slow down or have some other combination of behaviors). In 93 94 Conclusion5 95 The goal of this work was to broaden and Pause”, “Early Pause after Power”) and later confirm the relevance of existing research on examining them by scale rating. The sample of distortions used to manipulate users’ percep- respondents have been enlarged and divided tion of progress bars made by Harrison et al. into two separate experiments—laboratory [1]. testing and public testing. Before conducting the main testing, a pilot test was performed The beginning of this work is dedicated to in- to reveal hidden weaknesses of the experi- troduction of the topic of user experience as ments. well as to the description of ways to visualize progress in a graphical user interface, what Experiments comparing both new and origi- progress bars are and what techniques can nal functions then showed that the Peak-and- be used to manipulate users’ perception on End phenomenon has a large positive effect 96 progress bars. on the perception of a user. Moreover, it can inhibit negative effects like periodical slowing The work starts with a description of the down or pausing. Also, a hypothesis that the methodology itself also with detailed prepa- “Power” function is better perceived then the ration of user interface later used during the “Linear” one has been confirmed. All these experiments. Some of the original method- results are applicable in the software devel- ologies of experiments have been modified opment in order to improve the user experi- in order to obtain more relevant data as well ence, especially by shortening the perceived as to obtain data that the original work did progress bar duration during their unexpect- not investigate. This has also been achieved ed behaviors. by composing existing functions into new The work has also explored a new phenom- ones (“Wave after Power”, “Wave after Early enon of “second shown progress bar” that, in some cases, contradicts the principles that resulted from the original work by Harrison et al. The collected data also served as a source for various exploratory analyses. These analyses were carried out on the basis of demographi- cal differences (gender, specialization, age) and showed differences between genders, and also between millennials and older respondents—females and older users tend to use a larger domain of answers. 97 5.1 Future work

Findings of this work opened various topics new phenomena which would enlarge the us- to be discussed in the future. The discovery age of distortions for improving user experi- of the “second shown progress bar” phenom- ence again. enon established a new field that could be in- Because females behaved differently during vestigated. Usage of different functions with both experiments (see Chapter 4.1.2.2 and similar trends as “Linear” function and “Wave 4.2.2.2), another research could be focused after Power” function during the comparisons on this topic. might reveal new findings, that would help to 98 describe it. Also, some new behaviors might A big contribution for future research might occur if the strength of a “Power” function also be a possibility of usage of the web appli- is greater (for example as the “Fast Power” cation implemented for this work (available in function in the original work [1]). Archive). It is easily adaptable to many kinds of other experiments focused on progress bar Usage of two different environmental con- distortions. ditions showed that both experiments have similar results. Therefore, for future work, it would be sufficient to research only in one of these environments. Also, it would be interesting to investigate longer progress bar durations that might show 99 5.2 Sources

[1] HARRISON, Chris; AMENTO, Brian; puter Interaction. 3rd ed. Harlow, England: KUZNETSOV, Stacey; BELL,Robert. Re- Pearson Prentice Hall, 2003. ISBN 978-0-13- thinking the Progress Bar. In: Proceedings 046109-4. of the 20th An-nual ACM Symposium on [4] “Virtuix Omni”. http://www.virtuix.com/. User Interface Software and Technolo- Retrieved 2018-12-9. gy. New-port, Rhode Island, USA: ACM, 2007, pp. 115–118. UIST ’07. ISBN 978- [5] NELSON-JONES, Richard. Six Key Ap- 1-59593-679-0. Available from DOI: proaches to Counselling and Therapy. Lon- 100 10.1145/1294211.1294231.17 don and New York: Continuum, 2000, p. 142. ISBN 0-8264-4969-7. [2] LANGER, Thomas; SARIN, Rakesh; WE- BER, Martin. The retrospective evaluation of [6] NEWELL, Allen; SIMON, Herbert Al- payment sequences: duration neglect and exander. Human problem solving. Engle- peak-and-end effects. Journal of Economic wood Cliffs (New Jersey) : Prentice-Hall, Behavior Organization. 2005, vol. 58,no. c1972., 1972. ISBN 0-13-445403-0. 1, pp. 157–175. ISSN 0167-2681. Avail- Available also from:http://ezproxy.muni. able from DOI: https://doi.org/10.1016/j. cz/login?url=https://search.ebscohost. jebo.2004.01.001.17 com/login.aspx?direct=true&AuthType= ip,cookie,uid&db=cat02515a&AN=muc. [3] DIX, Alan; FINLAY, Janet; ABOWD, MUB01000041884&lang=cs&site=eds- Gregory D.; BEALE, Russell. Human Com- live&scope=site.17 [7] JAMES, William. What is an Emotion? [13] HARTSON, Rex; PYLA, Pardha. The UX Mind. 1884, vol. 9, no. 34, pp.188–205. Book: Process and Guidelines for Ensuring a ISSN 00264423, 14602113. ISSN 00264423, Quality User Experience. 1st. San Francisco, 14602113. Avail-able also from:http://www. CA, USA: Morgan Kaufmann Publishers Inc., jstor.org/stable/2246769.17 2012. ISBN 0123852412, 9780123852410. [8] “computer keyboard”. TheFreeDictionary. [14] MANOS, Bill; AUGUSTIN, Marek. Hu- com. Retrieved 2018-12-9. man—Computer Interaction course, Brno, [9] “SwiftKey”. https://www.microsoft. Masaryk University, 2018. com/en-us/swiftkey?rtc=1&activetab=piv- [15] UNGER, Russ; CHANDLER, Carolyn. A ot_1:primaryr2. Retrieved 2018-12-9. Project Guide to UX Design: For User Experi- [10] “Browser DIsplay Statistics”. https:// ence Designers in the Field or in the Making. 101 www.w3schools.com/browsers/browsers_ Berkeley, CA, USA: New Riders Publishing, display.asp. Retrieved 2018-12-9 2009. ISBN 978-0-321-60737-9. [11] BEVAN, Nigel. What is the difference [16] GOODMAN, Elizabeth; KUNIAVSKY between the purpose of usability and user Mike; MOED Andrea. Observing the User experience evaluation methods? Proceedings Experience, A Practitioner’s Guide to User of the Workshop UXEM. 2009. Research, Second edition. Waltham, MA, USA: Elsevier Inc, 2012. ISBN 978-0-12- [12] BULEY, Leah. The User Experience 384869-7. Team of One: A Research and Design Surviv- al Guide. New York, USA: Rosenfeld Media, 2013. 264 s. ISBN 1-933820-18-7. [17] HANSEN, Charles D.; JOHNSON, Chris [22] HARRISON, Chris; YEO, Zhiquan; R. Visualization Handbook. Elsevier Inc., HUDSON, Scott. Faster Progress Bars: 2005. ISBN 9780123875822 Manipulating Perceived Duration with Visual Augmentations. In: 2010, vol. [18] MURPHY, Glen; RAKOWSKI, Brian; 3, pp. 1545–1548. Available from DOI: GOODGER, Ben; FISHER, Darin. Multi-stage 10.1145/1753326.1753556. throbber. Google Patents, 2014. US Patent 8,726,182. [23] “Millenials”. https://en.wikipedia.org/ wiki/Millennials. Retrieved 2018-12-9. [19] MODEL, Mitchell L. Monitoring System Behavior in a Complex Computational Envi- [24] “Bootstrap 4.0”. https://getbootstrap. ronment. Stanford, CA, USA: Stanford Uni- com/ . Retreived 2018-12-9 102 versity, 1979. PhD thesis. AAI7917263. [20] MYERS, Brad. The importance of percent-done progress indicators for computer-human interfaces. ACM SIG- CHI Bulletin. 1985, vol. 16, pp. 11–17. ISBN 0-89791-149-0. Available from DOI: 10.1145/317456.317459. [21] “Progress indicators”. https://material. io/design/components/progress-indicators. html. Retrieved 2018-11-30. 5.3 Attached files

As a part of this thesis is also an attachment available in the Information System of Ma- saryk University. The attachment consists of three archives (experiment_lab.zip, experi- ment_public.zip, experiment_public_en.zip), each containing website source files used for the experiments (laboratory, public and public—english), two CSV files representing collected data from both experiments (data_ 103 lab.csv, data_public.csv, data of users who did not finish the experiment are not includ- ed) and a file containing three links to the live presentation of the websites (links.txt). Also, this thesis in electronic version is a part of the IS MU Archive.