The 7 Deadly Sins of Developer Experience (DevRelCon Tokyo)

My talk from DevRelCon Tokyo

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
2. The 7 Deadly Sins of betta.io Developer Experience
5. betta.io Doors are hard
6. betta.io Glass doors are very hard
7. betta.io APIs + SDKs are harder
8. betta.io Way harder
9. betta.io
10. betta.io Cristiano Betta
11. Ǜ betta.io / @cbetta betta.io Cristiano Betta
12. Ǜ betta.io / @cbetta ex-PayPal/Braintree betta.io Cristiano Betta
13. ♥ Developer Experience Ǜ betta.io / @cbetta ex-PayPal/Braintree betta.io Cristiano Betta
14. betta.io
15. betta.io
17. Developer Experience betta.io
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
19. A platform
20. A platform A successful user
21. A developer platform A successful developer
22. A developer platform A successful developer A fresh new developer
23. A developer platform A fresh new developer Long term success A successful developer
24. Developer Experience 1st site visit Successful integration Outreach Advocacy
25. APIs + SDKs Documentation betta.io
26. APIs + SDKs Documentation betta.io
27. Tools Information betta.io
28. Information Information Information Ǡ betta.io
29. So Much Information
30. Too Much Information Ȫ
31. Too Much Too Soon Information Ȫ
32. Too Much Too Soon Ȫ Too Little Information
33. Too Much Too Soon Ȫ Too Little Unstructured Information
34. Too Much Too Soon Ȫ Too Little Unstructured Unsupportive Information
35. Too Much Too Soon Ȫ Too Little Unstructured Unsupportive Information Incomplete ȟ
36. Too Much Too Soon Ȫ Too Little Unstructured Unsupportive Information Incomplete ȟ betta.io
37. Too Much Too Soon Ȫ Too Little Unstructured Unsupportive Information Incomplete ȟ Tools No control betta.io
38. Too Much Too Soon Ȫ Too Little Unstructured Unsupportive Information Incomplete ȟ Tools No control 1 2 3 4 5 6 7 betta.io
39. Developer Experience The 7 Deadly Sins of betta.io
40. betta.io
41. Information Too much Ȫ betta.io
42. Performance Overload Ȫ betta.io
43. Performance Load betta.io
44. Performance Load betta.io
45. Physical Load betta.io
46. Cognitive Load PULL betta.io
47. What does this UI afford? PULL betta.io
48. What does this UI afford? PULL Pull to open! betta.io
49. What signifiers notify my of the affordances? PULL betta.io
50. What signifiers notify my of the affordances? PULL A handle! betta.io
51. Cognitive Dissonance betta.io
52. Push? Pull? betta.io
53. Cognitive Overload betta.io
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
56. Chunking
57. 80/20 rule
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
59. betta.io
60. Information Too soon
61. Cognitive Load Ȫ betta.io
62. Cognitive Load #2 Ȫ betta.io
63. betta.io
64. betta.io Low Cognitive Load
65. betta.io Medium Physical Load
66. betta.io Prevent Abuse
67. betta.io Are you sure you want to continue? Yes No
68. betta.io Are you sure you want to continue? Yes No Low Cognitive Load
69. betta.io Are you sure you want to continue? Yes No Some Physical Load
70. betta.io _ Your name
71. betta.io _ Your name*
72. betta.io _ Your name*
73. betta.io Who can see this? Your name*
74. betta.io Can I change this later? Your name*
75. betta.io Developer I am a…* Designer Business Owner Marketer
76. betta.io Can I change this later? I am a…* Designer Business Owner Marketer
77. betta.io What is this for? I am a…* Designer Business Owner Marketer
80. Mental Model betta.io
81. How product works How we think it works
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
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
88. Low Cognitive Load
89. Hard questions Postponed
90. betta.io
91. Information Without Structure
92. betta.io
93. betta.io •Page numbers
94. betta.io •Page numbers •Current chapter
95. betta.io •Page numbers •Current chapter •Table of content
96. betta.io •Page numbers •Current chapter •Table of content •Index
97. betta.io •Page numbers •Current chapter •Table of content •Index •Next page
98. betta.io •Page numbers •Current chapter •Table of content •Index •Next page •Previous page
99. Where am I ?
100. Where am I ? Where can I go ?
101. Where am I ? Where can I go ? Where did I come from ?
102. Where am I ? Where can I go ? Where did I come from ? Sign Posting
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
113. betta.io
116. betta.io
117. Information Too little
118. Information Too late
124. Perfection Broken
125. Perfection Broken Good Enough
128. Documentation
131. betta.io client.do.something.awesome(withThis); Documentation
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
133. betta.io Progressive Disclosure
134. betta.io Progressive Revelation
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!
136. betta.io
137. Information Without Flow betta.io
138. Get Started betta.io
139. betta.io
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
145. Get Started betta.io
146. betta.io Success
147. Success? betta.io Email?
148. Success? betta.io Email? First API call?
149. Success? betta.io Email? First API call? Paying user?
150. betta.io Email? First API call? Paying user? Success? Successful user
151. “Why? Simply put; No Customer Success = No Your Success.” betta.io - Sixteen Ventures sixteenventures.com/customer-success-definition Customer Success
152. betta.io
153. Information Incomplete ȟ betta.io
169. ȟ betta.io Information Testing
171. betta.io
172. Tools Out of control betta.io
173. betta.io
175. Unofficial
176. Official
177. Unofficial
178. betta.io Express Checkout
179. Unofficial
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
188. betta.io UX is hard
189. betta.io DX is harder
190. betta.io Way harder
191. betta.io Prevent Cognitive Overload
192. Only Show Information When it makes sense
193. Only Ask Questions When needed
194. Present Information With Structure
195. Present Information On Time
196. Tell the best Stories
197. betta.io Tell the whole Story
198. betta.io Own the whole Story
199. Thank you! @cbetta betta.io Cristiano Betta ȶ betta.io
200. betta.io Universal Principles Of Design (2010) by William Lidwell and Kritina Holden
201. betta.io Signal to Noise Ratio Horror Vacui Readability Wayfinding
202. betta.io The Design of Everyday Things (2013) by Donald A. Norman
203. betta.io Envisioning Information (1990) by Edward R. Tufte
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
205. Thank you! @cbetta betta.io Cristiano Betta ȶ betta.io