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.

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