25 avril 2018 / de Sophie Miljkovic, équipe EIG

Comment concevoir un produit qui corresponde aux besoins de ses utilisateurs et qui améliore vraiment leur quotidien en 10 mois ? Penser « user, user, user ». Retour sur l’atelier « product design », animé par Laurie Chapotte du défi Gobelins et Jean-Baptiste Le Dévéhat du défi Brigade Numérique - un grand merci à eux deux d’avoir relu et amélioré cette entrée de blog !

Page d'accueil d'un site qui loue des voitures. Il ya beaucoup de couleurs, des photos dans tous les sens, des flèches qui pointent dans toutes les directions. Bref, la page est illisible. Un exemple de site scandaleusement illisible

Vous avez mal aux yeux ? C’est normal. Vous avez là un exemple de site qui n’a PAS été conçu pour son utilisateur. Laurie Chapotte de Gobelins et Jean-Baptiste Le Dévéhat de Brigade Numérique, designers UI/UX (comprendre « user interface » et « user experience  »), ont animé un atelier pour donner à tous les EIG quelques conseils pour éviter… ça.

Le point sémantique

Pour illustrer la différence entre l’UI et l’UX, Jean-Baptiste nous parle d’un bouton : « l’UI se demande « de quelle couleur ou forme doit être le bouton pour qu’il soit visible immédiatement ? » alors que l’UX pose la question « avons-nous vraiment besoin de ce bouton ? » ». Autrement dit, l’UI et l’UX sont parfaitement complémentaires ! L’objectif final est de créer une interface où la forme sert la fonctionnalité en rendant le site accessible et compréhensible.

Dessin très simple en blanc sur un fond noir. On y voit les parties émergée et immergée d'un iceberg. Une flèche, ayant pour légende UI, pointe la partie émergée. Deux bonhommes disent que "l'UX c'est comme un iceberg... il y a une partie invisible". Le paragraphe ci-dessus en un dessin

Comment réfléchir UI/UX ?

Un outil utile et accessible, c’est l’objectif de tous les défis. Alors chacun doit « penser utilisateur », grâce aux personas et aux cas d’utilisation, par exemple. Ces-derniers retracent et séquencent le parcours d’un utilisateur pour mieux comprendre ce qui est important pour lui et ainsi construire des parcours-utilisateurs simples.

Arnaud de b@liseNAV en profite : « comment faire proprement la liste des actions sans que cela ne parte dans tous les sens et quid des cas particuliers ? ». Réponse cohérente des animateurs : revenir aux utilisateurs. Plus le profil de chaque utilisateur sera riche et précis, plus chaque cas d’utilisation sera proche de la réalité, concentré sur l’essentiel et utile.

Autre point de méthode : le design est un processus itératif et collaboratif qui a pour objectif d’améliorer le produit en fonction des retours des utilisateurs. Il ne faut donc pas hésiter à produire vite et à faire tester de nombreuses fois, en impliquant un maximum de personnes.

Améliorer l’existant

Itération et collaboration ont d’ailleurs présidé à cet atelier où certains défis ont présenté ce qu’ils avaient déjà fait. L’occasion de récolter des avis et conseils, spécifiques et plus généraux.

Premier conseil qui vaut pour tous : il est important de construire la page en fonction de la ligne de flottaison. La quoi ? La…

Un écran d'ordinateur qui indique où se trouve la ligne de flottaison : elle est tout en bas de l'écran, juste au-dessus de la barre des tâches Sous les montagnes, la ligne de flottaison

Autre conseil : simplifier. Cela a valu notamment pour Lab Santé qui a présenté son outil de visualisation des flux gérés par les hôpitaux de la région Occitanie. Dans le menu, les mentions “vers Ajaccio”, “vers Marseille”… repoussent en seconde position l’information la plus importante : la ville dont on veut visualiser les flux. On peut, par exemple, supprimer “vers” et rajouter des flèches aux flux qui se dessinent.

Une capture d'écran qui montre dans la moitié inférieure une carte de la Corse sur laquelle on aperçoit des points jaunes et des traits de couleurs qui rayonnent à partir de ces points. Sur la droite de la carte apparaît un menu qui comporte notamment le texte "vers Ajaccion", "vers Bastia". L’outil de visualisation de flux en direction des hôpitaux, par Lab Santé

Dans le cas d’Hopkins, la simplicité du menu est exemplaire ! Cependant, la lecture du graphique peut être facilitée en appliquant des couleurs différentes aux points en fonction de leur degré de proximité au point central (vert).

Une capture d'écran qui montre un point central vert duquel partent des traits qui aboutissent à des points bleus. A partir de ces points bleus, d'autres traits mènent à d'autres points bleus. En haut à gauche, un menu très simple indique les "tops bénéficiaires" et les "tops donneurs d'ordre" Un graphe de l’outil développé par Hopkins

Dernier conseil qui revient comme un leitmotiv : faire définir, en amont, et tester, en aval, l’outil par ceux qui l’utiliseront. Mission acceptée par Archifiltre pour son outil Stalactite qui permet de visualiser une arborescence de fichiers afin d’y faire le tri. L’équipe est entrée dans une phase de tests avec les utilisateurs pour vérifier que l’outil correspond à leurs besoins.

Une capture d'écran qui montre une page blanche. Dans la partie inférieure, un cadre dans lequel on peut glisser-déposer un répertoire. Au-dessus, on trouve une description de l'outil La V2 de l’outil Stalactite développé par Archifiltre. Une V3 est désormais disponible !

Prévisecours a également relevé le défi avec ses cartographies permettant de visualiser les données des interventions des sapeurs-pompiers en Essonne sur plusieurs années. Lors de l’atelier, on leur a demandé pourquoi ils faisaient un portail qui menait aux cartographies et non un site qui présentaient directement les cartographies. Cela a entraîné une réflexion sur les utilisateurs finaux des cartographies et sur leurs usages. Affaire à suivre.

Une capture d'écran qui montre une carte sur laquelle on voit le "nombre total d'intervention par commune (par an) des pompiers en Essonne Une des “viz” de Prévisecours

Boîte à outils et principe pédagogique

Penser « utilisateur » est essentiel. Pour se lancer, des crayons et du papier suffisent. Ensuite, des outils informatiques permettent d’aller plus loin : material.io (gratuit) donne des règles de base pour concevoir le design d’interface, Adobe XD (payant) et Sketch (sur Apple uniquement) permettent de faire des maquettes, Invision permet d’animer une maquette et de tester les mouvements avec les utilisateurs, tandis que Flaticon et Nounproject permettent de télécharger des pictogrammes.

L’atelier a été l’occasion de donner quelques notions d’UI/UX aux EIG et de travailler ensemble sur des interfaces qu’ils avaient déjà produites. Il a surtout été l’occasion de rappeler la place centrale de l’utilisateur dans les projets “Entrepreneur.e d’Intérêt Général”. Et de s’entraider aussi : la diversité des profils des EIG permet de faire profiter la promotion des compétences des uns et des autres.

Pour aller plus loin, n’hésitez pas à lire le diaporama de l’atelier sur lequel se sont appuyés Laurie et Jean-Baptiste.