Pro Yearly is on sale from $80 to $50! »

UX Design and Education for Effective Monitoring Tools (LISA17)

780e86312035da00762813aa2e443ae8?s=47 Amy Nguyen
November 01, 2017

UX Design and Education for Effective Monitoring Tools (LISA17)

The fastest way to become a 10X engineer is by enabling 10 other engineers to do their jobs better. As infrastructure engineers, part of our mission is to empower the rest of our engineering organization to use the tools we develop correctly, quickly, and independently. Yet we often fall short of that mission in unexpected ways. In this talk, I will explain ways to make concepts like interpolation, aggregation, and alerting more intuitive and how to identify pain points for new users. I'll go over common misconceptions users have about monitoring and how you can clear up this confusion with improved training and UI design.

780e86312035da00762813aa2e443ae8?s=128

Amy Nguyen

November 01, 2017
Tweet

Transcript

  1. Amy Nguyen @amyngyn LISA17 UX Design and Education for Effective

    Monitoring Tools
  2. Amy Nguyen @amyngyn LISA17 Hi! - I'm Amy! - Observability

    engineer! - Also on the plenary panel tomorrow at 4pm! - amynguyen.net @amyngyn
  3. Amy Nguyen @amyngyn LISA17 Agenda - Motivation - Sharing what

    you know - Designing what your users want - Recap
  4. Amy Nguyen @amyngyn LISA17 - Motivation - Sharing what you

    know - Designing what your users want - Recap Agenda
  5. Amy Nguyen @amyngyn LISA17 UX and Your Situation

  6. Amy Nguyen @amyngyn LISA17 UX and Your Situation team

  7. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

  8. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

    tools
  9. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

    tools probably paying for vendors TBH?
  10. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

    tools probably paying for vendors TBH? this talk
  11. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

    tools probably paying for vendors TBH? this talk things we can all control
  12. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience?
  13. Amy Nguyen @amyngyn LISA17

  14. Amy Nguyen @amyngyn LISA17

  15. Amy Nguyen @amyngyn LISA17

  16. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience?
  17. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience? - Prevent misunderstandings: not everyone is (or should have to be) an expert at interpreting monitoring data
  18. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience? - Prevent misunderstandings: not everyone is (or should have to be) an expert at interpreting monitoring data - Developer velocity: help people reach conclusions faster, help your company move faster
  19. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience? - Prevent misunderstandings: not everyone is (or should have to be) an expert at interpreting monitoring data - Developer velocity: help people reach conclusions faster, help your company move faster - Data democracy: you don't know what questions people want to answer with their own data
  20. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience? - Prevent misunderstandings: not everyone is (or should have to be) an expert at interpreting timeseries data - Developer velocity: help people reach conclusions faster, help your company move faster - Data democracy: you don't know what questions people want to answer with their own data
  21. Amy Nguyen @amyngyn LISA17 Why should we care about user

    experience? Because we can help engineers work correctly, quickly, and independently.
  22. Amy Nguyen @amyngyn LISA17 "The fastest way to become a

    10x engineer is to help 10 other engineers do their jobs better. - Wayne Gretzky" - Michael Scott
  23. Amy Nguyen @amyngyn LISA17 - Motivation - Sharing what you

    know - Designing what your users want - Recap Agenda
  24. Amy Nguyen @amyngyn LISA17 Sharing what you know

  25. Amy Nguyen @amyngyn LISA17 Sharing what you know 1. Education

    vs intuition: Don't overload people with too much information.
  26. Amy Nguyen @amyngyn LISA17 stats.example.metric.errors > 5

  27. Amy Nguyen @amyngyn LISA17

  28. Amy Nguyen @amyngyn LISA17

  29. Amy Nguyen @amyngyn LISA17 Sharing what you know 1. Education

    vs intuition: Don't overload people with too much information. 2. Best practices: Use your expertise to determine the most helpful default behavior.
  30. Amy Nguyen @amyngyn LISA17

  31. Amy Nguyen @amyngyn LISA17 Sharing what you know 1. Education

    vs intuition: Don't overload people with too much information. 2. Best practices: Use your expertise to determine the most helpful default behavior. 3. Potential pitfalls: Make it hard to do the wrong thing.
  32. Amy Nguyen @amyngyn LISA17

  33. Amy Nguyen @amyngyn LISA17 It looks like you're trying to

    alert on the most recent data. Are you sure you want to do that?
  34. Amy Nguyen @amyngyn LISA17 - Motivation - Sharing what you

    know - Designing what your users want - Recap Agenda
  35. Amy Nguyen @amyngyn LISA17 Designing what your users want

  36. Amy Nguyen @amyngyn LISA17 Designing what your users want 1.

    Performance: Do whatever it takes to make it fast.
  37. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas!

  38. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend

  39. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges
  40. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project)
  41. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project)
  42. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project) yeah sure get back to us in 6 months
  43. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project) - Frontend
  44. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project) - Frontend - Don't reload existing data if the user changes the time window
  45. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project) - Frontend - Don't reload existing data if the user changes the time window - Prevent the user from requesting the data incessantly
  46. Amy Nguyen @amyngyn LISA17 Performance: Cool Ideas! - Backend -

    Roll-up data over long time ranges - Store latest data in memory (e.g., Facebook's Gorilla paper and Beringei project) - Add a cache layer (e.g., Turn's Splicer project) - Frontend - Don't reload existing data if the user changes the time window - Prevent the user from requesting the data incessantly - Lazy-load graphs on a dashboard
  47. Amy Nguyen @amyngyn LISA17 Designing what your users want 1.

    Performance: Do whatever it takes to make it fast. 2. Exploration: Make it easy to try things without fear.
  48. Amy Nguyen @amyngyn LISA17 don't mess with this

  49. Amy Nguyen @amyngyn LISA17 don't mess with this

  50. Amy Nguyen @amyngyn LISA17 don't mess with this or this

  51. Amy Nguyen @amyngyn LISA17 don't mess with this don't change

    it or this
  52. Amy Nguyen @amyngyn LISA17 don't mess with this don't change

    it or this It doesn't deserve to be treated this way it's just trying to help
  53. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone

  54. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast
  55. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast
  56. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast - Customizable color schemes
  57. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast - Customizable color schemes - Navigation bar that isn't entirely controlled by JavaScript
  58. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast - Customizable color schemes - Navigation bar that isn't entirely controlled by JavaScript - Keyboard navigation
  59. Amy Nguyen @amyngyn LISA17 Accessibility is for everyone - Color

    contrast - Customizable color schemes - Navigation bar that isn't entirely controlled by JavaScript - Keyboard navigation - Obvious focus on what needs attention
  60. Amy Nguyen @amyngyn LISA17 Exploration through previews

  61. Amy Nguyen @amyngyn LISA17 Exploration through previews: terraform plan

  62. Amy Nguyen @amyngyn LISA17 Exploration through previews: alert previews

  63. Amy Nguyen @amyngyn LISA17 Exploration recap 1. Don't break basic

    browser features. 2. Design for accessibility. 3. Make it easy to try things without making permanent changes.
  64. Amy Nguyen @amyngyn LISA17 Designing what your users want 1.

    Performance: Do whatever it takes to make it fast. 2. Exploration: Make it easy to try things without fear. 3. Simplicity: Make it easy to figure out what to do.
  65. Amy Nguyen @amyngyn LISA17

  66. Amy Nguyen @amyngyn LISA17

  67. Amy Nguyen @amyngyn LISA17

  68. Amy Nguyen @amyngyn LISA17 manually type in your metric if

    you know the name somehow
  69. Amy Nguyen @amyngyn LISA17 manually type in your metric if

    you know the name somehow aggregator
  70. Amy Nguyen @amyngyn LISA17 manually type in your metric if

    you know the name somehow aggregator hope you remember what tags are available for this metric lol
  71. Amy Nguyen @amyngyn LISA17 manually type in your metric if

    you know the name somehow aggregator secret bonus: you can downsample?! hope you remember what tags are available for this metric lol
  72. Amy Nguyen @amyngyn LISA17 manually type in your metric if

    you know the name somehow aggregator secret bonus: you can downsample?! hope you remember what tags are available for this metric lol
  73. Amy Nguyen @amyngyn LISA17

  74. Amy Nguyen @amyngyn LISA17 available options you probably don't need

    to touch
  75. Amy Nguyen @amyngyn LISA17 manual entry for power users

  76. Amy Nguyen @amyngyn LISA17 relevant information needed to create a

    query!
  77. Amy Nguyen @amyngyn LISA17 - Motivation - Sharing what you

    know - Designing what your users want - Recap Agenda
  78. Amy Nguyen @amyngyn LISA17 "The fastest way to become a

    10x engineer is to help 10 other engineers do their jobs better. - Wayne Gretzky" - Michael Scott
  79. Amy Nguyen @amyngyn LISA17 UX and Your Situation team documentation

    tools probably paying for vendors TBH? this talk things we can all control
  80. Amy Nguyen @amyngyn LISA17 Sharing what you know 1. Education

    vs intuition: Don't overload people with too much information. 2. Best practices: Use your expertise to determine the most helpful default behavior. 3. Potential pitfalls: Make it hard to do the wrong thing.
  81. Amy Nguyen @amyngyn LISA17 Designing what your users want 1.

    Performance: Do whatever it takes to make it fast. 2. Exploration: Make it easy to try things without fear. 3. Simplicity: Make it easy to figure out what to do.
  82. Amy Nguyen @amyngyn LISA17 Thanks! (also check out the plenary

    panel! 4pm tomorrow!)