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ý i 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 theo- retical 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 v 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 ix 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 xi 1 Introduction Ever since data collections existed, there was a need to access par- ticular 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, tech- nical 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 ad- vanced 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 ap- plication that is mostly based on filtering data could be an e-shop. When a user is browsing an e-shop, the application is applying differ- ent 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, con- tainers 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 hu- man 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 de- scribed 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 mem- ory ("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.