davidbgk
/
larlet-fr-david

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Long terme — David Larlet</title>
<meta name="description" content="Agile’s success at the expense of UX is just one manifestation of a deeper truth: Businesses want scaling. And foundational UX work doesn’t scale. It doesn’t lend itself to predictable, repeatable processes and generic cookie-cutter roles. It can’t, because by definition it deals with unknown, slippery, hard-to-define problems that characterize the leading edge of an organically evolving business.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
  <h1>Long terme</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/06/23/" title="Publication précédente : FullStack">← Précédent</a> •
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a>
     • <a rel="next" href="/david/2021/06/25/" title="Publication suivante : Données">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote lang="en">
<p>Agile’s success at the expense of UX is just one manifestation of a deeper truth: Businesses want scaling. And foundational UX work doesn’t scale. It doesn’t lend itself to predictable, repeatable processes and generic cookie-cutter roles. It can’t, because by definition it deals with unknown, slippery, hard-to-define problems that characterize the leading edge of an organically evolving business.</p>
<p>The same things that make agile a great fit for scaling engineering work—regular sprint tempos; clearly articulated outcomes to be produced; breaking down the complex, unfolding experience of users into concrete elements that can be tied to code—are the very things that make it a terrible fit for foundational UX work. <mark>The holism necessary to do foundational UX is antithetical to the assembly-line chunks of user behavior</mark> agile requires.</p>
<p><cite><em><a href="https://www.fastcompany.com/90642462/i-helped-pioneer-ux-design-what-i-see-today-horrifies-me">I helped pioneer UX design. What I see today disturbs me</a></em> (<a href="/david/cache/2021/f5a7f2346b8c7317be12857b52321f52/">cache</a>)</cite></p>
</blockquote>
<p>Je ne vais pas me focaliser sur l’opposition agile/UX car il y a pas mal de façons de pratiquer ces deux domaines. C’est certain qu’il est malheureux d’avoir appelé ces itérations des <em>sprints</em> et qu’il faut réussir à avoir suffisamment de recul pour ne pas prendre ce terme au pied de la lettre (sinon ça finit par brûler).</p>
<p><strong>Déterminer ensemble ce que l’on veut produire à long terme est très complexe pour une équipe.</strong> Le contexte change, les utilisateur·ices évoluent, l’équipe elle-même se renouvelle, dans cet espace mouvant il est difficile de conserver un semblant d’unité et de cohérence. Au moins vis-à-vis des interactions avec l’extérieur.</p>
<p>On peut être tenté d’avoir recours à un <em>Design System</em> ou <a href="https://gouvfr.atlassian.net/wiki/spaces/DB/pages/736362561/Version+1.0.0">Système de Design</a> même si ce cadre arrive avec une lourdeur qui lui est propre. Ça peut donner l’impression de mettre une carrosserie sur une trottinette qui n’en nécessitait pas tant. C’est une réponse technique efficace (sans être performante) à une problématique qui a trait <a href="/david/2021/06/23/" title="FullStack">à l’humain et à l’empathie</a>.</p>
<p>Comment combiner la tactique (faire à court terme) à la stratégie (penser à long terme) alors&#8239;? <strong>Sans technique</strong>, avec des <em>personnes</em> qui font le liant. Qui agrègent, qui reli(s)ent, qui partagent l’enthousiasme.</p>
<p>Qui prennent soin. Qui donnent loin.</p>


  <nav>
    <p>
      
        <a href="/david/2021/design/"
          title="Liste de tous les articles associés à cette étiquette"
          >#design</a>
      
        <a href="/david/2021/produit/"
          title="Liste de tous les articles associés à cette étiquette"
          >#produit</a>
      
        <a href="/david/2021/technique/"
          title="Liste de tous les articles associés à cette étiquette"
          >#technique</a>
      
      <a href="/david/#tags"
        title="Liste de toutes les étiquettes existantes"
        ><svg class="icon icon-tags">
          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
        </svg> tous ?</a>
    </p>
  </nav>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/06/23/" title="Publication précédente : FullStack">← Précédent</a> •
    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
     • <a rel="next" href="/david/2021/06/25/" title="Publication suivante : Données">Suivant →</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>