Archives des expérience utilisateur - Page 7 sur 22

30 septembre 201313 février 2018

Foutez la paix à mon viewport !

Edit du 24 octobre : à tous ceux qui aiment les menus cachés (voir la fin de cette note), je suggère de jeter un œil au site journal-facebook.fr. Après avoir fermé l’insupportable modale « Votez pour ce blog », vous pourrez admirer non pas un, mais deux menus masqués… qui en plus sont cachés derrière deux pictos identiques !

Note du 30 septembre 2013

Je passe beaucoup de temps sur internet. Ces derniers temps, je tombe de plus en plus souvent sur des sites qui utilisent des menus persistants (ie qui restent affichés en permanence à l’écran.) Sur les sites en une page ils ont beaucoup de sens : remonter « manuellement » en haut de la page pour naviguer n’est pas très logique. Sur des sites plus traditionnels en revanche, ils m’ennuient particulièrement.

À peu près tous les utilisateurs aujourd’hui ont un moyen simple de faire défiler les pages : roulette, touchpad, doigt… Et je ne pense pas me tromper de beaucoup en ajoutant que tous les utilisateurs aujourd’hui savent s’en servir. Alors quel intérêt ?

Sur l’exemple ci-dessus, le menu supérieur occupe 15% de la surface de l’écran (en 1024 x 768). En tant qu’utilisateur, je préfère que ces 15% reviennent au contenu du site plutôt qu’à un élément que je peux retrouver facilement (le menu de navigation en haut de page n’est pas un élément particulièrement rare sur internet) et d’un seul coup de molette.

Plus amusant : sur le site de 01net, le menu persistant est situé en bas… et donne parfois l’impression que le site se termine. Chers décideurs, ça, ce sont des clics en moins sur les bannières de pub qui se trouvent en dessous !

Double dose sur cette page d’actu du site lesnumeriques : deux menus persistants viennent encadrer le contenu du site. La bande inférieure me rappelle les chaines d’information en continu : si l’actualité principale ne m’intéresse pas, le message déroulant en bas pourra peut-être m’attirer. Sauf que sur internet ça n’a pas tellement de sens : si l’actualité principale ne m’intéresse pas je vais voir ailleurs, je n’ai pas besoin d’attendre passivement la suite des informations.

Double dose sur ce site, avec deux menus qui se superposent en haut. Le second est dédié au partage de l’article (et bugge avec Safari, cf. texte « 298 partages ») : et si vous me laissiez lire l’article, avant de me proposer de le partager ?

Autre brillante idée chez Cocones : le menu persistant semi-opaque. Le menu est moins lisible, le contenu est moins lisible. Bien joué.

Chez Hardgraft, on a estimé qu’un menu persistant occupant 40% de l’espace était une mauvaise idée, alors on a choisi de l’afficher en permanence sans aucun background. Record du monde de lisibilité. (via @hteumeuleu)

Mon poste de travail dispose d’un grand écran. Ces menus persistants ne me posent donc pas trop de problème – ils m’énervent, c’est déjà beaucoup. Mais quid des netbook (ce n’est pas parce qu’il ne s’en vend plus beaucoup qu’il n’y en a plus), des tablettes en 1024 x 768, des mobiles (hors site adapté), des autres terminaux qui sont chaque jour plus nombreux ?

Chers décideurs, voici mon message : je viens voir le contenu de votre site. Pas le menu, le contenu. Et si vous me laissiez le consulter tranquillement ?

Bonus

Les menus persistants diminuent l’espace dédié au contenu, et c’est souvent une mauvaise idée. Cela ne veut pas dire qu’il faut supprimer totalement le menu de navigation !

Dans les deux cas ci-dessus je suis contraint d’ouvrir le menu à chaque fois que je change de page ! Très pratique, vraiment. Oh, et le menu principal n’est pas qu’un élément de navigation, il aide également le visiteur à comprendre de quoi traite le site. Dans ces deux cas, bon courage.

Je suppose que toutes ces histoires de menus persistants ou cachés sont des modes. J’espère qu’on passera rapidement à autre chose.

3 juillet 201315 février 2018

Le panier magique de Pixmania

Je cherche une housse pour protéger un barbecue. Je tape la référence dans Google, je jette un œil à quelques sites et je choisis de passer ma commande chez Pixmania. Fiche produit, page panier, parcours classique.

Si mon parcours est classique, la page panier, elle, me surprend un peu : elle est remplie de produits hétéroclites « à ne pas manquer », qui n’ont rien à voir avec l’article que je commande. Le panier lui-même n’occupe qu’une petite partie de la page, en haut à droite. Me proposer une Barbie ou un appareil photo numérique Hello Kitty alors que j’achète une housse de barbecue, drôle d’idée…
Je clique sur le bouton « passer ma commande ». Mon panier contient pour le moment un seul article à 28€.

Je vérifie mes adresses de livraison et de facturation, pas de souci. Les surprises commencent avec le choix du mode de livraison : les prix indiqués en rouge tiennent compte d’une réduction « VIPix » que je n’ai pas demandée. Je sais bien que cette réduction se paiera à un moment ou à un autre et j’aimerais donc me débarrasser de ce « truc VIPix » dont il est question, mais pour le moment impossible de faire quoi que ce soit. Je patiente, donc, et je clique sur le bouton « continuer ».

Un layer permettant de sélectionner un point relais s’affiche. Après une longue attente, la carte remplace le grand vide de la fenêtre : Viamichelin, vraiment ?! Pour être honnête je ne pensais pas que ce service pouvait s’intégrer à un site e-commerce. Une chose est sûre, il n’est absolument pas adapté à ce qu’on lui demande ici : les points relais sur la carte sont totalement invisibles. (Heureusement le zoom arrange un peu les choses.)
Je sélectionne un point relais dans la liste de gauche et clique sur le bouton « je choisis ce Relais Colis© ».

(Note : je supprime ici une étape « retour à la page précédente », le principe est un peu long à expliquer et pas très intéressant.)

Je me trouve maintenant devant le récapitulatif de ma commande. Magie de Pixmania : mon panier, qui 2 étapes plus tôt ne contenait qu’un article à 28€, contient désormais 3 articles dont le montant atteint 42,20€ — une augmentation de plus de 50% ! Bien, je vais donc me débarrasser des intrus.

Je commence par la première ligne, le « contrat achat tranquille ». Pour le supprimer, j’utilise un menu déroulant (pourquoi pas plutôt une case à décocher ?) Lorsque j’indique que je souhaite passer ma commande « sans contrat achat tranquille », un layer s’ouvre afin de m’expliquer tous les avantages de ce contrat.

Charmante attention : on m’impose ce contrat et c’est lorsque je le supprime que l’on m’explique de quoi il s’agit. Plus bas sur le layer, nouvelle délicate attention : on me propose ENCORE UNE FOIS d’y souscrire. Non mais sincèrement ?!

Je clique sur le bouton « continuer ».

Une mention a été ajoutée à côté du contrat achat tranquille : quelques avantages sont désormais indiqués directement sur la page. « Remboursement en cas de panne », pour une housse de barbecue ?

Bref, je me suis débarrassé du contrat. Nouvelle magie de Pixmania : j’ai supprimé un article, mais le montant total de ma commande a augmenté ! Il est désormais de 48€ : on approche des 100% d’augmentation, c’est impressionnant. L’explication est « simple » : sans le contrat achat tranquille, la carte VIPix (qui m’est imposée, je le rappelle) passe à 20€ au lieu de 10. Je supprime donc cette carte de mon panier, cette fois encore à l’aide d’un menu déroulant. « Je renonce à mes avantages VIPix », quelle belle formule…

La page se recharge et… j’accède enfin au véritable total de ma commande, soit 30,99€. Victoire !

Hé monsieur Pixmania, je sais que ça ne va pas fort chez vous en ce moment, mais pensez-vous vraiment que ce panier magique soit une bonne façon de plaire à vos clients ?

Bonus

J’ai reçu ce matin un mail m’indiquant l’envoi de ma commande. Le voici :

Belle erreur : il est inscrit que la commande sera livrée chez moi, et pas dans le point relais que j’ai indiqué.
Heureusement, le mail suivant précise que la livraison aura bien lieu dans un relais colis.

Il serait opportun de corriger ce mail automatique. Et pourquoi ne pas profiter de l’occasion pour supprimer le message répété deux fois dans le corps du mail ? Et ajouter une apostrophe au mot « lenvoi » ?

18 février 201315 février 2018

Pimkie, une page d’accueil… surprenante

Je découvre sur le site de Mathieu Fauveaux la nouvelle fiche produit du site Pimkie. Curieux, je vais jeter un œil au reste du site.

Voici une copie d’écran de la page d’accueil.

Autant le dire tout de suite, ma visite s’arrêtera là.

L’inconvénient d’une copie d’écran, c’est que l’on ne voit pas les animations. J’ajoute donc cette mention : le menu « LA COLLECTION », ouvert sur le screenshot ci-dessus, se ferme au bout de quelques secondes.

Je la refais, pour être le plus clair possible : le menu de navigation s’ouvre lorsque j’arrive sur le site et se ferme quelques instants plus tard.

Quel peut être le but de cette animation ? Malheureusement, je n’en vois qu’un seul : les clients ne trouvent pas immédiatement ce qu’ils sont venus chercher sur le site. À ce moment-là, pourquoi, pourquoi ne pas avoir modifié la barre de navigation en y insérant les catégories de produits ?!

L’équipe qui a conçu le site veut manifestement pousser des contenus : blog, jeu concours, looks du moment. Très bien, mais pas à cet endroit ! Les clients s’attendent à trouver les catégories de produits dans la barre de navigation principale, pourquoi y mettre autre chose ?! Point important : ce n’est pas parce que ces contenus figurent à un endroit « chaud » (la barre de navigation principale) qu’ils seront vus par le client.

De mémoire, la barre de navigation principale du site de Pimkie a toujours fonctionné de cette manière. Cette animation à l’ouverture du site me laisse penser que le problème posé par ce choix est connu, alors pourquoi ne pas le résoudre sérieusement plutôt que de chercher des solutions alternatives incongrues, lourdes et peu efficaces ? Cette animation est d’autant plus inutile qu’elle ne concerne que les visiteurs qui passent par la page d’accueil, autant dire certainement pas la majorité.

Bon, voilà pour le point qui m’a le plus marqué sur cette page d’accueil. Cela dit, ce n’est pas la seule chose qui me chagrine, loin de là. Le point suivant est un grand classique du moment : le carrousel.

Je fais court : les slides défilent automatiquement, beaucoup trop vite et en permanence (c’est tellement pénible que j’ai préféré fermer la fenêtre pour rédiger mon article) et le contrôle utilisateur est quasi-inexistant. Confrères concepteurs, je vous renvoie à ces deux articles sur le sujet : 5 big usability mistakes designers make on carousels et Ergonomie des carrousels : 10 principes à respecter. Oh, et à ce bref article de Jakob Nielsen : Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.

Quant au reste de la page, je fais plus court :

• les textes sont beaucoup trop petits. La barre de navigation principale utilise une police en équivalent 10px, même les liens du footer sont plus grands ! Encore une lecture intéressante (là aussi, on en trouve des milliers sur internet) : 16 pixels for body copy. Anything less is a costly mistake.

• Toujours au sujet de la barre de navigation : les items du menu sont trop proches et peu lisibles. L’ajout de caractères fantaisistes, très tendance bien sûr, n’arrange rien.

• Color forecast : c’est quoi ? Vous connaissez beaucoup de gens qui vont trouver le temps de flâner sur votre site et s’amuser à cliquer sur un lien (joli contraste, au passage) sans savoir ce qui se trouve derrière ?

• Le poids donné aux différents éléments du header me laisse perplexe : l’encart Facebook prend plus de place que les liens « mon compte » et « mon panier » réunis !

• Le faux champ texte d’inscription à la newsletter, en dessous du carrousel, est particulièrement énervant : lorsque je clique dedans pour insérer mon adresse e-mail, une fenêtre s’ouvre et m’impose de remplir un long formulaire (oui, 8 questions pour une simple inscription à la newsletter c’est TRÈS LONG). Pas du tout décourageant.

(Il y a même un bouton « Annuler » ! Ça faisait longtemps.)

• L’intégration des encarts sociaux (Facebook, Google+, Youtube, Twitter, n’en jetez plus !) est dégueulasse.

• Plus anecdotique : certaines majuscules ont des accents (NOUVEAUTÉS), d’autre pas (VIDEO, CONNECTES).

• Plus anecdotique mais amusant : on peut faire une recherche sans remplir le champ de recherche.

Bien. Comme je le disais plus haut, ma visite s’arrêtera là.