Vendre ses newsletters via le pire de l’UX sur monster.fr

Je me rends sur le site de monster.fr pour consulter les offres d’emploi. J’entre un mot-clé, un lieu, je valide et je suis redirigé vers les résultats de ma recherche.

Monster.fr - résultats de la recherche

Ce n’est pas cette page qui a motivé la rédaction de cette note, mais je m’y attarde tout de même quelques minutes.

Je me trouve sur un site d’emploi, je suis vraisemblablement à la recherche d’un poste, et la page des résultats m’en présente… deux. (Allez, trois si on compte le titre tout en bas de la page.) Bien sûr la résolution de ma copie d’écran est assez basse (c’est un équivalent au 1024 x 768, façon iPad), mais peu importe : l’espace qu’occupe les résultats de ma recherche reste particulièrement limité.

Que trouve-t-on autour ?

• Des publicités. L’emplacement du premier “résultat” de ma recherche, c’est-à-dire la zone la plus chaude de la page, est d’ailleurs occupé par une annonce pour un salon de recrutement. En bas à droite, on a même droit à une vidéo. Je devrais être heureux qu’elle ne se lance pas automatiquement, mais ce n’est qu’une petite consolation : il s’agit en réalité d’un carrousel de trois vidéos, qui tourne en permanence. Un vrai bonheur lorsque l’on essaie de se concentrer sur le contenu de la page.

• Un gros encart dédié à la réception d’offres via newsletter. Ce bloc occupe à peu près autant d’espace que les résultats de ma recherche… Il s’agit d’une fonctionnalité très pratique et j’imagine très appréciée des utilisateurs, mais je ne m’y trompe pas, elle “rapporte” surtout beaucoup à Monster.

• Un accès recruteur, qui lui aussi rapporte sûrement plus à Monster que les résultats de ma recherche.

Voilà pour la liste des éléments qui ressortent de cette page. Au milieu, on retrouve donc les résultats de ma recherche, ainsi qu’une colonne dédiée au filtrage. Ouf !

J’ajoute que malheureusement, le contenu de cette page est noyé dans un fond blanc omniprésent qui nuit à la lisibilité de l’ensemble. De nombreux textes manquent de contraste (pas facile de distinguer le nombre de résultats par exemple) et le visiteur risque d’avoir du mal à cerner les différents blocs qui composent les résultats.
Le problème est d’ailleurs amplifié sur un écran à la résolution supérieure.

Je clique sur le premier résultat.

Monster.fr - offre d'emploi

Sur cette page, je vais devoir faire quelques suppositions.
Je suppose que la taille du logo est une erreur.
Je suppose que le site est en cours de refonte, car les éléments qui composent la page n’ont plus rien à voir avec ceux de la page précédente : le header est différent, les polices, leurs tailles sont différentes bref en dehors du logo les pages n’ont rien à voir.

Je constate encore une fois la prépondérance de l’encart dédié à la réception d’offres via newsletter. Il s’agit du premier élément de la page, juste en dessous du header – sa visibilité semble clairement disproportionnée sur une page comme celle-ci.

Il y aurait encore beaucoup de choses à dire sur cette page, probablement plutôt ancienne, mais ce n’est pas non plus ce qui a motivé la rédaction de cette note.

Je décide de revenir à la page précédente pour consulter les autres résultats de ma recherche. Malheureusement, Monster ne compte pas me laisser faire.

Monster.fr - alerte du navigateur

« Et là, c’est le drame. »
Monster m’envoie un message d’alerte via le navigateur, qui me demande si je souhaite vraiment quitter cette page. Un message d’alerte ? Sérieusement ?!

Et que dit la petite ligne située sous le message ? « Intéressé par des offres similaires par e-mail ? Restez sur cette page. » Mais vous voulez bien arrêter de pousser vos newsletters et me laisser naviguer sur votre site ?!

Pour être tout à fait honnête je ne pensais pas que des sites sérieux (= pas du warez ou du porno) utilisaient encore ce genre de subtilités.

Bonus : l’affichage de cette alerte est systématique, quel que soit mon comportement. En d’autres termes, si je quitte le site voire si je ferme l’onglet de mon navigateur, j’y aurai également droit. Cerise sur le gâteau, cette foutue alerte a planté mon Firefox deux fois pendant mes tests.

J’ai envie de me faire du mal, je clique donc sur le bouton Rester sur la page. Le message d’alerte disparaît… et est remplacé par un layer, tout aussi inopportun mais beaucoup plus classique, malheureusement.

Monster.fr - abonnement à la newsletter

Je crois qu’il est inutile que je revienne sur le contenu du layer (un indice : il est question de newsletter). En revanche, un détail mérite que je m’attarde un peu : il est impossible de fermer cette fenêtre. Pas de croix ni de bouton fermer ; lorsque je clique en dehors du layer il ne se passe rien ; même résultat en appuyant sur la touche Escape de mon clavier.

C’est là que l’histoire devient presque comique. J’ai signalé ce problème sur Twitter il y a deux jours, et j’ai reçu une réponse le lendemain. La voici :

Conversation sur Twitter

Sur Chrome, il faut cliquer en haut à droite de la popup: la souris-flèche devient une main qui vous permet de fermer le layer ;)

(Au passage les copies d’écran ont été faites avec Safari, pas avec Chrome…)
Qu’est-ce que ça veut dire ? Tout simplement que le bouton de fermeture est bien présent en haut à droite de la fenêtre, mais qu’il est invisible. Et que Monster le sait. Et que Monster semble trouver ça normal.

En bref, la crème de l’expérience utilisateur en quelques clics.

Flipboard : une désinscription aux newsletters bien conçue, mais…

Hier j’ai décidé de ne plus recevoir les newsletters de Flipboard. Je jette un œil au dernier e-mail reçu, inspecte l’entête puis le pied de la news et trouve finalement un lien de bonne taille vers une page de désinscription. Son contraste pourrait être amélioré, mais rien de trop grave.

Newsletter de Flipboard : lien de désinscription

Après avoir cliqué sur le lien, je suis redirigé vers une page qui m’indique via un layer que mon désabonnement a bien été pris en compte.

Flipboard : layer de confirmation de désabonnement

L’utilisation d’un layer n’est pas forcément la meilleure idée qui soit en terme d’utilisabilité, mais rien de trop grave ici aussi.
Un message me propose ensuite de « visiter le gestionnaire des courriels pour nous dire quels genres de courriels vous voudriez voir dans votre boîte de réception. » Je clique sur le bouton, seul moyen de fermer le layer, et j’accède au gestionnaire.

Flipboard : gestionnaire de courriels

Je peux ici facilement me désabonner de chacune des news individuellement. Le contraste des liens pourrait être meilleur, le bouton de désinscription à toutes les news pourrait être plus visible, mais rien de trop grave une fois encore. J’ajoute que positionner ici les pictos relatifs aux réseaux sociaux sur lesquels Flipboard est présent me semble être une idée pertinente.

En un mot j’ai trouvé ce système de désabonnement plutôt bien conçu. Une seule chose me gêne, une chose que je n’ai pas évoquée pour le moment : comment se fait-il que je sois inscrit à toutes ces news alors que je ne l’ai pas demandé ? La réponse est tristement simple : comme beaucoup trop d’autres services, l’abonnement aux newsletters (et elles sont nombreuses ici !) est imposé lors de la création du compte. Il n’y a pas de case à cocher ni même de case à décocher, c’est imposé, point final — en tout cas sur la version mobile, je n’ai pas testé l’inscription au site depuis la nouvelle version desktop.

Le titre du gestionnaire de courriels est « Nous voulons seulement vous envoyer les courriels que vous aimez. » Il faudrait peut-être envisager d’ajouter « mais nous allons vous envoyer tous nos courriels, dans le doute, hein, vous savez ? »

L’importance du retour utilisateur (ou feedback direct)

J’ai effectué à l’instant un achat sur le site d’H&M. Sur la fiche produit, le manque de retour utilisateur m’a déconcerté.

l'importance du retour utilisateur - 01 : la fiche produit d'H&M

Je clique ici sur le (minuscule) lien guide des tailles. Voici ce qui s’affiche :

l'importance du retour utilisateur - 02 : affichage du guide des tailles

Manifestement ce layer est vide. J’attends une bonne dizaine de secondes, rien ne se passe. Dans le doute je le ferme puis le rouvre : cette fois, le contenu s’affiche convenablement.

l'importance du retour utilisateur - 03 : affichage OK du guide des tailles

Que s’est-il passé ? Je suppose que le contenu du layer ne s’est pas chargé assez vite. Le problème, c’est que le visiteur n’a aucun moyen de savoir ce qui se trame : pas de barre de chargement, de sablier, de message d’information, etc.

Au niveau de la photo de l’article, on retrouve le même type de comportement désagréable lors du chargement en arrière-plan du visuel “pleine page”.

Lorsque je clique sur une vignette de la colonne de gauche, le visuel s’affiche en grand sur mon écran. Problème : lorsque je clique sur une autre vignette, il ne se passe rien.

l'importance du retour utilisateur - 04 : zoom pleine page

Aucun indice ne me permet de savoir que le visuel se charge en fait en arrière-plan. C’est d’autant plus gênant ici qu’il ne se passe vraiment rien (dans le cas précédent l’ouverture du layer, même vide, représentait tout de même une réponse à mon action.)

Pour finir, même remarque lorsque je clique au centre du visuel de la fiche produit pour l’agrandir : dans un premier temps, le visuel est agrandi… mais dégradé.

l'importance du retour utilisateur - 05 : zoom produit

Aucun élément d’interface n’informe l’utilisateur de ce qui est en train de se passer – ici le chargement en arrière-plan du visuel de bonne qualité qui viendra remplacer l’image dégradée.

J’ai noté un problème similaire sur le site d’Asos, qui propose sur ses pages-listes une fonctionnalité d’aperçu. Lorsque je clique sur le bouton vue rapide, il ne se passe rien.

l'importance du retour utilisateur - 06 : Asos, vue rapide

Bien sûr l’aperçu s’affiche au bout de quelques instants, mais le problème n’est pas là : ce petit temps de latence est très désagréable pour l’utilisateur, qui se demande ce qui se passe, s’il a bien cliqué, etc. L’expérience est inutilement dégradée et manque de fluidité. À l’inverse, une réaction immédiate de l’interface rassure l’utilisateur.

Jean-Claude Grosjean en a fait un point essentiel de sa liste de critères ergonomiques : le feedback direct.

C’est l’art de tenir l’utilisateur, en temps réel, informé de ce qui se passe. Ce critère concerne les réponses du système consécutives aux actions des utilisateurs. Son absence est  source d’incompréhension, parfois déstabilisante selon les contextes. Sa présence est un fort élément de réassurance.

Plus d’informations et d’exemples sur cette page de son site Qualitystreet.