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

The 7 Deadly Sins of Developer Experience (DevRelCon Tokyo)

The 7 Deadly Sins of Developer Experience (DevRelCon Tokyo)

My talk from DevRelCon Tokyo

Cristiano Betta

July 29, 2017
Tweet

More Decks by Cristiano Betta

Other Decks in Technology

Transcript

  1. 1 0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1
    1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0 1 0 1
    1 1 1 0
    0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0
    0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0 1 0 1 0 1 1
    0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0
    1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0 1 0
    1 0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1
    0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1 0 1 0
    1 0 1 0 1 1 1 0 1 0 1 1 0 0 1 0 1 0 1 0 1 1
    Developer Experience
    The 7 Deadly Sins of
    1 0 1 0 1 1 1 0 1 0 1 1 0 0 1 0 1

    View Slide

  2. The 7 Deadly Sins of
    betta.io
    Developer Experience

    View Slide

  3. View Slide

  4. View Slide

  5. betta.io
    Doors are hard

    View Slide

  6. betta.io
    Glass doors are very hard

    View Slide

  7. betta.io
    APIs + SDKs are harder

    View Slide

  8. betta.io
    Way harder

    View Slide

  9. betta.io

    View Slide

  10. betta.io
    Cristiano Betta

    View Slide

  11. Ǜ betta.io / @cbetta
    betta.io
    Cristiano Betta

    View Slide

  12. Ǜ betta.io / @cbetta
    ex-PayPal/Braintree
    betta.io
    Cristiano Betta

    View Slide

  13. ♥ Developer Experience
    Ǜ betta.io / @cbetta
    ex-PayPal/Braintree
    betta.io
    Cristiano Betta

    View Slide

  14. betta.io

    View Slide

  15. betta.io

    View Slide

  16. View Slide

  17. Developer
    Experience
    betta.io

    View Slide

  18. “Developer experience is an extension of UX that
    focuses on the developer, who can either be the
    intermediary or, as is the case with many APIs, the end
    user. Whether or not you focus on DX design, your
    developers are always experiencing your API, and that
    experience may either be positive or negative.”
    betta.io
    - Jennifer Riggins | @jkriggins
    Developer Experience

    View Slide

  19. A platform

    View Slide

  20. A platform
    A successful
    user

    View Slide

  21. A developer platform
    A successful
    developer

    View Slide

  22. A developer platform
    A successful
    developer
    A fresh new
    developer

    View Slide

  23. A developer platform
    A fresh new
    developer
    Long
    term success
    A successful
    developer

    View Slide

  24. Developer Experience
    1st site
    visit
    Successful
    integration
    Outreach Advocacy

    View Slide

  25. APIs + SDKs
    Documentation
    betta.io

    View Slide

  26. APIs + SDKs
    Documentation
    betta.io

    View Slide

  27. Tools
    Information
    betta.io

    View Slide

  28. Information
    Information
    Information
    Ǡ
    betta.io

    View Slide

  29. So Much Information

    View Slide

  30. Too Much Information
    Ȫ

    View Slide

  31. Too Much
    Too Soon Information
    Ȫ

    View Slide

  32. Too Much
    Too Soon
    Ȫ
    Too Little Information

    View Slide

  33. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured Information

    View Slide

  34. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured
    Unsupportive Information

    View Slide

  35. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured
    Unsupportive
    Information
    Incomplete
    ȟ

    View Slide

  36. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured
    Unsupportive
    Information
    Incomplete
    ȟ
    betta.io

    View Slide

  37. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured
    Unsupportive
    Information
    Incomplete
    ȟ
    Tools
    No control
    betta.io

    View Slide

  38. Too Much
    Too Soon
    Ȫ
    Too Little
    Unstructured
    Unsupportive
    Information
    Incomplete
    ȟ
    Tools
    No control
    1
    2
    3
    4
    5
    6
    7
    betta.io

    View Slide

  39. Developer Experience
    The 7 Deadly Sins of
    betta.io

    View Slide

  40. betta.io

    View Slide

  41. Information
    Too much
    Ȫ
    betta.io

    View Slide

  42. Performance
    Overload
    Ȫ
    betta.io

    View Slide

  43. Performance
    Load
    betta.io

    View Slide

  44. Performance
    Load
    betta.io

    View Slide

  45. Physical Load
    betta.io

    View Slide

  46. Cognitive
    Load
    PULL
    betta.io

    View Slide

  47. What does
    this UI afford?
    PULL
    betta.io

    View Slide

  48. What does
    this UI afford?
    PULL
    Pull to open!
    betta.io

    View Slide

  49. What signifiers
    notify my of the
    affordances?
    PULL
    betta.io

    View Slide

  50. What signifiers
    notify my of the
    affordances?
    PULL
    A handle!
    betta.io

    View Slide

  51. Cognitive
    Dissonance
    betta.io

    View Slide

  52. Push?
    Pull?
    betta.io

    View Slide

  53. Cognitive
    Overload
    betta.io

    View Slide

  54. View Slide

  55. “A situation where the teacher gives too much
    information or too many tasks to learners
    simultaneously, resulting in the learner being unable
    to process this information. In this situation, the […]
    processing demands of an activity go beyond the
    […] processing limits of the learner.”
    betta.io
    - British Council
    teachingenglish.org.uk/article/cognitive-overload
    Cognitive Overload

    View Slide

  56. Chunking

    View Slide

  57. 80/20 rule

    View Slide

  58. “Users will use 2̸% of the features
    of your product 8̸% of the time.”
    betta.io
    - Usability First
    usabilityfirst.com/glossary/8̸2̸-rule
    80/20 rule

    View Slide

  59. betta.io

    View Slide

  60. Information
    Too soon

    View Slide

  61. Cognitive
    Load
    Ȫ
    betta.io

    View Slide

  62. Cognitive
    Load #2
    Ȫ
    betta.io

    View Slide

  63. betta.io

    View Slide

  64. betta.io
    Low Cognitive
    Load

    View Slide

  65. betta.io
    Medium Physical
    Load

    View Slide

  66. betta.io
    Prevent
    Abuse

    View Slide

  67. betta.io
    Are you sure you want to continue?
    Yes No

    View Slide

  68. betta.io
    Are you sure you want to continue?
    Yes No
    Low Cognitive
    Load

    View Slide

  69. betta.io
    Are you sure you want to continue?
    Yes No
    Some Physical
    Load

    View Slide

  70. betta.io
    _
    Your name

    View Slide

  71. betta.io
    _
    Your name*

    View Slide

  72. betta.io
    _
    Your name*

    View Slide

  73. betta.io
    Who can see this?
    Your name*

    View Slide

  74. betta.io
    Can I change this later?
    Your name*

    View Slide

  75. betta.io
    Developer
    I am a…*
    Designer
    Business Owner
    Marketer

    View Slide

  76. betta.io
    Can I change this later?
    I am a…*
    Designer
    Business Owner
    Marketer

    View Slide

  77. betta.io
    What is this for?
    I am a…*
    Designer
    Business Owner
    Marketer

    View Slide

  78. View Slide

  79. View Slide

  80. Mental Model
    betta.io

    View Slide

  81. How product
    works
    How we think
    it works

    View Slide

  82. “A mental model is an explanation of
    someone's thought process about how something
    works in the real world. It is a representation of
    the surrounding world, the relationships between
    its various parts and a person's intuitive perception
    about his or her own acts and their consequences.”
    betta.io
    - Mental Model, Wikipedia
    Mental Model

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. “A strategy for managing
    information complexity in which
    only necessary information is
    requested at any given time”
    betta.io
    - Universal Principles of Design (2̸1̸)
    Progressive Disclosure

    View Slide

  87. View Slide

  88. Low Cognitive
    Load

    View Slide

  89. Hard questions
    Postponed

    View Slide

  90. betta.io

    View Slide

  91. Information
    Without Structure

    View Slide

  92. betta.io

    View Slide

  93. betta.io
    •Page numbers

    View Slide

  94. betta.io
    •Page numbers
    •Current chapter

    View Slide

  95. betta.io
    •Page numbers
    •Current chapter
    •Table of content

    View Slide

  96. betta.io
    •Page numbers
    •Current chapter
    •Table of content
    •Index

    View Slide

  97. betta.io
    •Page numbers
    •Current chapter
    •Table of content
    •Index
    •Next page

    View Slide

  98. betta.io
    •Page numbers
    •Current chapter
    •Table of content
    •Index
    •Next page
    •Previous page

    View Slide

  99. Where am I ?

    View Slide

  100. Where am I ?
    Where can I go ?

    View Slide

  101. Where am I ?
    Where can I go ?
    Where did I come from ?

    View Slide

  102. Where am I ?
    Where can I go ?
    Where did I come from ?
    Sign
    Posting

    View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. “A diagram that describes the
    general pattern followed by the eyes
    when looking at evenly distributed,
    homogeneous information”
    betta.io
    - Universal Principles of Design (2̸1̸)
    Guttenberg Diagram

    View Slide

  113. betta.io

    View Slide

  114. View Slide

  115. View Slide

  116. betta.io

    View Slide

  117. Information
    Too little

    View Slide

  118. Information
    Too late

    View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. View Slide

  124. Perfection
    Broken

    View Slide

  125. Perfection
    Broken Good Enough

    View Slide

  126. View Slide

  127. View Slide

  128. Documentation

    View Slide

  129. View Slide

  130. View Slide

  131. betta.io
    client.do.something.awesome(withThis);
    Documentation

    View Slide

  132. betta.io
    client.do.something.awesome(withThis);
    Documentation
    Note: withThis needs to be a boolean on Tuesdays and an
    Integer on every other day. On Sunday’s it also can only be
    true

    View Slide

  133. betta.io
    Progressive Disclosure

    View Slide

  134. betta.io
    Progressive Revelation

    View Slide

  135. betta.io
    client.do.something.awesome(withThis);
    Documentation
    Note: withThis can be a boolean or integer, and is
    magically converted to the right value depending on the
    day. Don’t worry, we got you covered!

    View Slide

  136. betta.io

    View Slide

  137. Information
    Without Flow
    betta.io

    View Slide

  138. Get Started
    betta.io

    View Slide

  139. betta.io

    View Slide

  140. View Slide

  141. “A method of creating imagery,
    emotions, and understanding of
    events through an interaction
    between storyteller and an audience”
    betta.io
    - Universal Principles of Design (2̸1̸)
    Story Telling

    View Slide

  142. View Slide

  143. View Slide

  144. View Slide

  145. Get Started
    betta.io

    View Slide

  146. betta.io
    Success

    View Slide

  147. Success?
    betta.io
    Email?

    View Slide

  148. Success?
    betta.io
    Email?
    First API call?

    View Slide

  149. Success?
    betta.io
    Email?
    First API call?
    Paying user?

    View Slide

  150. betta.io
    Email?
    First API call?
    Paying user?
    Success? Successful user

    View Slide

  151. “Why? Simply put; No Customer
    Success = No Your Success.”
    betta.io
    - Sixteen Ventures
    sixteenventures.com/customer-success-definition
    Customer Success

    View Slide

  152. betta.io

    View Slide

  153. Information
    Incomplete
    ȟ
    betta.io

    View Slide

  154. View Slide

  155. View Slide

  156. View Slide

  157. View Slide

  158. View Slide

  159. View Slide

  160. View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. View Slide

  165. View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. ȟ
    betta.io
    Information
    Testing

    View Slide

  170. View Slide

  171. betta.io

    View Slide

  172. Tools
    Out of control
    betta.io

    View Slide

  173. betta.io

    View Slide

  174. View Slide

  175. Unofficial

    View Slide

  176. Official

    View Slide

  177. Unofficial

    View Slide

  178. betta.io
    Express Checkout

    View Slide

  179. Unofficial

    View Slide

  180. View Slide

  181. View Slide

  182. View Slide

  183. “…in reality, whatever people can
    pull down from their favorite
    package manager is their
    developer experience…”
    betta.io
    - Square’s Tristan Sokol @ DevXCon SF 2̸17
    About SDKs

    View Slide

  184. View Slide

  185. View Slide

  186. View Slide

  187. View Slide

  188. betta.io
    UX is hard

    View Slide

  189. betta.io
    DX is harder

    View Slide

  190. betta.io
    Way harder

    View Slide

  191. betta.io
    Prevent Cognitive
    Overload

    View Slide

  192. Only Show
    Information
    When it makes sense

    View Slide

  193. Only Ask
    Questions
    When needed

    View Slide

  194. Present Information
    With Structure

    View Slide

  195. Present Information
    On Time

    View Slide

  196. Tell the best
    Stories

    View Slide

  197. betta.io
    Tell the whole
    Story

    View Slide

  198. betta.io
    Own the whole
    Story

    View Slide

  199. Thank you!
    @cbetta betta.io
    Cristiano Betta
    ȶ
    betta.io

    View Slide

  200. betta.io
    Universal Principles
    Of Design (2010)
    by William Lidwell and Kritina Holden

    View Slide

  201. betta.io
    Signal to Noise Ratio
    Horror Vacui
    Readability
    Wayfinding

    View Slide

  202. betta.io
    The Design of
    Everyday Things (2013)
    by Donald A. Norman

    View Slide

  203. betta.io
    Envisioning Information
    (1990)
    by Edward R. Tufte

    View Slide

  204. betta.io
    The Mom Test (2013)
    How to talk to customers & learn if
    your business is a good idea when
    everyone is lying to you
    by Rob Fitzpatrick

    View Slide

  205. Thank you!
    @cbetta betta.io
    Cristiano Betta
    ȶ
    betta.io

    View Slide