Les concepteurs de sites internet ne sont pas (tous) des utilisateurs comme les autres

Mon éminent confrère Rémi (@hteumeuleu) m’a contacté début novembre pour me faire part d’un projet de calendrier de l’avent destiné aux gens du web. Vingt-quatre personnes « de l’internet » ont participé en écrivant un article chacun. Le site est en ligne depuis le premier décembre à cette adresse : www.24joursdeweb.fr

L’article que j’ai rédigé à cette occasion se trouve ici : Les concepteurs de sites internet ne sont pas (tous) des utilisateurs comme les autres.

Si le contenu de ce site vous plaît, il vous est possible de faire un don à l’association l’Abri, partenaire du projet. Le paiement (en bas de la page) passe par Paypal, et il est possible de régler par simple carte bancaire.

J’ajoute que chaque contribution donne droit à un charmant petit cadeau (demandez à Marie Guillaumet !) Il serait dommage de passer à côté.

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.

Baromètre INRIA, un « nouveau monde numérique » peu clair (1/2)

Une amie m’a transmis hier via Twitter un lien intitulé « Les français et le nouveau monde du numérique ». Je me suis rendu sur le site et j’ai noté quelques points qui pourraient être améliorés.

Baromètre Inria - splashpage

Plusieurs choses me perturbent dès la première page.

• On y trouve de nombreux éléments peu hiérarchisés. Le titre « Les Français et le Nouveau Monde numérique » (avec toutes ces majuscules, oui oui) est heureusement mis en avant ; le reste du contenu ressemble à un assemblage hétérogène de logos et de blocs.

Son intérêt m’échappe. Je comprends qu’il soit important de mettre en avant les partenaires de l’opération, mais est-ce une bonne façon de faire ? Quelles informations le visiteur peut-il tirer de cette page, que je qualifierais de simple splashpage ? N’aurait-il pas été intéressant d’utiliser cet espace pour présenter le site et expliquer clairement de quoi il retourne ?

Note : Cette explication existe mais n’est pas vraiment mise en valeur (elle se cache derrière le lien « À propos du baromètre » situé dans le footer.)

Le gros bouton permettant de passer à la page suivante manque réellement de contraste. Ce problème est d’autant plus important qu’il s’agit du seul élément offrant l’accès au véritable contenu du site : il serait dommage de passer à côté ! Même souci pour son contenu : une flèche blanche dans un bouton gris clair, le tout sur un fond gris clair, est-ce vraiment une bonne idée ?

Globalement, cette entrée en matière manque un peu d’intérêt et de clarté.
Je clique sur le gros bouton gris pour accéder à la page suivante.

Baromètre Inria - choix

Deux possibilités : à gauche découvrir les résultats de l’enquête, à droite faire le test.

Ici aussi les boutons permettant d’accéder au contenu manquent de contraste. Par ailleurs, ils portent tous les deux le même libellé peu informatif « Commencer ». N’aurait-il pas été plus intéressant de rendre les légendes « Découvrez… » et « Faites le test » cliquables ?

Je constate également que le logo Inria a été modifié : sa taille a été réduite afin de permettre l’ajout d’éléments « sociaux » (bouton Twitter). Je ne sais pas si c’est à cet endroit que les visiteurs s’attendent à trouver ce type de contenu ; ce que je sais c’est qu’ils risquent de passer à côté.

Au sujet du choix des mots : le second bouton est intitulé « Et vous, quel voyageur êtes-vous ? » Je comprends l’image « nouveau monde numérique / voyageur », mais ce genre de figure de style n’a pas vraiment sa place ici. Remplacer « voyageur » par « internaute » me semble plus approprié.

Un dernier point pour finir : il n’est pas possible de revenir à la page précédente. Le bouton « page précédente » de mon navigateur me renvoie au site précédemment consulté.

Je préfère commencer par faire le test, je clique sur le second bouton.

Baromètre Inria - test

La structure de cette nouvelle page me surprend : la question se trouve à droite, les réponses à gauche. Les occidentaux lisent de gauche à droite, il me semble donc plus logique de commencer par la question plutôt que par les choix proposés comme c’est le cas ici. La question est fortement mise en valeur dans un bloc rouge, peut-être pour pallier cette présentation inversée.

Le formulaire utilise des éléments d’interface relookés (les cases à cocher, en rouge). C’est plus élégant… mais moins clair. Lorsque je clique sur l’une de ces cases, un carré rouge apparaît à l’intérieur pour me signaler que la case est cochée. Rouge sur fond rouge, encore un choix qui dégrade la lisibilité.

Toujours au sujet des choix : les libellés ne sont pas cliquables. Encore une fois ce n’est pas très grave, mais ça aurait amélioré l’expérience.

Un bouton gris en haut de la page me permet d’accéder aux résultats de l’enquête. Bon point : si je veux jeter un œil aux résultats et revenir au test ensuite, je n’aurai pas à répondre à nouveau aux questions auxquelles j’ai déjà répondu. Mauvais point : si je clique sur le logo Inria (cliquable ici alors qu’il ne l’était pas avant), je retourne à la splashpage et mes choix ne sont pas mémorisés. En d’autres termes : je devrai répondre à nouveau à toutes les questions auxquelles j’ai déjà répondu.

Note : le message d’erreur « Réponse obligatoire » pourrait être davantage mis en avant (il y a de la place). Mieux : la mention « Toutes les réponses sont obligatoires » (puisque c’est le cas) pourrait figurer sur le questionnaire.

Après avoir répondu aux 18 questions, je suis redirigé sur une page de résultat.

Baromètre Inria - résultat

Là encore, beaucoup de contenu peu hiérarchisé. Le titre « Vous êtes plutôt parmi » est bien visible, à l’inverse du nom de la catégorie « Les grands explorateurs », quasiment invisible. Il s’agit pourtant d’un élément très important, j’ai répondu à 18 questions pour en arriver là ! La page, très chargée en couleurs / blocs / textes / pictos / illustrations, manque vraiment de lisibilité.

Bonne idée : je peux connaître les autres profils d’internautes. Je note toutefois que si je clique sur un picto (dont il faut deviner la signification puisqu’il ne sont pas légendés), le texte et l’illustration changent… mais pas le titre « Vous êtes plutôt parmi ». Pas très cohérent.

Baromètre Inria - autre profil

Mauvaise idée : si je quitte cette page, il me sera impossible de revenir dessus autrement qu’en refaisant tout le test !

Je terminerai ma visite du site dans les prochains jours, avec deux points qui m’ont particulièrement ennuyé.

Bonus

En cliquant sur le menu du haut, j’ai fini par arriver sur cet écran.

Baromètre Inria - bug

Pour reproduire ce bug (Firefox & Safari), il faut se placer sur la page « Faire le test », cliquer 2 fois sur l’intitulé « Faire le test » puis une fois sur « Les résultats de l’enquête ». Rien de grave bien sûr, mais c’est la conséquence d’autres choix plus gênants.

Bilan

libellés peu clairs
structure de certaines pages
éléments de formulaires revus
bug
manque de hiérarchie
manque de lisibilité
pictos non légendés
splashpage
boutons gris très peu visibles
modification d’éléments d’interface au fil du site
bouton page précédente non fonctionnel
choix non mémorisés si retour à la splashpage
impossible de revenir sur la page du résultat du test