Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX challenges of a UI-centric config management tool

7d9785e3bdceb2d9e86dabcfb77b1686?s=47 Rudder
February 05, 2019

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

7d9785e3bdceb2d9e86dabcfb77b1686?s=128

Rudder

February 05, 2019
Tweet

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 ?
  24. 24