Centrer les usages sur l'expérience humaine : inclusion, accessibilité, et formulaires

Reconnaître et intégrer les biais cognitifs

Je n'ai pas intégré cet aspect dans l'UX, car j'ai appris les biais dans mes études en psychologie. Je sais cependant que ces notions sont fortement utilisées dans la conception UX.

Un biais cognitif est comme un raccourci mental que notre cerveau utilise pour prendre des décisions rapidement. C'est une façon pour notre esprit de traiter des informations complexes ou incertaines sans y passer trop de temps. Mais parfois, ce raccourci nous conduit à des erreurs de jugement, à des comportements irrationnels, ou à des ressentis.

D'ailleurs, cet article sera probablement rempli de biais, et c'est normal. Non pas que je l'ai fait exprès (quoique), mais que j'y suis sujet également. Vous voulez jouer ? Notez-les et commentez ;)

Ces biais sont influencés par nos expériences passées, nos émotions, et même notre environnement. Ils ne sont pas forcément “mauvais”, mais ils peuvent nous induire en erreur sans que nous en ayons conscience.

Pour prendre une image, imaginez que vous êtes perdu dans une grande forêt. Vous trouvez une carte pour vous guider, mais elle est vieille et abîmée. Votre cerveau, dans sa quête de rapidité, décide de se concentrer uniquement sur les parties visibles et claires de la carte. Vous ignorez les zones floues, même si elles pourraient contenir des informations cruciales. Ce raccourci mental est comme un biais cognitif : il vous aide à avancer vite, mais il peut aussi vous faire prendre une mauvaise direction.

Voici quelques exemples de biais cognitifs connus :

Biais de confirmation :
Imaginez que vous cherchiez une information pour vous aider à prendre une décision de design. Vous lisez des articles, mais vous sélectionnez uniquement ceux qui confirment ce que vous pensez déjà. Résultat, vous restez dans votre zone de confort sans explorer de nouvelles idées. Pire, vous êtes persuadés que c'est la bonne décision.

Effet d'ancrage :
Si un site e-commerce affiche un prix barré très élevé à côté du prix final, vous aurez l'impression de faire une bonne affaire, même si le prix reste élevé. Votre cerveau est influencé par le premier chiffre vu (l'ancre) ou l'information de référence (mise en avant).

Biais de disponibilité / représentativité :
Vous jugez la probabilité d'un événement en fonction des exemples qui vous viennent rapidement à l'esprit. Si vous avez récemment entendu parler d'accidents d'avion, vous pourriez penser qu'ils sont plus fréquents qu'ils ne le sont réellement.

Biais du survivant :
Vous faites une erreur de raisonnement qui consiste à se concentrer uniquement sur les éléments ou les personnes qui ont réussi (les “survivants”) tout en ignorant ceux qui ont échoué ou disparu. Ce biais peut conduire à des conclusions erronées, car il repose sur un échantillon incomplet de données. Dans notre domaine, ce biais arrive souvent à l'analyse superficielle de données de tracking par exemple.

Les biais cognitifs sont comme des lunettes déformantes à travers lesquelles nous voyons le monde. Ces distorsions mentales nous aident à prendre des décisions rapides, certes, mais elles ne sont pas toujours précises. Pour les designers, il est crucial de connaître ces biais pour éviter de frustrer les utilisateurs ou de les manipuler involontairement.

Astuce pour les designers : Travaillez avec ces biais, pas contre eux. Une bonne conception guide les utilisatrices et utilisateurs de manière fluide, en tenant compte de leur manière de penser, même si elle est imparfaite. 😊

Certains de ces biais sont standardisés, ou en tout cas nommés à la suite d'études qui les mettent en évidence. D'autres sont des combinaisons et des sous pans d'autres biais. Enfin, beaucoup sont des effets qui ne sont pas forcément nommés clairement, ou ont plusieurs noms ou connexions entre eux.

Une bonne approche consiste également à se poser la question des biais qui nous poussent à prendre certaines décisions, et en prendre conscience de manière assez permanente. Certains de ces biais sont systématiques ou systémiques. En prendre conscience vous permettra de proposer de meilleures réflexions et solutions.

Repérer et gérer les biais cognitifs nécessite de la pratique, une bonne dose de curiosité, et des méthodologies adaptées. Voici un guide en plusieurs étapes pour développer ces compétences :

1. Éduquez-vous sur les biais cognitifs

Pour repérer un biais, il faut d'abord le comprendre.

• Étape clé : familiarisez-vous avec les principaux biais cognitifs (effet d'ancrage, biais de confirmation, biais du survivant, etc.). Vous pouvez utiliser des ressources comme des livres (Fast and Slow de Daniel Kahneman), des podcasts ou des outils didactiques (cartes de Stéphanie Walter sur les biais cognitifs).
• Astuce :créez une fiche des biais communs et des contextes dans lesquels ils se manifestent.

2. Pratiquez l'introspection

Il est essentiel de reconnaître vos propres biais.

• Exercice : réfléchissez à des décisions récentes (professionnelles ou personnelles). Demandez-vous :
• Ai-je favorisé des informations qui confirmaient ce que je pensais déjà (biais de confirmation) ?
• Me suis-je basé(e) sur une première impression sans vérifier les faits (effet d'ancrage) ?
• Observez en réunion le temps de parole homme/femme, ou le nombre de fois où un homme coupe la parole à une femme. (biais systémique)
• Astuce : tenez un journal pour noter vos décisions importantes ou constats, et analysez-les avec du recul. Attention cette technique peut inclure d'autres biais comme celui de rétrospective ou d'observation.

3. Intégrez ou surveillez les biais dans vos tests utilisateurs

Les biais cognitifs influencent directement la manière dont les utilisateurs interagissent avec une interface.

• Étape clé : lors des tests utilisateur, observez les comportements biaisés. Par exemple :
  • Est-ce que les utilisateurs hésitent à explorer certaines options parce qu'ils sont influencés par leur première impression négative (effet de halo - biais d'ancrage) ?
  • Sont-ils trop positifs sur l'analyse qu'ils font parce qu'ils ne veulent pas vous vexer ? (biais de complaisance)
  • Est-ce que présenter cette solution en premier ne va pas influencer la comparaison des solutions ?
• Astuce : documentez ces biais observés et utilisez-les pour optimiser vos conceptions ainsi que vos sessions de test utilisateur.

4. Utilisez des outils pour évaluer vos conceptions

• Ateliers collaboratifs : organisez des ateliers avec votre équipe pour identifier comment les biais peuvent affecter votre produit. Par exemple, examinez chaque étape du parcours utilisateur et demandez :
  • Quelle décision rapide ou automatique les utilisateurs pourraient-ils prendre ici ?
  • Quels raccourcis mentaux risquent de créer une confusion ou une erreur ?
  • Est-ce que tous les cas sont couverts ou est-ce que nous avons intégré nos propres biais dans cette solution/questionnaire, etc.
• Checklist des biais : intégrez des points de contrôle spécifiques à vos checklists de conception. Exemple :
  • Les informations critiques sont-elles clairement visibles, ou risquent-elles d'être ignorées à cause du biais de disponibilité ?
  • L'interface est-elle conçue pour minimiser les erreurs liées au biais d'omission ? (penser qu'il vaut mieux ne rien faire que de faire une erreur)
  • Ai-je suffisamment utilisé la question “what if?” (et si… ?) pour mesurer l'importance des situations alternatives.

5. Apprenez à éviter de manipuler involontairement

Certains biais peuvent être exploités pour influencer les utilisateurs, mais cela doit être fait de manière éthique. (s'il en existe une)

• Exemple éthique : utiliser l'effet d'ancrage pour guider les utilisateurs vers un choix pertinent, comme afficher un prix standard avant les options premium. Ex : testez notre offre gratuite avant de vous engager.
• Exemple problématique : utiliser le biais de rareté (“il ne reste qu'une place !”) alors que ce n'est pas vrai.
• Astuce : demandez-vous toujours si vos conceptions respectent la confiance des utilisateurs. Une interface trompeuse peut réduire drastiquement la crédibilité de votre produit si la tromperie est découverte. Cela me rappelle un site web qui utilisait la technique de la notification “Pierre a acheté nom de produit il y a 2 min” sur son e-commerce. 20s dans le code source pour voir que c'était un code de génération aléatoire de notifications. J'ai abandonné mon panier de plus de 200 euros.

6. Mettez-vous à la place de l'utilisateur

Attention avec technique, c'est certainement la plus compliquée à mettre en œuvre. C'est pourquoi il est important de procéder à des phases d'observation et de se rapprocher d'utilisateurs et utilisatrices finales. Nous avons tendance à faire parler les gens en projetant nos propres biais.

• Technique : essayez de comprendre comment les utilisateurs pensent et ressentent. Quels biais pourraient influencer leur comportement dans un contexte donné ? C'est là que les méthodologies “d'empathie cognitive” d'UX Design peuvent servir.
• Exercice : créez des “profils biaisés” pour vos personas à partir des résultats de votre recherche UX. Ou inventez des proto-personas en exagérant des traits divers et parfois opposés. Par exemple :
  • Persona 1 : Sophie, très influencée par les promotions (biais de rareté).
  • Persona 2 : Marc, préfère le statu quo et hésite à essayer de nouvelles fonctionnalités (biais du statu quo).
  • Persona 3 : Pierre, malvoyant, gros consommateur de contenus sur la toile. Adore commander en ligne mais déteste les formulaires.

Petite note sur les personas et proto-personas : je ne suis pas un grand fan de cet outil qui a tendance à stéréotyper, voire sur-stéréotyper, une partie de la population en donnant des caractéristiques non contradictoires au sein d'un même profil. (ex : je suis pratiquant d'art martiaux, en excellente forme, prends soin de mon corps et ma santé, mais j'adore me prendre de grosses pizzas et manger du fast-food)

7. Testez vos propres biais dans des environnements simulés

Cela demande de trouver une activité commune avec un groupe de personnes avec lequel vous travaillez fréquemment. Ce n'est peut-être pas possible pour toutes et tous.

• Simulations et jeux : engagez-vous dans des exercices de pensée qui exploitent les biais cognitifs, comme les escape games ou des jeux de stratégie. Les biais de chaque individu ressortent rapidement lorsqu'il faut prendre des décisions rapidement. Je me souviens avoir joué avec mes collègues à un MOBA (multiplayer online battle arena) connu, et les traits de personnalité en jeu se dessinaient assez facilement.
• Étape clé : notez chaque fois où vous tombez dans un biais et réfléchissez à ce qui vous y a conduit. Trouvez une manière d'amoindrir ce biais et travaillez dessus.

8. Apprenez à équilibrer les biais pour améliorer l'expérience utilisateur

Les biais ne sont pas toujours négatifs ; ils peuvent être utilisés pour aider les utilisateurs à prendre des décisions rapides et intuitives. Exemple :

• Effet d'ancrage positif : mettre en avant une option recommandée (ex. : “choix le plus populaire”) pour simplifier une décision. La difficulté est de trouver une balance entre marketing et expérience utilisateur.
• Biais de cadrage positif : présenter une information de manière à en souligner les avantages (ex. “90% de nos utilisateurs aiment cette option”).

En résumé, pour repérer, utiliser ou éviter les biais cognitifs en tant que designer ou développeur :

1. Apprenez à les identifier dans vos propres décisions.
2. Observez comment vos utilisateurs et utilisatrices y sont sensibles lors des tests.
3. Intégrez des outils et des méthodes pour concevoir des interfaces conscientes de ces biais.
4. Restez éthique dans leur utilisation.

Avec de la pratique et une approche méthodique, vous pouvez transformer ces distorsions mentales en alliées pour améliorer l'expérience utilisateur.

Quelques ressources :

• 30 biais cognitifs qui nuisent à notre jugement rationnel
• La définition et des exemples
• Identifier ses biais

Accessibilité des formulaires : un art sous-estimé.

Pourquoi parler de formulaire juste après l'accessibilité ? Eh bien parce qu'il y a deux types d'interactions principales avec les contenus du web, la consommation (lecture) et la contribution (écriture). Le formulaire est un moyen d'accès en écriture qui est bien souvent inaccessible, comme l'a démontré mon analyse de dix solutions réputées de formulaires sous WordPress.

Mais, qu'est-ce qu'un formulaire ? Une manière assez simple de collecter des données sur une personne en lui laissant une grosse part du travail.

Sans forcer, c'est la définition que me donneraient la plupart des marketeux que je connais. Dans le fond, c'est plutôt le cas, et ces personnes ont certainement raison.

Cela fait des années que je parle de formulaire, déjà lors de ma période chez Alsacréations, j'avais créé ce petit guide pratique orienté développement. à l'époque, pour moi, l'arrivée de HTML5 était révélatrice d'une volonté d'améliorer l'expérience utilisateur sur les formulaires.

C'était sans compter la capacité des formations et des développeurs front-end à se concentrer sur des frameworks JS et CSS en faisant l'impasse complète de la sémantique apportée par HTML5, et les bases des langages qu'ils sont censés connaître.

Le front-end, et qui plus est le formulaire, est l'interface que vous avez avec votre utilisateur ou utilisatrice. Pour reprendre la définition de mon propre livre :

Un formulaire, c'est un moment important pour le propriétaire du site web comme pour la personne qui le remplit. C'est le début d'une conversation quelle que soit sa nature : réservation de ticket, formulaire de contact, inscription à un service, achat e-commerce, démarche administrative, etc.
Cette personne qui interagit avec vous souhaite souvent, mais pas exclusivement, obtenir quelque chose qui l'a intéressée, ou elle se retrouve dans une situation où elle a l'obligation de faire la démarche. Nous partons donc d'un événement déclencheur qui est assez émotionnel, que ce soit en positif ou négatif. Il est important de capter cette émotion et d'en faire quelque chose de constructif.

—Formulaire Web - Les erreurs à éviter qui vous coûtent cher

On est donc loin de la simple collecte de données où l'effort doit reposer sur l'utilisateur ou l'utilisatrice. Rien qu'en adoptant cette attitude, vous changerez votre approche de conception de formulaire.

Je paraphrase mon livre à nouveau, navré pour cela :

“il est facile de corriger une conversation orale ou écrite lorsque l'on discute avec quelqu'un, il y a toujours un moyen direct de corriger le tir à la suite d'un incompris ou d'un malentendu. Imaginez maintenant cette même conversation avec comme interlocutrice votre page web posant des questions, et le visiteur y répondant. Si la question est mal posée à l'écrit, une forme d'incompréhension va naître. Nous n'avons donc plus la même dynamique sur un formulaire web, où la moindre incompréhension peut mener à un abandon, ou parfois au désastre, car il n'y aura personne pour voir et corriger en direct l'expérience de notre visiteur.”

Vous voulez démarrer dès maintenant l'amélioration ou l'audit de vos formulaires ? Regardons quelques aspects ensemble.

Les bases de l'ergonomie des formulaires

Commençons simple : tous vos champs ont des étiquettes claires et concises. Pas des placeholders, c'est mauvais pour la santé. De vrais libellés, ou encore labels, pour les techniciens, qui n'utilisent pas de jargon et apportent des aides à la complétion.

C'est fait ? Passons à un autre aspect presque systématiquement oublié.

Tous vos messages d'erreur aident à la correction des erreurs. Il n'y a pas de “Caractères invalides” comme message d'erreur, ou “Ceci n'est pas une adresse e-mail” ? En effet un message d'erreur correct doit pointer du doigt explicitement l'erreur, et au mieux apporter un exemple de données, à défaut de proposer une correction. D'ailleurs nous devrions les appeler des messages d'aide à la correction, et non plus des messages d'erreur, pour changer le rapport que l'on a avec ce type de message.

C'est fait ? Parfait, alors dernier petit aspect très enquiquinant pour la route.

Tous vos contrôles de formulaire sont utiles et justifiés par une règle universelle ou métier stricte. Par exemple, aucun champ “nom” n'impose une limite en nombre de caractères (basse ou haute), ou des limites de types de caractères, n'est-ce pas ?

Si c'est le cas, alors félicitations d'avoir couvert ces trois aspects qui sont bien souvent les plus bloquants, frustrants ou excluants.

Des points d'attention comme ceux-là, j'en illustre plein et je les accompagne d'explications tangibles et de propositions de solution dans mon livre sur l'ergonomie des formulaires où je tente d'aller plus loin que la plupart des frameworks que j'ai connus jusque-là.

Rendre les formulaires accessibles à tous

Mon parcours inclut un passage intense dans le développement front-end, notamment le HTML sémantique et la maîtrise de CSS. L'accessibilité a également tout un pan technique qu'il est important de mettre en œuvre et d'apprendre à tester.

Quelques règles simples à mettre en œuvre pour un formulaire :

Vérifiez vos contrastes

Comme pour le texte, le formulaire doit être suffisamment visible : vos étiquettes doivent respecter un contraste de 4.5:1 minimum, et la bordure de vos champs doit respecter un contraste de 3:1 avec le fond de site.

Vérifiez la navigation clavier

Lorsque vous naviguez en utilisant la touche “tab”, les champs qui prennent le focus sont clairement identifiés, proposant un indicateur visuel fort et suffisamment contrasté. Ma technique préférée du moment consiste à utiliser ce code CSS très simple :

:is(input, textarea, select, button):focus-visible {
    outline: 2px dashed #004C92;
    outline-offset: 4px;
}

L'avantage de :focus-visible c'est qu'il n'apparaît qu'à la navigation clavier. Ce qui permet aux designers un peu sensibles parce que “l'état focus c'est pas beau quand on clique avec la souris”, d'avoir une alternative acceptable.

Oui, il faut parfois savoir faire des compromis, mais pas sur la qualité 😛

Vérifiez vos étiquettes !

Trop souvent encore, les étiquettes sont juste visibles pas loin des champs, mais ne sont pas reliées programmatiquement. Ce n'est pas une tâche très compliquée, mais trop souvent oubliée. Comment faire ?

<label for="firstname">Votre prénom</label>
<input type="text" id="firstname" name="firstname">

Le <label> et son attribut for, possède la même valeur que <input> et son attribut id. Le lien entre le champ et son étiquette se fait alors pour des lecteurs d'écran.

Une manière assez facile de tester est de cliquer sur le label. S'il vous fait prendre le focus du champ correspondant, alors c'est que le lien est fait.

Gestion accessible des erreurs

Non, il n'y a pas encore de balise <error> ou <message> qui pourrait être plutôt pratique si on y pense : la validation d'un champ est prévue, mais pas la transmission d'une erreur. étrange.

En attendant, vous devrez faire le lien manuellement avec ce type de code :

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" aria-describedby="message-email" aria-invalid="true">
<p id="message-email">Votre e-mail semble manquer son arobase (@)</p>

Si vous voulez vous assurer d'avoir toujours les bons attributs ARIA en place, vous pouvez même la jouer comme cela en CSS :

input[aria-invalid="true"] {
    border-color: red;
}

Pas d'ARIA, pas de test visuel concluant, comme ça vous savez qu'il y a un problème !

Tester, tester, tester

Que vous testiez avec des solutions d'automatisation de test, ou que vous le fassiez à la main, prévoyez des phases de test à chaque mise à jour de vos formulaires.

Il est vite arrivé d'oublier des tests après une mise à jour, et vos utilisateurs et utilisatrices peuvent rapidement se retrouver dans une impasse critique.

Vous l'aurez compris, il ne s'agit encore une fois que d'un extrait de toutes les choses à garder en tête, que j'ai réunies sous la forme d'une checklist et d'un livre dédiés aux formulaires, car il y a pas mal à faire.