UX challenges of a UI-centric config management tool

One of Rudder’s main focuses is its comprehensive graphical user interface, which allows users to view and manage its configurations without writing a line of code.
The user experience and interface considerations for a tool as technical and complex, and with such potential to break things as a configuration management tool are certainly a challenge, and in some ways in unchartered territory. Rudder’s frontend developer will present an analysis of the situation, the issues encountered and the approach adopted for the improvement of UX and UI planned for 2019.

Raphaël Gauthier
Configuration Management Camp 2019

Transcript

1. UX challenges of a UI-centric config management tool What will be the future RUDDER interface? Raphaël GAUTHIER Front-end dev / UX Designer @RUDDER
2. UX challenges of a UI-centric config management tool What will be the future RUDDER interface? Raphaël GAUTHIER Front-end dev / UX Designer @RUDDER ?
3. Story of Mike 3 • Mike is a sysadmin • Mike is a cool guy, so cool that he uses RUDDER to audit and configure his servers. • He uses it almost every day, and makes everything through the interface. • But sometimes, it makes him frustrated…
4. Story of Mike 4 • Mike is a sysadmin • Mike is a cool guy, so cool that he uses RUDDER to audit and configure his servers. • He uses it almost every day, and makes everything through the interface. • But sometimes, it makes him frustrated…
5. Story of Mike 5 • Mike is a sysadmin • Mike is a cool guy, so cool that he uses RUDDER to audit and configure his servers. • He uses it almost every day, and makes everything through the interface. • But sometimes, it makes him frustrated…
6. Story of Mike 6 • Mike is a sysadmin • Mike is a cool guy, so cool that he uses RUDDER to audit and configure his servers. • He uses it almost every day, and makes everything through the interface. • But sometimes, it makes him frustrated…
7. 1. Lack of harmony ▪ User journey to create: - A group containing nodes (5 steps): 1. Click on a “Create” button (top left corner) 2. Fill a first form in a popup window 3. Save & close that popup 4. Fill another form 5. Save another time. 7 Groups 1 2 3 4 5
8. ▪ User journey to create: - A group containing nodes (5 steps) - A directive with parameters (4 steps): 1. Click on a technique 2. Click on a “Create” button 3. Fill a long form 4. Save changes 8 1. Lack of harmony Is this a bug ? Directives 1 2 3 4
9. ▪ User journey to create: - A group containing nodes (5 steps) - A directive with parameters (4 steps): - A rule with nodes and directives (5 steps): 1. Click on a “Create” button (top right corner) 2. Fill a fist form in a popup window 3. Save & close that popup 4. Fill another form 5. Save another time. 9 1. Lack of harmony Rules 1 2 3 4 5
10. ▪ User journey to create : - A group containing nodes (5 steps) - A directive with parameters (4 steps) - A rule with nodes and directives (5 steps) ▪ Identical scenarios BUT different user journeys ➤ This makes it difficult to learn RUDDER 10 1. Lack of harmony Groups Directives Rules “Create” button
11. Use of templates ▪ 2 columns layout - Groups - Rules - Directives - Nodes ▪ Table layout - API accounts - Parameters ▪ “One-page” layout - Settings - …. 11 That’s better!
12. 2. Notification systemS 12 I never know what will happen after clicking on a Save button… ▪ Popups ▪ Messages ▪ Notifications (Tech. editor) Flaws: ⊖ Popups bother the user ⊖ Messages are difficult to see - They have no color, no icon (Error? Warning? Success?) - They do not fit on all pages
13. Only use notifications 13 Use of notifications (such as the Reporting plugin): ▪ Success : Green notification, which automatically disappears after a few seconds ▪ Warning & Error : Only disappear when the user clicks on them Advantages : ⊕ Fits on any page ⊕ Requires user action only if necessary No more popups!
14. Today - All object properties can be accessed and edited in the same form 3. Page complexity 14 Advantage Disadvantage Everything is accessible in the same place. Everything is accessible in the same place...
15. 3. Page complexity 15 Today - All object properties can be accessed and edited in the same form Advantage Disadvantage Everything is accessible in the same place. Everything is accessible in the same place... Where is this parameter....?
16. 3. Page complexity 16 Today - All object properties can be accessed and edited in the same form Advantage Disadvantage Everything is accessible in the same place. Everything is accessible in the same place...
17. New edit mode 17 Default mode Current interface Solution? ⊖ No category ⊖ Takes more space ⊖ Heavily loaded display ⊖ In read-only mode, all inputs are disabled (decreases readability) ⊕ Categorized information ⊕ Take up less space ⊕ Sleek display ⊕ In read-only mode, there is no change
18. New edit mode ⊕ Less intimidating ⊕ Highlighting important information and mandatory fields ⊕ User can save and quit the process at any time ⊕ Displaying a "progress bar" has a motivating effect on the user - More than a scroll bar.... Edit mode • Using multi-steps form for creation process: • Left column hidden 18
19. “ How to implement these solutions? 19 ? ? ? ? ? ? ? ? ? ? ?
20. How to implement these solutions? 20 ▪ Notifications already implemented ✔ ▪ New interface for better performances and maintainability - Moving from Angular to Elm - Create dynamic interface using the API - Remove old css & javascript libraries ▪ Modify our development process ➤ Design thinking : Doc api v2 Doc api v9
21. Design Thinking 1. Empathize 2. Define 3. Ideate 4. Synthetize 5. Prototype 6. Test 21 “The Design Thinking process is based on the intuitive workflow process of a designer. The team is led through iterative loops which take the participants through six stages.” Why Is Design Thinking what we need ? - It reduces the risk associated with launching new ideas. - It will helps us to learn faster. - It generates solutions that are innovative, not just incremental.
22. 22 In summary - New notification system ✔ - New templates - New edit mode - New development process
23. 23 Any questions ? - These were only ideas - We are waiting for your feedbacks - It’s time to open user stories :) Can I leave now ?