3h pour concevoir une IHM orientée usages

Origine de la demande

Un jour, je reçois un message de collègues développeurs :

Nous avons besoin de faire une IHM pour notre client. C’est quelque chose de très simple et basique mais j’aurais bien aimé faire le design avec une ergonome.

En échangeant brièvement avec eux, j’ai compris que mes collègues avaient envie d’appliquer ce qu’ils avaient vu pendant notre formation “Maîtriser les principes d’ergonomie numérique”. Ce cas client s’y prêtait et ils avaient envie du soutien d’une ergonome. Notre formation leur était restée en tête après plusieurs mois, c’était un bon indicateur pour moi. J’étais contente également que la demande vienne d’eux, c’est un engagement plus fort que si je leur avais proposé de les aider sur ce sujet. J’ai donc accepté !

• Objectif de notre atelier : qu’ils repartent avec une maquette à la fin de notre échange.
• Méthode de travail : la démarche centrée utilisateur. Même si nous n’allions pas convier d’utilisateur, cette démarche me paraît tout de même un bon cadre de travail, qui guide bien la réflexion et permet d’atteindre l’objectif de création d’une IHM.

Exploration

1. Recueil du besoin

La première étape de la phase d’exploration est de partager la demande du client. En parcourant le cahier des charges fourni par le client, mes collègues m’expliquent :

• quel est le métier du client,
• quelle est la problématique qui le pousse à créer cette IHM,
• qui sont les utilisateurs de cette IHM,
• ce que le client attend de nous,
• la problématique rencontrée par mes collègues.

C’est l’IHM dessinée par le client qui pose problème à mes collègues. Ils ont repéré des incohérences de conception et des manques fonctionnels. Ils ont donc eu envie de réfléchir à améliorer cette IHM pour proposer au client et aux futurs utilisateurs une interface plus utilisable et plus utile.

2. Description des tâches

La seconde étape de la phase d’exploration est le partage de connaissances concernant l’activité liée à l’utilisation de cette interface. L’idée est de construire un socle commun de connaissances et de sujets à creuser concernant les besoins réels des utilisateurs. Que doivent-ils faire et comment cette IHM leur permet-elle d’atteindre ce but, efficacement ?

Le client a listé un certain nombre de tâches et d’actions que nous reprenons les unes après les autres. La liste semble ordonnée selon une logique temporelle. Nous avons donc classé ces informations en 3 catégories :

• actions,
• contenus,
• besoin.

C’est l’occasion de se questionner plus précisément sur les utilisateurs de cette IHM, d’échanger à propos de leurs compétences, de leur activité réelle et existante. Comment font-ils sans cette IHM ? Qu’est-ce qui pousse le client à changer son process en intégrant une nouvelle IHM ? Ces informations sont importantes pour répondre aux attentes et aux besoins des utilisateurs. Plus nous parviendrons à proposer une réponse adaptée, plus l’adoption de l’IHM sera forte et plus cette IHM aura du sens et une place dans le quotidien de ces personnes.

Toutes ces questions ne trouvent pas de réponse auprès de mes collègues développeurs. Certaines en soulèvent d’ailleurs de nouvelles. Elles sont toutes identifiées, ainsi que les points à éclaircir et les incohérences entre l’IHM du client et la liste d’actions qu’il a décrite.

Nous ne cherchons pas dans cette phase à répondre aux questions. Nous sommes dans une phase de divergence où nous creusons dans toutes les directions les besoins et les usages afin de lister nos hypothèses qui conduiront notre idéation et donc notre conception d’interface.

Lorsque nous avons fait le tour des questions, je propose à mes collègues de réaliser un audit de l’IHM proposée par le client afin d’ordonner les problèmes de conception qu’ils avaient relevés par eux-même et de voir ensemble s’il y en a d’autre.

3. Audit de l’IHM proposée par le client

Lors de la formation “Maîtriser les principes d’ergonomie numérique”, nous avons présenté un outil permettant de réaliser un audit simplifié. C’est une grille d’évaluation permettant de passer en revue une IHM en fonction de ces critères de conception. Cette troisième étape de la phase d’exploration était donc consacrée à l’utilisation de ce template d’Audit dans un cas concret. Cela a permis à mes collègues de réactiver les connaissances qu’ils avaient vues pendant la formation.

Extrait du template d’audit utilisé en interne.

Les discussions ont été intéressantes concernant la compréhension des principes et leur application. Ce template contient des exemples d’applications concrètes de chaque principe pour aider à la compréhension de celui-ci. Je me suis rendu compte que ces exemples, à la fois aidaient à la compréhension et à la fois enfermaient les concepteurs dans la recherche de ces solutions.

En tout cas, cette phase d’exploration nous a permis de lister un certain nombre de cas d’usages, des questions fonctionnelles à poser au client et des problèmes de conception sur l’IHM proposée. Il s’agissait ensuite de trouver des solutions aux problèmes tout en respectant les cas d’usages et en répondant aux différentes questions fonctionnelles.

Idéation

Nous avons utilisé un seul outil dans cette phase : One minute please. C’est un outil inspiré du fameux crazy 8’ que nous avons adapté pour nos besoins internes.

1. One minute please !

C’est un exercice d’idéation qui combine la conception parallèle et la conception itérative.

Individuellement, les participants vont dessiner les grandes lignes de l’IHM qu’ils ont en tête. Chacun présente ensuite son dessin au groupe qui lui fait des retours constructifs sur la facilité d’usage, une information manquante, une question d’utilisabilité, etc. Et on itère 2 ou 3 fois selon le temps dont nous disposons.

Durant la phase de dessin, c’est important que chacun ait une feuille devant soi et essaie de poser ses propres idées sur papier. Cela permet d’avoir les représentations de tous les participants, de contribuer à la pensée divergente.

La minute est également importante à respecter. Cela permet de ne pas entrer tout de suite dans les détails, mais de commencer par dégrossir les problématiques. Alors oui, durant la première itération, les participants nous demandent toujours une minute supplémentaire. La frustration qui peut être ressentie à ce moment joue le rôle de mise en route pour le cerveau et montre aux participants ce qu’ils ont le temps ou non de dessiner. Sur quoi veulent-ils se concentrer ?

Concernant la partie d’échange autour des dessins des autres, ce qui est essentiel c’est d’identifier les points forts et les points faibles de chaque dessin et ainsi enrichir la réflexion du dessinateur. L’objectif est de préparer l’itération suivante et d’ouvrir des pistes possibles, des chemins à explorer, des idées à creuser.

2. Nos résultats

Itération 1 : en fonction des résultats de l’audit, poser les grandes idées d’améliorations.

Dessins produits lors de la première itération.

Nous nous sommes aperçus que les deux développeurs étaient partis chacun sur un format différent : soit en paysage, soit en portrait. Nous avons échangé sur les avantages et les inconvénients de chaque dessin et avons décidé de poursuivre l’exercice d’idéation avec une seconde itération.

Itération 2 : en fonction des échanges, chacun essaie d’améliorer son dessin, de s’inspirer des idées des autres, ou de changer complètement de direction.

Dessins produits lors de la seconde itération.

En se présentant nos IHM, nous voyons bien qu’elles se précisent, que les dessins convergent de plus en plus. On ajoute des labels, des fonctionnalités qui seraient appréciées et facilitantes.

L’équipe se met d’accord sur les détails de l’IHM. Elle pourra ainsi expliquer les choix de conception et les alternatives possibles au client.

Nous passons ensuite à la conception de la maquette.

Conception

1. Maquette basse fidélité

L’équipe a utilisé un outil de maquettage en ligne afin d’avoir un support de discussion avec le client. Les dessins papiers ont leur limite si l’on ne sait pas vraiment dessiner, comme vous pouvez le constater sur les images précédentes. L’outil de conception est donc une solution simple pour avoir un rendu propre permettant au client de se projeter plus facilement.

Dans cette maquette, nous avons choisi d’utiliser 2 couleurs. Le bleu pour mettre en valeur les éléments d’interaction. Le orange pour mettre en avant des informations statiques mais importantes à la compréhension de l’IHM. Le choix des couleurs était une proposition de la part des développeurs, puisqu’aucun graphiste n’avait travaillé sur cette IHM.

Maquette basse fidélité.

Cet exercice a permis de mettre en avant des questionnements relatifs à l’usage des utilisateurs. Les réponses à ces questions avaient un impact sur la conception de l’IHM. Il était donc primordial d’avoir une maquette qui permette de les mettre en lumière et de faire comprendre les implications de tous ces choix au client. L’objectif est de prendre des décisions de conception éclairées.

Validation et déploiement

L’équipe a ensuite organisé un rendez-vous avec le client pour lui présenter la maquette et les choix de conception qu’il devait faire selon l’usage attendue. Le client était content de l’initiative de l’équipe de questionner son cahier des charges et de creuser les usages en proposant des alternatives. Les questions encore en suspens ont pu être résolues à travers cet échange, la maquette peut maintenant être implémentée avec ces derniers éléments.

Copie-écran du déploiement final de l’IHM.

Conclusion

J’ai trouvé l’exercice intéressant et très enrichissant. Le fait de réfléchir à 3 personnes sur l’IHM permet d’avoir plus d’idées pour un seul problème et d’identifier très rapidement les contraintes de chaque solution proposée.

Le fait de travailler en direct avec les développeurs nous a permis d’améliorer nos connaissances de contraintes métiers UX et développement. Nous avons pu affiner notre socle commun de vocabulaire.

Mes collègues ont été également satisfaits de cet exercice :

Je pense que c’était une bonne expérience, finalement plutôt à l’aise dedans (chose que je n’aurais pas pensé au début). Ça nous a permis de confronter plusieurs solutions pour converger vers une UI qui me semble satisfaisante.

Et le retour client est lui aussi positif :

Très peu de remarques de son côté. Il est vraiment content du résultat. Il aime bien les chiffres 1 > 2 > 3 à gauche qui guident le process.