21 juillet 2016 0

Application Météo-France, le jeu des devinettes

By in au delà du web, en vitesse, interface utilisateur, mobile

L’application Météo-France me permet d’évoquer rapidement un point important en conception d’interface : l’affordance, c’est-à-dire la capacité d’un élément à suggérer sa propre utilisation (plus d’informations sur Wikipedia).

Dans son livre Ergonomie Web : pour des sites web efficaces que j’ai rouvert pour l’occasion, Amélie Boucher évoque deux dimensions capitales à prendre en compte.

01. Optimiser l’affordance « vous pouvez me cliquer »

Voici la page d’accueil de l’application.

Application Météo-France - accueil

Question : qu’est-ce qui permet à l’utilisateur de savoir que le picto central est cliquable (disons interactif, puisqu’il s’agit d’une interface tactile) ? À mon avis, rien du tout. Pourtant de nombreuses informations se cachent derrière cette zone :

Application Météo-France - informations cachées

02. Optimiser l’affordance « vous pouvez interagir avec moi »

Seconde question : qu’est-ce qui permet à l’utilisateur de savoir que l’on peut faire défiler la page ? Cette fois encore, je ne vois pas. Pourtant la partie inférieure regorge d’informations :

Application Météo-France - page d'accueil complète

L’ancienne version de l’application avait déjà été largement commentée par le grand iergo ; je pense qu’il y a encore pas mal de travail à faire pour rendre cette dernière mouture plus facile à utiliser.

N.B. Pour l’anecdote, c’est ma fille de 3 ans qui m’a fait découvrir ces deux interactions, en tripotant mon téléphone lorsque j’utilisais l’application. Peut-être devrais-je la laisser utiliser mon smartphone plus souvent ?

0 commentaire

Tags:


28 juin 2016 0

E-commerçants, qu’attendez-vous pour soigner le contact client ?

By in e-commerce, ergonomie web, interface utilisateur

(Article initialement publié sur Medium.)

Cher e-commerçant,

Voilà des années que nous nous connaissons. J’apprécie la simplicité de notre relation : j’achète des trucs sur ton site, tu me les expédies. Il arrive malheureusement que tout ne se passe pas aussi simplement et que j’aie besoin de te contacter pour diverses raisons : demande d’informations, problème avec ma commande, etc. Aujourd’hui, je te demande de considérer mon point de vue. Comme il doit bien t’arriver à toi aussi de faire des achats sur internet, je pense que ces quelques remarques te parleront.

Ça ne m’amuse pas de te contacter.

Pas du tout même. J’ai des tas d’autres choses à faire ; discuter avec toi est une tâche qui va me prendre du temps, temps que je vais devoir soustraire à d’autres occupations parfois prosaïques j’en conviens mais autrement plus importantes comme par exemple donner à manger à mon enfant (peut-être dans l’assiette que j’ai achetée sur ton site !) Et comme ça ne m’amuse pas du tout de te contacter, j’apprécie que ce soit simple et rapide.

Voici deux exemples de ce qu’il ne faut pas faire.

 

01. Page de contact cachée


Aujourd’hui, je veux contacter le service client de La Redoute au sujet du remboursement d’une commande.

Cher e-commerçant, regarde la homepage du site de La Redoute. Elle est immense, elle regorge d’informations. Je n’ai pas le temps de regarder tout ça, et pourtant il faut bien que je m’y colle. Je scrute, je cherche un lien de contact : rien. Je suis un utilisateur “avancé”, je fais une recherche sur les mots contact, mail : rien. La Redoute n’a pas mis de lien de contact sur sa homepage. Quelle délicate attention !

Tu vas me dire “tu n’as qu’à passer un coup de fil, le numéro de téléphone est indiqué.” Oui mais voilà : ce numéro est surtaxé. Je suis déjà en train de perdre mon temps pour essayer de contacter le service client, je n’ai pas vraiment envie de perdre également mon argent.

Le lien de contact se trouve en fait au bas de mon espace client (vous n’êtes pas encore client ? Bon courage.*) Son libellé est on ne peut plus explicite : Besoin d’aide ? Contactez-nous par e-mail.

La Redoute - espace client

Je clique et… je tombe sur la FAQ du site.

La Redoute - FAQ

Cher e-commerçant, je comprends que La Redoute veuille écrémer. Je comprends que son service client n’ait pas envie d’être contacté par 36 monsieur X voulant comprendre pourquoi leurs commandes effectuées à 10:00 ne sont pas déjà chez eux à 11:00 (par exemple). Mais il y a une façon de le faire. La Redoute a choisi une façon épouvantable : non seulement je suis renvoyé sur une FAQ par un lien au libellé mensonger, mais en plus le véritable lien de contact n’est toujours pas en vue. En fait, il est encore bien loin !

Pour trouver le formulaire de contact, je dois :

• consulter cette FAQ, trouver la rubrique qui me concerne puis être redirigé sur… une nouvelle page (celle-ci par exemple) ;

• consulter une autre FAQ, trouver la rubrique qui me concerne une seconde fois ;

• prier le ciel pour que le paragraphe qui me concerne présente un lien contactez-nous ;

• si c’est le cas crier victoire, sinon ouvrir tous les menus jusqu’à trouver un lien.

Clairement, La Redoute fait tout pour décourager les clients qui voudraient contacter le service client autrement que par une ligne téléphonique surtaxée. Ça, cher e-commerçant, ce n’est pas bien.

 

02. Formulaire interminable et données personnelles


Je me rends sur le site de Moulinex pour obtenir une information sur un appareil. Cette information n’étant pas mentionnée sur la fiche produit de l’article, je me rends sur la page de contact.

Moulinex - page contact

Cher e-commerçant, peux-tu m’expliquer pourquoi je dois fournir toutes ces informations à Moulinex pour obtenir un renseignement ? Pourquoi dois-je donner mon adresse complète et mon numéro de téléphone pour connaître la largeur d’un presse-agrume ?

Sur le site d’IKEA c’est encore plus dingue : non seulement je dois fournir un tas d’informations personnelles, mais IKEA s’octroie carrément le droit de les conserver !

IKEA - page contact

Mais qu’est-ce que c’est que cette façon de traiter ses clients ?

Alors oui, je sais M. La Redoute : répondre aux mails des clients, c’est coûteux. Mais ce coût fait bien partie du prix de mes articles, non ? Je sais M. Moulinex, demander un tas d’informations personnelles décourage les demandes les plus inutiles et permet de se gaver de données intéressantes. Mais est-ce vraiment dans l’intérêt de votre client ?

Bien faire, ce n’est pas compliqué.

Prenons le site de Dyson. Une rubrique Aide est accessible en permanence via le menu supérieur. Elle contient un lien vers la page de contact.

Dyson - page contact

Je peux contacter Dyson :

• par téléphone : le numéro est gratuit, les horaires sont indiqués ;

• par mail : une simple adresse mail cliquable est fournie ;

• via les réseaux sociaux : les liens des comptes Facebook et Twitter sont affichés.

Si j’ai un problème avec mon aspirateur, je sais que je peux contacter le service client du fabricant en moins d’une minute. C’est simple, clair et efficace.

Alors, cher e-commerçant, qu’attends-tu pour en faire autant ?

 

* Dans le footer du site se trouve un lien Services La Redoute. Une fois sur cette page Services, tout en bas à gauche se trouve un lien Nous contacter (spoiler : ce libellé est mensonger lui aussi.) Lorsque l’on clique dessus, on arrive sur une nouvelle page… qui nous explique qu’il faut aller dans la FAQ (sans en donner le lien, après tout, il suffit de chercher un peu sur la page) et chercher la réponse à sa question soi-même. Que dire ?

La Redoute - fausse page contact

0 commentaire

Tags: , , , ,


10 mars 2016 0

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

By in ergonomie web

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.

0 commentaire

Tags: , , , , ,