Quand de belles photos nuisent à l’expérience utilisateur

Je cherche un cadre pour mettre en valeur un poster que j’ai acheté. Je me rends sur le site de Leroy Merlin, dont j’ai apprécié il y a un moment la navigation à facettes permettant de trier les articles par dimensions. 

Voici la page liste des cadres :

Page liste des cadres sur leroymerlin.fr : haut de page

Je trouve l’énorme image d’illustration en haut de la page un peu déroutante ; c’est joli mais ce n’est pas ce que je viens chercher.

Je scrolle pour afficher la suite.

Le filtre me permettant d’afficher uniquement les articles dont les dimensions m’intéressent est toujours là, malheureusement il ne fonctionne pas correctement. Un bug particulièrement ennuyeux pour moi, qui visitait le site de Leroy Merlin justement pour ça. Mais ce n’est pas ce qui a motivé cette note. 

Si je scrolle un peu plus pour afficher les photos des cadres, je me retrouve devant ceci :

Page liste des cadres sur leroymerlin.fr : de belles images qui gênent la consultation des articles

Une page très élégante, tout à fait dans l’air du temps. On reconnait la présentation façon tuiles ; les amateurs de décoration d’intérieur remarqueront que les cadres sont présentés au milieu d’environnements relativement neutres afin de mettre en valeur le produit. C’est simple : même sur Pinterest la mise en page n’est pas aussi réussie !

Et… C’est un problème. L’ensemble est si joli qu’il en devient difficile de distinguer les articles eux-mêmes. Dit autrement : je ne suis pas en train de chercher des idées pour mon salon, je visite un site e-commerce à la recherche d’un cadre 30 x 40 cm noir à fine bordure. Ce sont deux situations complètement différentes. 

Voici la page liste des cadres du site d’IKEA

Page liste des cadres sur le site d'IKEA

Des photos détourées de cadres vides. Une page beaucoup plus sobre, presque triste, mais parfaitement fonctionnelle : je distingue d’un seul coup d’œil les modèles qui m’intéressent. Et je n’ai pas besoin de passer ma souris sur chaque image pour afficher le prix de base (ou d’appuyer sur le petit ‘+’ sur mobile, un picto inactif sur desktop d’ailleurs).

Et puis… à quoi bon construire une jolie page de ce genre pour la transformer quelques coups de molette plus tard en un ensemble chaotique de photos détourées mélangées à des mises en situation ?

Bouygues Telecom, le test d’éligibilité fantôme

Un proche se rend sur le site de Bouygues afin de tester son éligibilité à la fibre.

Bouygues Telecom - test d'éligibilité

Après avoir saisi un numéro de téléphone, le message suivant apparaît :

Bouygues Telecom - résultat du test d'éligibilité

Les clients Bouygues Telecom doivent apparemment faire le test depuis leur espace client. (Pourquoi ne pas l’avoir précisé plus tôt, mystère.) Mon ami perd un long moment à retrouver ses codes d’accès (c’est aussi ça, l’UX de la vraie vie), ça l’énerve, mais il finit par réussir à se connecter. Voici la page sur laquelle il est redirigé :

Bouygues Telecom - espace client

Il a apparemment été renvoyé sur la page d’accueil de son espace client. Problème : où se trouve le lien vers le test d’éligibilité ? Pourquoi n’est-il pas redirigé automatiquement vers cette page ? Mystère.

Voici l’intégralité des menus du site :

Bouygues Telecom - ensemble des menus de navigation

Il a cherché longtemps, nous avons cherché longtemps, nous n’avons pas trouvé.

Je ne me décourage pas : je me connecte sur une autre machine, je lance un autre navigateur, je me rends sur le site de Bouygues, j’accède à son espace client, et cette fois le miracle se produit :

Bouygues Telecom - menu principal en haute résolution

C’était pourtant simple : le test d’éligibilité n’est pas accessible sur les appareils qui ont une résolution inférieure à 1168px de large. Évident, non ?

Autrement dit : sur un écran basse résolution (un iPad par exemple) le burger menu qui s’affiche ne présente pas de lien « test d’éligibilité », alors que sur un écran haute résolution (une machine de type desktop) le lien est bien présent au sein du menu de la page.

Nous nous rendons ensuite sur la page du test pour en finir.

Bouygues Telecom - boucle infinie

Nous voilà revenus 15 minutes en arrière. Que dire ? Nous sommes coincés dans une boucle. En d’autres termes et pour faire court, il est tout simplement impossible de savoir si le logement de mon ami est éligible à la fibre. Bravo et merci, Bouygues Telecom !

Épilogue

Le lendemain, mon ami reçoit cet e-mail :

Bouygues Telecom - e-mail de prospection

On peut y lire le message suivant : Félicitation, vous êtes éligible à la Fibre !
Problème : pour en savoir plus, le bouton nous invite à retourner… dans notre espace client. Retour dans la boucle !

(Mon ami n’a pas remarqué qu’il s’agit d’un e-mail commercial envoyé par un partenaire marketing, autrement dit que son contenu n’a aucune valeur.)

Fatigué, il finira comme tous les gens qui peinent devant des sites internet mal conçus par contacter le service client par téléphone. Et par obtenir sa réponse. Mais aura-t-il encore envie de souscrire à un abonnement chez Bouygues Telecom après tout ce cirque ?

Foutez la paix à mon viewport !

Edit du 24 octobre : à tous ceux qui aiment les menus cachés (voir la fin de cette note), je suggère de jeter un œil au site journal-facebook.fr. Après avoir fermé l’insupportable modale « Votez pour ce blog », vous pourrez admirer non pas un, mais deux menus masqués… qui en plus sont cachés derrière deux pictos identiques !

Site internet de journal-facebook : deux menus cachés derrière deux pictos identiques

Note du 30 septembre 2013

Je passe beaucoup de temps sur internet. Ces derniers temps, je tombe de plus en plus souvent sur des sites qui utilisent des menus persistants (ie qui restent affichés en permanence à l’écran.) Sur les sites en une page ils ont beaucoup de sens : remonter « manuellement » en haut de la page pour naviguer n’est pas très logique. Sur des sites plus traditionnels en revanche, ils m’ennuient particulièrement.

À peu près tous les utilisateurs aujourd’hui ont un moyen simple de faire défiler les pages : roulette, touchpad, doigt… Et je ne pense pas me tromper de beaucoup en ajoutant que tous les utilisateurs aujourd’hui savent s’en servir. Alors quel intérêt ?

01 - Le menu persistant de sceneario

Sur l’exemple ci-dessus, le menu supérieur occupe 15% de la surface de l’écran (en 1024 x 768). En tant qu’utilisateur, je préfère que ces 15% reviennent au contenu du site plutôt qu’à un élément que je peux retrouver facilement (le menu de navigation en haut de page n’est pas un élément particulièrement rare sur internet) et d’un seul coup de molette.

02 - Le menu persistant de 01net

Plus amusant : sur le site de 01net, le menu persistant est situé en bas… et donne parfois l’impression que le site se termine. Chers décideurs, ça, ce sont des clics en moins sur les bannières de pub qui se trouvent en dessous !

03 - Le double menu persistant de lesnumeriques

Double dose sur cette page d’actu du site lesnumeriques : deux menus persistants viennent encadrer le contenu du site. La bande inférieure me rappelle les chaines d’information en continu : si l’actualité principale ne m’intéresse pas, le message déroulant en bas pourra peut-être m’attirer. Sauf que sur internet ça n’a pas tellement de sens : si l’actualité principale ne m’intéresse pas je vais voir ailleurs, je n’ai pas besoin d’attendre passivement la suite des informations.

04 - Le double menu persistant de dailygeekshow

Double dose sur ce site, avec deux menus qui se superposent en haut. Le second est dédié au partage de l’article (et bugge avec Safari, cf. texte « 298 partages ») : et si vous me laissiez lire l’article, avant de me proposer de le partager ?

05 - le menu persistant semi opaque de Cocones

Autre brillante idée chez Cocones : le menu persistant semi-opaque. Le menu est moins lisible, le contenu est moins lisible. Bien joué.

06 - le menu persistant sans background de Hardgraft

Chez Hardgraft, on a estimé qu’un menu persistant occupant 40% de l’espace était une mauvaise idée, alors on a choisi de l’afficher en permanence sans aucun background. Record du monde de lisibilité. (via @hteumeuleu)

Mon poste de travail dispose d’un grand écran. Ces menus persistants ne me posent donc pas trop de problème – ils m’énervent, c’est déjà beaucoup. Mais quid des netbook (ce n’est pas parce qu’il ne s’en vend plus beaucoup qu’il n’y en a plus), des tablettes en 1024 x 768, des mobiles (hors site adapté), des autres terminaux qui sont chaque jour plus nombreux ?

Chers décideurs, voici mon message : je viens voir le contenu de votre site. Pas le menu, le contenu. Et si vous me laissiez le consulter tranquillement ?

Bonus

Les menus persistants diminuent l’espace dédié au contenu, et c’est souvent une mauvaise idée. Cela ne veut pas dire qu’il faut supprimer totalement le menu de navigation !

07 - le menu caché de bienvillecapital

08 - le menu caché de modafamilia

Dans les deux cas ci-dessus je suis contraint d’ouvrir le menu à chaque fois que je change de page ! Très pratique, vraiment. Oh, et le menu principal n’est pas qu’un élément de navigation, il aide également le visiteur à comprendre de quoi traite le site. Dans ces deux cas, bon courage.

Je suppose que toutes ces histoires de menus persistants ou cachés sont des modes. J’espère qu’on passera rapidement à autre chose.