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>
  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>Datagouv — David Larlet</title>
<meta name="description" content="Récit d’une expérimentation lors d’un accompagnement.">
<!-- 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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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 hr-center ul-star pre-tick" data-instant-intensity="viewport-all">

<article>
<header>
  <h1>Datagouv</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/01/15/" title="Publication précédente : Futurs">←</a> •
    <a href="/david/" title="Aller à l’accueil">🏠</a>
     • <a rel="next" href="/david/2020/01/22/" title="Publication suivante : Réponses">→</a>
  </p>
</nav>
<hr>
<main>
  
<p><em>Récit d’une expérimentation lors d’un accompagnement.</em></p>
<h2 id="contexte">Contexte <a href="#contexte" title="Ancre vers cette partie">#</a></h2><p>Nous avions tous les deux — avec <a href="https://vinyll.anonym.dev/">Vincent</a> — travaillé sur le site <a href="https://www.data.gouv.fr/">data.gouv.fr</a> qui est la plateforme des données ouvertes françaises pendant quelques années par le passé. Cette collaboration m’avait fait réfléchir au <a href="/david/blog/2016/minimalisme-esthetique/">minimalisme</a> et à la <a href="/david/blog/2016/simplicite-defaut/">simplicité</a> en raison des diverses frustrations plus ou moins techniques que je pouvais avoir sur le produit.</p>
<p>Fin 2019, Vincent m’indique que nous pourrions avoir l’opportunité d’expérimenter des choses de manière relativement frugale, itérative et prenant en compte les besoins des utilisateur·ice·s. Je n’ai pas été bien long à accepter sachant que ça trotte dans un bout de mon cerveau <a href="https://github.com/davidbgk/justdata">depuis un long moment</a>.</p>
<h2 id="approche">Approche <a href="#approche" title="Ancre vers cette partie">#</a></h2><p>Nous avons commencé par analyser l’existant, il y avait les <a href="https://github.com/etalab/user-research">précédentes interviews</a> réalisées par <a href="https://oncletom.io/">Thomas</a>, une équipe d’éditorialisation en interne qui fait <a href="https://www.data.gouv.fr/fr/posts/">état des sorties mensuelles</a> que nous avons interviewée, l’<a href="https://doc.data.gouv.fr/api/reference/">API</a> avec laquelle nous avons commencé à jouer et les <a href="https://stats.data.gouv.fr">statistiques</a> que j’ai toujours du mal à appréhender.</p>
<p><em>Note : Il peut paraître étonnant de commencer par se soucier des données avant de réinterviewer les utilisateur·ice·s, dans ce cas cela nous a semblé pertinent car nous ne savions pas ce que nous allions être en mesure de pouvoir leur proposer.</em></p>
<p>À partir de ces différentes sources, on a commencé un <a href="http://recherche.etalab.studio/">prototype sous la forme d’une page statique</a> à ce jour. Le <a href="https://github.com/etalab/recherche.etalab.studio">code est bien sûr ouvert</a> si vous voulez aller voir de quoi il retourne. Cette page constitue une base de discussion pour interviewer des utilisateur·ice·s et identifier leurs frustrations actuelles.</p>
<p>L’objectif n’est pas de faire un produit qui nous convienne ou qui soit dirigé par l’équipe d’Etalab mais de proposer une interface qui soit motivée par les besoins des personnes utilisant le site régulièrement.</p>
<p><strong>Et pour cela, il faut déjà les trouver !</strong></p>
<h2 id="metaphore">Métaphore <a href="#metaphore" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Je suis dans la forêt. Je cherche une plante comestible. J’observe et j’espère en trouver une qui me soit suffisamment familière. Par chance, j’ai emporté avec moi un ouvrage permettant d’identifier les plantes. Cinq cent pages de descriptions dans un jargon d’experts qui n’est pas le mien. Je me risque à utiliser l’index, mais celui-ci est agencé d’une manière qui n’est techniquement compréhensible que pour un latiniste. Pas pour le promeneur que je suis. Je me couche le ventre creux.</p>
</blockquote>
<p>Si cette situation vous évoque une frustration que vous avez pu avoir en consultant le site <a href="https://www.data.gouv.fr/">data.gouv.fr</a>, manifestez-vous ! Nous sommes en train de <a href="https://github.com/etalab/recherche.etalab.studio">travailler sur un outil</a> qui présélectionne quelques plantes comestibles et vous permettra de nourrir vos scripts, de cuisiner vos bases de données et de partager vos recettes autour d’un feu de camp.</p>
<p>Mais pour cela nous avons besoin d’interviewer des personnes qui aiment se promener dans les données ouvertes. <em>Vous ?</em></p>
<p><a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Contactez-moi directement.</a></p>
<h2 id="interviews">Interviews <a href="#interviews" title="Ancre vers cette partie">#</a></h2><p>Nous avons échangé avec <a href="https://github.com/etalab/recherche.etalab.studio#interviews">deux personnes</a> pour le moment. C’est peu mais cela nous a déjà permis de favoriser certaines pistes au détriment d’autres. L’intérêt d’itérer au cours des interviews est de pouvoir réajuster en direct pour pouvoir essayer une nouvelle approche d’un entretien sur les suivants. Même avec un très faible panel, certaines choses qui peuvent sembler acquises ou évidentes ressortent rapidement comme étant des points de friction plus ou moins bloquants.</p>
<p>À ce stade, nous aimerions avoir des retours de personnes qui ne sont pas forcément expertes de la donnée mais qui ont déjà eues à effectuer quelques recherches sur le site <a href="https://www.data.gouv.fr/">data.gouv.fr</a>. Si vous avez été dans cette situation par le passé ou si vous êtes en train de chercher des choses, votre avis nous intéresse pour tenter d’améliorer cette plateforme et que cela profite à toutes et tous.</p>
<h2 id="pivot">Pivot <a href="#pivot" title="Ancre vers cette partie">#</a></h2><p>Après <a href="https://github.com/etalab/recherche.etalab.studio#interviews">cinq interviews</a>, on décide de prendre un peu de recul sur les retours que l’on a pu écouter et discuter. Il s’avère que le problème se situe potentiellement en amont même de la recherche dans la façon de découvrir les données. Nous décidons d’explorer un nouvel angle qui consisterait à proposer des choix pertinents par défaut.</p>
<p>Pour cela nous allons nous concentrer sur le moment où l’utilisateur·ice initie une recherche en cliquant dans le champ dédié. Avant même de proposer des suggestions relatives aux termes saisis, il pourrait être pertinent de proposer une autre forme d’exploration des données.</p>
<h2 id="drapeau">Drapeau <a href="#drapeau" title="Ancre vers cette partie">#</a></h2><p>Le 22 avril, après quelques itérations internes, le code est déployé en production mais restreint à une partie des utilisateur·ice·s <em>via</em> un <em>feature flag</em>. Il faut connaître l’<abbr title="Uniform Resource Locator">URL</abbr>, à savoir <code>https://www.data.gouv.fr/fr/?flag=recherche</code> pour avoir accès à une nouvelle interface lorsqu’on s’apprête à effectuer une recherche. Les outils sont en place pour pouvoir mesurer les différences de comportements lorsqu’on active ou désactive ce petit drapeau.</p>
<p>Voilà ce que ça donne lorsqu’on <em>focus</em> sur l’<em>input</em> de recherche :</p>
<figure>
    <img src="/static/david/2020/datagouv_recherche.png"
         alt="Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut."
         loading="lazy" width="1024" height="633" />
    <figcaption>Les 6 jeux de données les plus populaires sont affichés par défaut.</figcaption>
</figure>
<p>Et voilà ce qui apparait dynamiquement lorsqu’on renseigne le champ avec un mot-clé particulèrement populaire sans qu’aucune requête ne soit faite vers le serveur (une centaine de cartes est pré-chargée par défaut) :</p>
<figure>
    <img src="/static/david/2020/datagouv_recherche_covid.png"
         alt="Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours."
         loading="lazy" width="1024" height="812" />
    <figcaption>Cette fois avec les résultats sur le mot-clé <q>covid</q>.</figcaption>
</figure>
<p>Il y a des faux positifs car la recherche est assez <em>fuzzy</em> mais dans l’ensemble ça remonte ce qui est pertinent et sur d’autres mots-clés moins normalisés c’est davantage pertinent.</p>
<hr />
<p>Bientôt les résultats :-).</p>

</main>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/01/15/" title="Publication précédente : Futurs">←</a> •
    <a href="/david/2020/" title="Liste des publications récentes">↑</a>
     • <a rel="next" href="/david/2020/01/22/" title="Publication suivante : Réponses">→</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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" defer></script>
<script type="text/javascript">
    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>