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 Slide

  2. View Slide

  3. SOURCE: GM

    View Slide

  4. SOURCE: AAA FOUNDATION FOR TRAFFIC SAFETY

    View Slide

  5. SOURCE: THE ZEBRA

    View Slide

  6. We don’t take tech
    distraction serious enough

    View Slide

  7. View Slide

  8. NIR EYAL’S HOOK MODEL

    View Slide

  9. SOURCE: THE GUARDIAN

    View Slide

  10. SOURCE: BUSINESS INSIDER

    View Slide

  11. SOURCE: JESSE WEAVER

    View Slide

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

    MARK WEISER | 1996
    it will be attention

    View Slide

  13. View Slide

  14. 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 Slide

  15. View Slide

  16. SOURCE: QUARTZ

    View Slide

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

    View Slide

  18. SOURCE: JESSE WEAVER
    CREDIT: JESSE WEAVER

    View Slide

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

    View Slide

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

    View Slide

  21. Design Principles
    are awesome

    View Slide

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

    View Slide

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

    View Slide

  24. FINITE
    EMPOWERING INCLUSIVE
    RESPECTFUL THOUGHTFUL
    TRANSPARENT
    RESILIENT

    View Slide

  25. Finite

    View Slide

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

    View Slide

  27. SOURCE: STEVE CUTTS

    View Slide

  28. CURB PASSIVE SCROLLING

    View Slide

  29. View Slide

  30. LOAD MORE

    View Slide

  31. View Slide

  32. SKIP AUTOPLAY

    View Slide

  33. View Slide

  34. Respectful

    View Slide

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

    View Slide

  36. View Slide

  37. ALIGN DELIVERY WITH URGENCY

    View Slide

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

    View Slide

  39. ALLOW FOR PERSONALIZATION

    View Slide

  40. View Slide

  41. ADAPT TO USER CONTEXT

    View Slide

  42. View Slide

  43. Transparent

    View Slide

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

    View Slide

  45. IMAGE: SHERYL CABABA

    View Slide

  46. RIGHT TO KNOW

    View Slide

  47. View Slide

  48. DATA TRANSPARENCY

    View Slide

  49. View Slide

  50. IOS 13

    View Slide

  51. ANDROID 10

    View Slide

  52. ACCESS TO DATA

    View Slide

  53. View Slide

  54. THE RIGHT TO BE FORGOTTEN

    View Slide

  55. View Slide

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

    View Slide

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

    View Slide

  58. View Slide

  59. Thoughtful

    View Slide

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

    View Slide

  61. View Slide

  62. MANUAL SPEED BUMPS

    View Slide

  63. View Slide

  64. View Slide

  65. ALGORITHMIC SPEED BUMPS

    View Slide

  66. View Slide

  67. View Slide

  68. EMBRACE POSITIVE FRICTION

    View Slide

  69. View Slide

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

    View Slide

  71. View Slide

  72. Empowering

    View Slide

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

    View Slide

  74. KPI
    User
    MBR
    MVP
    DAU WAU

    View Slide

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

    View Slide

  76. View Slide

  77. PRIVACY AND ANONYMITY
    Message Settings
    Disable pixel tracking

    View Slide

  78. LOCATION TRACKING READ RECEIPTS

    View Slide

  79. INVISIBLE UNTIL NEEDED

    View Slide

  80. View Slide

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

    View Slide

  82. View Slide

  83. View Slide

  84. Resilient

    View Slide

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

    View Slide

  86. View Slide

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

    View Slide

  88. View Slide

  89. ENABLE COMMUNITY MODERATION
    Mute
    Block
    Report

    View Slide

  90. View Slide

  91. FOCUS ON THE EDGE CASES
    Yes No
    No
    Yes

    View Slide

  92. FACEBOOK SUICIDE PREVENTION

    View Slide

  93. BALANCE DATA WITH RESEARCH

    View Slide

  94. FACEBOOK PROFILE PICTURE GUARD

    View Slide

  95. Inclusive

    View Slide

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

    View Slide

  97. INDUSTRIAL AGE INFORMATION AGE DIGITAL AGE
    LOADING

    View Slide

  98. BUILD DIVERSE TEAMS

    View Slide

  99. View Slide

  100. DESIGN FOR DISABILITIES FIRST

    View Slide

  101. View Slide

  102. GIVE CONTROL

    View Slide

  103. View Slide

  104. FINITE
    EMPOWERING INCLUSIVE
    RESPECTFUL THOUGHTFUL
    TRANSPARENT
    RESILIENT

    View Slide

  105. SOURCE: JESSE WEAVER

    View Slide

  106. SOURCE: JESSE WEAVER
    Slow down and
    be intentional

    View Slide

  107. HUMANEBYDESIGN.COM

    View Slide