Une bonne newsletter, ce n’est pas une affiche avec un lien

J’ai reçu il y a quelques jours une newsletter de mon fournisseur d’eau. L’idée est intéressante : la région est en alerte sécheresse depuis avril (je l’ignorais), des mesures de restriction d’eau ont été mises en place et cette newsletter permet de les diffuser. La réalisation de ce message n’est malheureusement pas vraiment à la hauteur.

Les ennuis commencent avant même son ouverture :

L'objet du mail

Une faute de frappe dès l’objet de la newsletter (Des mesures de restricition d’eau), ça manque de sérieux. Quant au message lui-même, le voici :

La newsletter lorsque les images sont masquées

Pas de texte alternatif… Pas de texte tout court en fait, la newsletter n’est composée que d’images qui ne sont par défaut pas affichées dans mon client mail. Ce contenu très limité me permet d’ailleurs de constater l’absence de lien permettant d’afficher la newsletter en ligne et surtout l’absence de lien de désabonnement. (Cela soulève un problème intéressant : j’ai refusé de recevoir des communications de mon fournisseur d’eau, pourquoi ai-je donc reçu ce message ? Pace qu’il est plus important que les autres ? Le gouvernement peut-il passer outre mon autorisation pour transmettre ses informations ?)

J’affiche les images, la newsletter apparaît. La voici :

La newsletter

La présentation des informations est relativement claire, les pictos agrémentent un contenu pas forcément très amusant ; visuellement la newsletter semble au niveau. Pourtant… Plusieurs textes sont peu lisibles (les commentaires des six pictos, les liens des réseaux sociaux en bas) voire carrément illisibles (le logo de la préfecture, le contenu de la carte), et surtout – je le répète parce que c’est important – tout ce contenu textuel est en image.

Dernière maladresse, peut-être la plus triste : tous les liens de la newsletter renvoient vers un seul et unique site. On aurait aimé par exemple
• un lien vers davantage d’informations (le contenu existe pourtant, voir ci-dessous)
• un lien qui renvoie directement vers l’arrêté restriction de l’irrigation agricole plutôt qu’un texte débrouillez-vous pour le trouver sur www.nord.gouv.fr
• un lien qui permette de voir la carte, de la comprendre, d’en voir d’autres
• un lien vers les gestes éco-citoyens dont il est question
• des liens vers les réseaux sociaux (les pictos Facebook, Twitter et Linkedin ne renvoient pas vers les sites concernés…)

Sans compter que le seul et unique lien de toute cette newsletter est celui-ci, c’est-à-dire qu’un clic n’importe où sur la news me renvoie sur cette page qui n’a à première vue aucun rapport avec le message :

La page d'accueil du site de la préfecture du Nord

Il y a pourtant bien un encart dédié à l’alerte sécheresse sur cette page, encart qui renvoie vers la rubrique appropriée, seulement il est plus bas dans la page et son look ne rappelle pas le contenu de la news.

Bref, il reste beaucoup de travail pour transformer cette affiche en newsletter de qualité. Enfin l’idée est bonne… et vient apparemment de la préfecture du Morbihan. Allez le Nord, un petit effort ?

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 ?