Tools For Builders: Crafting User Experiences For Technical Practitioners

E4baf569e4cbf054d847d094da36e1d1?s=47 John Ryan
January 22, 2020

Tools For Builders: Crafting User Experiences For Technical Practitioners

Developers and operators are the beating heart of software creation and delivery. To be effective, productive, and happy, they need tools that reflect how they think and work. User Experience (UX) design is a mature discipline whose practitioners iterate continuously to make products comprehensible, efficient—even lovable—by users.

Every smartphone, online store, and chatbot we encounter has been meticulously designed for human consumption. But our tools are different: we are engineers building tools for other engineers so we do not really need to consider the user experience. Or…do we?

In this talk, a top Google Cloud interaction designer will reveal the unique challenges and rewards of designing experiences for technical practitioners. Through lessons from the time-old practice of tool-making, universal design principles, and case-study lessons learned, attendees will learn how UX teams build great experiences for the humans who make technology.

E4baf569e4cbf054d847d094da36e1d1?s=128

John Ryan

January 22, 2020
Tweet

Transcript

  1. Tools For Builders DeliveryConf, Seattle Jan 22, 2020 John Ryan

    (@johndryan) Crafting User Experiences For Technical Practitioners
  2. None
  3. Image: Feedback Sports

  4. None
  5. $ heroku create Created notahotdog.herokuapp.com | git@heroku.com:notahotdog.git $ git push

    heroku master -----> Heroku receiving push -----> Rails app detected -----> Compiled slug size is 8.0MB -----> Launching... done, v1 http://notahotdog.herokuapp.com deployed to Heroku
  6. Image: Reddit Messiest Desktop

  7. Hat-tip: Blue Ocean: A New UX for Jenkins - Youtube

  8. DORA State of DevOps Report 2019 Products that have both

    utility and usability are more likely to be adopted by technology professionals, and when they are used, have better outcomes. Source: 2019 Report
  9. Highest performing engineers are 150% more likely to have easy-to-use

    tools. Source: 2019 Report
  10. Elite DevOps Performers

  11. None
  12. Image: Bret Victor Capability Tool Need

  13. A tool addresses human needs by amplifying human capabilities. Brett

    Victor
  14. Image: Bret Victor This part fits the problem This part

    fits the person
  15. User ability Difficulty Flow Boredom Anxiety Csikszentmihalyi’s Flow

  16. This part fits the problem This part fits the person

    User ability Difficulty Flow Boredom Anxiety
  17. Even a 2-second disruption can lead to a doubling of

    errors… it takes more than 25 minutes to resume a task after being interrupted. Sue Shellenbarger Source: WSJ article
  18. Maintain flow Great tools…

  19. $ heroku create Created notahotdog.herokuapp.com | git@heroku.com:notahotdog.git $ git push

    heroku master -----> Heroku receiving push -----> Rails app detected -----> Compiled slug size is 8.0MB -----> Launching... done, v1 http://notahotdog.herokuapp.com deployed to Heroku
  20. CLI API GUI Config User Interface

  21. Image: Atlassian Playbook

  22. TASK 3 TASK 2 TASK 1 Customer Journey Map EMOTIONS

    & THOUGHTS WHERE IS THE DEVELOPER? OBSERVATIONS Terminal GitHub IDE Other entry points Website Documentation GUI 4 Takeaway 3 Aenean mattis ultrices iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Takeaway 2 Aenean a elit congue, volutpat magna a, blandit est. Curabitur venenatis ornare sapien, at venenatis massa laoreet in. Proin ante tortor, molestie a massa id, suscipit congue arcu. Curabitur convallis dolor pulvinar vestibulum consectetur. Takeaway 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, nisl quis pellentesque mollis, est diam faucibus tortor, ac rhoncus massa odio id dolor. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  23. TASK 2 TASK 1 EMOTIONS & THOUGHTS ERE IS THE

    DEVELOPER? Terminal GitHub Website Documentation GUI Subtask description Subtask Subtask description Subtask Subtask description Subtask description
  24. None
  25. Image: Cloud Code

  26. None
  27. The most significant step that ever was taken in human

    history, the thing that turns animal into man was making tools… Louis Leakey, Paleontologist
  28. None
  29. Image: Swiss Army

  30. Image: IKEA

  31. Great tools Simplify complexity

  32. Good design is as little design as possible Dieter Rams

  33. 1958 2001

  34. None
  35. None
  36. Image: Reddit Programmer Humor: "Designing the worst slider ever"

  37. The Pareto principle states that, for many events, roughly 80%

    of the effects come from 20% of the causes. (Focus the majority of effort on the areas that will bring the largest benefits to the most users.)
  38. Before After

  39. git add git commit git merge git push docker build

    docker run yarn install
  40. Great tools Simplify complexity (but don’t remove it)

  41. Lacking features Overwhemlingly Complex

  42. None
  43. None
  44. Yes, but…

  45. 8 clicks 10 seconds 4 clicks 6 seconds Original Interface

    One redesign
  46. Great tools are… User-first (and last!)

  47. TASK 3 TASK 2 TASK 1 Customer Journey Map EMOTIONS

    & THOUGHTS WHERE IS THE DEVELOPER? OBSERVATIONS Terminal GitHub IDE Other entry points Website Documentation GUI 4 Takeaway 3 Aenean mattis ultrices iaculis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Takeaway 2 Aenean a elit congue, volutpat magna a, blandit est. Curabitur venenatis ornare sapien, at venenatis massa laoreet in. Proin ante tortor, molestie a massa id, suscipit congue arcu. Curabitur convallis dolor pulvinar vestibulum consectetur. Takeaway 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, nisl quis pellentesque mollis, est diam faucibus tortor, ac rhoncus massa odio id dolor. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
  48. None
  49. All programs built without user testing are predictions. All predictions

    are wrong. Unknown
  50. Guerilla Usability Testing • Recruit Users • Set a task

    • No wrong answer, no • “Think Aloud Protocol” • Speak less, observe more • Conduct five test sessions
  51. Maintain flow Simplify complexity (but don’t remove it) User-first (and

    last!) Great tools…
  52. Technology is nothing. What’s important is that you have a

    faith in people, that they’re basically good and smart, and if you give them tools, they’ll do wonderful things with them. Steve Jobs
  53. Thank you! Continue the conversation: #DeliveryConf @johndryan Slides: speakerdeck.com/johndryan