A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 48KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Making sense of MVP (Minimum Viable Product) - and why I prefer Earliest Testable/Usable/Lovable (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Making sense of MVP (Minimum Viable Product) - and why I prefer Earliest Testable/Usable/Lovable (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp">Source originale du contenu</a></h3>
  445. <p>A couple of years ago I drew this picture and started using it in various presentations about agile and lean development:</p>
  446. <p><a href="https://blog.crisp.se/wp-content/uploads/2016/01/mvp.png"><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-.jpg" alt=""/></span></a></p>
  447. <p>Since then the drawing has gone viral! Shows up all over the place, in articles and presentations, even in a book (Jeff Patton’s “<a href="http://www.amazon.com/User-Story-Mapping-Discover-Product/dp/1491904909">User Story Mapping</a>”  – an excellent read by the way). Many tell me the drawing really captures the essence of iterative &amp; incremental development, lean startup, MVP (minimum viable product), and what not. However, some misinterpret it, which is quite natural when you take a picture out of it’s original context. Some criticize it for oversimplifying things, which is true. The picture is a metaphor. It is not about actual car development, it is about product development in general, using a car as a metaphor.</p>
  448. <p>Anyway, with all this buzz, I figured it’s time to explain the thinking behind it.</p>
  449. <p><span id="more-7646"/></p>
  450. <h2>First example – Not Like This</h2>
  451. <p>The top row illustrates a common misconception about iterative, incremental product development (a.k.a Agile).</p>
  452. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-1.jpg" alt=""/></span></p>
  453. <p>Many projects fail badly because they do Big Bang delivery (build the thing until 100% done and deliver at the end). I’ve lost count of the number of failed projects I’ve seen because of this (scroll down for some examples). However, when Agile is presented as an alternative people sometimes balk at the idea of delivering an unfinished product – who wants <em>half</em> of a car?. Imagine this:</p>
  454. <p>“Here sir, here’s our first iteration, a front tire. What do you think?”</p>
  455. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-2.jpg" alt=""/></span></p>
  456. <p>Customer is like “Why the heck are you delivering a tire to me? I ordered a CAR! What am I supposed to do with this?”</p>
  457. <p>(By the way, I’m using the term “customer” here as a generic term to represent people like product managers, product owners, and early adopter users).</p>
  458. <p>With each delivery the product gets closer to done, but the customer is still angry because he can’t actually use the product. It’s still just a partial car.</p>
  459. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-3.jpg" alt=""/></span></p>
  460. <p>And finally, when the product is done, the customer is like “Thanks! Finally! Why didn’t you just deliver this in the first place, and skip all the other useless deliveries?”.</p>
  461. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-4.jpg" alt=""/></span></p>
  462. <p>In this example he’s happy with the final product, because it’s what he ordered. In reality, that’s usually not true. A lot of time has passed without any actual user testing, so the product is most likely riddled with design flaws based on incorrect assumptions about what people need.  So that smiley face at the end is pretty idealistic.</p>
  463. <p>Anyway, the first row represents “bastardized agile”. Technically it might be incremental and iterative delivery, but the absence of an actual feedback loop makes it very risky – and definitely not agile.</p>
  464. <p>Hence the “Not Like This” heading.</p>
  465. <h2>Second example – Like this!</h2>
  466. <p>Now for the second row.</p>
  467. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-5.jpg" alt=""/></span></p>
  468. <p>Here we take a very different approach. We start with the same context – the customer ordered a car. But this time we don’t just build a car. Instead we <strong>focus on the underlying need the customer wants fulfilled</strong>. Turns out that his underlying need is “I need to get from A to B faster”, and Car is just one possible solution to that. Remember, car is just a metaphor, think any kind of customized product development situation.</p>
  469. <p>So the team delivers the smallest thing they can think of that will get the customer testing things and giving us feedback. Some might call it an MVP (Minimum Viable Product), but I prefer to call it Earliest Testable Product (more on that further down).</p>
  470. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-6.jpg" alt=""/></span></p>
  471. <p>Call it what you like (some even call their first release the “the skateboard version” of the product, based on this metaphor….).</p>
  472. <p>The customer is unlikely to be happy with this. This is nowhere near the car he ordered. But that’s OK! Here’s the kicker – <strong>we’re not trying to make the customer happy at this point</strong>. We might make a few early adopters happy (or <a href="http://ericsink.com/Act_Your_Age.html">pragmatists in pain</a>), but our <strong>main goal at this point is just to <em>learn</em></strong>. Ideally, the team explains this clearly to the customer in advance, so he isn’t too disappointed.</p>
  473. <p>However, as opposed to the front wheel in the first scenario, the skateboard is actually a usable product that helps the customer get from A to B. Not great, but a tiny bit better than nothing. So we tell the customer “don’t worry, the project is not finished, this was just the first of many iterations. <strong>We’re still aiming to build a car, but in the meantime please try this and give us feedback</strong>“. Think big, but deliver in small functionally viable increments.</p>
  474. <blockquote><p><em>We might learn some really surprising things. Suppose the customer says he hates the skateboard, we ask why, and he says “I hate the color”. We’re like “uh…. the color? That’s all?”. And the customer says “Yeah, make it blue! Other than that, it’s fine!”. You just saved *alot* of money not building the car! Not likely, but who knows?</em></p></blockquote>
  475. <p>The key question is “<strong>What is the cheapest and fastest way we can start learning?</strong>” Can we deliver something even earlier than a skateboard? How about a bus ticket?</p>
  476. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-7.jpg" alt=""/></span></p>
  477. <p>Will this help solve the customer’s problem? Maybe, maybe not, but we’ll definitely learn something by putting this into the hands of real users. <a href="http://theleanstartup.com/book">Lean Startup</a> offers a great model based on listing your actual hypotheses about the users and then working systematically to validate or invalidate them.</p>
  478. <p>You don’t need to test the product on all users, and you don’t need to build a product to test something. <strong>Testing a prototype on even a single user will teach you more than nothing.</strong></p>
  479. <p>But OK, back to the skateboard example.</p>
  480. <p>After playing around with it in the office, the customer says “OK, kind of fun, and it does get me to the coffee machine faster. But it’s unstable. I fall off too easily”.</p>
  481. <p>So the next iteration we try to solve that problem, or at least learn more about it.</p>
  482. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-8.jpg" alt=""/></span></p>
  483. <p>Customer can now get around the office without falling off!</p>
  484. <p>Happy? Not really, he still kind of wants that car. But <strong>in the meantime he is actually using this product, and giving us feedback</strong>. His biggest complaint is that it’s hard to travel longer distances, like between buildings, due to the small wheels and lack of breaks. So, next release the product morphs into something like a bicycle.</p>
  485. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-9.jpg" alt=""/></span></p>
  486. <p>Now the customer can zoom around campus. Yiihaaa!</p>
  487. <p>We learn some things along the way: The customer likes the feeling of fresh air on his face. The customer is on a campus, and transportation is mostly about getting around between buildings.</p>
  488. <p><strong>The bicycle may turn out to be a much better product than the car originally envisioned</strong>. In fact, while testing out this product we may learn that the paths are too narrow for a car anyway. We just saved the customer tons of time and money, and gave him a better product in less time!</p>
  489. <blockquote><p><em>Now you may be thinking  “but shouldn’t we already have known that. via up-front analysis of the customer’s context and needs?” Good point. But in most real-life product development scenarios I’ve seen,<strong> no matter how much up-front analysis you do, you’re still surprised when you put the first real release into the hands of a real user</strong>, and many of your assumptions turn out to be way off.</em></p>
  490. <p><em>So <strong>yes, do some up-front analysis, discover as much as you can before starting development. But don’t spend too much time on it and don’t trust the analysis too much</strong> – start prototyping and releasing instead, that’s when the real learning happens.</em></p></blockquote>
  491. <p>Anyway, back to the story. Perhaps the customer wants more. Sometimes he needs to travel to another city, and the bike ride is too slow and sweaty. So next iteration we add an engine.</p>
  492. <p> </p>
  493. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-10.jpg" alt=""/></span></p>
  494. <p>This model is especially suitable for software, since software is, well, Soft. You can “morph” the product as you go, as opposed to hardware where you essentially have to rebuild every time. However, even in hardware projects there is a huge benefit to delivering prototypes to observe and learn from how the customer uses your product. It’s just that the iterations tend to be a bit longer (months instead of weeks). Even actual car companies like Toyota and Tesla do a lot of prototyping (sketches, 3d models, <a href="http://www.toyota-global.com/showroom/toyota_design/voice_of_design/03.html">full-scale clay models</a>, etc) before developing a new car model.</p>
  495. <p>So now what? Again, maybe the customer is happy with the motorcycle. We could end the project earlier than planned. Most products are riddled with complexity and features that nobody uses. The iterative approach is really a way of delivering less, or <strong>finding the simplest and cheapest way to solve the customer’s problem</strong>. Minimize the distance to Awesome. Very Zen.</p>
  496. <p>Or, again, the customer could choose to continue, with or without modifications to the requirements. We may in fact end up with the exact same car as originally envisioned. However it is much more likely that we gain vital insights along the way and end up with something slightly different. Like this:</p>
  497. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-11.jpg" alt=""/></span></p>
  498. <p>The customer is overjoyed! Why? Because we learned along the way that he appreciates fresh air in his face, so we ended up with a convertible. <strong>He did get a car after all – but a better car than originally planned!</strong></p>
  499. <p>So let’s take a step back.</p>
  500. <h2>What’s your skateboard?</h2>
  501. <p>The top scenario (delivering a front tire) sucks because we keep delivering stuff that the customer can’t use at all. If you know what you’re doing – your product has very little complexity and risk, perhaps you’ve built that type of thing hundreds of times before – then go ahead and just do big bang. Build the thing and deliver it when done.</p>
  502. <p>However, most product development efforts I’ve seen are much too complex and risky for that, and the big bang approach all too often leads to huge expensive failures. So the key question is <strong>What’s your skateboard?</strong></p>
  503. <p>In product development, one of the first things you should do (after describing what problem you are trying to solve for whom) is to identify your skateboard-equivalent. <strong>Think of the skateboard as a metaphor for the smallest thing you can put in the hands of real users, and get real feedback</strong>. Or use “bus ticket” if that metaphor works better.</p>
  504. <p>This will give you the vitally needed feedback loop, and will give both you and the customer control over the project – you can learn and make changes, instead of just following the plan and hoping for the best.</p>
  505. <p>Let’s take at some real-life examples.</p>
  506. <h2>Example 1: Spotify music player</h2>
  507. <blockquote><p><em>“With over 75 million users, it’s hard to remember a time without Spotify. But there was. A time when we were all mulling the aisles of Target for new CDs. A time in our lives where we all became thieves on Napster. A time when iTunes forced us to buy songs for $2/piece. And then came Spotify.”</em> –<a href="http://techcrunch.com/gallery/a-brief-history-of-spotify/">Tech Crunch</a></p></blockquote>
  508. <p><a href="http://www.spotify.com">Spotify</a> is a pretty fancy product now. But it didn’t start that way. I was lucky to be involved pretty early in this amazing journey (and still am).</p>
  509. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-12.jpg" alt=""/></span></p>
  510. <p>As a startup in 2006, Spotify was founded on some key assumptions – that people are happy to stream (rather than own) music, that labels and artists are willing to let people do so legally, and that fast and stable streaming is technically feasible. Remember, this was 2006 when music streaming (like Real Player) was a pretty horrible experience, and pirate-copied music was pretty much the norm. The technical part of the challenge was: “Is it even possible to make a client that streams music instantly when you hit the Play button? Is it possible to get rid of that pesky ‘Buffering’ progress bar?”</p>
  511. <p><strong>Starting small doesn’t mean you can’t think big.</strong> Here’s one of the early sketches of what they had in mind:</p>
  512. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-13.jpg" alt=""/></span></p>
  513. <p>But instead of spending years building the whole product, and then finding out if the assumptions hold, the developers basically sat down and hacked up a technical prototype, put in whatever ripped music they had on their laptops, and started experimenting wildly to find ways to make playback fast and stable. The driving metric was “how many milliseconds does it take from when I press Play to when I hear the music?”. It should play pretty much instantly, and continue playing smoothly without any stuttering!</p>
  514. <blockquote><p><em>“We spent an insane amount of time focusing on latency, when no one cared, because we were hell bent on making it feel like you had all the world’s music on your hard drive. Obsessing over small details can sometimes make all the difference. That’s what I believe is the biggest misunderstanding about the minimum viable product concept. That is the V in the MVP.” </em>-Daniel Ek, co-founder and CEO</p></blockquote>
  515. <p>Once they had something decent, they started testing on themselves, their family, and friends.</p>
  516. <p><span><img class="" title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-14.jpg" alt=""/></span></p>
  517. <p>The initial version couldn’t be released to a wider audience, it was totally unpolished and had basically no features except the ability to find and play a few hard-coded songs, and there was no legal agreement or economic model. It was their skateboard.</p>
  518. <p>But they <strong>shamelessly put the skateboard in the hands of real users</strong> – friends and family – and they quickly got the answers they needed. Yes, it was technically possible. And yes, people absolutely loved the product (or more like, what the product can become)! The <strong>hypotheses were validated</strong>! This running prototype helped convince music labels and investors and, well, the rest is history.</p>
  519. <h2>Example 2: Minecraft</h2>
  520. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-15.jpg" alt=""/></span></p>
  521. <p><a href="https://minecraft.net/">Minecraft</a> is one of the most successful games in the history of game development, especially if you take development cost into consideration. Minecraft is also one of the most extreme examples of the release-early-and-often mindset. The first public release was made after just <a href="http://minecraft.gamepedia.com/Version_history">6 days of coding</a>, by <a href="https://en.wikipedia.org/wiki/Markus_Persson">one guy</a> ! You couldn’t do much in the first version – it was basically an ugly blocky 3d-landscape where you can dig up blocks and place them elsewhere to build crude structures.</p>
  522. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-16.jpg" alt=""/></span></p>
  523. <p>That was the skateboard.</p>
  524. <p>The users were super-engaged though (most developer-user communication happened via Twitter, pretty funny). Among the early users were me and my four kids.  <a href="http://minecraft.gamepedia.com/Version_history">Over hundred releases</a> were made during the first year. Game development is all about finding the fun (some game companies I’ve worked with use the term “Definition of Fun” instead of “Definition of Done”), and the best way to do that is by having real people actually play that game – in this cases thousands of real people who had actually paid to try the early access version and therefore had a personal incentive to help improve the game.</p>
  525. <p>Gradually a small development team was formed around the game (mostly 2 guys actually), and the game became a smash hit all over the world. I don’t think I’ve met any kid anywhere who doesn’t play Minecraft. And last year the game (well, the <a href="https://mojang.com/">company</a> that was formed around the game) was sold to Microsoft for $2.5 billion. Quite amazing.</p>
  526. <h2>Example 3: Big Government Project</h2>
  527. <p>Around 2010 the <a href="https://polisen.se/">Swedish Police</a> started a big initiative to enable police to spend more time in the field and less time at the station – PUST (Polisens Utrednings STöd). A fascinating project, I was involved as coach and wrote a book about what we did and what we learned (<a href="https://pragprog.com/book/hklean/lean-from-the-trenches">Lean from the Trenches</a>).</p>
  528. <p> </p>
  529. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-17.jpg" alt=""/></span></p>
  530. <p>The idea was to put laptops in the cars, and customized software to give police access to the systems they need in real-time, for example while interrogating a suspect (this was the pre-tablet age).</p>
  531. <p>They had tried to build similar systems in the past and failed miserably, mainly because of Big Bang thinking. They told me that one of their previous attempts took 7 years from inception to first release. SEVEN YEARS! By then of course everything had changed and the project was a total failure. So this time they wanted to do it differently.</p>
  532. <p>The 60-person project (later referred to as “PUST Java”) succeeded surprisingly well, especially for being a big government project (it even came second in CIO Awards “<a href="http://cio.event.idg.se/event/awards2011/">Project of the Year</a>”). One of the main success factors was that they <strong>didn’t try to build the whole thing at once</strong> – they split the elephant along two dimensions:</p>
  533. <ul>
  534. <li>By Region. We don’t need to release to ALL of Sweden at once, we could start by releasing to just one region.</li>
  535. <li>By Crime type. We don’t need to support ALL crime types initially, we could start by just supporting 1-2 crime types.</li>
  536. </ul>
  537. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-18.jpg" alt=""/></span></p>
  538. <p> </p>
  539. <p>The first version, 1.0, was their skateboard.</p>
  540. <p>It was a small system, supporting just a couple of crime types, and it was field-tested on a handful of cops in Östergötland (a region in Sweden). Other crime types had to be dealt with the old way – drive to the station and do paperwork. <strong>They knew they were guinea pigs, and that the product was nowhere near finished</strong>. But they were happy to test it, because they knew the alternative. They had seen what kind of crappy systems come out of processes that lack early user feedback, and now they <strong>finally had a chance to influence a system while it was being built</strong>!</p>
  541. <p>Their feedback was harsh and honest. Many of our assumptions flew out the window, and one of the big dilemmas was what to do with all the carefully crafted Use Case specifications that were getting less and less relevant as the real user feedback came in (this was an organization with a waterfall history and a habit of doing big upfront analysis).</p>
  542. <p>Anyway, long story short, the <strong>early feedback was channeled into product improvements</strong> and, gradually, as the those cops in Östergötland started liking the product, we could add more crime types and spread it to more regions. By the time we got to the big release (1.4), with nationwide rollout and training of 12000 police, we weren’t all that worried.<strong> We had done so many releases, so much user testing, that we slept well on the night of the nationwide release.</strong></p>
  543. <p>Unfortunately the victory was short-lived. A follow-up project (PUST Siebel) <a href="https://blog.crisp.se/2014/02/21/henrikkniberg/pust-lardomar">botched it</a> and went back to waterfall-thinking, probably due to old habit. 2 years of analysis and testing without any releases or user-testing, followed by a big-bang release of the “next generation” of the product to all 12,000 police at once. It was an absolute disaster, and after half a year of hemorrhaging they shut the whole thing down. The development cost was about €20 million, but Internal studies estimate that the cost to Swedish society (because the police were handicapped by the horrible system) was on the order of <a href="http://www.blaljus.nu/nyhetsartikel/kostnaden-pust-siebel-10-miljarder">€1 Billion</a>!</p>
  544. <p>Pretty expensive way to learn!</p>
  545. <h2>Example 4: Lego</h2>
  546. <p>I’m currently working at <a href="http://www.lego.com">Lego</a>, and I’m amazed by their ability to deliver new smash-hits, year after year without fail. I hear lots of interesting stories about how they do this, and the common theme is prototyping and early user testing! I often see groups of kids in the office, and designers collaborate with local kindergartens and schools and families to field-test the latest product ideas.</p>
  547. <p>Here’s a recent example – <a href="http://www.lego.com/nexoknights/">Nexo Knights</a> (released Jan 2016):</p>
  548. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-19.jpg" alt=""/></span></p>
  549. <p>When they first started exploring this concept, they did paper prototypes and brought to small kids. The kids’ first reaction was “hey, who are the bad guys? I can’t see who’s good and who’s bad!”. Oops. So the designers kept iterating and testing until they found a design that worked with the kids. I bet even you can see who’s good and who’s evil in the picture above…</p>
  550. <p>Not sure exactly where the skateboard is in this story, but you get the idea – <strong>early feedback from real users</strong>! Don’t just design the product and build the whole thing. Imagine if they had built the product based on their original design assumptions, and learned about the problem <em>after</em> delivering thousands of boxes to stores all over the world!</p>
  551. <p>Lego also has it’s share of hard-earned failures. One example is <a href="https://en.wikipedia.org/wiki/Lego_Universe">Lego Universe</a>, a massively multiplayer online Lego world. Sounds fun huh? Problem is, they got overambitious and ended up trying to build the whole thing to perfection before releasing to the world.</p>
  552. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-20.jpg" alt=""/></span></p>
  553. <p>About <a href="http://250 people worked for 4-5 years">250 people worked for 4-5 years</a> (because of constant scope creep due to perfectionism), and when the release finally came the reception was… lukewarm. The finished game was beautiful, but not as fun as expected, so the product was shut down after 2 years.</p>
  554. <p><strong>There was no skateboard!</strong></p>
  555. <p>Why not? Because skateboards aren’t Awesome (at least not if you’re expecting a car), and Lego’s culture is all about delivering Awesome experiences! If you work at Lego HQ in Billund, Denmark you walk past this huge mural every day:</p>
  556. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-21.jpg" alt=""/></span></p>
  557. <p>Translates roughly to “Only the best is good enough”. It has been Lego’s guiding principle ever since the company started 80+ years ago, and has helped them become one of the most successful companies in the world. But in this case the principle was misapplied. <strong>The</strong> <strong>hunt for perfection delayed vital feedback</strong>, which meant mistaken assumptions about what the users like and don’t like. The exact opposite of Minecraft.</p>
  558. <p>Interestingly enough the Lego Universe teams were actually using Scrum and iterating heavily – just like the Minecraft guys did. But the releases were only internal. So there was most likely a skateboard, and a bicycle, and so on, but those products never reached real users. That’s not how Scrum is intended to be used.</p>
  559. <p>It was an expensive failure, but Lego learned from it and they are constantly getting better at early testing and user feedback.</p>
  560. <h2>Improving on “MVP”</h2>
  561. <p>And that (deep breath…) brings me to the topic of MVP – Minimum Viable Product.</p>
  562. <p>The underlying idea is great, but the term itself causes a lot of confusion and angst. I’ve met many customers that are like “No Way do I want an MVP delivery –  that’s the last delivery I’ll get!” All too often teams deliver the so-called Minimum Viable Product, and then quickly get whisked away to the next project, leaving the customer with a buggy, unfinished product. <strong>For some customers, MVP = MRC (Minimum Releasable Crap).</strong></p>
  563. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-22.jpg" alt=""/></span></p>
  564. <p>I know, I know, this comes down to bad management rather than the term MVP, but still… the term invites misunderstanding. “Minimum” and “Viable” mean different things to different people, and that causes problems.</p>
  565. <p>So here’s an alternative.</p>
  566. <p>First of all, replace the word “Minimum” with “Early”. The whole idea behind releasing an MVP is to get early feedback – by delivering a minimum product rather than a complete product, we can get the feedback earlier.</p>
  567. <p><strong>Few customers want “minimum” but most customers want “early”</strong>! So that’s our first change:</p>
  568. <p>Minimum =&gt; Earliest</p>
  569. <p>Next, remove the word “Viable” since it’s too vague. <strong>Your “viable” is my “horrible”</strong>. Some people think Viable means “something I can test and get feedback from”, others think it means “something the customer can actually use”. So let’s be more explicit and split it into three different things:</p>
  570. <p> </p>
  571. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-23.jpg" alt=""/></span></p>
  572. <p> </p>
  573. <p><strong>Earliest Testable Product</strong> is the skateboard or bus ticket – the <strong>first release that customers can actually do something with</strong>. Might not solve their problem, but it generates at least some kind of feedback. We make it very clear that learning is the main purpose of this release, and that any actual customer value will be a bonus.</p>
  574. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-24.jpg" alt=""/></span><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-25.jpg" alt=""/></span></p>
  575. <p> </p>
  576. <p><strong>Earliest Usable Product</strong> is perhaps the bicycle. The <strong>first release that early adopters will actually use, willingly</strong>. It is far from done, and it might not be very likeable. But it does put your customers in a better position than before.</p>
  577. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-26.jpg" alt=""/></span></p>
  578. <p> </p>
  579. <p><strong>Earliest Lovable Product</strong> is perhaps the motorcycle. The<strong> first release that customers will love, tell their friends about, and be willing to pay for.</strong> There’s still lots to improve, and we may still end up with a convertible, or a plane, or something else. But we’ve reached the point where we have a truly marketable product.</p>
  580. <p><span><img title="" src="https://blog.crisp.se/wp-content/uploads/2016/01/Making-sense-of-MVP-27.jpg" alt=""/></span></p>
  581. <blockquote><p><em>I considered adding an even earlier step “<strong>Earliest Feedbackable Product</strong>”, which is basically the paper prototype or equivalent that you use to get your first feedback from the customer. But four steps seems too many, and the word Feedbackable….. ugh. But nevertheless, that is also an important step. Some would call a paper prototype the Earliest Testable Product, but I guess that comes down to how you define Testable. Check out <a href="https://www.crisp.se/mvpguide">Martin’s MVP Guide</a> to learn more – he’s got plenty of super-concrete examples of how to get early feedback with minimum investment.</em></p></blockquote>
  582. <p>Of course people can still misinterpret Earliest Testable/Usable/Lovable, but it’s at least one step more explicit than the nebulous Minimum Viable Product.</p>
  583. <h2>Takeaway points</h2>
  584. <p>OK time to wrap it up. Never thought it would get this long, thanks for sticking around! Key takeaways:</p>
  585. <ul>
  586. <li><strong>Avoid Big Bang</strong> delivery for complex, innovative product development. Do it iteratively and incrementally. You knew that already. But are you actually doing it?</li>
  587. <li><strong>Start by identifying your skateboard</strong> – the earliest testable product. Aim for the clouds, but swallow your pride and start by delivering the skateboard.</li>
  588. <li><strong>Avoid the term MVP</strong>. Be more explicit about what you’re actually talking about. Earliest testable/usable/lovable is just one example, use whatever terms are least confusing to your stakeholders..</li>
  589. </ul>
  590. <p>And remember – the skateboard/car drawing is just a metaphor. Don’t take it too literally :o)</p>
  591. <p>PS – here’s a fun story about how my kids and I used these principles to win a <a href="https://blog.crisp.se/2015/10/06/henrikkniberg/how-2-kids-and-adult-rookies-won-a-robot-sumo-competition">Robot Sumo competition</a> :o)</p>
  592. <p><em>Thanks Mary Poppendieck, Jeff Patton, Alistair Cockburn, Anders Haugeto, Sophia, colleagues from Crisp, Spotify and Lego, and everyone else who gave tons of useful feedback.</em></p>
  593. </article>
  594. </section>
  595. <nav id="jumpto">
  596. <p>
  597. <a href="/david/blog/">Accueil du blog</a> |
  598. <a href="http://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp">Source originale</a> |
  599. <a href="/david/stream/2019/">Accueil du flux</a>
  600. </p>
  601. </nav>
  602. <footer>
  603. <div>
  604. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  605. <p>
  606. Bonjour/Hi!
  607. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  608. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  609. </p>
  610. <p>
  611. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  612. </p>
  613. <p>
  614. Voici quelques articles choisis :
  615. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  616. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  617. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  618. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  619. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  620. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  621. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  622. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  623. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  624. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  625. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  626. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  627. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  628. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  629. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  630. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  631. </p>
  632. <p>
  633. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  634. </p>
  635. <p>
  636. Je ne traque pas ta navigation mais mon
  637. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  638. conserve des logs d’accès.
  639. </p>
  640. </div>
  641. </footer>
  642. <script type="text/javascript">
  643. ;(_ => {
  644. const jumper = document.getElementById('jumper')
  645. jumper.addEventListener('click', e => {
  646. e.preventDefault()
  647. const anchor = e.target.getAttribute('href')
  648. const targetEl = document.getElementById(anchor.substring(1))
  649. targetEl.scrollIntoView({behavior: 'smooth'})
  650. })
  651. })()
  652. </script>