Application Météo-France, le jeu des devinettes

L’application Météo-France me permet d’évoquer rapidement un point important en conception d’interface : l’affordance, c’est-à-dire la capacité d’un élément à suggérer sa propre utilisation (plus d’informations sur Wikipedia).

Dans son livre Ergonomie Web : pour des sites web efficaces que j’ai rouvert pour l’occasion, Amélie Boucher évoque deux dimensions capitales à prendre en compte.

01. Optimiser l’affordance « vous pouvez me cliquer »

Voici la page d’accueil de l’application.

Application Météo-France - accueil

Question : qu’est-ce qui permet à l’utilisateur de savoir que le picto central est cliquable (disons interactif, puisqu’il s’agit d’une interface tactile) ? À mon avis, rien du tout. Pourtant de nombreuses informations se cachent derrière cette zone :

Application Météo-France - informations cachées

02. Optimiser l’affordance « vous pouvez interagir avec moi »

Seconde question : qu’est-ce qui permet à l’utilisateur de savoir que l’on peut faire défiler la page ? Cette fois encore, je ne vois pas. Pourtant la partie inférieure regorge d’informations :

Application Météo-France - page d'accueil complète

L’ancienne version de l’application avait déjà été largement commentée par le grand iergo ; je pense qu’il y a encore pas mal de travail à faire pour rendre cette dernière mouture plus facile à utiliser.

N.B. Pour l’anecdote, c’est ma fille de 3 ans qui m’a fait découvrir ces deux interactions, en tripotant mon téléphone lorsque j’utilisais l’application. Peut-être devrais-je la laisser utiliser mon smartphone plus souvent ?

La Grande Récré est une enseigne de MAGASINS, c’est compris ?

Je me rends sur le site de La Grande Récré afin de trouver des jouets à offrir pour Noël. Premier contact avec cette enseigne que je ne connais pas : ce layer géant.

La Grande Récré : layer d'accueil

Personnellement, il ne me donne pas envie d’aller voir plus loin. Il est rempli d’informations qui ne m’intéressent pas à ce stade de ma « visite » – peut-on vraiment parler de visite alors que je n’ai pas encore atteint la page d’accueil ? Des pictos, des photos, du texte à n’en plus finir… La Grande Récré préfère apparemment les visiteurs-lecteurs aux visiteurs-acheteurs.

Je creuse un peu pour comprendre comment les concepteurs du site en sont arrivés là. Pour découvrir ce qui les a motivés à créer cette fenêtre, il me suffit de lire le texte et – surtout – de compter le nombre d’occurrences du mot magasin : sauf erreur de ma part il est inscrit 7 fois sur ce layer !

La Grande Récré : 7 occurrences du mot magasin !

La Grande Récré est une enseigne de MAGASINS, c’est compris ?

Bref. J’entre mon code postal, et là… Il ne se passe rien.
J’attends : toujours rien.
Je m’ennuie, je clique en dehors du layer en espérant le faire disparaître : rien non plus.
Je clique à nouveau dans le champ de saisie : le code postal que j’ai tapé disparaît. Je l’entre une deuxième fois, j’essaie de valider avec la touche Enter, et… rien du tout.

La Grande Récré : code postal saisi

Je finis par comprendre : il faut cliquer sur le menu déroulant de droite après avoir saisi son code postal ! Ce menu déroulant présente donc deux erreurs :
• il est grisé en permanence, il n’est donc pas possible de comprendre qu’il est actif (problème d’affordance) ;
• il ne change pas d’état lorsque l’on saisit un code postal (aucun retour ne permet au visiteur de se rendre compte qu’il faut désormais interagir avec lui).

Oui, enfin ça, c’est quand le code postal que je saisis correspond à un magasin. Dans le cas contraire (mon cas, en l’occurrence), le menu déroulant continue d’indiquer « Sélectionner s’il vous plait » (joli libellé) et il ne se passe rien. En d’autres termes, si je ne trouve pas un code postal qui corresponde à un magasin, impossible de rentrer sur le site ! (*)

La Grande Récré : code postal saisi non reconnu

J’entre un code postal que je suppose valide (je ne prends pas de risque, je choisis 75000), je sélectionne le premier magasin de la liste et j’appuie sur le bouton. Après le rechargement de l’intégralité de la page (les mobiles apprécieront), l’écran suivant apparaît :

La Grande Récré : masque blanc

Le site est caché derrière un calque blanc légèrement transparent, et un bouton (?!) m’indique que « [mon] magasin s’affiche ici », c’est-à-dire dans une zone masquée par le calque blanc. Deux choses :
• Je viens de le choisir dans une liste déroulante, mon magasin, est-il vraiment nécessaire de me l’indiquer à nouveau ?
• Quand bien même cette information serait pertinente, est-ce vraiment un bon moyen de procéder ?

Au bout de quelques secondes (ou au clic), le voile blanc disparaît et je peux enfin accéder au site internet. Victoire !

Pour clore cette note, voici la page d’accueil du site :

La Grande Récré - page d'accueil du site

La copie d’écran a été faite mercredi 18 décembre. Le premier message visible sur la page, hors header, est le suivant : « Livraison non garantie pour le 24 décembre ». Il fallait oser ! À l’heure où tous les concurrents affichent des indications pour recevoir ses achats avant Noël, La Grande Récré préfère jouer la « sécurité ». Pour être honnête, j’ai rarement vu une chose pareille. En ce qui me concerne, j’ai passé commande chez Amazon et j’ai reçu mon colis le vendredi.

Je ne sais pas si un jour les enseignes « brick & mortar » prendront la mesure du retard qu’elles ont.

 

(*) Je suis mauvaise langue, il existe un moyen détourné de rentrer sur le site : il suffit d’appuyer sur le bouton Entrer dans votre magasin (choix de picto très intéressant, au passage) après avoir saisi un code postal. Sauf que…
• il n’y a aucun moyen de le savoir ;
• à la prochaine visite sur le site, le layer réapparaîtra.
Attention toutefois à ce que le code postal soit valide. Dans le cas contraire, le message d’erreur « Pas de magasin disponible pour ce code postal » s’affiche et le visiteur est à nouveau bloqué.

La Grande Récré : message d'erreur

Il est également possible que le layer réapparaisse sous une forme… différente. Ce doit être le traitement réservé aux gens qui testent un peu n’importe quoi.

La Grande Récré : layer en vrac

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.