Au cours de mes 15 ann\u00e9es d’exp\u00e9rience dans le domaine, j’ai observ\u00e9 une constante\u00a0: les bases enseign\u00e9es aux d\u00e9veloppeurs et designers manquent cruellement d’une profondeur indispensable. Comprendre les (ses\u00a0?) biais cognitifs, ma\u00eetriser quelques notions fondamentales d’ergonomie, int\u00e9grer convenablement des formulaires ou encore int\u00e9grer pleinement l’accessibilit\u00e9 comme une n\u00e9cessit\u00e9 \u00e9thique, plus que l\u00e9gale, sont autant de comp\u00e9tences trop souvent ignor\u00e9es.<\/p>\n
Dans cet article, nous explorerons en partie les racines de ces lacunes, l’importance d’une autodidaxie \u00e9clair\u00e9e, et les enseignements essentiels pour construire un web qui sert r\u00e9ellement tous ses utilisateurs. La mani\u00e8re d’aborder ces sujets sera forc\u00e9ment via un prisme qui m’est propre.<\/p>\n
\n
Cet article se veut provocateur et emploie \u00e0 plusieurs reprises un ton sarcastique. C’est une forme d’\u00e9criture qui m’est propre. Il n’y a aucune animosit\u00e9 \u00e0 retenir envers un profil ou l’autre, chaque personne faisant du mieux qu’elle peut \u00e0 un instant T de sa vie.<\/p>\n
\n
C’est bien connu, HTML est facile \u00e0 \u00e9crire, apprendre, et lire, et ce n’est pas un langage de programmation, alors inutile de passer trop de temps dessus.<\/p>\n
Vous l’aurez compris, je suis sarcastique ici, mais cette attitude rencontr\u00e9e au sein de ma carri\u00e8re s’est r\u00e9v\u00e9l\u00e9e \u00eatre pr\u00e9sente chez les formateurs comme les \u00e9tudiants (principalement des hommes, je garde le masculin) de certaines \u00e9coles, ainsi que chez beaucoup de professionnels plus avanc\u00e9s dans la pratique.<\/p>\n
L’argument \u201cHTML est facile \u00e0 \u00e9crire\u201d ne tient pas plus d’une minute \u00e0 l’analyse d’un code de ce genre d’individu\u00a0: une soupe de\u00a0 Comment en sommes-nous arriv\u00e9s l\u00e0\u00a0?<\/p>\n J’ai plein d’avis personnels : ego, biais cognitifs, masculinit\u00e9 toxique, fain\u00e9antise, manque de remise en question, manque de formation, etc. Mais ce n’est certainement pas aussi simple. Un doux m\u00e9lange de tout cela et d’autres choses. Vous allez me faire la remarque que j’abuse, que tous les hommes ne sont pas comme \u00e7a, que vous avez un cousin qui connait l’accessibilit\u00e9, ou qu’on ne vous a jamais appris tout \u00e7a en formation. Et vous auriez raison. Mais en m\u00eame temps cela me donne raison \ud83d\ude42<\/p>\n Si vous avez pass\u00e9 cette introduction un peu accusatrice et provocatrice, alors vous avez fait un premier grand pas pour votre profil professionnel. Pourquoi ? Parce que pour remettre les utilisateurs et utilisatrices au centre de nos r\u00e9flexions, il faut prendre conscience d’un tas de d\u00e9fauts que nous avons tous et toutes. Pr\u00eat \u00e0 sortir de votre zone de confort ?<\/p>\n Passons \u00e0 quelques aspects souvent oubli\u00e9s des formations ou de l’\u00e9ducation des individus.<\/p>\n L’UX Design, ses m\u00e9thodologies, ses principes et sa pratique m’ont permis de mieux comprendre quelque chose d’indispensable \u00e0 tout professionnel\u00a0: vous, nous, sommes dans une forme d’ignorance constante face aux besoins utilisateurs, aux probl\u00e8mes rencontr\u00e9s, et aux solutions ad\u00e9quates \u00e0 trouver.<\/p>\n Je force le trait volontairement ici, mais la r\u00e9alit\u00e9 est bien l\u00e0\u00a0: nous ne faisons que nous projeter sur ce qui a bien pu mal se passer, sur ce qu’est le probl\u00e8me, et pourrait \u00eatre la solution, et nous la retenons bien souvent comme \u00e9tant La V\u00e9rit\u00e9. \u00e0 tort.<\/p>\n Pourquoi\u00a0? Les mod\u00e8les mentaux.<\/p>\n Votre approche au monde, votre mani\u00e8re de penser, de r\u00e9fl\u00e9chir, d’aborder une situation, ne sont pas les m\u00eames sur celles de votre voisin ou voisine. Vous n’avez pas la m\u00eame exp\u00e9rience, origine, culture, religion, fonctionnement physique ou cognitif, etc. Tous ces aspects forgent un individu sur sa mani\u00e8re d’approcher le monde qui l’entoure.<\/p>\n Un mod\u00e8le mental\u00a0est une repr\u00e9sentation interne que chaque personne se fait de la mani\u00e8re dont une chose fonctionne. En d’autres termes, c’est une id\u00e9e ou une image mentale que vous cr\u00e9ez pour comprendre et interagir avec le monde qui vous entoure.<\/p>\n Quand vous utilisez un objet ou une interface, vous avez d\u00e9j\u00e0 dans votre t\u00eate une id\u00e9e pr\u00e9con\u00e7ue de comment cela devrait fonctionner. Ces mod\u00e8les mentaux sont fa\u00e7onn\u00e9s par vos exp\u00e9riences pass\u00e9es, votre culture, et vos connaissances.<\/p>\n Les designers et d\u00e9veloppeurs doivent comprendre les mod\u00e8les mentaux de leurs utilisateurs et utilisatrices pour concevoir des interfaces qui leur semblent naturelles\u00a0et intuitives.<\/p>\n Alors comment r\u00e9pond-on \u00e0 ces diff\u00e9rents mod\u00e8les mentaux via une solution unique sur notre site web ou notre application ?<\/p>\n C’est une bonne question. La r\u00e9ponse se trouve souvent dans des notions de compromis et d’alternatives, mais aussi de normes. Elle se trouve \u00e9galement et surtout dans votre propre \u00e9ducation et rapprochement \u00e0 ces notions de mod\u00e8les mentaux.<\/p>\n Comprendre que vous ne comprendrez jamais tout, comprendre qu’il existe presque une centaine de (groupements de) mod\u00e8les mentaux principaux (d’apr\u00e8s Charlie Munger), et certainement quelques centaines de milliers de mod\u00e8les en tout, vous fera relativiser sur la place que votre approche, votre ego, peut avoir.<\/p>\n Comprendre cette notion et la petite place que votre avis devrait prendre dans une prise de d\u00e9cision est la premi\u00e8re \u00e9tape vers des conceptions plus inclusives, et plus efficaces.<\/p>\n Avec l’accord de mon employeur, je vous partage l’exp\u00e9rience que nous avons eu au sein de CapitalatWork<\/a> pour concevoir leur nouvel outil CRM.<\/p>\n L’objectif d’un CRM est de r\u00e9unir la connaissance essentielle sur un portefeuille de clients et clientes afin de leur adresser le meilleur service et suivi possible. La conception d’un CRM doit prendre en consid\u00e9ration les besoins individuels de chaque utilisateur, leur mani\u00e8re de travailler au contact avec les clients (t\u00e9l\u00e9phone, en face \u00e0 face, par e-mail, etc.) ainsi que des consid\u00e9rations l\u00e9gales (loi informatique et libert\u00e9, GDPR, etc.)<\/p>\n Avec notre \u00e9quipe de design, et notamment Julie, une de mes coll\u00e8gues, nous sommes arriv\u00e9s sur ce sujet avec un d\u00e9savantage cons\u00e9quent\u00a0: une \u00e9quipe de d\u00e9veloppement avait d\u00e9j\u00e0 propos\u00e9 un CRM fait-maison \u00e0 nos agents, mais celui-ci \u00e9tait tellement horrible \u00e0 utiliser que ce fut un traumatisme partag\u00e9 par tous les agents. De fait, les utilisateurs finaux n’ont jamais \u00e9t\u00e9 consult\u00e9s ou embarqu\u00e9s dans la conception. Le mod\u00e8le mental des d\u00e9veloppeurs est alors entr\u00e9 en conflit avec celui des utilisateurs finaux, aussi bien pour des d\u00e9cisions ergonomiques, que pour des habitudes de travail et la compr\u00e9hension m\u00eame du m\u00e9tier.<\/p>\n Soucieux d’apporter une solution qui fonctionne, voil\u00e0 avec le contexte ce qui devrait vous venir en t\u00eate en analysant la situation\u00a0:<\/p>\n Pourquoi\u00a0? Parce que si je reprends les diff\u00e9renciants d’un mod\u00e8le mental\u00a0: nous n’avons pas la m\u00eame exp\u00e9rience traumatique, nous n’avons pas leur expertise, et diff\u00e9rents agents n’ont pas la m\u00eame approche vis-\u00e0-vis des clients. Certains agents sont m\u00eame tr\u00e8s proches des clients et savent s’adapter \u00e0 chaque pr\u00e9f\u00e9rence. On parle de traiter avec des clients et clientes VIP ici.<\/p>\n Nous avons donc combin\u00e9 des techniques d’entrevue utilisateur, de\u00a0User Task Canvas<\/a>\u00a0(atelier cr\u00e9\u00e9 avec ma coll\u00e8gue Julie), et de tests utilisateur tout au long de la cr\u00e9ation de la solution, pour correspondre au mieux aux besoins de nos agents, et comprendre leur fonctionnement.<\/p>\n R\u00e9sultat\u00a0: la solution est utilis\u00e9e et pl\u00e9biscit\u00e9e, et il y a m\u00eame des id\u00e9es d’am\u00e9lioration que nous impl\u00e9mentons d\u00e8s que possible. C’est pas trop mal comme r\u00e9sultat apr\u00e8s un premier traumatisme, je trouve.<\/p>\n Derri\u00e8re ce succ\u00e8s, nous avions pas loin de 450 items \u00e0 analyser et d\u00e9cortiquer en laissant nos biais et avis personnels dans un tiroir. Ces items nous ont servi \u00e0 nous mettre dans la peau de nos utilisatrices et utilisateurs.<\/p>\n Pour facilement prendre conscience de ces mod\u00e8les, nous pouvons creuser un aspect qui est pour moi le sous-jacent, et un r\u00e9v\u00e9lateur de ces mod\u00e8les\u00a0: les biais cognitifs.<\/p>\n Quelques sources et ressources compl\u00e9mentaires<\/p>\n Je n’ai pas int\u00e9gr\u00e9 cet aspect dans l’UX, car j’ai appris les biais dans mes \u00e9tudes en psychologie. Je sais cependant que ces notions sont fortement utilis\u00e9es dans la conception UX.<\/p>\n Un biais cognitif\u00a0est comme un raccourci mental que notre cerveau utilise pour prendre des d\u00e9cisions rapidement. C’est une fa\u00e7on pour notre esprit de traiter des informations complexes ou incertaines sans y passer trop de temps. Mais parfois, ce raccourci nous conduit \u00e0 des erreurs de jugement, \u00e0 des comportements irrationnels, ou \u00e0 des ressentis.<\/p>\n D’ailleurs, cet article sera probablement rempli de biais, et c’est normal. Non pas que je l’ai fait expr\u00e8s (quoique), mais que j’y suis sujet \u00e9galement. Vous voulez jouer\u00a0? Notez-les et commentez\u00a0\ud83d\ude09<\/p>\n Ces biais sont influenc\u00e9s par nos exp\u00e9riences pass\u00e9es, nos \u00e9motions, et m\u00eame notre environnement. Ils ne sont pas forc\u00e9ment \u00ab\u00a0mauvais\u00a0\u00bb, mais ils peuvent nous induire en erreur sans que nous en ayons conscience.<\/p>\n Pour prendre une image, imaginez que vous \u00eates perdu dans une grande for\u00eat. Vous trouvez\u00a0une carte pour vous guider, mais elle est vieille et ab\u00eem\u00e9e. Votre cerveau, dans sa qu\u00eate de rapidit\u00e9, d\u00e9cide de se concentrer uniquement sur les parties visibles et claires de la carte. Vous ignorez les zones floues, m\u00eame si elles pourraient contenir des informations cruciales. Ce raccourci mental est comme un biais cognitif\u00a0: il vous aide \u00e0 avancer vite, mais il peut aussi vous faire prendre une mauvaise direction.<\/p>\n Voici quelques exemples de biais cognitifs connus\u00a0:<\/p>\n Biais de confirmation\u00a0: Effet d’ancrage\u00a0: Biais de disponibilit\u00e9 \/ repr\u00e9sentativit\u00e9\u00a0: Biais du survivant\u00a0: Les biais cognitifs sont comme des lunettes d\u00e9formantes \u00e0 travers lesquelles nous voyons le monde. Ces distorsions mentales nous aident \u00e0 prendre des d\u00e9cisions rapides, certes, mais elles ne sont pas toujours pr\u00e9cises. Pour les designers, il est crucial de conna\u00eetre ces biais pour \u00e9viter de frustrer les utilisateurs ou de les manipuler involontairement.<\/p>\n Astuce pour les designers\u00a0: Travaillez avec ces biais, pas contre eux. Une bonne conception guide les utilisatrices et utilisateurs de mani\u00e8re fluide, en tenant compte de leur mani\u00e8re de penser, m\u00eame si elle est imparfaite. \ud83d\ude0a<\/p>\n Certains de ces biais sont standardis\u00e9s, ou en tout cas nomm\u00e9s \u00e0 la suite d’\u00e9tudes qui les mettent en \u00e9vidence. D’autres sont des combinaisons et des sous pans d’autres biais. Enfin, beaucoup sont des effets qui ne sont pas forc\u00e9ment nomm\u00e9s clairement, ou ont plusieurs noms ou connexions entre eux.<\/p>\n Une bonne approche consiste \u00e9galement \u00e0 se poser la question des biais qui nous poussent \u00e0 prendre certaines d\u00e9cisions, et en prendre conscience de mani\u00e8re assez permanente. Certains de ces biais sont syst\u00e9matiques ou syst\u00e9miques. En prendre conscience vous permettra de proposer de meilleures r\u00e9flexions et solutions.<\/p>\n Rep\u00e9rer et g\u00e9rer les biais cognitifs n\u00e9cessite de la pratique, une bonne dose de curiosit\u00e9, et des m\u00e9thodologies adapt\u00e9es. Voici un guide en plusieurs \u00e9tapes pour d\u00e9velopper ces comp\u00e9tences\u00a0:<\/p>\n Pour rep\u00e9rer un biais, il faut d’abord le comprendre.<\/p>\n Il est essentiel de reconna\u00eetre vos propres biais.<\/p>\n Les biais cognitifs influencent directement la mani\u00e8re dont les utilisateurs interagissent avec une interface.<\/p>\n Certains biais peuvent \u00eatre exploit\u00e9s pour influencer les utilisateurs, mais cela doit \u00eatre fait de mani\u00e8re \u00e9thique.<\/p>\n Attention avec technique, c’est certainement la plus compliqu\u00e9e \u00e0 mettre en \u0153uvre. C’est pourquoi il est important de proc\u00e9der \u00e0 des phases d’observation et de se rapprocher d’utilisateurs et utilisatrices finales. Nous avons tendance \u00e0 faire parler les gens en projetant nos propres biais.<\/p>\n Petite note sur les personas et proto-personas : je ne suis pas un grand fan de cet outil qui a tendance \u00e0 st\u00e9r\u00e9otyper, voire sur-st\u00e9r\u00e9otyper, une partie de la population en donnant des caract\u00e9ristiques non contradictoires au sein d’un m\u00eame profil. (ex : je suis pratiquant d’art martiaux, en excellente forme, prend soin de mon corps et ma sant\u00e9, mais j’adore me prendre de grosses pizzas et manger du fast-food)<\/p>\n Cela demande de trouver une activit\u00e9 commune avec un groupe de personne avec lequel vous travaillez fr\u00e9quemment. Ce n’est peut-\u00eatre pas possible pour toutes et tous.<\/p>\n Les biais ne sont pas toujours n\u00e9gatifs\u00a0; ils peuvent \u00eatre utilis\u00e9s pour aider les utilisateurs \u00e0 prendre des d\u00e9cisions rapides et intuitives. Exemple\u00a0:<\/p>\n En r\u00e9sum\u00e9, pour rep\u00e9rer, utiliser ou \u00e9viter les biais cognitifs en tant que designer ou d\u00e9veloppeur\u00a0:<\/p>\n Avec de la pratique et une approche m\u00e9thodique, vous pouvez transformer ces distorsions mentales en alli\u00e9es pour am\u00e9liorer l’exp\u00e9rience utilisateur.<\/p>\n Quelques ressources\u00a0:<\/p>\n Avec ces notions de biais cognitifs et de mod\u00e8les mentaux en poche, vous commencez doucement \u00e0 comprendre qu’\u00e0 d\u00e9faut d’\u00e9viter votre propres biais, vous pouvez inclure dans des groupes de r\u00e9flexion des personnes qui ne pensent pas comme vous, des personnes avec une autre culture, une autre exp\u00e9rience, et d’autres capacit\u00e9s, d’autres craintes ou d’autres forces.<\/p>\n C’est l\u00e0 que je vais vous parler de l’accessibilit\u00e9, un pan de l’inclusivit\u00e9 parmi d’autres, qui me tient particuli\u00e8rement \u00e0 c\u0153ur, m\u00eame si ce n’est pas le seul.<\/p>\n Un des biais cognitifs utilis\u00e9 pour convaincre de l’importance de l’accessibilit\u00e9 est ce que j’appelle le biais d’identification (ne cherchez pas en ligne je ne crois pas qu’il soit standardis\u00e9). Ce serait un m\u00e9lange de plein de biais, dont celui de\u00a0proximit\u00e9 \u00e9motionnelle<\/a>\u00a0et d‘identification avec la victime<\/a>. Je vous en parle pour ne pas vous manipuler \ud83d\ude1b<\/p>\n Je l’illustre pas mon argument qui consiste \u00e0 vous dire \u201cl’accessibilit\u00e9 concerne les personnes handicap\u00e9es, mais, qui est proche de vous et poss\u00e8de des handicaps\u00a0? Un ou une proche\u00a0? Mamie\u00a0? Papy\u00a0? Ou peut-\u00eatre vous-m\u00eame lorsque vous atteindrez l’\u00e2ge\u00a0? Alors finalement, investir maintenant dans l’accessibilit\u00e9, c’est investir pour vos proches, et investir pour votre avenir.\u201d<\/p>\n Je n’aime pas cette approche, car cette technique\u2014rudement efficace soit dit en passant\u2014cache une grosse partie de la population handicap\u00e9e alors qu’elle est la premi\u00e8re concern\u00e9e.<\/p>\n Cependant, avant de s’int\u00e9resser \u00e0 un sujet, un individu a besoin d’\u00eatre embarqu\u00e9, que ce soit logiquement, ou \u00e9motionnellement, pour que son investissement devienne autonome par la suite.<\/p>\n Si l’aspect \u00e9motionnel ne fonctionne pas, parce que vous partez du principe que l’\u00eatre humain ne vous int\u00e9resse pas, ou que vous ne vous sentez pas concern\u00e9 par la vieillesse (d\u00e9ni\u00a0?), alors sachez que dans tous les cas vous n’avez plus le choix d’int\u00e9grer l’accessibilit\u00e9 \u00e0 votre domaine de comp\u00e9tence, si vous faites du web, des applications mobiles, des vid\u00e9os, ou tout autre contenu num\u00e9rique. En somme, si votre profil de designer ou de d\u00e9veloppeur n’embarque pas des comp\u00e9tences en accessibilit\u00e9, vous ne serez plus embauchable dans les ann\u00e9es \u00e0 venir.<\/p>\n Bon, entre nous, ce n’est pas comme si tous les professionnels du domaine criaient haut et fort depuis plusieurs d\u00e9cennies qu’il faudrait un jour s’y mettre.<\/p>\n \u201cOui mais je n’en ai jamais entendu parler avant T.T\u201d\u2014 Anonyme.<\/p>\n Ha\u00a0! Ne serait-ce pas un biais cognitif qui fait que la personnes ne se souvient pas de quelque chose qui ne la concernait pas \u00e0 l’\u00e9poque\u00a0? Certainement.<\/p>\n Certaines formations pr\u00e9sentent l’accessibilit\u00e9 sur un coin de table, en rappelant \u00e0 des jeunes gens pour la plupart non handicap\u00e9s et dans la fleur de l’\u00e2ge que c’est important de penser \u00e0 tout le monde. Sans illustrer le propos, leur apprendre \u00e0 se projeter, inviter des personnes concern\u00e9es pour t\u00e9moigner\u00a0; en somme, sans cr\u00e9er aucune empathie.<\/p>\n C’est donc plut\u00f4t \u201cnormal\u201d que des personnes non concern\u00e9es par le handicap ne pensent pas \u00e0 ce type de population.<\/p>\n Comment pouvez-vous faire, en tant que formateur ou formatrice, pour casser cet immobilisme et embarquer les plus jeunes dans des notions d’inclusivit\u00e9 dans vos formations (design, d\u00e9veloppement, conception produit, etc.) ?<\/p>\n Il faut rentrer dans un processus pour faire ressentir concr\u00e8tement les d\u00e9fis rencontr\u00e9s par les personnes en situation de handicap (notamment num\u00e9rique) afin de susciter de l’empathie et d’encourager une r\u00e9flexion durable chez les participants et participantes.<\/p>\n Mettez les participants dans la peau d’une personne confront\u00e9e \u00e0 des d\u00e9fis d’accessibilit\u00e9 gr\u00e2ce \u00e0 des exercices concrets\u00a0:<\/p>\n C’est certainement une des \u00e9tapes essentielles pour v\u00e9rifier si les exercices prennent et pour inviter les gens \u00e0 mettre des mots sur leur ressenti.<\/p>\n Quelques semaines apr\u00e8s la formation, envoyez un questionnaire ou organisez une session de retour pour savoir\u00a0:<\/p>\n Ce programme est d\u00e9ployable assez rapidement dans n’importe quelle formation de design, de d\u00e9veloppement, de chefferie de projet, de management, etc. Ce n’est qu’un exemple tir\u00e9 de certains \u00e9l\u00e9ments mis en pratique par moi-m\u00eame ou certaines cons\u0153urs. En faisant cela, vous am\u00e9liorerez la capacit\u00e9 des prochaines g\u00e9n\u00e9rations \u00e0 penser aux autres, \u00e0 se projeter dans des situations qu’elles ne connaissent pas (encore) et \u00e0 penser \u201cinclusivit\u00e9\u201d.<\/p>\n Pourquoi parler de formulaire juste apr\u00e8s l’accessibilit\u00e9\u00a0? Et bien parce qu’il y a deux types d’interactions principales avec les contenus du web, la consommation (lecture) et la contribution (\u00e9criture). Le formulaire est un moyen d’acc\u00e8s en \u00e9criture qui est bien souvent inaccessible, comme l’a d\u00e9montr\u00e9 mon analyse de\u00a0dix solutions r\u00e9put\u00e9es de formulaire<\/a>\u00a0sous WordPress.<\/p>\n Mais, qu’est-ce qu’un formulaire\u00a0? Une mani\u00e8re assez simple de collecter des donn\u00e9es sur une personne en lui laissant une grosse part du travail.<\/p>\n Sans forcer, c’est la d\u00e9finition que me donneraient la plupart des marketeux que je connais. Dans le fond, c’est plut\u00f4t le cas, et ces personnes ont certainement raison.<\/p>\n Cela fait des ann\u00e9es que je parle de formulaire, d\u00e9j\u00e0 lors de ma p\u00e9riode chez Alsacr\u00e9ations, j’avais cr\u00e9\u00e9\u00a0ce petit guide pratique<\/a>\u00a0orient\u00e9 d\u00e9veloppement. \u00e0 l’\u00e9poque, pour moi, l’arriv\u00e9e de HTML5 \u00e9tait r\u00e9v\u00e9latrice d’une volont\u00e9 d’am\u00e9liorer l’exp\u00e9rience utilisateur sur les formulaires.<\/p>\n C’\u00e9tait sans compter la capacit\u00e9 des formations et des d\u00e9veloppeurs front-end\u00a0\u00e0 se concentrer sur des frameworks JS et CSS en faisant l’impasse compl\u00e8te de la s\u00e9mantique apport\u00e9e par HTML5, et les bases des langages qu’ils sont cens\u00e9s conna\u00eetre.<\/p>\n Le front-end, et qui plus est le formulaire, est l’interface que vous avez avec votre utilisateur ou utilisatrice. Pour reprendre la d\u00e9finition de mon propre livre\u00a0:<\/p>\n Un formulaire, c’est un moment important pour le propri\u00e9taire du site web comme pour la personne qui le remplit. C’est le d\u00e9but d’une conversation quelle que soit sa nature\u00a0: r\u00e9servation de ticket, formulaire de contact, inscription \u00e0 un service, achat e-commerce, d\u00e9marche administrative, etc. \u2014Formulaire Web – Les erreurs \u00e0 \u00e9viter qui vous co\u00fbtent cher<\/a><\/cite><\/p><\/blockquote>\n On est donc loin de la simple collecte de donn\u00e9es o\u00f9 l’effort doit reposer sur l’utilisateur ou l’utilisatrice. Rien qu’en adoptant cette attitude, vous changerez votre approche de conception de formulaire.<\/p>\n Je paraphrase mon livre \u00e0 nouveau, navr\u00e9 pour cela\u00a0:<\/p>\n \u201cil est facile de corriger une conversation orale ou \u00e9crite lorsque l’on discute avec quelqu’un, il y a toujours un moyen direct de corriger le tir \u00e0 la suite d’un incompris ou d’un malentendu. Imaginez maintenant cette m\u00eame conversation avec comme interlocutrice votre page web posant des questions, et le visiteur y r\u00e9pondant. Si la question est mal pos\u00e9e \u00e0 l’\u00e9crit, une forme d’incompr\u00e9hension va na\u00eetre. Nous n’avons donc plus la m\u00eame dynamique sur un formulaire web, o\u00f9 la moindre incompr\u00e9hension peut mener \u00e0 un abandon, ou parfois au d\u00e9sastre, car il n’y aura personne pour voir et corriger en direct l’exp\u00e9rience de notre visiteur.\u201d<\/p><\/blockquote>\n Vous voulez d\u00e9marrer d\u00e8s maintenant l’am\u00e9lioration ou l’audit de vos formulaires\u00a0? Regardons quelques aspects ensemble.<\/p>\n Commen\u00e7ons simple\u00a0: tous vos champs ont des \u00e9tiquettes claire et concise. Pas des placeholders, c’est\u00a0mauvais pour la sant\u00e9<\/a>. De vrai libell\u00e9, ou encore label, pour les techniciens, qui n’utilisent pas de jargon et apportent des aides \u00e0 la compl\u00e9tion.<\/p>\n C’est fait\u00a0? Passons \u00e0 un autre aspect presque syst\u00e9matiquement oubli\u00e9.<\/p>\n Tous vos messages d’erreur aident \u00e0 la correction des erreurs. Il n’y a pas de \u201cCaract\u00e8res invalides\u201d comme message d’erreur, ou \u201cCeci n’est pas une adresse e-mail\u201d\u00a0? En effet un message d’erreur correct doit pointer du doigt explicitement l’erreur, et au mieux apporter un exemple de donn\u00e9es, \u00e0 d\u00e9faut de proposer une correction. D’ailleurs nous devrions les appeler des messages d’aide \u00e0 la correction, et non plus des messages d’erreur, pour changer le rapport que l’on a avec ce type de message.<\/p>\n <\/p>\n C’est fait\u00a0? Parfait, alors dernier petit aspect tr\u00e8s enquiquinant pour la route.<\/p>\n Tous vos contr\u00f4les de formulaire sont utiles et justifi\u00e9s par une r\u00e8gle universelle ou m\u00e9tier stricte. Par exemple, aucun champ \u201cnom\u201d n’impose une limite en nombre de caract\u00e8re (basse ou haute), ou des limites de types de caract\u00e8res, n’est-ce pas ?<\/p>\n <\/p>\n Si c’est le cas, alors f\u00e9licitations d’avoir couvert ces trois aspects qui sont bien souvent les plus bloquants, frustrants ou excluants.<\/p>\n Des points d’attentions comme ceux-l\u00e0, j’en illustre plein et je les accompagne d’explications tangibles et de propositions de solution dans mon\u00a0livre sur l’ergonomie des formulaires<\/a>\u00a0o\u00f9 je tente d’aller plus loin que la plupart des frameworks que j’ai connus jusque-l\u00e0.<\/p>\n Mon parcours inclut un passage intense dans le d\u00e9veloppement front-end, notamment le HTML s\u00e9mantique et la ma\u00eetrise de CSS. L’accessibilit\u00e9 a \u00e9galement tout un pan technique qu’il est important de mettre en \u0153uvre et d’apprendre \u00e0 tester.<\/p>\n Quelques r\u00e8gles simples \u00e0 mettre en oeuvre pour un formulaire\u00a0:<\/p>\n Comme pour le texte, le formulaire doit \u00eatre suffisamment visible\u00a0: vos \u00e9tiquettes 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.<\/p>\n<div><\/code>, un code non s\u00e9mantique et non accessible. Tellement facile \u00e0 \u00e9crire que la personne a \u00e9t\u00e9 incapable d’aligner 3 lignes qui ont du sens. Tr\u00e8s bien.<\/p>\nL’importance des bases en UX Design, ou comment comprendre l’invisible.<\/h2>\n
Les mod\u00e8les mentaux<\/h3>\n
Les mod\u00e8les mentaux dans la conception web<\/h3>\n
Exemple d’application sur un de mes projets<\/h3>\n
\n
\n
Reconna\u00eetre et int\u00e9grer les biais cognitifs<\/h2>\n
\nImaginez que vous cherchiez une information pour vous aider \u00e0 prendre une d\u00e9cision de design. Vous lisez des articles, mais vous s\u00e9lectionnez uniquement ceux qui confirment ce que vous pensez d\u00e9j\u00e0. R\u00e9sultat\u00a0: vous restez dans votre zone de confort sans explorer de nouvelles id\u00e9es. Pire\u00a0: vous \u00eates persuad\u00e9s que c’est la bonne d\u00e9cision.<\/p>\n
\nSi un site e-commerce affiche un prix barr\u00e9 tr\u00e8s \u00e9lev\u00e9 \u00e0 c\u00f4t\u00e9 du prix final, vous aurez l’impression de faire une bonne affaire, m\u00eame si le prix reste \u00e9lev\u00e9. Votre cerveau est influenc\u00e9 par le premier chiffre vu (l’ancre) ou l’information de r\u00e9f\u00e9rence (mise en avant).<\/p>\n
\nVous jugez la probabilit\u00e9 d’un \u00e9v\u00e9nement en fonction des exemples qui vous viennent rapidement \u00e0 l’esprit. Si vous avez r\u00e9cemment entendu parler d’accidents d’avion, vous pourriez penser qu’ils sont plus fr\u00e9quents qu’ils ne le sont r\u00e9ellement.<\/p>\n
\nVous faites une erreur de raisonnement qui consiste \u00e0 se concentrer uniquement sur les \u00e9l\u00e9ments ou les personnes qui ont r\u00e9ussi (les \u00ab\u00a0survivants\u00a0\u00bb) tout en ignorant ceux qui ont \u00e9chou\u00e9 ou disparu. Ce biais peut conduire \u00e0 des conclusions erron\u00e9es, car il repose sur un \u00e9chantillon incomplet de donn\u00e9es. Dans notre domaine, ce biais arrive souvent \u00e0 l’analyse superficielle de donn\u00e9es de tracking par exemple.<\/p>\n1. \u00e9duquez-vous sur les biais cognitifs<\/h3>\n
\n
2. Pratiquez l’introspection<\/h3>\n
\n
\n
\n
3. Int\u00e9grez ou surveillez les biais dans vos tests utilisateurs<\/h3>\n
\n
\n
\n
4. Utilisez des outils pour \u00e9valuer vos conceptions<\/h3>\n
\n
\n
\n
\n
5. Apprenez \u00e0 \u00e9viter de manipuler involontairement<\/h3>\n
\n
6. Mettez-vous \u00e0 la place de l’utilisateur<\/h3>\n
\n
\n
7. Testez vos propres biais dans des environnements simul\u00e9s<\/h3>\n
\n
8. Apprenez \u00e0 \u00e9quilibrer les biais pour am\u00e9liorer l’exp\u00e9rience utilisateur<\/h3>\n
\n
\n
\n
Proposer des conceptions plus inclusives<\/h2>\n
Inclure l’accessibilit\u00e9 dans vos travaux<\/h3>\n
\nEn effet l’European Accessibility Act (EAA – l’Acte Europ\u00e9en pour l’Accessibilit\u00e9<\/a>) impose \u00e0 ses \u00e9tats membres d’adopter une approche de conception accessible pour 2025. Oui, vous avez, de m\u00e9moire, encore 6 mois pour vous y mettre \ud83d\ude00<\/p>\nInclure l’accessibilit\u00e9 dans les formations<\/h3>\n
\u00c9tape 1\u00a0: Une introduction narrative et interactive<\/h4>\n
\n
\n
\u00c9tape 2\u00a0: Une immersion pratique (atelier exp\u00e9rientiel)<\/h4>\n
\n
\n
\u00c9tape 3\u00a0: D\u00e9briefing \u00e9motionnel et discussions<\/h4>\n
\n
\n
\u00c9tape 4\u00a0: Cr\u00e9ation d’un ancrage m\u00e9moriel<\/h4>\n
\n
\n
\n
\u00c9tape 5\u00a0: Proposer un suivi ou une \u00e9valuation<\/h4>\n
\n
\nAdaptez les contenus \u00e0 votre cible bien s\u00fbr, mais c’est important de retrouver\u00a0: des t\u00e9moignages et illustrations, une immersion, des discussions et partage \u00e9motionnel, une aide m\u00e9moire, et un suivi.<\/p>\nAccessibilit\u00e9 des formulaires\u00a0: un art sous-estim\u00e9.<\/h2>\n
\nCette personne qui interagit avec vous souhaite souvent, mais pas exclusivement, obtenir quelque chose qui l’a int\u00e9ress\u00e9e, ou elle se retrouve dans une situation o\u00f9 elle a l’obligation de faire la d\u00e9marche. Nous partons donc d’un \u00e9v\u00e9nement d\u00e9clencheur qui est assez \u00e9motionnel, que ce soit en positif ou n\u00e9gatif. Il est important de capter cette \u00e9motion et d’en faire quelque chose de constructif.<\/p>\nLes bases de l’ergonomie des formulaires<\/h3>\n
![\"Un](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/example-label-jargon@2x.png\")
<\/a><\/p>\n![\"Le](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/example-label-fixed@2x.png\")
<\/a><\/p>\n![\"Un](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/error-message-good-vs-bad@2x.png\")
<\/a><\/p>\n![\"Un](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/control-abusif@2x.png\")
<\/a><\/p>\nRendre les formulaires accessibles \u00e0 tous<\/h3>\n
V\u00e9rifiez vos contrastes<\/h4>\n
![\"Une](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/contrast-error@2x.png\")
<\/a>![\"Le](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/contrast-error-fixed@2x.png\")
<\/p>\n![\"Un](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2024\/11\/focus-state@2x.png\")
<\/a><\/p>\n