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 :

Mon compte formation - page de recherche

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.

Mon compte formation - messages d'erreur

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 ?

Mon compte formation - page de recherche sur mobile

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.

Mon compte formation - message d'erreur global

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).

Mon compte formation - menu du champ de recherche

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.

Le cauchemar Instagram partie 2 : pour les inscrits

J’évoquais il y a quelques jours les soucis rencontrés par les utilisateurs d’Instagram qui ne sont pas inscrits sur le site. Je me penche aujourd’hui sur le calvaire des inscrits.

Je commence par un problème classique et récurrent sur les réseaux sociaux : l’ordre des publications. Sur Instagram, l’ordre d’affichage des messages sur le flux est totalement anarchique. Sur cet exemple :
• le premier message a été publié il y a 23 heures
• le deuxième il y a 19 minutes
• le troisième il y a 1 jour

Instagram - ordre de publication des images dans le flux

Et la galère ne s’arrête pas là : le flux se réorganise régulièrement, c’est-à-dire que si je ferme mon navigateur et que je le rouvre dans quelques heures, l’ordre des messages aura changé. Même punition si je consulte l’app via mon mobile, d’ailleurs. Un vrai bonheur.

Deuxième gros problème d’interaction, lorsqu’une publication est ouverte cette fois, les flèches de navigation. J’en ai déjà parlé dans ma note précédente, mais les inscrits ont droit à un niveau de complexité supplémentaire.

Instagram - navigation entre les publications

Cette publication contient plusieurs images que l’on peut faire défiler avec l’invisible flèche que j’ai entourée de rouge (il y a aussi de tout petits points blancs en bas, qui ne sont tout simplement pas visibles sur un fond blanc, là on atteint le sommet de la moquerie). Problème, deux autres flèches (entourées de vert) sont présentes à l’écran, des flèches un-peu-moins-invisibles qui permettent de faire défiler les publications. On peut donc affirmer sans prendre beaucoup de risque que de nombreux utilisateurs se tromperont de flèches pour faire défiler les images de la publication.

Cerise sur le gâteau, changer de publication remet l’index à 1, c’est-à-dire que si vous consultiez l’image 12 d’un carrousel et que vous changez de publication par erreur, vous reprendrez à l’image 1. Pour la lecture de certains types de contenus (BD par exemple) ce comportement est particulièrement pénible.

Publier sur Instagram offre également son lot de galère. Premier grand plaisir : il est impossible de publier depuis un ordinateur. Pourquoi profiter du confort d’un grand écran, d’un clavier et d’une souris quand on peut se coller devant un écran minuscule et publier avec ses deux gros pouces ?

Au delà de cet aspect, je vais revenir sur un point qui me touche particulièrement : la qualité des images. Instagram compresse excessivement les images qu’on lui envoie. Parfois c’est peu visible, sur des photos complexes par exemple, mais dans d’autres cas…

Instagram - qualité des images

Sur ce zoom on peut vraiment apprécier la qualité de l’image :

Instagram - qualité des images (zoom)

Pourquoi proposer une bonne qualité d’image sur un réseau social basé sur l’image, après tout ? Et puisque l’on parle du contenu, j’en profite pour rappeler un basique : sur Instagram on publie aux dimensions d’Instagram. Pas question de publier des photos larges ou hautes, Instagram n’accepte que le format carré en page de garde. Ça ne vous plaît pas, allez voir ailleurs.

Il y a aussi des petits bugs, par ci par là. Dans les textes qui accompagnent les publications, on trouve parfois des points à la place des sauts de ligne. C’est vilain, ça doit être désagréable pour les gens qui utilisent un lecteur d’écran, mais c’est la seule solution pour éviter que tout le texte ne soit collé. Parfois Instagram publie les retours à la ligne, parfois non, c’est totalement anarchique. Et c’est comme ça depuis une éternité d’après ce que l’on m’a rapporté.

Instagram - bug

Et puisque je parle de ce minuscule espace réservé au texte, je me dois d’évoquer les commentaires. Je conçois que la conception d’une interface permettant de lire plus de 27000 commentaires soit très complexe, mais n’y a-t-il pas un tout petit peu mieux à faire que ça :

Instagram - gestion des commentaires

Une colonne de 300 x 350 pixels (sur un écran qui en compte 2560 x 1440, quel bel usage de mon matériel), dix commentaires affichés par défaut (dont seuls quatre maximum sont visibles !) et un bouton + pour en afficher dix supplémentaires ? Il n’y a pas grand chose de social, là.

Je termine avec un point qui me gêne plus que tout : sur Instagram, il n’est pas possible de mettre des liens. Autrement dit Instagram redéfinit le concept même de site internet en empêchant les utilisateurs de sortir de son site. Sur Instagram, seules les mentions d’utilisateurs (tu n’es pas utilisateur, tu n’existes pas) et les hashtags (au fonctionnement abscon) sont autorisés.

Allez, je ne suis pas tout à fait honnête : les utilisateurs ont droit à un lien, un seul et unique lien qui devra impérativement être positionné dans leur biographie. Cette restriction folle a permis l’émergence de sites comme linktree ou campsite, des « optimiseurs de biolink » (?!) dont le seul intérêt est de permettre aux utilisateurs d’Instagram de partager quelques liens supplémentaires.

Instagram - un unique lien dans la biographie

Oh, et si vous avez plus de 10000 personnes qui vous suivent, vous pouvez partager des liens via les stories. Mais c’est encore une autre histoire…

Le cauchemar Instagram partie 1 : pour les non-inscrits

Instagram compte plus d’un milliard d’utilisateurs. Un chiffre énorme… mais qui reste largement inférieur aux six milliards et demi de personnes qui ne l’utilisent pas.

Voici à quoi ressemble une page Instagram vue sur smartphone pour tous les gens qui n’ont pas de compte.

Instagram vu par un non-inscrit sur un smartphone

Un avertissement relatif à la collecte d’informations et aux cookies qu’il est impossible de refuser (ce n’est pas conforme au RGPD, mais quand on s’appelle Facebook – propriétaire d’Instagram, trop de gens l’ignorent encore – on s’en fiche probablement pas mal), et un second bandeau Passez sur l’app.

Une fois qu’on a masqué tout ça, on obtient ceci (je passe sur desktop pour améliorer la lisibilité) :

Instagram - page de garde du compte un_bon_chien

Je remarque plusieurs points problématiques plus ou moins importants. Le contraste du moteur de recherche est trop faible, par exemple. Mais le plus gênant ne se voit pas sur la copie d’écran : tous les contenus cliquables sont bloqués. Un clic sur
• le nombre de publications
• le nombre d’abonnés
• le nombre d’abonnements
• l’image de profil
• l’image en dessous
• le lien IDENTIFIÉ(E)
• … ou une publication (les photos en bas, probablement l’objet de la visite) fera apparaître la fenêtre suivante :

Instagram - modale d'inscription

Circulez, il n’y a rien à voir. Ou plutôt « Abonnez-vous, vous n’êtes pas sur internet ici, vous êtes chez nous et seuls les membres sont autorisés à en savoir plus ». (Cette idée de « ne pas être sur internet » est très importante, j’y reviendrai plus tard.)

Si je scrolle un peu pour voir le contenu de la page, une fenêtre quasiment identique apparait :

Instagram - modale d'inscription bloquante
Cette modale représente probablement ce que l’on peut faire de pire sur internet : une fois qu’elle est apparue, le site est littéralement figé. Il n’est pas possible de fermer cette fenêtre (contrairement à la précédente : la croix en haut à droite a disparu), il n’est plus possible de scroller, bref je me trouve devant un mur. Le bouton page précédente me fait quitter le site ; la seule possibilité pour revenir sur la page que je consultais est donc de rafraîchir la page.

Cela étant dit, il est tout de même possible de consulter le détail d’une publication si vous avez son lien direct. Comme ici par exemple :

Instagram - détail d'une publication

Là les choses deviennent plus complexes. Par exemple, seul un œil exercé verra que cette publication est une succession de sept images grâce aux microscopiques points en bas de l’image, et que l’on peut passer de l’une à l’autre via la minuscule flèche gris clair sur fond blanc. Mais si, c’est là :

Instagram - détail d'une publication (légendé)

J’apprécie également les pictos non légendés. Je veux bien admettre que le cœur et le phylactère soient compréhensibles ; le fanion, à la limite ; mais l’avion en papier pose problème : ici il permet de partager le contenu avec un tiers (via Facebook, Twitter etc.), alors qu’en haut de la page d’un utilisateur connecté le même picto renvoie vers les messages privés ! De toute façon, à quoi bon afficher tous ces pictos puisqu’ici encore, tous les clics (sauf l’avion en papier, bizarrement) renvoient vers la modale d’inscription au site…

Note : cliquer sur le nombre de J’aime fera s’afficher la modale bloquante. Impossible de savoir pourquoi celle-ci plutôt que l’autre.

Cela étant dit, je pense que ce sont les publications sous forme de vidéo qui me plaisent le plus. Là, on atteint vraiment le sommet de l’enfer.

Instagram - détail d'une publication en vidéo

Cette vidéo a un bouton lecture… et c’est tout. Pas de barre de temps (donc  impossible de se déplacer dans la vidéo… où même simplement de connaître sa durée totale), pas de contrôle du volume sonore, pas d’agrandissement de la fenêtre, rien qu’un bouton lecture.

Pire : si je consulte un autre onglet du navigateur pendant la lecture de la vidéo, cette dernière s’arrête et reprendra au début lorsque je retournerai sur l’onglet.

Bizarrement, certaines vidéos ont des commandes de lecture, comme ici par exemple :

Instagram - détail d'une publication en vidéo avec lecteur

Ça ne résout pas le problème du bloquage lorsque l’on va sur un autre onglet, mais au moins on a des commandes de lecture et l’affichage de la durée de la vidéo.

Je m’arrête là pour Instagram vu par un non-inscrit. Malheureusement il reste encore tant à dire… Je ne vous ai pas parlé des commentaires ? De la qualité des images ? De l’impossibilité de mettre des liens (la *base* d’internet en somme) ? Ce sera pour plus tard.