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

Page d'accueil du site Lesbonsclics

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.

Page de connexion du site Lesbonsclics

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 :

Page d'accueil du site Lesbonsclics

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.

Web mobile, l’intérêt d’un petit test

Dans l’article Le web mobile et la performance que je lisais ce matin, Jean-Pierre Vincent présente une intéressante liste de techniques visant à améliorer la consultation de pages web en situation de mobilité. Il est question de polices, d’images, de cache, de responsive etc.

La principale conclusion de l’auteur concernant la création de pages optimisées tient en deux mots : « Mobile first ». Et le conseil le plus important (c’est facile, c’est celui qui est en gras) que fournit l’auteur tient lui en un seul mot : « testez ». Un conseil valable pour la performance du site bien entendu, mais aussi pour son design. Démonstration.

Peu de temps après la lecture de l’article, je discute avec un collègue des conférences Paris Web qui m’ont plues. Nous n’avons pas d’ordinateur à portée de main, du coup je sors mon mobile et je me rends sur le site de l’événement pour lui montrer de quoi il retourne.

Web mobile - homepage du site mobile de Parisweb

La homepage du site mobile

J’appuie ensuite sur Programme 2014 pour afficher la liste des conférences. Et là, il ne se passe rien. Je me dis que c’est normal, que la liste des conférences est une page très longue et donc probablement très lourde à charger, mais même après plusieurs secondes, aucun changement. Ce qui est assez surprenant d’ailleurs : rien ne se passe, mais la homepage est toujours affichée. D’habitude, un problème de chargement engendre un message d’erreur ou une page blanche, mais ici la page est toujours sous mes yeux.

Web mobile : homepage du site de Parisweb ?

Aucun changement

J’appuie une nouvelle fois sur le lien, même résultat, l’écran affiche toujours la même chose.

C’est seulement au troisième appui, et parce que je fixe l’écran (et que j’aperçois la barre de chargement) au lieu de continuer à discuter avec mon collègue, que je comprends le problème : la page Programme 2014 est bien sous mes yeux, c’est juste que la partie haute de la page est la même que sur la homepage !

Un simple défilement au doigt permet de révéler la suite du contenu :

Web mobile : programme du site de Parisweb

La suite de la page

Et ce problème est présent sur toutes les pages du site : lorsque j’appuie sur le lien Orateurs ou lorsque je fais une recherche, je retombe invariablement sur le même header de page.

Web mobile : résultats de recherche sur le site de Parisweb

La page des résultats de recherche

Ceci me ramène donc à la principale conclusion de l’article de Jean-Pierre Vincent : il faut absolument tester son site pour éviter ce genre de problème. Ici le contenu de la page est placé trop bas, ce qui empêche l’utilisateur de constater le changement de page. C’est un problème mineur, relativement simple à résoudre, mais qui peut vraiment gêner la consultation du site.

Note : bien entendu il est impossible de tester toutes les résolutions d’écran. Dans ce cas précis, mon smartphone (un iPhone 5) est tellement populaire qu’on peut considérer que tester sa résolution est opportun.

Ergonomie des sites web : retours d’un petit test utilisateur

J’ai assisté récemment au test* fortuit d’un site internet que je ne connaissais pas. Voici quelques retours de cette expérience.

Le testeur se rend sur le site de Who*s who, marque de prêt-à-porter haut de gamme. Il est accueilli par un grand visuel.

Analyse et test utilisateurs - Splashpage

Je l’ai dit, de nombreux autres aussi, les splashpages de ce genre sont clairement à déconseiller. Elles n’apportent rien et font perdre du temps à l’utilisateur.

Qu’en pense le testeur ? Échange :
– Wah, c’est très classe !
– Cette page ne te dérange pas ?
– Non, pas tellement. J’aime beaucoup la photo, le produit, le mannequin… Ça met dans l’ambiance, c’est agréable.

L’analyse déconseille… mais le visiteur apprécie ! Intéressant.

Le testeur clique sur « Skip intro » pour se rendre à la page suivante.

Analyse et test utilisateurs - Accueil

En revenant sur cette page aujourd’hui, je constate que nous sommes passés à côté d’un élément important lors du test : le son. À l’ouverture de la page, une musique se lance. J’y reviendrai dans une prochaine note.

Le son n’a pas dérangé le testeur puisqu’il était coupé. La présentation du site, en revanche, l’a un peu dérouté.

– C’est très élégant, la vidéo, les produits qui bougent… c’est classe, comme sur la page d’avant ! [Un temps] Par contre c’est compliqué, il y a des textes dans tous les sens, un peu partout sur la page, on a du mal à trouver ce qu’on cherche.

Sans surprise, ce menu très visuel plaît… une ou deux secondes, le temps de constater qu’il faut explorer la page en détail pour trouver ce que l’on cherche. Et ça, ça n’a rien de plaisant.

Le testeur cherche à visualiser les produits de la collection, il clique donc sur « Shop Online ». Une nouvelle fenêtre s’ouvre alors sur le site yoox.com.

Analyse et test utilisateurs - Yoox.com

Incompréhension totale.

– Je veux voir leur collection et on me renvoie sur un autre site que je ne connais même pas !

Pour ne rien arranger, après avoir cliqué sur la splashpage de Yoox pour accéder à… quelque chose, le site plante.

– Bon là ça charge depuis 2 minutes, je pense que c’est planté. Je vais revenir en arrière.

Le site s’est ouvert dans un nouvel onglet, le bouton « page précédente » ne fonctionne donc pas. Le testeur repassera donc par Google puis par la splashpage pour revenir sur la page souhaitée.

Le testeur trouve le bouton « Collection » et clique dessus.

Analyse et test utilisateurs - Collection

Le testeur clique immédiatement sur la première silhouette pour afficher le visuel en détail.

Analyse et test utilisateurs - Silhouette

Satisfait, le testeur clique ensuite plusieurs fois sur le bouton « Next » pour voir les silhouettes suivantes. Il clique à côté par mégarde : la silhouette se ferme et il revient à la page précédente. Gêné et surpris par ce comportement inattendu (« Je ne comprends pas ce qui s’est passé »), il n’aura cependant aucune difficulté à revenir sur la silhouette qu’il consultait.

Le testeur cherche ensuite à consulter la collection chaussures. Il cherche sur cette page, revient sur la page précédente, essaie de cliquer sur la chaussure animée, rien ne se passe.

– C’est dommage, ils n’ont pas mis leur collection chaussures en ligne, j’aurais bien aimé la voir.

Cette collection est pourtant bien présente sur le site. Le contraste trop faible du menu de la page « Collection » a malheureusement empêché le testeur d’y accéder. Le contraste… et peut-être aussi le choix du libellé : il faut cliquer sur « Accessories » pour trouver les chaussures.

J’indique le chemin au testeur.

– Ah oui, effectivement. C’est écrit en gros, mais en gris clair sur fond blanc je n’ai rien vu.

Il clique sur « Accessories » et est redirigé sur la page correspondante.

Analyse et test utilisateurs - Accessoires

Il en profite pour regarder les sacs. Il clique sur le premier produit.

Analyse et test utilisateurs - Détail accessoires 01

– C’est bizarre, le produit est en bas à droite, et il est coupé. Et puis je ne vois pas le bouton « Next » comme tout à l’heure, je ne peux pas aller au produit suivant.

Le site bugue complètement… mais ça ne décourage pas le testeur. Il clique au hasard sur la page et constate qu’il peut ainsi revenir à la page des accessoires. Il clique ensuite sur le deuxième produit pour l’afficher.

Analyse et test utilisateurs - Détail accessoires 02

– Ah, cette fois-ci j’ai le bouton « Prev ». C’est bien : je vais aller voir le tout dernier produit de la liste et je vais cliquer sur « Prev » pour voir les autres.

Astucieux et efficace !

Pour conclure cette note, je vais reprendre les points notables de ce bref test.

• Le test utilisateur et l’analyse sont deux méthodes complémentaires qui permettent d’inventorier un grand nombre de soucis potentiels ou avérés.

• Dans la majeure partie des cas, les résultats de ces deux méthodes iront dans le même sens (la complexité de la page d’accueil qui dégrade l’expérience utilisateur, par exemple).

• Il arrive que ce ne soit pas le cas (exemple : la splashpage).

• Lorsqu’un utilisateur veut vraiment quelque chose (naviguer parmi les accessoires du site), il est capable de chercher un bon moment et de trouver une astuce pour y arriver (naviguer à l’envers).

• Il lui arrive cependant d’être contraint à renoncer (la collection chaussures, introuvable sans aide).

• Avant même de faire appel à ces méthodes, il semble important de vérifier le bon fonctionnement du site (mise en page des pages accessoires)… et des sites afférents (bug de yoox.com).

 

* Il ne s’agissait pas d’un test utilisateur au sens « traditionnel » du terme, plutôt d’une découverte de site.