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

Humane Design Patterns

Jon Yablonski
August 23, 2019

Humane Design Patterns

The rapid growth of mobile technology has ushered in an age where time and attention is an increasingly scarce resource. Instead of technology enhancing our abilities as humans, we’ve seen it become a vehicle for extracting our attention, monetizing our personal information, and exploiting our psychological vulnerabilities. Designers and developers play a key role in the creation of such technology, and it’s time we take responsibility for the impact that these products and services we build are having on people it should serve.

In this session we’ll explore some common extractive design patterns in addition to alternatives that focus on user well-being instead. These patterns will be framed through the lens of guiding principles to follow when designing ethically humane products and services.

Jon Yablonski

August 23, 2019
Tweet

More Decks by Jon Yablonski

Other Decks in Design

Transcript

  1. Humane Design
    Patterns

    JON YABLONSKI | @JONYABLONSKI

    View full-size slide

  2. SOURCE: AAA FOUNDATION FOR TRAFFIC SAFETY

    View full-size slide

  3. SOURCE: THE ZEBRA

    View full-size slide

  4. We don’t take tech
    distraction serious enough

    View full-size slide

  5. NIR EYAL’S HOOK MODEL

    View full-size slide

  6. SOURCE: THE GUARDIAN

    View full-size slide

  7. SOURCE: BUSINESS INSIDER

    View full-size slide

  8. SOURCE: JESSE WEAVER

    View full-size slide

  9. The scarce resource of
    the 21st century will not
    be technology;

    MARK WEISER | 1996
    it will be attention

    View full-size slide

  10. Tech addiction has led
    to a lot of problems
    • Shortened attention spans
    • Increased anxiety and depression
    • Sleep deprivation
    • Distracted driving
    • Social Shallowness
    • Constipation
    • Skin Irritation

    View full-size slide

  11. SOURCE: QUARTZ

    View full-size slide

  12. Design teams don’t set
    out to create addictive
    technology

    View full-size slide

  13. SOURCE: JESSE WEAVER
    CREDIT: JESSE WEAVER

    View full-size slide

  14. Aligning tech goals
    with human goals
    1. Redefine what success looks like
    2. Regulation and certification
    3. Principle-guided design

    View full-size slide

  15. Aligning tech goals
    with human goals
    1. Redefine what success looks like
    2. Regulation and certification
    3. Principle-guided design

    View full-size slide

  16. Design Principles
    are awesome

    View full-size slide

  17. Design Principles
    are awesome
    1. Aligns team on shared values
    2. Guides design decisions
    3. Results in more consistency

    View full-size slide

  18. What would design
    principles that align tech
    goals with human goals
    look like?

    View full-size slide

  19. FINITE
    EMPOWERING INCLUSIVE
    RESPECTFUL THOUGHTFUL
    TRANSPARENT
    RESILIENT

    View full-size slide

  20. Finite design maximizes the overall quality of
    time spent by bounding the experience and
    prioritizing meaningful and relevant content.

    View full-size slide

  21. SOURCE: STEVE CUTTS

    View full-size slide

  22. CURB PASSIVE SCROLLING

    View full-size slide

  23. SKIP AUTOPLAY

    View full-size slide

  24. Respectful design prioritizes people’s time,
    attention and overall digital well-being.

    View full-size slide

  25. ALIGN DELIVERY WITH URGENCY

    View full-size slide

  26. This is probably a completely unnecessary
    notification that will interupt you at the worst time.
    Attention!
    now
    SOME APP

    View full-size slide

  27. ALLOW FOR PERSONALIZATION

    View full-size slide

  28. ADAPT TO USER CONTEXT

    View full-size slide

  29. Transparent design is clear about intentions,
    honest in actions and free of dark patterns.

    View full-size slide

  30. IMAGE: SHERYL CABABA

    View full-size slide

  31. RIGHT TO KNOW

    View full-size slide

  32. DATA TRANSPARENCY

    View full-size slide

  33. ACCESS TO DATA

    View full-size slide

  34. THE RIGHT TO BE FORGOTTEN

    View full-size slide

  35. AVOID THE DARK SIDE
    No thanks, I like full price
    Yes! I’d like the discount

    View full-size slide

  36. WEBTRANSPARENCY.CS.PRINCETON.EDU/DARK-PATTERNS/

    View full-size slide

  37. Thoughtful design uses friction to prevent
    abuse, protect privacy, and steer people
    towards healthier digital habits.

    View full-size slide

  38. MANUAL SPEED BUMPS

    View full-size slide

  39. ALGORITHMIC SPEED BUMPS

    View full-size slide

  40. EMBRACE POSITIVE FRICTION

    View full-size slide

  41. ENCOURAGE MODERATION
    View Settings Dismiss
    Whoa you really like us.

    View full-size slide

  42. Empowering design ensures products center on
    the value they provide to people over the
    revenue it can generate.

    View full-size slide

  43. KPI
    User
    MBR
    MVP
    DAU WAU

    View full-size slide

  44. IN CONTROL
    Noti ication Settings
    Only see posts from friends

    View full-size slide

  45. PRIVACY AND ANONYMITY
    Message Settings
    Disable pixel tracking

    View full-size slide

  46. LOCATION TRACKING READ RECEIPTS

    View full-size slide

  47. INVISIBLE UNTIL NEEDED

    View full-size slide

  48. PROMOTE AWARENESS
    2hr45min 42min above average
    Mon Tues Wed Thurs Fri Sat Sun

    View full-size slide

  49. Resilient design focuses on the
    well-being of the most vulnerable and
    anticipates the potential for abuse.

    View full-size slide

  50. Share Settings
    Posts are only visible to friends
    ENABLE CONTENT CONTROL

    View full-size slide

  51. ENABLE COMMUNITY MODERATION
    Mute
    Block
    Report

    View full-size slide

  52. FOCUS ON THE EDGE CASES
    Yes No
    No
    Yes

    View full-size slide

  53. FACEBOOK SUICIDE PREVENTION

    View full-size slide

  54. BALANCE DATA WITH RESEARCH

    View full-size slide

  55. FACEBOOK PROFILE PICTURE GUARD

    View full-size slide

  56. Inclusive design is a methodology that enables
    and draws on the full range of human diversity.

    View full-size slide

  57. INDUSTRIAL AGE INFORMATION AGE DIGITAL AGE
    LOADING

    View full-size slide

  58. BUILD DIVERSE TEAMS

    View full-size slide

  59. DESIGN FOR DISABILITIES FIRST

    View full-size slide

  60. GIVE CONTROL

    View full-size slide

  61. FINITE
    EMPOWERING INCLUSIVE
    RESPECTFUL THOUGHTFUL
    TRANSPARENT
    RESILIENT

    View full-size slide

  62. SOURCE: JESSE WEAVER

    View full-size slide

  63. SOURCE: JESSE WEAVER
    Slow down and
    be intentional

    View full-size slide

  64. HUMANEBYDESIGN.COM

    View full-size slide