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 ? »

Google maps avant, Google maps après

La nouvelle version de Google Maps est en cours de déploiement ; il ne sera donc bientôt plus possible d’accéder à l’ancienne mouture. J’en profite pour faire une rapide comparaison.

Voici une copie d’écran de l’interface de saisie d’un itinéraire. À gauche, l’ancienne version.

Google Maps : avant, après

Plusieurs changements méritent quelques commentaires. Je commence en haut de l’écran.

• Moyen de transport

Google Maps avant, après : moyen de transport

Ancienne version : boutons de type on/off. Pictos explicites (en voiture, à pieds, à vélo.)

Nouvelle version : une succession de pictos sans bouton. Picto du milieu peu clair (bus, train, transports en commun ?), disparition du picto vélo. Trois teintes utilisées : bleu (sélectionné), gris clair et gris foncé, sans que l’on comprenne au premier coup d’œil la différence entre ces deux couleurs (en fait, le gris clair signifie non applicable). Picto ‘…’ stupide (il me rappelle un peu le picto sandwich qui fleurit un peu partout) et apparemment inutile : au survol deux pictos supplémentaires apparaissent, pourquoi donc les masquer puisqu’il y a suffisamment de place pour les afficher ?

• Zone de saisie

Google Maps avant, après : zone de saisie

AV : deux champs texte. Le texte saisi n’est pas très grand mais reste bien lisible. Le champ sélectionné est cerné de bleu avec une ombre interne. Un bouton à droite permet d’inverser les destinations. Deux liens en texte brut, de petite taille mais bien lisibles, permettent d’ajouter une destination et d’afficher les options. Un gros bouton bleu Itinéraire permet de lancer la recherche.

NV : aucun champ texte. Le texte saisi est plus grand mais moins lisible (la police est sans doute plus claire, ou plus fine et plus lissée, difficile à dire). Le « champ » sélectionné est souligné d’un liseret bleu très peu visible. Un picto ‘+’ moyennement explicite permet d’ajouter une destination ; le texte Options d’itinéraire, gris clair, est cliquable (alors que d’autres textes utilisant cette teinte ne le sont pas). Le bouton permettant de lancer la recherche a perdu son intitulé et se retrouve flanqué en haut à droite de la fenêtre, à côté du bouton Fermer. Note : sur cette copie d’écran ce bouton est bien visible puisqu’il est sur un fond blanc ; en réalité il est positionné par dessus la carte et devient donc moins visible.

• Itinéraires

Google Maps avant, après : itinéraires

AV : trois itinéraires proposés. Ils se présentent sous la même forme : nom de la route aligné à gauche, distance et durée alignés à droite, informations trafic en dessous. Le détail du premier itinéraire (mis en valeur par un fond bleu clair et des caractères gras très lisibles) est directement visible, en dessous des trois propositions. L’information Cet itinéraire comprend des péages est mise en avant à l’aide d’un fond jaune clair.

NV : trois itinéraires proposés. Ils se présentent sous la même forme : moyen de transport, nom de la route et distance alignés à gauche, durée alignée à droite. L’information mise en valeur (en gras) est le moyen de transport, ce qui permet désormais à Google de pousser son nouveau service de vente de billets (voir copie d’écran ci-dessous).

Google Maps : service de vente de billets d'avion

La lisibilité de l’ensemble des textes est problématique : la police plus fine et/ou plus lissée manque vraiment de contraste (gris clair sur fond blanc). Le détail de l’itinéraire principal n’est pas affiché : il faut désormais cliquer sur le lien Itinéraire complet pour ouvrir une nouvelle page et récupérer sa route. Un nouveau lien Aperçu permet d’afficher les étapes de l’itinéraire l’une après l’autre (sur l’ancienne version cette information était disponible au survol des étapes de l’itinéraire.)
L’information Cet itinéraire comprend des péages est illisible et de toute façon très peu mise en avant (un petit picto avertissement a remplacé le fond jaune). Les informations relatives au trafic et à la durée du trajet dans les conditions actuelles de circulation sont désormais privilégiées (textes bleus et verts).

Au final j’ai l’impression que Google donne désormais trop d’importance au look de son outil, au détriment de la lisibilité. Le cas des polices est révélateur : Google a remplacé l’Arial bien contrastée mais un peu old school par une Google font plus claire, plus douce, plus « sympa »… et beaucoup moins lisible. C’est un constat que l’on peut faire sur plusieurs outils et ce n’est pas une très bonne chose, surtout pour une entreprise qui a tant misé sur la facilité d’utilisation de ses produits.