Manageiq Expression Editor

Masaryk University Faculty of Informatics

ManageIQ Expression Editor

Master’s Thesis

Bc. Robin Knaur

Brno, Fall 2018

Masaryk University Faculty of Informatics

ManageIQ Expression Editor

Master’s Thesis

Bc. Robin Knaur

Brno, Fall 2018

This is where a copy of the official signed thesis assignment and a copy ofthe Statement of an Author is located in the printed version of the document.

Declaration

Hereby I declare that this paper 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.

Bc. Robin Knaur

Advisor: Mgr. Martin Povolný

Acknowledgements

I would like to thank my advisor Martin Povolný for his guidance and valuable feedback. I would also like to thank Tereza Tichá for the consultations regarding the visual part of my thesis. Another person who deserves my gratitude is Martin Maroši, he helped me to understand the JavaScript technologies used here. Last but not least I want to thank to everybody who was willing to participate in user testing.

iii Abstract

The goal of this thesis is to design and implement a new filtering tool for ManageIQ project with emphasis on user experience. The first part of the thesis describes the theoretical background. Continuing with analysis of the current filtering tool and evaluation against theoretical concepts. In the last chapter is described design, testing, and implementation of the new filtering tool.

iv Keywords

User Interface Design, Usability, User Experience, Web Design, Filter- ing, Usability Heuristics, User Testing

Contents

1 Introduction 1

2 Design 3 2.1 What is design ...... 3 2.2 Principles of interaction ...... 4 2.2.1 Affordances ...... 5 2.2.2 Signifiers ...... 5 2.2.3 Mapping ...... 6 2.2.4 Feedback ...... 6 2.2.5 Constraints ...... 7 2.2.6 Conceptual models ...... 7 2.3 Actions ...... 8 2.3.1 How people do things ...... 8 2.3.2 Seven stages of actions ...... 8 2.4 Knowledge in the head and in the world ...... 9 2.4.1 Knowledge in the world ...... 10 2.4.2 Knowledge in the head ...... 11 2.5 Gestalt principles ...... 12 2.5.1 Law of Similarity ...... 12 2.5.2 Law of Figure/Ground ...... 12 2.5.3 Law of Proximity ...... 12 2.5.4 Law of Continuity ...... 12 2.5.5 Law of Closure ...... 12 2.5.6 Law of Symmetry ...... 13 2.5.7 Law of Common Region ...... 13 2.5.8 Law of Common Fate ...... 13

3 User Experience 15 3.1 Usability ...... 15 3.2 Heuristic Evaluation ...... 16 3.2.1 Ten Usability Heuristics ...... 16 3.2.2 Visibility of System Status ...... 16 3.2.3 Match Between the System and the Real World . 17 3.2.4 User Control and Freedom ...... 17 3.2.5 Consistency and standards ...... 17

vii 3.2.6 Error Prevention ...... 18 3.2.7 Recognition rather than Recall ...... 21 3.2.8 Flexibility and Efficiency of Use ...... 22 3.2.9 Aesthetic and Minimalist Design ...... 22 3.2.10 Help Users Recognize, Diagnose, and Recover from Errors ...... 22 3.2.11 Help and Documentation ...... 23

4 User Testing 25 4.1 What is User Testing? ...... 25 4.2 Amount of Users ...... 26

5 Analysis 29 5.1 What is Expression Editor? ...... 29 5.2 What does it look like? ...... 30 5.3 Evaluation against ten usability heuristics ...... 32 5.4 Usability Problems ...... 33 5.5 User Testing ...... 36 5.5.1 Task 1 ...... 36 5.5.2 Task 2 ...... 37 5.5.3 Task 3 ...... 37 5.5.4 Task 4 ...... 37 5.5.5 Task 5 ...... 37 5.5.6 Task 6 ...... 37 5.5.7 Task 7 ...... 38 5.5.8 General problems ...... 38 5.6 Technical Analysis ...... 38

6 Similar applications 39 6.1 E-shops ...... 39 6.2 Gmail ...... 39 6.3 Amazon Web Services ...... 40 6.4 JQuery QueryBuilder ...... 41 6.5 Summary ...... 42

7 The New Expression Editor 43 7.1 Technology ...... 43 7.1.1 Component based development ...... 43 viii 7.1.2 React ...... 44 7.1.3 Redux ...... 44 7.1.4 PatternFly ...... 44 7.2 High Level Overview ...... 45 7.3 Data Structure ...... 45 7.4 User Testing ...... 47 7.4.1 First Round ...... 47 7.4.2 Second Round ...... 47 7.4.3 Third Round ...... 49 7.5 Summary ...... 51 7.5.1 Visual ...... 51 7.5.2 Interaction ...... 52 7.5.3 Implementation ...... 53

8 Conclusions 55

Index 57

A An appendix 57

Bibliography 59

List of Figures

4.1 User Testing plot for L = 31% [19] 26 5.1 Empty Expression Editor 30 5.2 Edit Selected Element 31 5.3 Edit Expression 31 5.4 Long Name Selection 34 5.5 Long Name "Use Alias" default option 34 5.6 "Use Alias" feature 35 6.1 Gmail compose email 40 6.2 AWS Instances filter 40 6.3 JQuery Query Builder 41 7.1 Example of complete options tree 46 7.2 Example of shallow options tree 47 7.3 Early version of the new Expression Editor 48 7.4 New Expression Editor 51

1 Introduction

Ever since data collections existed, there was a need to access particular subsets of collections. This action is called data filtering and it is one of the oldest practical problems in Information Technology.

The problem of filtering can be divided into two parts — first, technical implementation. How to filter data efficiently, where and how will the data be stored, what code will be executed and when. That is what this text is not about. The second part — how the filtering will be presented to a user — that is what this thesis is about.

Databases are a common source of a presented data. Query lan- guages, like SQL, can be considered a user interface to a database. They are widely used by developers. However, they are suitable for advanced users only. Moreover, giving a user direct access to a database, or any other data source, presents a potential security threat.

Usability and security are the two main reasons why applications have a graphical user interface for filtering. The best example of an application that is mostly based on filtering data could be an e-shop. When a user is browsing an e-shop, the application is applying different filters to the data and presents it to the user.

ManageIQ1 is an open source management platform for hybrid IT infrastructure. It collects data about virtual machines, hosts, containers and other entities that users can manage. Amount of records could be large, that is the reason why ManageIQ contains a complex tool called the Expression Editor that is used to build search queries. The Expression Editor abstracts away the database from users and is a secure way of data filtering. Due to its complexity, its usage is not easy for an inexperienced user. The goal of this thesis is to redesign the Expression Editor with user experience in mind.

1. http://manageiq.org

1 1. Introduction

In the first half of the thesis, the theoretical background of user experience principles is described. The second chapter focuses on the fundamentals of design and interaction and describes key human characteristics that need to be understood. The third chapter is about user experience heuristics and the fourth about user testing. With the fifth chapter starts the practical part of the work. It analyses the problems and evaluates the current solution against concepts described in the theoretical part. The sixth chapter analyzes solutions to similar problems. The newly implemented solution is described and evaluated in the seventh chapter.

2 2 Design

This work is going to bring a little broader perspective on how to design a good user interface (UI). Let’s focus on the design itself. About how people interact with their surroundings. Breaking down what happens in our head when we decide to perform an action. This work will describe the underlying principles of design, even though it will be more related to psychology than traditional informatics. This chapter is heavily influenced by Normans, Design of Everyday Things.

2.1 What is design

"Design is concerned with how things work, how they are controlled, and the nature of the interaction between people and technology. When done well, the results are brilliant, pleasurable products. When done badly, the products are unusable, leading to great frustration and irritation [1, p. 5]."

Most devices around us are still pretty simple compared to humans. Devices just blindly follow the rigid rules somebody built for them, even if the rules are insensible or illogical. Machines have no memory ("human-like memory"), common sense or empathy, so humans need to learn machine rules to operate them. Humans are not good at strictly following rules, especially, when they often do not know them precisely. If users fail to learn or just slip when interacting with a machine, it will lead to unexpected results and eventually to the frustration. Good design should prevent such situations or at least make it easy to recover from them [1, p. 5, 6].

All human-made things are designed, but products do not have to be physical. Simple axe from the bronze age, computer program or mail delivery service are designed by humans. We have a long history in this particular activity, which could lead us to the conclusion that we should be naturally good at it. Except we are not. Why is that? As technology develops, we are using much more complex devices. Moreover, those complex devices are available for people who do not

3 2. Design know anything about how they work internally. Also, people tend to use many times more devices than ever before. However, our human brain stays fundamentally the same. All the technology is becoming undividable part of our lives. Each product is designed in some context. While the context is changing rapidly, humans are not changing nearly as fast. People needed to change how they think about design to deal with this problem. That is why different approaches to design have been developed [1, p. 4].

A design process is a complex activity with a lot of contradictory requirements. Product must have these features, must be nice looking and durable, no bigger than this size, easy to use and definitely shouldn’t cost more than this amount of money. It could be impossible to meet all the requirements. We must prioritize our requirements and find a suitable compromise. To solve the issue of creating aus- able product, techniques like the human-centered design (HCD) was developed. HCD puts human needs, capabilities, and behavior first, then designs to accommodate those aspects [1, p. 8].

Product should fit human behavior, not the other way around. Peo- ple will not read instructions. People will make errors. So products should be designed with an awareness of human flaws in mind.

2.2 Principles of interaction

Interaction is bread and butter of design. When we first encounter a product we have to be able to figure out what it does, how doesit work and what we should do to get the task done. Norman [1] calls this discoverability. There are six psychological concepts, that describe different parts of discoverability [1, p. 10]: ∙ Affordances ∙ Signifiers ∙ Constraints ∙ Mappings ∙ Feedback ∙ Conceptual model

4 2. Design

2.2.1 Affordances The term "affordance" refers to the relationship between a physical object and a person. An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could be used[1, p. 11]. Affordances are determined by properties of the object and abilities of the person who is interacting with them. Different people could recognize different affordances with the same object. There also exist so-called anti-affordances which prevent us from performing an action. Affordances (and anti-affordances) exist even if they are not recognized. However, hidden affordances are troublesome (if not hidden intentionally), signifiers can be used for exposing them.[1, p. 10, 11, 12. 13]

For example a simple chair has many different affordances for different users. For an adult person, it offers affordance of sitting. That is the primary function of a chair. It can be moved, it can be used to stand on to reach higher places. A person can put her clothes on it. However, for a small child, a chair has different affordances. The child can climb on a chair, hide under it, use it as a support while trying to walk, but the child might not be able to use it for sitting. The chair can be mounted to the ground so that nobody can move it, that could be its anti-affordance.

2.2.2 Signifiers Affordances determine what actions are possible, whereas signifiers communicate where the action should take place. Signifier refers to any mark or sound, any perceivable indicator that communicates appropriate behavior to a person[1, p. 14]. Signifiers need to be perceived to be effective. If a person perceives something depends on more than the presence and strength of the stimulus. It also depends on the person anticipations. People are more likely to perceive things they are anticipating [2, p. 112].

It can be intentional as text labels, pictographs, diagrams, sound or anything designer can come up with. Even perceived affordances can act as signifiers, e.g., physical switch or door handle. Unintentional

5 2. Design signifiers are the ones that designer does not make on purpose, like a trail in snow or line in front of a shop. Both are equally important, they provide clues. The thing that matters is their ability to guide users action [1, p. 16, 17, 18].

2.2.3 Mapping Mapping means a relationship between two elements of two sets of things, for example, switches and lights. When the layout of controls and devices being controlled corresponds to each other, using proper mapping, it is easy to figure out how to use them.

While driving, to turn a car right, just turn the steering wheel right. To turn a wheelchair is a bit more difficult, the right wheel needs to turn slower than the left one. So if you stop the right wheel and turn only the left one, the wheelchair will rotate clockwise around the center of the right wheel. Mapping works, because it is not hard to create a conceptual model of how operating a control affects a vehicle. Conceptual models do not have to be accurate. There are many steps between steering a wheel and turning a car. It is important that they provide a way to remember and understand the mapping. Mapping which uses simple spatial analogies is called natural mapping, and it is easy to understand. Move control up, and the object moves up. Natural mapping can be biological or cultural. What can be considered natural for one group may not be natural for another [1, p. 21, 22].

2.2.4 Feedback Feedback is communicating the results of an action and current state of the system to the user. A human body is equipped with many feedback mechanisms (senses) and it is essential for interaction with an environment. Yet many human design products lack proper feedback [1, p. 23].

Feedback must be informative, understandable and immediate. There should be an appropriate amount of feedback. Too little and the user might be confused about what is happening. Too much and

6 2. Design

the user will be annoyed by the chatty machine and might start ignoring it. Feedback should be prioritized. Less important information displayed in a subtle way and important one should capture users attention [1, p. 23].

2.2.5 Constraints There are four classes of constraints: physical, cultural, semantic, and logical. Physical constraints restrict us from what is not possible to do and are present everywhere in the world. The other three are psychological and provide us a softer kind of restriction, more like what is reasonable to do. Physical constraints are especially practical when they restrict our actions before we have done anything. In the other case, physical constraints prevent the wrong action from succeeding. Cultural constraints define what is culturally acceptable for people. They vary in time and place. Conventions and standards are an example of cultural constraints. Semantic ones restrict us based on our knowledge of the world. Logical constraints are closely related to natural mapping. Logical constraints rely on the fact that humans are able to find a logical relationship between the layout of controls and the device being controlled [1, p. 123. 124, 125].

2.2.6 Conceptual models A conceptual model is an explanation, usually a highly simplified model, of how something works. It does not have to be complete or even accurate as long as it is useful [1, p. 26]. People always have a conceptual model and each person can have different one [2, p. 73].

Conceptual models are subjective, based on assumptions. As long as they hold, the model is working. However, when assumptions break, the model stops explaining what is happening and becomes more confusing than helpful. The source of these conceptual models could be another person, who explains how a machine works or technical manual, but often it is the device itself: How it looks, is it similar to something we used before. The user starts evaluating signifiers, affordances, constraints, and mappings, looking for feedback. Eventually, the user develops a functional conceptual model. A good model brings

7 2. Design us understanding, allows us to predict the results of our actions. More- over, when things go wrong, it explains why. Without it, the user can only blindly follow instructions, and when he/she gets to the point where there are no instructions, he/she is stuck [1, p. 26, 27, 28].

2.3 Actions

2.3.1 How people do things When people want to interact with a piece of technology, they face two major challenges. First, what actions should they take to get the desired goal? Second, when an action is performed, they need to evaluate if the actual result is desired. To help them solve the first problem, we use signifiers, constraints, mappings and conceptual model. For the second, we use feedback and conceptual model [1, p. 39].

2.3.2 Seven stages of actions We can divide each action into seven stages. This simplified model proves itself useful when designing interaction. Not all stages have to be executed consciously (and often are not) [1, p. 40].

Here follow seven stages of actions [1, p. 41]: 1. Goal (form the goal). 2. Plan (the action). 3. Specify (an action sequence). 4. Perform (the action sequence). 5. Perceive (the state of the world). 6. Interpret (the perception). 7. Compare (the outcome with the goal).

The action does not necessarily start from the first stage, specifying the goal. Many everyday actions are opportunistic rather than planned. We observe the world and base on what we see we decide what we want to do. You had not planned to cross the street on this particular pedestrian crossing, but since the green light just switched on, you will do it.

8 2. Design

These stages lead to questions which every person needs to answer (at least subconsciously) when trying to interact with any product or service [1, p. 71]: 1. What do I want to accomplish? 2. What are the alternative action sequences? 3. What action can I do now? 4. How do I do it? 5. What happened? 6. What does it mean? 7. Is this okay? Have I accomplished my goal?

2.4 Knowledge in the head and in the world

People’s knowledge about how a thing works is often incomplete, ambiguous or just wrong. Yet, we still manage to complete most of our everyday tasks without serious problems. How could we do that if our understanding is so flawed and limited? Because there are two types of knowledge people use everyday when interacting with the environment [1, p. 74]: ∙ Knowledge in the head. ∙ Knowledge in the world.

Both of them are equally important. Neither of them is sufficient on its own. People combine them to survive in the world.

There is an enormous amount of natural, physical constraints in the world, restricting our behavior. Each one of us carries with her/him many cultural conventions and constraints. Combining internal, external knowledge and constraints often leave people only a few suitable ways how to act. Because we know (at least subconsciously) about constraints, it minimizes the amount of material we have to learn, as well as the quality of understanding [1, p. 76, 77]. People are inherently lazy and often aim for "good enough" solutions [2, p. 132]. It is natural that people try to utilize all they can to minimize the effort needed to complete their tasks.

9 2. Design

2.4.1 Knowledge in the world the term "Knowledge in the world" refers to a human ability to interpret various situations and based on the observation to decide what is an appropriate action.

Consider a bicycle line on the pavement; there are white lines and pictographs of bikes on one side. Even if you do not know what the rules for marking bicycle lines are, you probably could figure out, that this is a bicycle line and you should not be walking there. Based on extremely vague knowledge in your head (bicycle lines exist) you have been able to determine the best possible action (not walking there). Because the information was there, lying on the pavement. Painted lines and pictographs are an example of knowledge in the word.

Knowledge in the world is everywhere, signifiers, physical constraints or natural mappings. People start to take these things for granted, because knowledge in the world is so common, that people can rely on it. Notes on the fridge, notebooks, calendars, placing keys on the same place next to the entrance door, organizing desk in a certain way, all of these are methods for transferring knowledge from our head into the world. It is an efficient technique that helps to solve many situations. Because people are used to it, they are using it extensively. People need to know surprisingly little to complete their tasks [1, p. 76, 77].

People tend to minimize the amount of needed knowledge. Any combination of knowledge in the head and in the world that can make the decision process clear is enough. It simplifies the execution of tasks and it is sufficient in the current environment. However, when the environment changes, suddenly the knowledge might not be sufficient and has to be updated. People are looking for salient clues [2, p. 104]. Press a red button is a salient clue when there is only one red button present. What if there are two red buttons next to each other? Now it is enough to say press the left or press the right one. It is ok to forget about the color because it does not help us to discriminate choices unless there are buttons of other colors present [1, p. 78, 79].

10 2. Design

2.4.2 Knowledge in the head

Knowledge in the world is valuable. However, only if it is present in the right place at the right time. If it is not, we have to seek knowledge inside our head, in our memory. There are two types of memory, short-term (working) and long-term memory [1, p. 92].

Short-term memory (STM) contains most recent experiences and thoughts; it keeps the present. Retrieving information from STM is effortless and quick, but the space is quite limited. Some studies suggest that people remember only four pieces of information in their STM. [2, p. 48]. Keeping items in STM for a longer time is difficult. If the person stops focusing on the particular thing and gets distracted, there is a high chance that the particular memory will be lost. It is easier to remember structured information, which does make sense to us, than a random thing [1, p. 94, 95].

Long-term memory (LTM) contains the past. It takes time and effort to put information in LTM and also to retrieve it back when needed. An interesting fact is, that when a person tries to get information from LTM, he/she reconstructs it. It is an active, sometimes even conscious process. That is the reason why the memory of past things changes, it is recreated every time. Quite often, when some dramatic event happened, people have vivid memories of the event. They see it like it was yesterday, but those emotionally affected memories tend not to be accurate [2, p. 60].

Knowledge in the head is essentially our memory, and human memory is known for many things, but not for flawlessness, preciseness or accuracy. Even in the perfect condition people could struggle to remember information. In real life situations, conditions are rarely perfect. Users need to deal with interrupts. Relying on human memory is not the best strategy when designing products.

11 2. Design 2.5 Gestalt principles

Gestalt principles are a product of psychology school which was born at the break of 19th and 20th century that looks at the human behavior as a whole. The fundamental thoughts of Gestalt psychology could be described by the citation from one of its creators, Kurt Koffka: "The whole is something else than the sum of its parts."It refers to an extraordinary human ability to generalize, interpret or ignore perceived things. Even though this approach is criticized by many modern psychologists, for being descriptive rather than explaining. This descriptive nature of Gestalt principles is a useful tool for designing user interfaces [3, 4].

2.5.1 Law of Similarity Objects that look similar appear to be grouped together.

2.5.2 Law of Figure/Ground Our mind tends to separate the scene into the figure (the foreground) and the ground (the background). The foreground are the objects of primary attention, and the background is everything else.

2.5.3 Law of Proximity Objects that are close to each other seems to be grouped together.

2.5.4 Law of Continuity a human brain is used to receive continuous information. When a piece of information is missing; it fills the gap. Points or segments are seen as connected by the smoothest way.

2.5.5 Law of Closure Similar to continuity, when possible our brain tries to close open figures a perceive it as a whole object.

12 2. Design

2.5.6 Law of Symmetry When a more complex scene is presented, our brain organizes and simplifies it, possibly gives it symmetry.

2.5.7 Law of Common Region Objects in the same region are seen as grouped. This type of grouping is stronger than grouping by proximity.

2.5.8 Law of Common Fate Objects that move together appear to be grouped.

3 User Experience

3.1 Usability

Usability and user experience are two very closely related terms. Both are concerned with users ability to complete tasks. Usability according to ISO norm is defined as follows: "Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context ofuse [5]."

ISO definition for User experience is following: "Person’s percep- tions and responses resulting from the use and/or anticipated use of a product, system or service [6]."

User experience is a broader term, it includes all aspects related to using of the product before, during and after the use. Good or bad user experience might not be caused by the product, but by users attitude, bias or personality [6]. However, usability can also include emotional aspects often associated with user experience. From the practical point of view, the difference between usability and user experience is often not that big nor important. Characteristics of usable application often includes the emotional aspect [7, p. 9]: ∙ Useful: Does it do something people need done? ∙ Learnable: Can people figure out how to use it? ∙ Memorable: Do they have to relearn it each time they use it? ∙ Effective: Does it get the job done? ∙ Efficient: Does it do it with reasonable amount of timeand effort? ∙ Desirable: Do people want it? ∙ Delightful: Is using it enjoyable or even fun?

Krug’s definition of usability: "A thing is useful when aperson of average (or even below average) ability and experience can figure how to use the thing to accomplish something without it being more trouble than it’s worth [7, p. 9]."

15 3. User Experience

There is no guaranteed procedure or set of rules, that would lead to designing a good user interface. Unlike hard sciences, user experience studies do not have any definitions or proven formulas to calculate if the user interface is good or bad. However, there are two widely accepted ways of testing: heuristic evaluation, and user testing. They are best when used together because they complement each other.

3.2 Heuristic Evaluation

Heuristic Evaluation is a technique for inspecting user interface of a product. One or more experts evaluate if the user interface complies with a set of heuristics. Heuristics are not set in stone, absolute truth rules. They are more like useful recommendations, guidelines. It was shown, that they work very well for many cases. They require inter- pretation, what is a violation of X heuristic for one reviewer, might be all right for the second one [8].

3.2.1 Ten Usability Heuristics First usability heuristics was introduced by Jakob Nielsen and Rolf Molich in 1990, and it was refined in 1994 into its final version. Itis based on analysis of many common usability problems transformed into ten heuristic principles [9].

3.2.2 Visibility of System Status Communicating system status to users is essential for more aspects of human life than just using web applications. People need information to make decisions, without knowing the current status it could be hard or even impossible to tell what is the right next step. Each interaction should have appropriate immediate feedback. It allows the users to find the source of error, and fix it. When no error happened, it ensures users, that everything is going well. Many systems are too complex to make it possible to communicate its whole state to the user. However, it is not necessary. What user needs to know is often actually a small subset of the whole internal state. Showing too much (useless) information is only a little bit better than showing nothing. Communication leads to understanding. Once the system is

16 3. User Experience

understood, not only the users can control the system, they can also predict how the system will behave. On the other hand, violation of this heuristics could lead to strong emotional reactions if system status is not displayed correctly or not displayed at all [10].

3.2.3 Match Between the System and the Real World Humans feel comfortable when they are surrounded by things they know. Rather than using technical or uncommon terms, the application should use familiar words and simple explanations. Otherwise, the user might need to search for the meaning of terms, which low- ers its willingness to use the application. He/she can just try to find another application that would suit its needs and uses terms he/she can understand. Using real-world object and activities as metaphors could be beneficial, if used correctly the user might not need tolearn anything new, and he/she can utilize knowledge he/she already has. However, not all people understand all the words and metaphors in the same way [11].

3.2.4 User Control and Freedom a user should be able to return to the default state of the application without significant effort from anywhere. Supporting undo andredo actions when it does make sense will ease interaction. Allow the user to save his/her progress or better, autosave it automatically. For example, when filling a complex form, the user spends significant time filling it. Nothing strengthens trust in application more than being able to recover from error effortlessly, quickly and completely [9].

3.2.5 Consistency and standards Consistency and standards are powerful usability tools. However, just following a standard and being internally consistent does not ensure good usability. No standard can be detailed enough to describe all possible choices encountered when designing a user interface.

"A standard ensures that your users can understand the individual interface elements in your design and that they know where to look

17 3. User Experience for what features. It does not ensure that users will know how to combine the interface features or that the system will have the features users needs." the standard usually describes the surface design, how individual parts will look and work on an elementary level. But deep design, still needs to be designed individually for each application. How the system will work as a whole, what are the user needs, what is the best structure for presenting information. Because each application is different [12].

Consistency is necessary for good usability. Not only consistency within your application, but also consistency between similar applications. This is most important for websites. As Jakob’s Law of Internet User Experience says: "Users spend most of their time on other sites." So if you keep consistent with web conventions, users can focus on the content rather than form [13].

3.2.6 Error Prevention

It is vital to communicate errors to the user in a nice understandable way, but it is even better to prevent those errors from happening by good design. When discussing errors, it is important to realize, that when an error happens, it is in most cases, not a user fault. It is a designer fault. This approach is not very common in society. For example, when an accident happens, an investigation team is created to figure out what happened. The investigation reveals that a responsible person should have done a instead of B or should have done C before D, it is clear, it is a human error. Investigation ends successfully; it found out that a particular person made a particular error, society is happy, we have found the truth. Except, this is not the whole truth. We stopped digging too soon. We have not asked enough "Why" questions. Why has this person done this? What leads him/her to do that? If it seems to be a machine fault, we are not satisfied until we found something which we consider the whole truth. Saying it is a machine fault is unacceptable, then why we are satisfied with human error? If we would dig deeper, we could find out that many of those human errors, were caused by bad design [1, p. 162-165].

18 3. User Experience

There are two types of errors that users make: slips and mistakes: ∙ Slip is a situation when a user wants to perform one action, but ends up doing another action, for example, typos or pushing one button instead of another one. Slips usually happen when the user is not fully concentrated on the task, often because a task is so routine, that they think it is not necessary. ∙ Mistakes are the more fundamental type of errors. They happen when users action is not suitable for solving the task, even if they think, that this is the right step towards their goal. Even if action was performed flawlessly, it could not lead to the goal. Mistakes are conscious errors, in the sense of, that user consciously chooses this action, but he/she is not aware of it being wrong. Mistakes are often caused by incomplete or incorrect information about the task, which leads to creating a misleading model [14].

Because slips are usually made from lack of attention, techniques for preventing them guide users towards their assumed goal. Includ- ing constraints on user input, not allowing to enter nonsensical data. Offering suggestions as user type to help prevent typos and support recognition over recall when a user, for example, does not remember the name correctly. Choosing a reasonable defaults that could fit their real-life goals. Providing good defaults also teaches users what the meaningful input values are. That helps them to understand the system. However, the defaults also bring potential problems. Peo- ple might not notice a default and end up accepting it without meaning to [2, p. 136]. Allow a user to enter data in a human-readable form; for example: to type phone number with spaces, dashes, parentheses and make the system deal with it. Alternatively, even better, choose a readable format and present number to a user as he/she writes, ignoring all nonnumerical characters [14].

When users want to accomplish some goal, they made an action plan according to their mental model. After the plan is created, users start to execute an action and verify if the action leads to the expected result. A lot of users mistakes happen because they form an incorrect action plan or they do not understand how their actions can change

19 3. User Experience the state of the system. To prevent mistakes, the designer must learn and match the user mental model. Not the other way round. Even though, if the users are forced by an external influence (company policy, lack of other options, etc.) to use the system regularly, they will eventually adapt their mental model to the application. But that is not a good approach. Otherwise, if users are not forced, they will find an app or website which will match their mental model better [15].

Using standard conventions will help. Using signifiers to communicate affordances; the users cannot use affordance if they do notknow that it is present or how to interact with it. In some cases, for example, when users choices are complex, or it is expected to take nontrivial time to evaluate users action, it might be useful to offer a preview. So the users can examine if what they are going to get is what they wanted [15].

Whenever a user needs to remember anything related to system state, it creates a possibility of errors. Removing such situations will help a user to focus on the actual task instead of the system. Show them the information that they need to complete the task, during the task complementation. Ask for users confirmation before performing destructive or other actions that are not easily undo-able. However be careful about overusing confirmations. Confirmation dialogs slow the users down and if present everywhere users will quickly learn to instinctively click on the "Confirm" button without thinking [15].

Another way how to deal with errors is to acknowledge that users will make errors and prepare the system for it. Provide a way to recover from an error easily. E.g., an undo button. Including such feature will make users feel safer and more confident, allowing them to experiment with unfamiliar features, simply because they know it is possible to recover from a mistake [15].

Presenting a warning before presenting a error if the system knows that current user input will cause an error. Allow the user to fix the issue before the error even happens [15].

20 3. User Experience

3.2.7 Recognition rather than Recall We can distinguish two types of memory retrieval: recognition and recall. Recognition is when you meet a girl, and you realize that you know her. If you can come up with her name or other personal details, we call that the recall. Note that the recognition is much easier. You can think about human memory like it is organized in interconnected chunks. Each chunk has its activation, which defines how easily it can be retrieved from memory.

The three main aspects that influence activation are these: ∙ Practice, how many times we used this memory. It is much easier to remember the thing which was repeated many times. ∙ Recency, how recently have this memory chunk been used, more recent gives better chances to remember. ∙ Context is the third and most complex factor that influences our ability to remember something. The connection between two chunks is called association. When a chunk is activated, this attention also spreads into connected chunks increasing their activation.

A recall could be described with the question: "What is her name?" and recognition "Is her name Jane?". For the first question, you have just memory chunk with her face, and you are looking for names. For second question you have the same chunk, but also you have chunk with name Jane, and you are just trying to examine how strongly there are connected. That is the main difference between recognition and recall, number of cues, context that can help you decide.

Most of the modern interfaces try to leverage recognition. For example in a word processor, if you want to change the style of a text to make it bold, there is a button with a picture of a bold letter, that you can easily associate to your task. If you need some more advanced feature, it might be hidden in the hierarchical menu, that is again recognition based. A user can scan through menu items till he/she finds something that suits his/her needs. Showing user previously viewed or used content could also improve the user experience.

21 3. User Experience

3.2.8 Flexibility and Efficiency of Use Users should be able to customize applications to support the work- flow of their frequent actions. Accelerators, like keyboard shortcuts, may increase the efficiency of using the product. If the application is expected to be used every day, or even to be the main work tool, do not underestimate the power of accelerators and flexibility [16].

3.2.9 Aesthetic and Minimalist Design Irrelevant or rarely needed information should not be present in dialogs, each piece of information competes with others for a limited amount of user’s attention. More information being present can lead to user knowing less [9].

3.2.10 Help Users Recognize, Diagnose, and Recover from Errors There are few characteristics of a good error message [17]: ∙ Explicit. When something wrong happens, there should be an indication of what happens. When a user makes a mistake, but the error has no explicit representation, the user has no idea what is wrong. When he/she tries again with the same result, he/she might get frustrated. Alternatively, even worse, he/she thinks that everything is all right when actually an error happened. ∙ Human-readable. People read those messages, not machines. It should not contain any codes, numbers or any other internal representation of the error. Error codes might be precise, but they have no value to the uneducated user. ∙ Polite phrasing in error messages. Do not blame the user for making a mistake or imply, that he/she is stupid. ∙ Precise but simple descriptions of the problem is better than general "something went wrong." ∙ Constructive advice on how the user could fix the problem. If fixing is impossible, try to offer some alternatives or suggest to inform the user when the problem will be fixed later. ∙ Visible and noticeable. If a user cannot see or didn’t notice the error message, it fails its purpose. Also, do not use color as the only mechanism for showing that something is wrong,

22 3. User Experience

there is a significant minority of color blind people who might not be able to tell the difference. ∙ Preserve as much of user’s work as possible. It is much better to let the user edit their original action than force them to make a new one. ∙ Reduce the amount of work needed to correct the error, offer some automated fixes if possible. ∙ Hypertext links can be used to educate the user; the message can contain few links to documentation that helps users to understand the technical background or explain the problem in more detail. However, do not overdo it, less is more, as for the most of the user presented content.

3.2.11 Help and Documentation Even though it is better if users can use the system without documentation and most of the users will never read it. Still, it is better to provide one. Documentation should be structured, easy to search, focused on the user’s task, provide a list of concrete steps [9].

4 User Testing

Even if you try to follow all heuristic principles in previous chapters, it is not guaranteed, that the result will be a usable product. It might still have usability problems, and as a creator, you will not be able to find them. To solve this problem, we can use "user testing". Thereare many ways to do user testing, and this chapter will describe some of them later. However, the most important thing about user testing is to do it. Even bad user testing, could provide useful insight [18, p. 16].

4.1 What is User Testing?

User testing is a method used to evaluate the usability of a product. You watch people who try to use the product. Listen to them and make notes about what is happening. Letting people interact with the application, that is the difference between user testing and other methods involving potential users. User testing can be counted as both, qualitative and quantitative testing, depending on how it is implemented [18, p. 13, 14].

Quantitative testing is not easy to do right and if done wrong the results could be questioned anytime. The whole process must be rigor- ous. A protocol should be defined and strictly followed by all partici- pants. There need to be enough users for the results to be statistically significant. The users need to be diverse so that they can represent actual users of the product.

The output of a quantitative study is numbers and statistics. Since user interaction is not easily described by mathematical formulas, figuring out what data needs to be collected and how to interpret them is another non-trivial part of the quantitative test. It is a complicated process, that needs many resources, so for the rest of the thesis when I mention user testing, I would mean qualitative user testing [18, p. 13, 14].

25 4. User Testing

Qualitative user testing does not try to provide any rigid data or to prove something, it is about getting some insights from users that will enable you to improve the product. Participant and facilitator sit in a room together, and the facilitator gives the participant task and asks him/her to think loudly as he/she tries to complete the task. There might be other people watching this session, though it is not necessary. When testing is done with several different users, all people watching should try to discuss what issues should be fixed and how to fix them [18, p. 13, 14].

4.2 Amount of Users

There is no need for hundreds or thousands of users for the qualitative testing. Depending on resources, individual project, having three to five users is enough. Percentage of found usability problems could be described with an inverted exponential function of the number of users [19].

1 − (1 − L)n (4.1) Where n is the number of users and L is the proportion of usability problems discovered while testing a single user. According to [19] typical value of L is 31%.

Figure 4.1: User Testing plot for L = 31% [19]

The first user brings a lot of useful, new feedback, almost one-third of all usability problems. The second user will still bring much new information, but not as much as the first person because some feedback

26 4. User Testing will be redundant. The third person will discover some of the flaws already discovered by the first or second user. Still, the third user brings some useful information, but less than previous. With each user added, the value of its feedback diminishes quickly, so it is not efficient to include too many users [19].

Having user testing with fifteen users will discover almost all issues. Our real goal is not to discover them, that is just the first step. We need to fix them. Fixing usability issues is a creative, potentially flawed process, it is not certain, that all problems that needed to be fixed will be fixed. There is also a chance that new issues will be introduced. That is another reason why it is not efficient to try to find and fixall problems at once. Running a new round of testing is required to verify that the designed solution for discovered problems is working. During the second round of testing, you will not only verify changes you have made but you will also discover some problems that were present from the beginning [19].

Iterative development with user testing with three to five user at the end of each cycle seems to be an efficient way to create a usable product. If there are several very different groups of users. It might be a good idea to include users from each group, even though a lot of the finding will be similar. Some findings might be unique for the group [19].

5 Analysis

5.1 What is Expression Editor?

Expression Editor is a tool for filtering entities such as virtual machine, hosts, containers, etc. in various contexts. Only a single type of entity is used in each filter. Context in that the Expression Editor is displayed could be one of the following: ∙ Filter before displaying in list view. ∙ Filter before making a report from a selected record. ∙ Filter before applying policy.

Expression is a logical formula describing which entities will be selected. It is possible to combine more expressions with logical operators (AND, OR) and negate with NOT operator to create more complex ones. Simple expressions are structured in key-operator-value form. All of those are called expression elements. Keys can be divided into four categories: ∙ Fields: Refers to a database field of the selected entity, its parent, one of its children or other descendants. ∙ Tags: Filter entities by applied tags. A user can assign tags to different entities. ∙ Count of: Filter based on countable properties of an entity. ∙ Find: In this option user can select if the expression must match for all, any or specific count of entities.

Each of the categories has its options under them; each option have defined operators that are used for comparing. Most of the operators require user inputted value, but some do not (IS NULL). Example of simple expression could be:

Field : Host.IPAddress = 10.0.0.1. (5.1)

29 5. Analysis 5.2 What does it look like?

Figure 5.1: Empty Expression Editor

This picture shows how the Expression Editor looks right when it is opened. In this state, there is an empty expression that user can start filling. The picture could be divided into two parts. "Edit Expression" (marked by a red rectangle) shows the expression and contains controls for expression operations. "Edit Selected Element" (marked by a blue rectangle) is used to edit individual subexpressions. Buttons at the bottom are used to interact with the rest of the application. 1. Back, Forward buttons can be used to undo/redo committed actions. Remove buttons deletes currently selected subexpression. 2. Place where expression is showed. 3. Logical operators that could be applied to a single expression (NOT) or between two expressions (AND, OR). 4. The Select box that contains the first layer of expression elements. When the value is selected, more Select (or text input) boxes will appear. 5. "Commit", "Discard" buttons. When changing values in Select box from number 4. , changes are not applied immediately but need to be either committed or discarded. 6. Load button can be used for loading previously created expression.

30 5. Analysis

7. Apply, Save, Reset buttons. Apply button will apply currently opened expression and it will redirect to page with listed entities that comply with the expression. Save button shows a dialog where the user can set name and save the expression as a filter. Reset button resets the expression to the state before editing.

Figure 5.2: Edit Selected Element

Here is shown the "Edit Selected Element" during the editing process. 1. "Use Alias" checkbox can be used to rename the selected option. Because these options are generated from database fields and relationships, they can be long. So the user can either write custom alias or use default alias which is original string stripped of its prefixes. 2. "User will input value" checkbox. If checked and saved, when the filter is applied, a dialog will pop up and the userwillbe asked to input the value into the filter. This way parametrized filters can be created.

Figure 5.3: Edit Expression

On Figure 5.3 "Edit Expression" part is shown with a sample expression. Two subexpressions are clickable, but parentheses and operators

31 5. Analysis are not. That is because they are not separate elements. Operators are associated with subexpression on the right.

When the user clicks on the expression, the "Edit Expression Ele- ment" part is shown, and he/she can edit the expression. However, if the user would like to change operator or parentheses, he/she cannot do that.

5.3 Evaluation against ten usability heuristics

Expression editor violates some of the ten usability heuristics. In the paragraphs below I will explain which one and how it is violating them. 1. Aesthetic and minimalist design: I do not feel qualified to judge its aesthetics, but I can definitely question minimalism. There are a lot of controls. All of them have its use, they are necessary. However, many controls could be hidden until they become relevant. An inexperienced user might feel overwhelmed by all presented controls, and he/she could struggle to find the one that he/she needs. 2. Flexibility and efficiency of use: If a user needs to create more complex expression he/she has to adapt to rules enforced by Expression Editor. Even if the user knows how to operate with the facility, there are no accelerators that he/she could use. Moreover, certainly, I would not say that user could experience any kind of flow during the interaction. 3. Visibility of system status: System status is always visible, but due to point 1, it might not be recognized by the user. 4. Help and documentation: the included help is very limited, buttons are enabled and disabled based on system state, but a user does not know what action can affect the disability of the buttons. When a button is disabled user does not know why and he/she has no way of finding why.

32 5. Analysis 5.4 Usability Problems

Expression Editor has some usability issues. It causes limitations, the user needs to know exactly what he/she wants before he/she starts writing the expression. Not only he/she needs to know what he/she wants, but user also needs to know how he/she will write it. User needs to know the exact sequence of steps which are compatible with these limitations. If the user makes a mistake during the process, the only way to recover might be to delete a significant amount of his/her work. These dead-end situations are explained bellow on two examples.

Firstly, given the expression from Figure 5.3, the user would like to change AND operator for OR. The only way to do it, is to delete the right subexpression, click on the left one and create a new one with the OR operator. If the right side contained more subexpressions, the user would have to delete them all and retype everything.

Secondly, it is problematic not being able to move parentheses. Let’s have the following expression: ((X OR Y) AND Z). There is no way to change it to (X OR (Y AND Z)). You need to delete Y and Z and write them from the beginning.

To make a small change, which would be a mater of seconds in a text editor, the user needs to go through an extensive process which could take minutes.

Another usability issue is that there is a huge amount of options to select, especially in the Field category. Depending on the entity which is selected, there could be hundreds of options in one Select box. A search box is presented, but if the user does not know the exact name of the field due to numbers of similar names it is not very helpful.

Options in the Select box are sorted by its prefix and value by lexical order. Which is probably the only reason users can actually use this.

33 5. Analysis

Figure 5.4: Long Name Selection

Strings presented in the options are long. This has two causes. First, the strings from the database are just too long. For example "Host/N- ode: CPU - Aggregate Usage Rate for Child VMs for Collected Intervals 30 Day Avg (MHz)." There are not many things that could be done with that, except manually changing strings in the database to still precisely describes meaning, but be shorter. That is not a systematic solution and could be hard to do. The "Use Alias" option offers a possibility to change the string which will be displayed in the expression. The user can write whatever alias he/she wants. However, the default that is offered for our example is "CPU - Aggregate Usage Rate for Child VMs for Collected Intervals 30 Day Avg (MHz)." Which is not such a big difference. Also, the default does not fit into text the input box.

Figure 5.5: Long Name "Use Alias" default option

34 5. Analysis

Figure 5.6: "Use Alias" feature

When a custom alias (CPU - Aggregate) is set, the long string is no longer displayed in "Edit Expression" part. That makes the look better well-arranged.

The second cause of longs strings is that they are representing a hierarchical structure. For example "Host/Node.Hardware.Discs: Allo- cated Space." the default alias handles this gracefully, it shortens it to "Allocated Space." This flattening of the hierarchical structure is also the main cause for having too many options.

35 5. Analysis 5.5 User Testing

I have found some usability problems, but because I have some knowledge about the product I might be missing some points. So I decided to run one round of user testing to find out how non-experienced users will react. I have prepared seven relatively simple tasks, which should cover most of the functionality with as little domain knowledge required as possible. I gave users quick introduction into the product and had provided necessary domain knowledge when needed. But only when I was sure that the real ManageIQ user would know that. No information about interaction or UI was provided. Tasks were the following: 1. Find the host with IP address 10.0.0.1. 2. Find hosts with IP address 10.0.0.1 OR Department Financial Services. 3. Change expression IP address in expression from task 2 to 10.0.0.2. 4. Find the hosts with IP address 10.0.0.1 OR Department Finan- cial Services AND Cost Center 1. 5. Find hosts with Disk Size 10GB. 6. Rename the "Host / Node.Datastore: Disk Size" to "Disk Size". 7. Change host with "IP address 10.0.0.1 OR Department Financial Services" to "IP address 10.0.0.1 AND Department Financial Services".

This round of user testing uncovered many usability problems and partially confirms my previous analysis. Even though it was not the main issue that users experienced. The problem is that they can be hardly avoided even for experienced users.

5.5.1 Task 1

During task 1, users were confused and it took them a while before they started to orient in the UI at least a little bit. After a while, all of them was able to complete the task. One user was trying to click in Edit Expression, which had a bold blue font and was not clickable.

36 5. Analysis

5.5.2 Task 2

The main issue during the task two was that all three users were trying to click on disabled OR button. They did not understand why it is disabled and how to enable it. After a while, they were able to complete the task, though not all of them understood when the operator buttons are enabled.

5.5.3 Task 3

One user tried to use the back button to get the task done, but it did not lead to the goal. Two users made the expression again from the beginning because they could not figure out how to edit an existing expression. One was able to edit the expression. All of them finished the task.

5.5.4 Task 4

After the problems with the first three tasks, users probably get used to the UI little bit and were able to finish task 4 without any serious problems.

5.5.5 Task 5

This task was about searching right element in the Select box. The desired category was roughly in the middle all categories. Search disap- pears when start scrolling. One user scrolled all the way down until he/she found it. The second did not notice the search box on the top of the select box and started scrolling, like a first user. After a while, she returned to the top, found search and used it to find "Disk Size". the third user noticed search and completed the task without any problems.

5.5.6 Task 6

All three users completed task without significant issues.

37 5. Analysis

5.5.7 Task 7 All users were confused about how should they completed the task. They tried clicking on the operator, but it is not clickable. Then they were trying to interact with the right and the left side of an expression. Using back and forward buttons. Two of them have written the expression from scratch. One deleted only the right side, that is the most efficient available solution. All users spent more than five minutes before they completed the task and they were not sure if they did it right.

5.5.8 General problems Even though all users get the concept of committing changes, before applying the filter. They forget to commit several times. Also, they were not sure when is which button enabled. They were not sure what the "X" button does and when to use it.

5.6 Technical Analysis

ManageIQ is written in Ruby on Rails which is using MVC (Model, View, Controller) architecture. Since it is an old project (10+ years) with a large codebase, many of general MVC issues are present in the code. Expression Editor is one of the oldest parts. It is an example of a problem that was needed to be solved good enough and fast. It gives users the functionality they wanted, and that was the important part. User Experience was not very important back then. There were some attempts to refactor it, but they were not successful. The logic behind the editor is a bunch of nested if-else clauses in views, which based on context, shows the right elements. It is hard to understand or modify. It is easy to make bugs modifying the code around.

38 6 Similar applications

Some kind of content filtering is present in almost any web application. Because it is such a common task, there are known approaches. The hierarchical menu is one of the most used ones. It guides a user to the place where are the things user is interested in. From this point of view is ManageIQ same as every e-shop.

6.1 E-shops

Almost every person with internet access has bought goods at e- shop. So why not leverage this common skill for Expression Editor? That was my first idea.

The problematic part is when a user gets to the page with desired item, for example, virtual machines for ManageIQ and shoes for e- shop. Shoes can further be categorized by its type, size, brand, material, and maybe few more additional categories. These categories can be listed, sometimes even with its values and the user still will be able to process the content and find the desired category. This property is common for most of the sold items. Each item has properties, and typically the number of its properties in each can step reduced to some reasonable number. Unfortunately, entities in ManageIQ typically has many properties, and it is hard to reduce their amount. Potentially each of them could be important. Furthermore, ManageIQ entities have relationships within themselves. There is too much information to use the same approach that is used in e-shop. That is why I have abandoned this idea.

6.2 Gmail

Gmail is an interesting application from many points of view. It is used by more than one billion people, and many of those people are using the Gmail client. With this in mind designers working for Google created a usable application. I particularly like the input for recipients on new email composing screen. I like the experience, I

39 6. Similar applications like that you can use a mouse or keyboard, whichever you prefer. I enjoy using keyboard for navigating between chips with recipients. So, I decided that I would like to make the Expression Editor to feel the same. Or at least get close to it.

Figure 6.1: Gmail compose email

Even though I admire user experience which designers at Google created, I realize that it solves a much simpler problem and because of the number of features needed it might not be possible to keep such simple, clean interaction. However, as an idea of an ideal solution, it can lead to something real.

6.3 Amazon Web Services

Amazon Web Services1 (AWS) is a cloud platform. It provides com- pute power, database storage, content delivery and other functionality needed for deploying an application in the cloud. From the user interface (UI) design point of view, it is a similar application. Screen for displaying the Instances is present in both products and serves the same purpose.

Figure 6.2: AWS Instances filter

AWS filter Figure 6.2 uses a similar layout as Gmail recipient field. It is augmented text input with selectable options, that are filtered based inputted text. A user can use a keyboard or mouse. Possible

1. https://aws.amazon.com/

40 6. Similar applications

interaction is still basically the same as for Gmail. It combines the view part and editing part into one. Which is an approach I would also like to use. Because all operators between multiple filters are implicit and they cannot be changed, the order of filters does not matter. So it does make sense that user can only add a new filter to the end. Also, there is no need for binary logic operators or parentheses. Such filtering lost some expression power, but it could deliver much cleaner user experience. This approach could be good enough if the only use case of such filter is presenting data to the user. However, ifsame filters should be used for applying policies to entities, as itisused in ManageIQ, a user must be able to specify precisely what entities should be selected. Unfortunately, that is the trade-off I cannot make.

6.4 JQuery QueryBuilder

JQuery QueryBuilder2 is a tool for making queries and filters. It is a part of popular jQuery ecosystem, offers customization by adding other jQuery widgets and produces structured JSON as an output. It has very similar capabilities as Expression Editor in ManageIQ. Even though it can be controlled using a keyboard, this interaction does not feel good. It is obvious that this Expression Builder was designed primarily for mouse interaction.

Figure 6.3: JQuery Query Builder

It uses a hierarchical visual structure that groups subexpressions together. Lines connect subexpressions with an operator. This supporting visual structure helps a user to orient in the expression. It also

2. https://querybuilder.js.org/

41 6. Similar applications mitigates the chance of slip type errors, like badly wrapped parentheses. On the other hand, because controls are displayed all the time, they create visual noise. So reading an expression is not comfortable and requires additional effort. An operator is applied to all subexpressions in the group, that restricts the format of the expression that user can input.

6.5 Summary

All of the facilities described in this chapter have its advantages and disadvantages. They serve a similar purpose, yet they are different. User experience from using them is also very different. I tried to take their best aspects and combine them into one coherent solution, with good user experience without restricting the structure of an expression.

42 7 The New Expression Editor

7.1 Technology

7.1.1 Component based development Component based development is a popular approach to developing web applications. There are several JavaScript libraries that support this approach, such as React1, Angular2 or Vue3. It seems that this approach might be something that the JavaScript community agreed on using, at least for now. The idea behind it is quite simple. You are building the application from smaller pieces called components. Each component has its input parameters (in React called props, from now on I will call them props) and its state. You put smaller ones together to get bigger and bigger components until you reach the goal.

For example, you need a simple form with one text input and a submit button. The result could be three components: text input, button, and button-text input form composed component.

Button and text input are one of the elementary components which are available in many JavaScript libraries. A simple version of the button needs a text label and an onClick callback function as its props; it does not need to keep any kind of state. Input will need an onKey- Pressed callback function, and it will keep inputed text in the state. The composed component will have a state, where will be stored user input and it will define two functions: onKeyPressed where it will set the state and onClick where it will send data from state to server.

Such a simple use case can be written in plain HTML, but even now the structure can be seen. Components get their arguments through props and return them through callbacks; data flow is explicit. Each component does its little piece of functionality.

1. https://reactjs.org/ 2. https://angular.io/ 3. https://vuejs.org/

43 7. The New Expression Editor

7.1.2 React React is a declarative JavaScript library developed by Facebook Inc. for building user interfaces. It supports component based development. The main reason why I have chosen React is that it is used by projects such as Patternfly4 and ManageIQ. Component created as an implementation part of this thesis should interact and eventually be integrated into these projects. React can be easily used with Redux [20].

7.1.3 Redux Redux5 is a predictable state container for JavaScript applications. It is used to abstract state management from view layer. View components get state managed by Redux as props. The basic idea is simple. The application has internal state. Each event or interaction could be described as an action. Combining state and action will result in a new state. Given the state and the action, result should always be the same. It does not rely on any outside information and does not perform any side effects [21].

Three fundamental principles of Redux are the following [22]: ∙ Single source of truth: the whole state application is stored in object tree within a single store. ∙ State is immutable: the only way to change state is to emit an action, object which describes what happened. That will result in a new state. ∙ Changes are made with pure functions: Functions modifying state are called reducers, they take state and action as parameters and return new state, they do not modify existing state.

7.1.4 PatternFly "PatternFly is a community project that promotes design common- ality and improved the user experience. Its offerings include open source code, patterns, style guides, and an active community that

4. https://www.patternfly.org/ 5. https://redux.js.org/

44 7. The New Expression Editor

helps support it all [23]." It is design system used by Red Hat Inc. to have a consistent design across products. It has GitHub6 repositories with React and Angular components and CSS styles. The product of this thesis should be visually and technologically compatible with PatternFly. At the time of writing this thesis, PatternFly Next is being created. Even though it is not finished, I decided to use it, because most of the needed components for Expression Editor are created. Moreover, since ManageIQ is probably going to migrate to PatternFly Next7 in 2019, it is better to use the new design system.

7.2 High Level Overview

the Expression Editor component can be divided into three parts: ∙ Redux store: Define possible data modifying actions and reducers, modify data based on received actions. Also stores the history of user actions. ∙ Data Provider: Is responsible for loading data from the API and transforming data into needed format. ∙ React view components: Contains the whole presentation layer, defines possible user interactions. Performs actions which do not modify data or emit actions to Redux store.

7.3 Data Structure

Input is hierarchical JSON, representing the tree of possible options. The path from the root to leaf identify one concrete expression. In the simplest case, the tree is complete, contains all possible options.

6. https://github.com/ 7. https://github.com/patternfly/patternfly-next

45 7. The New Expression Editor

Host

IP Address Hostname

= != = != INCLUDES

VALUE VALUE VALUE VALUE VALUE

Figure 7.1: Example of complete options tree

For smaller trees, this solution could be good enough, but generally, the size of the tree grows exponentially, and the user usually doesn’t need to see all the nested options. This approach is not very scalable, but with a small change, we can make it scalable. In any moment, a user needs to see only the children of the selected node. Shallow tree, what layers will be loaded from the API endpoint on demand when a user needs to see them, will solve the scalability issue. Unfortunately, that will cause delays during user interaction, which is not desirable.

46 7. The New Expression Editor

Host

IP Address Hostname

API endpoint API endpoint

Figure 7.2: Example of shallow options tree

I wanted the Expression Editor to be easy to use even for developers. Even though the expression format could be formally described by the grammar, I did not take this approach, because that would cause a few problems. Either the application would contain hard-coded grammar and it would not be customizable or it would take encoded grammar as a argument and that would make application hard to use by other developers. Data-driven approach allows changing the format of individual expressions based on received data.

7.4 User Testing

7.4.1 First Round During the usability testing of the original Expression Editor, I have also tested a development version of my Expression Editor. Gener- ally, the interaction was quicker and more fluid. During the test with the first user, several interaction bugs were found. So I have decided to end the test and fix the bugs.

7.4.2 Second Round Let us describe the Expression Editor at the time of second user testing. There are chips that represent individual expression elements.

47 7. The New Expression Editor

To add a new element the user can use an input box with a dropdown menu that filters available options as the user types. The user can select new element either by clicking or by using "Up" and "Down" arrow keys and pressing "Enter". The user can focus element by either clicking on it or use the "Left"/"Right" arrow keys. Every element can be deleted by clicking on the "X" button or pressing "Delete"/"Backspace" when a chip is focused. Also, the user can edit an element by double- clicking on it or by pressing "Enter" when the element is focused. "Delete Expression" button deletes the row and Add expression in- serts a new row.

This early tested version was still a work in progress. Especially the visual part. However, the basic interaction was completed, and users should be able to complete tasks. And that was what I wanted to test. The component was supporting mouse and keyboard interaction, but all users chose to interact with a mouse. The users only typed the value.

Figure 7.3: Early version of the new Expression Editor

The second round confirmed my hopes from the first round. All tasks were done successfully. The interaction was much faster, and tasks took significantly less time to complete. That was partially caused by testing with more experienced users. Still, I think it is a good sign. Nevertheless, I consider it a success. There were still many usability issues that I was able to identify. Here is the list of issues, sorted by its severity and amount of work need to be done to fix them, from most severe and easiest to fix:

48 7. The New Expression Editor

∙ User ignored the suggestion and typed expression in the wrong format. ∙ User forgot to press "Enter" when he finished typing. ∙ Users were not sure when to click "Add Expression" button, some used it instead of pressing "Enter" when they wanted to confirm their input. ∙ Users were looking for back button (a feature not included yet) ∙ All subjects reported that double click to "Edit" is not intuitive, but they were able to discover this functionality in a very short time. One subject explicitly reported that was by accident. ∙ When users were suggested to use the keyboard, they were trying to use "Up" and "Down" arrow keys to navigate between rows.

Next step after finding these usability problems, is to find outhow to fix them. ∙ User can submit custom input only in fields which are marked as user input. Otherwise, he/she must choose from options. ∙ When input field losses focus, it becomes a chip. ∙ Add a "Submit" button next to input that user can click. ∙ "Undo" and "Redo" features implemented. ∙ Double click was reported multiple times as not intuitive and also due to the need of implementing additional features, the dropdown menu for the focused chip was implemented. ∙ Because "Up" and "Down" keys are used for keyboard naviga- tion for dropdown menu, they cannot be used for chip naviga- tion. This issue is a subject of future development.

7.4.3 Third Round The third round of user testing was meant to be the final evaluation round. All necessary features were implemented. I attempted to fix all issues found in previous rounds. Moreover, after visual redesign Expression Editor started to look better.

Three users participated in testing, all of them were a humanities students with basic computer skills. Only one of the test users knew

49 7. The New Expression Editor basics of SQL. Other two had no knowledge of SQL or propositional calculus. I did not to explain to them how are the expressions structured and let them to figure out everything. The only background information that they got was an explanation what is difference between tags and fields. Tasks were similar to the previous rounds: 1. Find the host with "IP address 10.0.0.1". 2. Find hosts with "IP address 10.0.0.1 OR Department Financial Services". 3. Change expression IP address in expression from task 2 to "10.0.0.2". 4. Find the hosts with "IP address 10.0.0.2 OR Department Finan- cial Services AND Hostname host1". 5. Delete Hostname host1 condition from task 4. 6. Rename the "Financial Services" to "FS". 7. Change host with "IP address 10.0.0.1 OR Department FS" to "IP address 10.0.0.1 AND Department FS". 8. Change "IP address 10.0.0.1 AND Department FS" to "IP address 10.0.0.1 OR Hostname host1 AND Department FS".

All users were able to complete all the tasks between five to ten minutes. The user with basic the SQL knowledge completed tasks all without significant issues. She did not always choose the most optimal way, but she completed the task without getting stuck anywhere. The second user had trouble with the format of an expression. She did not understand the concept of operators and tried to input a value directly after category. After I told her that "!=" means "not equals", she accepted that operators are needed and used them. Af- ter she understood operators, she was able to complete all the tasks without significant issues. The third user also had trouble with expression format. He repeatedly tried to submit a wrong value, but the system did not let him. After few unsuccessful tries, he started to follow the suggestions given by the application and also was able to complete the tasks without further notable issues.

The issues users experienced were primarily caused by not understanding the context. The concept and format of composing logical expression could be confusing for users without domain knowl-

50 7. The New Expression Editor edge. However, how the users without needed knowledge can handle the tasks was what I wanted to test. User testing showed that users are able to complete tasks even if they do not understand what they are doing. During the testing first user said: "I do not know what amI doing, but I guess I did it." Moreover, the real users of ManageIQ have the necessary domain knowledge.

The one thing that was found during the third round and could improve the interaction, is to explain to user why he/she cannot add elements. Now, the "Add" button is disabled when user types invalid input and when he/she presses "Enter" nothing happens. Application should communicate to user why he/she cannot submit input.

7.5 Summary

7.5.1 Visual

Expression Editor is using combined view/edit layout that ensures that the user does not have to switch the focus. The whole expression is divided into rows. Each row contains either subexpression or logical binary operator. Each row contains several chips. At the right side of each row are buttons that insert or delete the row. A chip can switch between view and edit state. When a user opens the application there is present only one empty chip in the edit state.

Figure 7.4: New Expression Editor

51 7. The New Expression Editor

1. "Undo"/"Redo" buttons can be used to navigate between user actions in time. All potentially destructive actions (add/delete/edit) are saved and can be undone/redone. Non-destructive actions like hover or focus are not saved. When the user navigates back and then performs a new action, all saved future actions are deleted, and the user cannot use the "Redo" button. The same approach is used by web browsers, so most users should be comfortable with it. 2. Chip represents individual expression element. When a chip is focused, the dropdown menu with available options appears. Options are the following: ∙ Edit: Switches chip into edit mode. ∙ Delete: Deletes focused chip and all chips to the right in the row. ∙ Set Alias: Renames the selected element. ∙ Remove Alias: Sets the default name of the element. 3. Chip switched into edit mode. When focused, dropdown menu with possible options is displayed if options are defined. When a user starts typing, options in the dropdown are automatically filtered by the string user typed. ∙ Add button next to input box has two purposes. Firstly, its enabled/disabled state indicates to a user if input he/she wrote is valid. Secondly, it allows the user to add an element by mouse click. 4. Insert/Delete buttons can be used to modify existing expressions. Insert button adds a new row below the one where the button was clicked. Delete button removes the row.

7.5.2 Interaction The whole interaction is meant to guide a user to complete the task. Interaction is centered around the idea of user focus. Some global actions are displayed all the time. If the user focused an element, the possible action related to the element should appear. If the user did not focus anything, there should be some default focus or indication how the user can continue. There is a complex logic behind what should be focused after a specific user action. A user can use both mouse and keyboard.

52 7. The New Expression Editor

Mouse interaction is simple. It can be described by the simple statement: "Clicking on elements with descriptive titles." the important part is when the elements are displayed, that was described in previous paragraphs. Click on a chip make it focused and double-click switch it into edit mode.

Keyboard interaction tries to leverage common key-binds used in text editors. "Left" and "Right" arrow keys navigate focus between chips, even between rows as if it was a linear list. Pressing "Enter" is the same as a mouse click. "Delete" or "Backspace" key deletes the focused chip. "Up" and "Down" arrow keys are used to navigate in dropdown menus.

When a user types into the input field, it starts filtering options, but it is not necessary to write the whole string. When the user presses "Enter" the first option from the list is selected.

7.5.3 Implementation I have implemented three-layered application: ∙ Reducers handle the data modification. ∙ Data Provider transforms freshly loaded data into needed format. Lazy loading is not implemented yet, because there is no API that Data Provider could consume. ∙ Set of React view components with Patternfly styling. Dispatch- ing data changing actions to reducers or handling user actions directly. Here follows the list of components: – Expression Editor: Top level component, receive props from the Data Provider. – Expression: Represent individual row. Receive props from the Expression Editor. – Editable Chip: It is an abstraction around chip, can be rendered two different ways. * Chip: Represents chip in non editable state. * Autocomplete Text Input: Represent chip in editable state.

8 Conclusions

The goal of this thesis was to design and implement new Expression Editor for ManageIQ with emphasis on user experience. I have done the necessary research related to interaction principles, user experience and user testing. I have analyzed the problem, the old Expression Editor and several similar applications. Finally, I have designed, implemented and tested the application as a reusable component.

This project helped me to better understand design and user experience principles. I find it interesting how small changes in design can greatly improve UX and how seemingly small problems could be hard to fix.

I believe that the goal of the thesis was fulfilled. As the user testing confirmed, the new Expression Editor is more user friendly than the old one. It was implemented using up-to-date technologies and because it was implemented as a component, it can be easily used in other projects.

Future development will be focused on integrating the new Expres- sion Editor into ManageIQ. Some changes might be needed, but I believe that most of the code should remain the same. Apart from integration, I would like to use more PatternFly Next components (different type of inputs), when they are available. When changes are finished, more user testing will be necessary.

A An appendix

∙ Live demo can be found here: https://infallible-shaw-6cbbd7. netlify.com ∙ Source code is available as a part of the electronic attachment or online: https://github.com/ManageIQ/react-ui-components/ pull/89 ∙

Bibliography

1. NORMAN, Donald A. The Design of Everyday Things: Revised and Ex- panded edition. New York: Basic Books, 2013. ISBN 978-0-465-05065-9. 2. WEINSCHENK, Susan M. 100 Things: Every Designer Needs to Know about People. Pearson Education, 2011. ISBN 978-0-321-76753-0. 3. Gestalt Laws of Perceptual Organization. Kendra Cherry, 2018. Available also from: https://www.verywellmind.com/gestalt-laws-of- perceptual-organization-2795835. 4. JOHNSON, Jeff. Designing with the Mind in Mind: Simple Guide to Un- derstanding User Interface Design Rules. Elsevier, 2010. ISBN 978-0- 12-375030-3. 5. 9241-11 [online]. ISO, 2018 [visited on 2018-11-11]. Available from: https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1: v1:en. 6. 9241-210 [online]. ISO, 2018 [visited on 2018-11-11]. Available from: https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-1: v1:en. 7. KRUG, Steve. Don’t Make Me Think: A Common Sense Approach to Web and Mobile Usability. Pearson Education, 2013. ISBN 978-0-321-96551- 6. 8. How to Conduct a Heuristic Evaluation. Brno: Nielsen Norman Group, 1995. Available also from: https://www.nngroup.com/articles/ how-to-conduct-a-heuristic-evaluation/. 9. 10 Usability Heuristics for User Interface Design. Nielsen Norman Group, 1995. Available also from: https://www.nngroup.com/articles/ ten-usability-heuristics/. 10. Visibility of System Status. Nielsen Norman Group, 2018. Available also from: https://www.nngroup.com/articles/visibility-system- status/. 11. Match Between the System and the Real World: The 2nd Usability Heuris- tic Explained [online]. Nielsen Norman Group, 2018 [visited on 2018-11-18]. Available from: https://www.nngroup.com/articles/ match-system-real-world/.

59 BIBLIOGRAPHY

12. Do Interface Standards Stifle Design Creativity? Nielsen Norman Group, 2018. Available also from: https://www.nngroup.com/articles/ do-interface-standards-stifle-design-creativity/. 13. Jakob’s Law of Internet User Experience. Nielsen Norman Group, 2018. Available also from: https://www.nngroup.com/videos/jakobs- law-internet-ux. 14. Preventing User Errors: Avoiding Unconscious Slips [online]. Nielsen Norman Group, 2018 [visited on 2018-10-25]. Available from: https: //www.nngroup.com/articles/slips/. 15. Preventing User Errors: Avoiding Conscious Mistakes. Nielsen Norman Group, 2015. Available also from: https://www.nngroup.com/ articles/user-mistakes/. 16. Memory Recognition and Recall in User Interfaces. Nielsen Norman Group, 2014. Available also from: https://www.nngroup.com/ articles/recognition-and-recall/. 17. Error Message Guidelines. Nielsen Norman Group, 2001. Available also from: https : / / www . nngroup . com / articles / error - message - guidelines/. 18. KRUG, Steve. Rocket Surgery Madde Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. Pearson Education, 2010. ISBN 9780321657299. 19. Why You Only Need to Test with 5 Users. Nielsen Norman Group, 2000. Available also from: https://www.nngroup.com/articles/why- you-only-need-to-test-with-5-users/. 20. Tutorial: Intro to React. React, 2018. Available also from: https : / / reactjs.org/tutorial/tutorial.html. 21. Redux. Redux, 2018. Available also from: https://redux.js.org. 22. Three Principles. Redux, 2018. Available also from: https://redux.js. org/introduction/threeprinciples. 23. Patternfly. Patternfly, 2018. Available also from: https : / / www . patternfly.org/.