Archives des ux writing - Page 2 sur 4

2 août 202130 juillet 2021

Lesbonsclics, ou comment un simple libellé de bouton peut bloquer complètement plusieurs personnes

Il y a quelques jours j’ai eu l’occasion d’aider une personne qui cherchait à utiliser la plateforme lesbonsclics. Il s’agit d’un site permettant de former les gens aux bases du numérique, que j’ai découvert ce jour-là.

Lorsque je suis arrivé à son poste, la personne m’a expliqué qu’elle n’arrivait pas à se connecter. Ensemble, nous avons successivement :

essayé son adresse e-mail et son mot de passe, puis essayé d’autres mots de passe ;
tenté une récupération de mot de passe : Un email vient de vous être envoyé, il vous permettra de réinitialiser votre mot de passe (c’est faux, et c’est assez grave comme erreur de la part de l’équipe de conception) ;
essayé une autre adresse mail et un autre mot de passe, puis essayé d’autres mots de passe ;
tenté une nouvelle récupération de mot de passe (même message, même mensonge).

La personne étant peu à l’aise avec l’informatique, ces démarches ont pris beaucoup de temps, peut-être quinze à vingt minutes.

Ne sachant plus quoi faire, j’ai pris le contrôle de la machine et exploré le site. Je suis parti de la page d’accueil, j’ai cliqué sur le bouton Connexion, je suis bien arrivé sur la page qui la bloquait. Et puis j’ai compris.

On le sait, nous ne lisons pas le contenu des pages internet, la plupart du temps nous le scannons. Après une lecture plus approfondie de la page, j’ai constaté que la réponse était en fait sous notre nez depuis le début : la personne cherchait à se connecter à l’espace des formateurs, pas à l’espace des apprenants.

Mais… Pourquoi nous sommes-nous tous les deux retrouvés sur cette page ? C’est là que je me suis un peu énervé contre le site. Voici une nouvelle copie d’écran de la page d’accueil :

Comme je le disais, nous avons cliqué sur le bouton CONNEXION. Malheureusement, il ne s’agissait pas du bon bouton : les apprenants doivent cliquer sur le bouton JE VEUX APPRENDRE. Mais qui a eu une idée pareille ?

Le libellé du bouton CONNEXION est imprécis : qui se connecte ? Les apprenants ou les formateurs ? Et comment peut-on le deviner ?
Même remarque au sujet du libellé du bouton JE VEUX APPRENDRE : comment comprendre que c’est la page de connexion apprenants qui se trouve derrière, et pas une page de présentation du site par exemple ?

Le pire, c’est que l’équipe de conception du site semble consciente de ce problème. Qu’est-ce qui me fait dire ça ? La phrase Si vous souhaitez vous former aux bases du numérique, visitez l’espace apprenant ! en violet, juste en dessous du titre de la page de connexion des formateurs (sans lien direct vers l’espace apprenant, d’ailleurs). Et le bouton Accéder à l’espace apprenant à gauche de la page, en dessous de plusieurs pictos destinés aux formateurs. (Il est absent de la version mobile, d’ailleurs.)

Comment peut-on laisser passer une erreur pareille sur un site destiné à apprendre le numérique aux gens ? J’ai vu deux personnes bloquées sur ce problème en quelques minutes, je ne peux pas croire que l’équipe de conception ne l’ait pas remarqué… sauf si elle n’a jamais rencontré son public. Ce qui serait vraiment ennuyeux, en particulier pour un site de ce type.

22 juillet 202123 juillet 2021

L’écriture inclusive au quotidien : rédiger un tweet qui s’adresse à tout le monde

J’ai consulté hier la vidéo Bien concevoir ses composants, les bases d’un design system évolutif de Stéphanie Walter et j’ai ensuite souhaité la partager sur Twitter. J’ai donc tapé ce message :

Chers amis designers, qu’attendez-vous pour regarder un pro au travail ? [lien de la vidéo]

Et puis je me suis rendu compte que je parlais d’ *un* pro alors que Stéphanie est une femme. J’ai modifié mon tweet :

Chers amis designers, qu’attendez-vous pour regarder une pro au travail ? [lien de la vidéo]

Cette histoire de féminin m’a permis de remarquer… que je ne m’adressais qu’à mes amis masculins, ce qui n’était pas mon souhait. J’ai alors modifié mon message une troisième fois :

Cher-e-s ami-e-s designers et designeuses, qu’attendez-vous pour regarder une pro au travail ? [lien de la vidéo]

Cette fois plusieurs choses m’ennuyaient. Le Cher-e-s ne fonctionne pas à cause de l’accent, par exemple. Et puis il me semble que le tiret est assez mal compris par les lecteurs d’écran ; un point médian serait plus adapté, mais je ne sais pas où il se trouve sur mon clavier. Sans parler de la relative lourdeur de la formule designers et designeuses… Je devais trouver autre chose. J’ai modifié une dernière fois mon message :

Collègues du design, qu’attendez-vous pour regarder une pro au travail ? [lien de la vidéo]

Tout cela n’a pris que quelques secondes. J’aurais sans doute pu mieux faire (le Cher s’est un peu perdu en chemin, par exemple) mais mon message ne méritait pas que j’y passe plus de temps.

Pourquoi est-ce que je raconte tout ça ici ? Parce que je trouve que le jeu en valait la chandelle : je suis content d’avoir passé quelques secondes à améliorer mon message pour le rendre plus inclusif – d’ailleurs j’espère qu’à l’avenir je le ferai sans même y prêter attention. Le monde évolue et il me semble indispensable d’embrasser ces changements, en particulier lorsque l’on s’intéresse à l’UX.

Notes

Au sujet de l’écriture inclusive, je recommande cet article très complet de Julie Moynat (j’en parlais sur Twitter, justement).
Il existe je crois une extension permettant de bloquer l’envoi d’un tweet accompagné d’une image sans texte alternatif. Je me demande s’il existe une extension du même genre permettant de s’assurer que son tweet est bien inclusif.

Edit 23 juillet

@feoche a posé une question très intéressante sur Twitter : comment aurais-je fait s’il n’était pas question d’une femme mais d’une personne non-binaire ? Lawrence Vagner et @Stef Walter lui répondent sur le fil. Je reprends brièvement les suggestions au cas où elles disparaitraient avec le temps :

Lawrence Vagner
Option 3 : Garder une forme neutre « un.e pro »
Option 4 : Me demander comment je préfère être genré.e
Option 5 : Reformuler : « Hey les designers, regardez-donc cette vidéo super intéressante pour créer vos composants, par XXX »

Stef Walter
Quelque chose du genre « Collègues du design, qu’attendez-vous pour regarder la vidéo de Laurence, spécialiste de l’UX design / du domaine » ? (spécialiste est pareil au féminin et masculin du coup plus neutre ?)

28 juin 202129 juin 2021

Mon compte formation épisode 1 : à propos de l’UX d’un formulaire simple

Le site Mon compte formation permet à tous et toutes de consulter et d’utiliser ses droits à la formation. Je suis à la recherche d’une formation d’UX writer, je me rends sur le site afin de découvrir son offre.

La page de recherche se présente comme ceci :

Puisque je parlais d’UX writing : la page est titrée Recherche formation, c’est un peu sec, il y a sans doute mieux à faire – ne serait-ce qu’en ajoutant un article, Recherche de formation.

Les messages d’erreurs gagneraient à être harmonisés : un infinitif d’un côté Merci de saisir un mot clé (attention à la faute d’orthographe), un vouvoiement de l’autre Veuillez choisir une localisation, rien de grave mais des ajustements à effectuer. Je me demande également s’il ne serait pas intéressant de remplacer le terme Localisation par Ville (voir plus bas), ou autre chose, mais tout ça se discute, se teste… Je pense en tout cas qu’il n’y a pas eu de réflexion sur l’UX writing de cette page.

Le formulaire de recherche, de son côté, a un look agréable, mais certaines modifications pourraient sans doute améliorer sa prise en main.

Au sujet du premier champ de saisie, par exemple : un placeholder, si bien conçu soit-il (il se transforme en label quand on clique dans le champ texte), ne vaudra jamais un vrai label (voir cet article ou cet article par exemple), surtout qu’on ne manque clairement pas de place ici.

L’utilisation du placeholder Formation, métier, compétences et d’un picto loupe dans le champ de recherche (une idée étrange) lui donnent l’aspect d’un bouton ; seul l’alignement du texte le distingue des boutons Formation en centre et Formation à distance à sa droite. Ces deux boutons n’ont d’ailleurs pas le même aspect visuel que le bouton de recherche, un simple rond à fond bleu auquel on pourrait ajouter un label pour améliorer sa lisibilité (encore une fois, on ne manque pas de place). De façon surprenante, ce label est affiché sur la version mobile du site : pourquoi le masquer sur la version desktop ?

De son côté, le fonctionnement du champ Localisation est assez pénible : la saisie d’une adresse déclenche l’ouverture d’un menu dans lequel il faudra choisir sa ville (et uniquement sa ville, la saisie d’une adresse plus précise ne fonctionne pas).

Mon compte formation - menu du champ "localisation" — Il y a cinq possibilités pour « Lille » : quelle réponse choisir ?

Problème : si je valide le formulaire en cliquant sur le bouton de recherche *sans* sélectionner un élément de ce menu, le site efface ma saisie et affiche le message d’erreur Veuillez choisir une localisation. Le choix des mots est révélateur : d’après lui je dois *choisir* une localisation, pas la *saisir*, or ce que l’on me demande dans un premier temps c’est bien de la *saisir*.

La suppression de ma saisie est particulièrement désagréable : mon texte Lille était parfaitement valide. Mais il y a pire : si je valide ma localisation en tapant sur la touche Entrée, le site affiche un message d’erreur général Une erreur s’est produite lors de la recherche. Veuillez réessayer ultérieurement.

C’est d’autant plus pénible que le champ Formation, métier, compétences, lui, ne fonctionne pas de cette manière. La saisie UX writer déclenche ici aussi l’ouverture d’un menu, mais je suis cette fois libre de ne pas tenir compte des propositions qui me sont faites (= si je laisse UX writer dans le champ, le site ne retournera pas d’erreur).

Je pourrais aussi évoquer la navigation au clavier qui ne fonctionne pas correctement (un mauvais point pour l’accessibilité, mais je ne suis pas spécialiste) ou l’énorme message d’avertissement du site qui revient à chaque chargement de la page mais je vais m’arrêter là. À vrai dire je n’avais pas prévu de faire une note sur ce formulaire : c’est l’utilisation de la page des résultats qui m’a vraiment énervé, pas ce petit bloc de recherche. J’en parlerai une prochaine fois.