$30 off During Our Annual Pro Sale. View Details »

Tools For Builders: Crafting User Experiences For Technical Practitioners

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.

John Ryan

January 22, 2020
Tweet

More Decks by John Ryan

Other Decks in Design

Transcript

  1. Tools For Builders
    DeliveryConf, Seattle
    Jan 22, 2020
    John Ryan (@johndryan)
    Crafting User Experiences
    For Technical Practitioners

    View Slide

  2. View Slide

  3. Image: Feedback Sports

    View Slide

  4. View Slide

  5. $ heroku create
    Created notahotdog.herokuapp.com | [email protected]: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

    View Slide

  6. Image: Reddit Messiest Desktop

    View Slide

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

    View Slide

  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

    View Slide

  9. Highest performing engineers are
    150%
    more likely to have easy-to-use tools.
    Source: 2019 Report

    View Slide

  10. Elite DevOps Performers

    View Slide

  11. View Slide

  12. Image: Bret Victor
    Capability
    Tool
    Need

    View Slide

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

    View Slide

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

    View Slide

  15. User ability
    Difficulty
    Flow
    Boredom
    Anxiety
    Csikszentmihalyi’s Flow

    View Slide

  16. This part
    fits the
    problem
    This
    part fits
    the person
    User ability
    Difficulty
    Flow
    Boredom
    Anxiety

    View Slide

  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

    View Slide

  18. Maintain flow
    Great tools…

    View Slide

  19. $ heroku create
    Created notahotdog.herokuapp.com | [email protected]: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

    View Slide

  20. CLI API GUI Config
    User Interface

    View Slide

  21. Image: Atlassian Playbook

    View Slide

  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

    View Slide

  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

    View Slide

  24. View Slide

  25. Image: Cloud Code

    View Slide

  26. View Slide

  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

    View Slide

  28. View Slide

  29. Image: Swiss Army

    View Slide

  30. Image: IKEA

    View Slide

  31. Great tools
    Simplify
    complexity

    View Slide

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

    View Slide

  33. 1958 2001

    View Slide

  34. View Slide

  35. View Slide


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

    View Slide

  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.)

    View Slide

  38. Before After

    View Slide

  39. git add
    git commit
    git merge
    git push
    docker build
    docker run
    yarn install

    View Slide

  40. Great tools
    Simplify
    complexity
    (but don’t remove it)

    View Slide

  41. Lacking
    features
    Overwhemlingly
    Complex

    View Slide

  42. View Slide

  43. View Slide

  44. Yes, but…

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  48. View Slide

  49. All programs built without user testing are
    predictions. All predictions are wrong.
    Unknown

    View Slide

  50. Guerilla Usability Testing
    ● Recruit Users
    ● Set a task
    ● No wrong answer, no
    ● “Think Aloud Protocol”
    ● Speak less, observe more
    ● Conduct five test sessions

    View Slide

  51. Maintain
    flow
    Simplify
    complexity
    (but don’t remove it)
    User-first
    (and last!)
    Great tools…

    View Slide

  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

    View Slide

  53. Thank you!
    Continue the conversation:
    #DeliveryConf
    @johndryan
    Slides:
    speakerdeck.com/johndryan

    View Slide