davidbgk
/
larlet-fr-david-cache
Слідкувати 1
В обрані 0
Форк 0
Код Релізи 0 Активність
A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
314 Коміти
1 Гілка
Дерево: e9ef5f47dd
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з 'e9ef5f47dd'
${ noResults }
larlet-fr-david-cache/cache/9d00487443d1f2e52c1801c4356.../index.html

index.html 40KB
Неформатований Blame Історія

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649 
  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>5 Tips For Writing A Job Story (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   5 Tips For Writing A Job Story (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9">Source originale du contenu</a></h3>

  463.     <p name="14e5" id="14e5" class="graf graf--p graf--hasDropCapModel graf--hasDropCap graf--leading"><span class="graf-dropCap">A</span> <a href="https://medium.com/the-job-to-be-done/af7cdee10c27" data-href="https://medium.com/the-job-to-be-done/af7cdee10c27" class="markup--anchor markup--p-anchor" target="_blank"><em class="markup--em markup--p-em">Job Story</em></a><em class="markup--em markup--p-em"> </em>is a powerful way to facilitate team conversation and discovery when designing products. They are meant to cut right to the <a href="http://www.christenseninstitute.org/key-concepts/jobs-to-be-done/" data-href="http://www.christenseninstitute.org/key-concepts/jobs-to-be-done/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">job to be done</a> by eliminating distractions. The job story encourages the product’s design process to focus on context, causality and motivations instead of assumptions, subjectiveness, personas and implementations.</p>

  464. 

  465. <p name="f980" id="f980" class="graf graf--p graf-after--p"><a href="http://www.whencoffeeandkalecompete.com/" data-href="http://www.whencoffeeandkalecompete.com/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">Want more? Download a free PDF book about JTBD or buy it in paperback &amp; kindle</em></a></p>

  466. 

  467. <p name="0206" id="0206" class="graf graf--p graf-after--p">As I write more job stories, I’ve been paying attention to characteristics which make some stories better than others. When a story is well done, it helps me and my team cut right to what needs to be discussed and puts us all on the same page — making the product design process dramatically better.<br>Here are 5 tips which will help when writing Job Stories:</p>

  468. 

  469. <ol class="postList"><li name="0103" id="0103" class="graf graf--li graf-after--p">Refine A Situation By Adding Contextual Information</li><li name="2934" id="2934" class="graf graf--li graf-after--li">Job Stories Come From Real People Not Personas</li><li name="afc5" id="afc5" class="graf graf--li graf-after--li">Design Modular Job Stories Which Features (Solutions) Can Plug Into</li><li name="2789" id="2789" class="graf graf--li graf-after--li">Add Forces To Motivations</li><li name="8a53" id="8a53" class="graf graf--li graf-after--li">Job Stories Don’t Have To Be From A Specific Point Of View</li></ol>

  470. 

  471. <h4 name="20db" id="20db" class="graf graf--h4 graf-after--li"><strong class="markup--strong markup--h4-strong">1. Refine A Situation By Adding Contextual Information</strong></h4>

  472. 

  473. <p name="b895" id="b895" class="graf graf--p graf-after--h4">When <a href="https://twitter.com/marksweep" data-href="https://twitter.com/marksweep" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">David Wu</a> described to me how a situation can capture a whole set of conditions, it struck a chord with me. When I add more context to a situation, I’ve found that it’s easier to design a working solution which also handles any anxieties which can push a customer away from using a product or feature.<br>Let’s compare:</p>

  474. 

  475. <ol class="postList"><li name="af95" id="af95" class="graf graf--li graf-after--p">When I want something to eat….</li><li name="60d3" id="60d3" class="graf graf--li graf-after--li">When I’m in a rush and want a something to eat….</li><li name="4fc5" id="4fc5" class="graf graf--li graf-after--li">When I’m in a rush, I’m starving and want something to eat….</li><li name="93f6" id="93f6" class="graf graf--li graf-after--li">When I’m in a rush, starving, need something I can eat with one hand while ‘on the go’, am not sure when the next time I’ll be able to eat, …</li></ol>

  476. 

  477. <p name="e9c6" id="e9c6" class="graf graf--p graf-after--li">The more context we have for the situation, the better I can design a solution. In version #1, a sit down restaurant will work. In version #4, perhaps a slice of pizza or snickers bar will work best.</p>

  478. 

  479. <figure name="468d" id="468d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 799px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 114.19999999999999%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*MvlgRZL90wtgSsvmtdZjww.png" data-width="1024" data-height="1169" data-action="zoom" data-action-value="1*MvlgRZL90wtgSsvmtdZjww.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*MvlgRZL90wtgSsvmtdZjww.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*MvlgRZL90wtgSsvmtdZjww.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*MvlgRZL90wtgSsvmtdZjww.png"></noscript></div></div></figure>

  480. 

  481. <h4 name="0c1d" id="0c1d" class="graf graf--h4 graf-after--figure"><strong class="markup--strong markup--h4-strong">2. Job Stories Come From Real People Not Personas</strong></h4>

  482. 

  483. <p name="5bb6" id="5bb6" class="graf graf--p graf-after--h4">Because they are a <a href="http://alanklement.blogspot.com/2013/03/focus-on-relationships-skip-personas.html" data-href="http://alanklement.blogspot.com/2013/03/focus-on-relationships-skip-personas.html" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">mashup of assumptions and attributes</a>, personas can have a destructive effect on product design. They can give a false sense of knowing the customer and thus can really leave gaps in design. For example, you can’t ask a persona about their anxieties, why they chose <em class="markup--em markup--p-em">Product A </em>vs <em class="markup--em markup--p-em">Product B</em>, what else was going on when they chose <em class="markup--em markup--p-em">Product A </em>vs <em class="markup--em markup--p-em">Product B, </em>or that when they first opened your app they didn’t know what to do first….</p>

  484. 

  485. <p name="7c7c" id="7c7c" class="graf graf--p graf-after--p">Job Stories can only come from real customer interviews. Before designing a feature or new product, you must talk to real people and uncover all the anxieties and contexts which were in play when they used your or a competitor’s product.<br>If you are interested in learning about techniques on how to conduct an interview, listen to the <a href="http://jobstobedone.org/radio/the-mattress-interview-part-one/" data-href="http://jobstobedone.org/radio/the-mattress-interview-part-one/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">The Mattress Interview</em></a><em class="markup--em markup--p-em"> </em>with <a href="https://twitter.com/chriscbs" data-href="https://twitter.com/chriscbs" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Chris Spiek</a> and <a href="https://twitter.com/bmoesta" data-href="https://twitter.com/bmoesta" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Bob Moesta</a>. Chris, Bob and Ervin also have a <a href="http://click.linksynergy.com/link?id=eK3SN*a6Q/Q&amp;offerid=323058.55997&amp;type=2&amp;murl=https%3A%2F%2Fwww.udemy.com%2Fmastering-jobs-to-be-done-interviews%2F" data-href="http://click.linksynergy.com/link?id=eK3SN*a6Q/Q&amp;offerid=323058.55997&amp;type=2&amp;murl=https%3A%2F%2Fwww.udemy.com%2Fmastering-jobs-to-be-done-interviews%2F" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Udemy course on jobs-to-be-done customer interviews</a>.</p>

  486. 

  487. <p name="c1df" id="c1df" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Another reason why some favor personas is because they don’t know how else to organize all the information they get about or from their customers. How to organize job stories will be addressed in a future article.</em></p>

  488. 

  489. <h4 name="da5a" id="da5a" class="graf graf--h4 graf-after--p">3. Design Modular Job Stories Which Features (Solutions) Can Plug Into</h4>

  490. 

  491. <p name="e30a" id="e30a" class="graf graf--p graf-after--h4">When designing job stories, it’s important to not commingle them with solutions. This is another important distinction from user stories which encourage defining implementation.</p>

  492. 

  493. <p name="3959" id="3959" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">When commingling personas ( or situations ) and solutions….</strong></p>

  494. 

  495. <p name="639d" id="639d" class="graf graf--p graf-after--p">Below is from a source describing how to write effective user stories. The author encourages to also create sub stories which ‘add detail’ to help develop the user story. Here is an example:</p>

  496. 

  497. <blockquote name="78e0" id="78e0" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">As a user, I can backup my entire hard drive.</em></blockquote>

  498. 

  499. <p name="eefe" id="eefe" class="graf graf--p graf-after--blockquote">…and after adding detail….</p>

  500. 

  501. <blockquote name="3865" id="3865" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">As a power user, I can specify files or folders to backup based on file size, date created and date modified.</em></blockquote>

  502. 

  503. <p name="e6a8" id="e6a8" class="graf graf--p graf-after--blockquote">and…..</p>

  504. 

  505. <blockquote name="10e2" id="10e2" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">As a user, I can indicate folders not to backup so that my backup drive isn’t filled up with things I don’t need saved.</em></blockquote>

  506. 

  507. <p name="43d4" id="43d4" class="graf graf--p graf-after--blockquote">Given the examples above, suppose the <em class="markup--em markup--p-em">power users </em>didn’t care much to <em class="markup--em markup--p-em">specify which files or folders to back up bases on file size, date created….. </em>In this case how do you figure out what went wrong. Is your persona wrong? Is the feature wrong? Is it the wrong feature for the persona?</p>

  508. 

  509. <figure name="1e5a" id="1e5a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 419px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.8%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*Lr_Yk8w34YQxGjgFajm8FQ.png" data-width="963" data-height="576" data-action="zoom" data-action-value="1*Lr_Yk8w34YQxGjgFajm8FQ.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*Lr_Yk8w34YQxGjgFajm8FQ.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*Lr_Yk8w34YQxGjgFajm8FQ.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*Lr_Yk8w34YQxGjgFajm8FQ.png"></noscript></div></div></figure>

  510. 

  511. <p name="1aeb" id="1aeb" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Breaking out situations ( jobs ) and solutions.</strong></p>

  512. 

  513. <p name="3226" id="3226" class="graf graf--p graf-after--p">The bottom line here is that when jobs are seen as separate from solutions, you notice that they can be explored differently and at different times. Another benefit of modular stories and solutions is how you can begin to see where jobs overlap and several jobs can end up sharing a common solution.</p>

  514. 

  515. <p name="8f2b" id="8f2b" class="graf graf--p graf-after--p">How job stories relate to solutions and other job stories is a topic onto its own. In the mean time, start off with visualizing the relationship between job stories and features like this:</p>

  516. 

  517. <figure name="c41a" id="c41a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 421px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 60.099999999999994%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*1QF2SaiilpUGvl4uGfq6oA.png" data-width="993" data-height="597" data-action="zoom" data-action-value="1*1QF2SaiilpUGvl4uGfq6oA.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*1QF2SaiilpUGvl4uGfq6oA.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*1QF2SaiilpUGvl4uGfq6oA.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*1QF2SaiilpUGvl4uGfq6oA.png"></noscript></div></div></figure>

  518. 

  519. <figure name="a096" id="a096" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 393px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*bb9TLt5SMzDAQvq2KYoXeA.png" data-width="999" data-height="561" data-action="zoom" data-action-value="1*bb9TLt5SMzDAQvq2KYoXeA.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*bb9TLt5SMzDAQvq2KYoXeA.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*bb9TLt5SMzDAQvq2KYoXeA.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*bb9TLt5SMzDAQvq2KYoXeA.png"></noscript></div></div></figure>

  520. 

  521. <figure name="ad83" id="ad83" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 386px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.1%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*f4A2DUwIw3s0jy5x2-My2g.png" data-width="1020" data-height="562" data-action="zoom" data-action-value="1*f4A2DUwIw3s0jy5x2-My2g.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*f4A2DUwIw3s0jy5x2-My2g.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*f4A2DUwIw3s0jy5x2-My2g.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*f4A2DUwIw3s0jy5x2-My2g.png"></noscript></div></div></figure>

  522. 

  523. <figure name="13ee" id="13ee" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 525px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*p7w3xSX7NlSwq_eIX34SXw.png" data-width="1024" data-height="768" data-action="zoom" data-action-value="1*p7w3xSX7NlSwq_eIX34SXw.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*p7w3xSX7NlSwq_eIX34SXw.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*p7w3xSX7NlSwq_eIX34SXw.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*p7w3xSX7NlSwq_eIX34SXw.png"></noscript></div></div></figure>

  524. 

  525. <p name="fa97" id="fa97" class="graf graf--p graf-after--figure">The last image references what I call a <a href="https://jtbd.info/situational-segmentation-vs-customer-market-segmentation-860cc865eed5" data-href="https://jtbd.info/situational-segmentation-vs-customer-market-segmentation-860cc865eed5" class="markup--anchor markup--p-anchor" target="_blank"><em class="markup--em markup--p-em">Situational Segment</em></a><em class="markup--em markup--p-em">. </em>It’s an idea I’ve been thinking about lately and is a topic that needs to be explored on its own.</p>

  526. 

  527. <h4 name="21ab" id="21ab" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">4. Add Forces To Motivations</strong></h4>

  528. 

  529. <p name="ac0f" id="ac0f" class="graf graf--p graf-after--h4">Another idea from David Wu is to include forces with motivations. In the job story format of <strong class="markup--strong markup--p-strong">Situation — Motivations — Expected Outcomes</strong>, the <em class="markup--em markup--p-em">Motivation </em>stage can be augmented by adding pull and push <a href="http://jobstobedone.org/radio/unpacking-the-progress-making-forces-diagram/" data-href="http://jobstobedone.org/radio/unpacking-the-progress-making-forces-diagram/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">forces</a>. Adding forces to a motivation is much like adding context to a situation. Let’s consider the <a href="http://news.cnet.com/8301-1023_3-57604502-93/amazon-adds-mayday-button-tech-support-to-new-kindle-fire-hdx-tablets/" data-href="http://news.cnet.com/8301-1023_3-57604502-93/amazon-adds-mayday-button-tech-support-to-new-kindle-fire-hdx-tablets/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">mayday </em>feature by amazon</a>, as <a href="http://revolveapp.com/blog/bid/337958/mayday-specs-irrelevant-for-the-new-kindle-fire" data-href="http://revolveapp.com/blog/bid/337958/mayday-specs-irrelevant-for-the-new-kindle-fire" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Ross Belmont</a> put it:</p>

  530. 

  531. <blockquote name="cc4f" id="cc4f" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">When I’m using my tablet and encounter a problem, I want to get help right away so I can finish what I started.</em></blockquote>

  532. 

  533. <p name="224f" id="224f" class="graf graf--p graf-after--blockquote">Let’s stick with the motivational part: <em class="markup--em markup--p-em">I want to get help right away </em>and add some forces:</p>

  534. 

  535. <p name="a4fc" id="a4fc" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Situation:</strong></p>

  536. 

  537. <p name="f10f" id="f10f" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">When I’m using my tablet and encounter a problem….</em></p>

  538. 

  539. <p name="df91" id="df91" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Motivation:</strong></p>

  540. 

  541. <p name="455c" id="455c" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">I want to get help right away…</em></p>

  542. 

  543. <p name="05ea" id="05ea" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Force: I’m irritated because I was in the middle of something…</em></p>

  544. 

  545. <p name="60df" id="60df" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Force: I’m nervous I won’t finish what I was just doing…</em></p>

  546. 

  547. <p name="d23d" id="d23d" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Force: I get nervous asking for help…</em></p>

  548. 

  549. <p name="2ad6" id="2ad6" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Force: Asking for help might make me look stupid…</em></p>

  550. 

  551. <p name="1d42" id="1d42" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Force: I’m shy about showing what I’m working on to someone else…</em></p>

  552. 

  553. <p name="a22d" id="a22d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Expected Outcome:</strong></p>

  554. 

  555. <p name="ba0c" id="ba0c" class="graf graf--p graf-after--p">So I can finish what I started.</p>

  556. 

  557. <p name="2c4a" id="2c4a" class="graf graf--p graf-after--p">When a story adds forces, we can then design solutions which help reduce forces that push customers away from a product or feature and increase the forces that pull them towards a product or feature. In Amazon’s case, they could:</p>

  558. 

  559. <ul class="postList"><li name="7616" id="7616" class="graf graf--li graf-after--p"><em class="markup--em markup--li-em">Reassure that customers don’t have to wait long to get help. ( I’m nervous I won’t finish what I was just doing )</em></li><li name="de2b" id="de2b" class="graf graf--li graf-after--li"><em class="markup--em markup--li-em">Ensure that customers can choose how much access the customer support rep has to your tablet. ( I’m shy about showing what I’m working on to someone else )</em></li><li name="ff4e" id="ff4e" class="graf graf--li graf-after--li"><em class="markup--em markup--li-em">Remind customers how common it is to ask for help. (Asking for</em> <em class="markup--em markup--li-em">help might make me look stupid)</em></li></ul>

  560. 

  561. <h4 name="f8a3" id="f8a3" class="graf graf--h4 graf-after--li"><strong class="markup--strong markup--h4-strong">5. Job Stories Don’t Have To Be From A Single Point Of View</strong></h4>

  562. 

  563. <p name="13f5" id="13f5" class="graf graf--p graf-after--h4">Lately, I’ve been experimenting with the idea of not restricting stories to the point of view of just one person. Instead, I’ve been writing stories from a third person point of view.</p>

  564. 

  565. <p name="0aac" id="0aac" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">When:</strong></p>

  566. 

  567. <p name="c2cb" id="c2cb" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">When someone approaches a bank for a home mortgage and fills out an application…</em></p>

  568. 

  569. <p name="c132" id="c132" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Motivation:</strong></p>

  570. 

  571. <p name="32c3" id="32c3" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">The applicant wants to know if the application is accepted or not…</em></p>

  572. 

  573. <p name="d451" id="d451" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">The banker wants to make sure that the application is filled out correctly…</em></p>

  574. 

  575. <p name="738f" id="738f" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">The bank wants to check if the applicant has acceptable credit history…</em></p>

  576. 

  577. <p name="cb8e" id="cb8e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Expected Outcome:</strong></p>

  578. 

  579. <p name="6025" id="6025" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">So that a home mortgage is quickly given to a low risk person, which the bank feels confident it will profit from.</em></p>

  580. 

  581. <p name="ee0c" id="ee0c" class="graf graf--p graf-after--p">Again, I’m experimenting with these so I’d love feedback on what people think about this. So far, 3rd person stories do well when a product deals with multiple parties, such as a real time bidding site like eBay.</p>

  582. 

  583. <h4 name="0c49" id="0c49" class="graf graf--h4 graf-after--p">Learn more</h4>

  584. 

  585. <p name="cb88" id="cb88" class="graf graf--p graf-after--h4">I’m still working with job stories in my product design and I’m sure the more the concept is put into practice, adjustments will be made and it will continue to be built upon. As these come up, I’ll continue to comment about it.</p>

  586.   </article>

  587. </section>

  588. 

  589. 

  590. <nav id="jumpto">

  591.   <p>

  592.     <a href="/david/blog/">Accueil du blog</a> |

  593.     <a href="https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9">Source originale</a> |

  594.     <a href="/david/stream/2019/">Accueil du flux</a>

  595.   </p>

  596. </nav>

  597. 

  598. <footer>

  599.   <div>

  600.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  601.     <p>

  602.       Bonjour/Hi!

  603.       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>

  604.       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>).

  605.     </p>

  606.     <p>

  607.       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>.

  608.     </p>

  609.     

  610.     <p>

  611.       Voici quelques articles choisis :

  612.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  613.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  614.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  615.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  616.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  617.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  618.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  619.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  620.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  621.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  622.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  623.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  624.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  625.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  626.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  627.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  628.     </p>

  629.     <p>

  630.       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>.

  631.     </p>

  632.     <p>

  633.       Je ne traque pas ta navigation mais mon

  634.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  635.       conserve des logs d’accès.

  636.     </p>

  637.   </div>

  638. </footer>

  639. <script type="text/javascript">

  640.   ;(_ => {

  641.     const jumper = document.getElementById('jumper')

  642.     jumper.addEventListener('click', e => {

  643.       e.preventDefault()

  644.       const anchor = e.target.getAttribute('href')

  645.       const targetEl = document.getElementById(anchor.substring(1))

  646.       targetEl.scrollIntoView({behavior: 'smooth'})

  647.     })

  648.   })()

  649. </script>