Human Centered Design : l’histoire d’un peuple

Il était une fois, un petit peuple vivant dans un site web. Ils vivaient en harmonie avec les utilisateurs, à qui ils offraient leur service, et leur designer qui s’occupait d’eux.
Mais un jour par malheur, ce designer laissa sa place à un autre, trop occupé par son nouveau travail, et c’est ainsi que les choses ont commencé à mal tourner pour ces pauvres petits êtres. Le site, autrefois ergonomique à souhait, devint le pire site de tous les temps.
Le grand sage invoqua alors un héros pour réparer les erreurs du nouveau venu et alors sauver ce peuple qui courrait à sa perte. Le sage matérialisa le héros nommé Alex dans le monde réel, et c’est ainsi que sa quête commença.

Notre pauvre Alex ne savait absolument pas par où commencer… Il n’était pas designer après tout. Il partit donc à la recherche de celui qui les avait abandonnés.
Il le trouva plutôt facilement, il était dans le bureau juste à côté… Il supplia ce monsieur qu’on appelait Victor, de lui apprendre comment rendre un utilisateur heureux pour que son peuple soit sauvé. Ce pauvre Victor tourna de l’œil en apprenant qu’il avait abandonné un pauvre village à son sort (ou plutôt aux mains d’un incapable) mais accepta d’apprendre à notre héros le Human Centered Design.
« Qu’est-ce que ça signifie ? » demanda Alex ?
« Il s’agit du design centré sur l’humain, sur l’utilisateur. Il faut bien comprendre les besoins de notre utilisateur pour créer un système interactif capable de le rendre heureux »
« Oula, ça a l’air un peu compliqué, non ? »
« Ne t’en fais je ferai je l’espère un bon professeur ! Tu vas peut-être déjà trouver cette image plus parlante. »

« Observer, comprendre et faire… C’est vrai que ça paraît moins complexe d’un coup. »
« En effet. Sans vouloir casser l’ambiance, et comme je l’ai déjà dit, je manque de temps, alors que dis-tu d’une leçon par jour ? »
Alex accepta, et commença donc sa première leçon de HCD !

JOUR 1 : les bases

Tout d’abord Victor expliqua à notre héros ce que signifiait le terme ergonomie.
« L’ergonomie, c’est l’étude scientifique de la relation entre l’homme et ses moyens, méthodes et milieux de travail, en gros il faut adapter notre travail en fonction de l’être humain, et pas le contraire ! » commença le designer aguerri.
« Regarde, pour faire plus simple, en dehors d’un site web. » Il lui montra alors des dessins que l’un de ses collègues avait fait pour expliquer ce terme à un stagiaire.

« Ahahah, oui je vois. Mais du coup, ça veut dire que l’ergonomie est plus importante que le design ? » demanda Alex.
« Evidemment ! Il est mieux de se concentrer sur l’ergonomie plutôt que sur l’esthétisme, ce n’est pas parce que le site est joli, qu’il est pratique. Vois donc ce qu’est devenu ton pauvre village !! »
« Ok, bon, continuons, on va y passer la nuit sinon. »
« Alors… » reprit Victor « Pour être ergonomique il faut également penser aux « petits » soucis qui peuvent affecter notre utilisateur sans qu’on le sache. Par exemple, imagine un utilisateur daltonien, baser son site sur une couleur peut être problématique s’il n’y a pas suffisamment de contraste entre le fond et le texte, cela pourrait l’empêcher de lire ! Il s’agit d’une contrainte perceptive donc relative aux 5 sens. Il existe aussi des contraintes cognitives, et d’autres liées à l’émotion. »
« A l’émotion ? Comment ça ? »
« Eh bien, parfois un utilisateur agacé s’en va du site sans avoir trouvé ce qu’il cherchait. Par contre, s’il trouve son information et qu’en plus une petite mascotte le félicite, il aura envie de revenir. Tu ne crois pas ? »

Notre professeur d’un instant remarqua que son élève grattait sa feuille de notes et sourit. Il ajouta : « Bon, on en a fini pour aujourd’hui, repose ta main, essaye d’appliquer ce que je t’ai appris et on se voit demain ! »

JOUR 2 : la loi de la Gestalt

« Bonjour Alex. » salua notre professeur préféré. « Prêt pour le deuxième cours, je vais t’apprendre les principes de la Gestalt aujourd’hui. »
« Euh, les quoi ? »
« Ahahah, bon revenons au début ! La Gestalt est aussi appelée théorie de la forme, donc elle nous donne avec certains principes, une idée de comment le cerveau humain associe les idées entre elles. »
« C’est tout de suite plus clair ! Et combien il y en a de ces principes, Victor ? » demanda Alex.
« Sept, je peux te les citer pour que tu ailles te renseigner de ton côté, mais je vais plutôt m’attarder sur 3 d’entre eux. Nous avons donc : la similarité, la proximité, la clôture, la symétrie, la continuité, le fond/figure et le point focal. Regarde un dessin vaut mille discours, tu comprendras peut-être visuellement. »

« C’est un peu flou quand même… Bon on commence par lequel ? » s’impatienta Alex, heureux d’apprendre de nouvelles choses.
« D’abord, la loi de proximité, en gros, on peut considérer que les éléments proches font partie d’un même ensemble. Ensuite, la loi de la clôture, il s’agit de « combler » les vides afin de percevoir une forme, car une forme fermée est plus facilement identifiée comme une figure, un peu comme ce fameux C qu’on imagine dans le logo Carrefour. »
« Excusez-moi mais c’est quoi un Carrefour ? »
« Ah oui j’oubliais que tu ne venais pas de ce monde… Tu me feras le plaisir d’aller faire quelques courses en rentrant ce soir ! Bref, enfin la dernière loi que je vais t’expliquer est celle du point focal, c’est facile, c’est l’endroit où notre regard se dirige en premier. Oula, tu as vu l’heure, je parle, je parle mais je dois me remettre au travail ! »
Notre pauvre héros se fit mettre à la porte un peu violemment, encore trop occupé à imaginer ce que pouvait bien être un Carrefour…

JOUR 3 : l’A/B Testing

« Alors Alex, tu as trouvé ce magasin ? »
« Bonjour Victor, oui oui et j’ai enfin compris cette histoire de vide. »
« Parfait, tu es prêt pour notre troisième cours ? Aujourd’hui cela devrait être assez rapide, je vais te parler de l’A/B Testing. »
« Hum, rapide je ne sais pas, qu’est-ce que c’est que ça ? » demanda notre héros.
« D’abord, la conversion donc, c’est tout simplement l’objectif du site, et donc l’acte de conversion, c’est lorsque notre utilisateur réalise cet objectif. Pour être complet je devrais te parler du taux de conversion, mais tu pourras te renseigner par toi-même à ce sujet. »
« Je croyais que l’on allait parler de l’A/B truc … » l’interrompit Alex.
« Oui oui, j’y viens, patience. Donc, pour atteindre l’objectif, il y a parfois plusieurs étapes, cela est appelé tunnel de conversion. Réaliser 30 étapes pour faire une bête action, c’est un peu redondant non, c’est pour ça que nous, designer, nous devons optimiser notre site, tu vois où je veux en venir ? »
« Euh… »
« Bon allez j’arrête de t’ennuyer, pour optimiser, il faut proposer plusieurs variantes d’un site et laisser les utilisateurs choisir la meilleure, c’est exactement ça l’A/B Testing ! Regarde ces wireframes. »

« Faire plusieurs versions et choisir la plus adaptée est le meilleur moyen de rendre nos utilisateurs heureux, tu n’as pas oublié que c’est la base du HCD j’espère. » continua le professeur.
« Non non bien sûr que non Victor ! Dites, il y a encore beaucoup de cours vous pensez ? »
« Hum, à mon avis, il nous en reste 2, tu as hâte de sauver ton peuple et rentrer chez toi n’est-ce-pas… Alors, nous allons nous dépêcher, c’est promis. »

JOUR 4 : User Journey et User Testing

« Victor, le temps presse, le sage du village m’a contacté hier, le village disparaît peu à peu, je dois me dépêcher. »
« Oh non… Bien, je vais abandonner une partie du cours alors, et vite enchainer sur la suite, je vais même essayer d’en condenser deux … C’est parti. Nous allons commencer par le User Journey. Il s’agit de réfléchir à un scénario divisé en plusieurs étapes, qui sert à montrer comment l’utilisateur peut interagir avec notre site. »
« Qu’est-ce que tu veux dire par là ? »
« En fait, à chaque étape, tu dois réfléchir à comment réagit ton utilisateur, par exemple, identifier ses objectifs, ses interactions, les moyens utilisés, ses actions, ses attentes, ou même ses sentiments. C’est à partir de là que tu vois comment réfléchit ton utilisateur et tu peux donc trouver des solutions pour résoudre les problèmes d’ergonomie. C’est un peu cette idée : »

« Un chemin où tu identifies les différents points relatifs à l’utilisateur. Le User Testing est un peu dans la même veine. » continua Victor.
« Un test utilisateur ? Je suppose que ça veut bien dire ce que ça veut dire. »
« En effet, ton utilisateur doit réaliser une série de tâches, par exemple, trouver une information spécifique, et toi tu dois analyser la manière qu’il emploie pour y arriver, voir où il bloque et ce qu’il ne comprend pas. Regarde ces quelques exemples : https://www.youtube.com/watch?v=A98-lncnlbw Comme tu peux le voir, durant tout le test, l’utilisateur doit commenter et expliquer ce qu’il fait. Une fois tes observations établies tu peux … »
« Tu peux améliorer le site et l’adapter à l’utilisateur pour le rendre heureux ! »
« Exactement. Je pense que tu as bien compris ce qu’est le Human Centered Design. »
« Oui, je vais pouvoir me mettre au boulot au plus vite ! Tu as encore à m’apprendre ? » demanda Alex.
« Il y a toujours des choses à apprendre, mais je pense que tu peux te débrouiller avec ce que tu as… Vas vite sauver ton peuple. »

Alex se jeta sur l’ordinateur du designer responsable du fléau sur son village et se mit à appliquer tout ce que Victor lui avait appris, il pensa à l’ergonomie, aux principes de la Gestalt, il réalisa plusieurs versions de son site, un User Journey de son mentor, et après de longues heures de travail, proposa au professeur de quelques jours de tester son site.
C’est alors que le miracle se réalisa, notre jeune héros se fit aspirer par l’écran et avant qu’il ait eu le temps de comprendre quoique ce soit, tout son village l’acclamait. Ils étaient sauvés, le village était encore plus beau que lorsque Victor s’occupait d’eux. Celui-ci, d’ailleurs, écrivit un petit message à son élève qui apparut dans le ciel : « Félicitations mon jeune ami. J’espère que nous nous reverrons. » C’est donc avec émotion qu’Alex reprit le cours de sa petite vie avec son peuple.

FIN

Source images :
HCD : http://www.bethkanter.org/wp-content/uploads/130.png
Ergonomie : http://www.officeanimals.com/wp-content/uploads/2010/03/051.png
Mascotte : https://thumbs.dreamstime.com/b/bande-dessin%C3%A9e-mignonne-owl-mascot-giving-thumbs-up-de-vecteur-63962787.jpg
Gestalt : http://tech.aramisauto.com/images/lois_fondamentales_ergonomie_web/gestalt.png
A/B testing : http://www.sitespect.com/sites/default/files/2016/ab-testing-compressor.jpg
User journey : https://servicefutures.com/wp-content/uploads/2017/08/User-Journey-Mapping-The-key-to-improving-service-experiences.png