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 ?

Du bon usage des menus déroulants dans les FAQ

J’aide un client à télédéclarer des articles sur le site internet de la DGCCRF*. Nous remplissons différents formulaires puis bloquons sur une question dont nous ne comprenons pas bien l’énoncé : nous avons besoin de connaître précisément la différence entre un ingrédient actif et un ingrédient non actif.

Je tape ma requête dans Google. Coup de chance, je tombe dès la première page de résultats sur l’aperçu d’une page web qui semble répondre parfaitement à notre question.

Résultats de recherche de Google

Je clique sur le lien de la page (il s’agit en l’occurence de la FAQ du site de télédéclaration sur lequel nous travaillons). Le résultat est plutôt décevant.

La page FAQ du site de télédéclaration de la DGCCRF

Le texte que je cherche, qui était pourtant lisible sur l’aperçu de Google, est désormais caché dans cette liste de menus déroulants. Je vais donc devoir les ouvrir tous successivement pour trouver ma réponse.

Un menu ouvert de la FAQ

De nombreuses astuces permettent d’éviter ce problème : ne pas utiliser de menus déroulants bien sûr, mais aussi diviser la FAQ en plusieurs parties, utiliser des ancres, ajouter un moteur de recherche…

Je suis un utilisateur averti, je me débrouille autrement : j’affiche le code source de la page, je fais une recherche sur les mots qui m’intéressent et je trouve ma réponse rapidement (j’avais bien peu de chance de la trouver tout seul : elle était cachée derrière une question à propos de jus de pomme, un produit qui n’a rien à voir avec notre article). Mais pour un visiteur qui s’en sort, combien resteront perdus devant cette FAQ illisible ?

* qui a dit que le métier de designer était monotone ?

Les offres d’emploi cachées de Decathlon

Pour la deuxième fois en quelques mois je me rends sur le site de recrutement de Decathlon, et pour la deuxième fois en quelques mois je ne trouve pas les offres d’emploi. Voici la page d’accueil du site :

Page d'accueil du site de recrutement de Decathlon (taille moyenne)

Je fais court : les offres sont cachées derrière le petit picto en forme d’avion en papier, en haut à droite de l’écran. En d’autres termes, l’un des éléments essentiels du site de recrutement de Decathlon est caché derrière un tout petit picto incompréhensible et non légendé.

Je m’en amuse sur Twitter. Le community manager (je suppose) de Decathlon recrutement me répond rapidement (c’est rare, c’est sympa) : “normalement c’est écrit”. Alors en effet, sur le grand écran de cette personne, une légende accompagne le picto incompréhensible.

Page d'accueil du site de recrutement de Decathlon (grande taille)

Problème : sur tous les terminaux qui ne disposent pas d’un grand écran, les mobiles les tablettes et les écrans de portables par exemple, il n’y a pas de légende.

Page d'accueil du site de recrutement de Decathlon (tailles multiples avec libellé)

Je l’indique à mon interlocuteur.

À ce moment-là je peux tout entendre ; je crois être ouvert à n’importe quelle réponse. “Je vais en parler aux concepteurs” (l’URSAAF l’a fait, alors pourquoi pas ?), “On l’a déjà remonté mais c’est plus compliqué que ça en a l’air” (je comprends), “On a plus le budget” (je doute que mon interlocuteur soit au fait de ce genre de choses, mais après tout ?) Voire même une absence de réponse, après tout le community manager a probablement mieux à faire que de répondre à un designer ronchon qui s’intéresse aux offres de son entreprise.

Je ne m’attendais sincèrement pas à sa réponse : “Merci pour ton feedback Charles :). Sur tablette et mobile, c’est un choix d’optimisation car il n’y a pas assez de place.”

Pas assez de place ? Pas d’accord, il y a toute la place qu’il faut :

Page d'accueil du site de recrutement de Decathlon (tailles multiples)

Je vais aller plus loin parce que cette page d’accueil me chiffonne. Comme je le disais plus haut il s’agit d’un site dédié au recrutement. Pourquoi les offres d’emploi sont-elles si difficiles à trouver ? Et si on oubliait le picto incompréhensible associé à Instagram et Twitter et qu’on partait sur un bon vieux menu, un truc simple qui marche plutôt bien ?

Page d'accueil du site de recrutement de Decathlon avec menu mis à jour

(J’ai bricolé ça en deux minutes mais je pense qu’on saisit l’idée.)

J’ignore tout de ce site. Je ne sais pas comment il a été briefé, je ne sais pas comment il a été conçu, je ne connais pas son budget etc. Mais il y a une chose que je peux affirmer avec une bonne dose de certitude : de nombreuses personnes vont se rendre sur ce site pour chercher les offres d’emploi. Et si on allait encore plus loin dans cette voie ?

Page d'accueil du site de recrutement de Decathlon avec contenu mis à jour

(Ici aussi c’est un rough bricolé vite fait.)

Plutôt que de mettre l’accent sur les métiers de l’enseigne (qui sont de toute façon accessible dans le menu Nos métiers), j’ai mis l’accent sur le cœur du recrutement : les offres d’emploi. Comme on peut le trouver chez Leroy Merlin, Danone ou Engie – exemples choisis complètement au hasard de mes quelques minutes de pige.

Ce bricolage n’a pas d’autre but que d’ouvrir la discussion. Les concepteurs du site souhaitent manifestement mettre l’accent sur les métiers du groupe, mais est-ce également le point de vue du visiteur ?

Après bien sûr, on peut toujours trouver un moyen de rendre les offres d’emploi encore plus difficiles à trouver, comme chez McDonald’s par exemple…