uxui - Page 25 sur 33 - Blog personnel de Charles Le Prévost. Expérience utilisateur, interface utilisateur et UX writing.

12 octobre 201119 février 2018

Bershka, un lookbook à améliorer

Je poursuis mon exploration du nouveau site e-commerce de Bershka (voir la note précédente). Je m’attarde cette fois sur le lookbook, accessible depuis le menu supérieur du site.

Un clic sur ce lien « Lookbook » me renvoie sur une page élégante, à l’aspect très épuré… mais au contenu difficilement déchiffrable. Les textes et pictogrammes affichés au dessus du visuel de fond manquent vraiment de lisibilité.

Les 3 liens du menu de gauche, aux intitulés pas franchement explicites (je suppose que « Bershka » = femme et que « BSK » = adolescente), sont en gris, ce qui ne me permet pas de distinguer la rubrique actuellement consultée. Je déduis du visuel qu’il s’agit de la partie « Homme ».

Je remarque 2 petites flèches en dessous du texte « Lookbook ». Lorsque je clique sur celle de droite, il ne se passe rien. Lorsque je clique sur celle de gauche, il ne se passe rien non plus… Ah si : il faut attendre quelques secondes pour que le contenu se charge. Je me trouve désormais sur le lookbook de septembre, mais apparemment plus dans la rubrique « homme ». J’ai été automatiquement redirigé vers une autre partie (la femme ou l’adolescente, difficile à dire).

J’utilise le bouton « page précédente » de mon navigateur pour revenir sur le lookbook d’octobre : je suis redirigé sur la page d’accueil du site. Il n’est donc pas possible de naviguer à travers le lookbook en utilisant les boutons de mon navigateur.

Je retourne sur la page de garde du lookbook et clique sur « BSK ».

L’utilisation d’un visuel principal sur fond blanc rend certains textes (blancs eux aussi) totalement invisibles ! Quelqu’un a-t-il consulté ce lookbook avant de le mettre en ligne ?

Note : ce problème est apparemment récurrent : on le retrouve dans les rubriques « BSK » et « Homme » du lookbook de septembre.

Je clique sur le lien « Bershka ».

Les éléments du menu, ici sur fond pastel, sont cette fois un peu plus lisibles.

Je m’attarde un instant sur la silhouette principale. Lorsque je passe mon curseur sur le visuel, le texte « voir l’information » (encore une traduction intéressante…) apparaît. Le lookbook permet donc d’accéder directement aux fiches produits ! C’est une très bonne chose, mais une fois encore, pourquoi ne pas mettre cette fonctionnalité plus en avant ?

Je clique sur la silhouette et un nouveau menu apparaît.

Si j’en crois la première ligne de ce nouveau menu, je me trouve sur le look 3. Étrange, je ne me souviens pas avoir consulté d’autres looks.

Je constate que le premier article que l’on me propose est une paire de chaussures. Le premier… Et le seul en réalité, puisque les petites flèches à gauche et à droite du visuel produit sont ici inactives (pire, elles ont l’air actives mais ne le sont pas). Je refais le test sur la silhouette suivante (intitulé « look 2 », bizarre) : heureusement, deux produits sont cette fois disponibles.

Ce test me permet de trouver un bug (Firefox 7, Safari 5) dans l’affichage des articles de ce petit menu :
• je vais sur le look 2 ;
• je clique sur « voir l’information » ;
• je clique sur la flèche droite pour afficher le second produit ;
• je retourne sur le look 3 en utilisant la flèche à gauche de la page ;
• je clique sur « voir l’information ».
À ce moment-là, plus aucun produit n’est affiché dans le petit menu.

Un dernier commentaire à propos du lien « afficher tout » situé en bas du menu de gauche : comme son nom l’indique, il permet au visiteur d’afficher l’ensemble des silhouettes du lookbook sur une seule page. Malheureusement, aucun lien « retour » n’est présent pour revenir à la page précédente. La fonctionnalité existe, mais elle est cachée : il faut passer son curseur dans les marges (à gauche ou à droite des silhouettes) pour voir apparaître le texte « Volver » (« retour » en espagnol).

Note : avec une résolution d’affichage de 1024 x 768 pixels, traditionnellement utilisée comme standard pour la création de sites internet, ces marges sont à peine visibles.

6 octobre 20114 mars 2019

Bershka a un site e-commerce… mais ne veut pas que ça se sache

On m’a indiqué il y a quelques jours que plusieurs enseignes d’Inditex (la maison mère de Zara) disposaient désormais d’un site marchand. J’ai jeté un œil à celui de Bershka.

La construction de la page d’accueil est très surprenante : le menu supérieur ne contient aucun lien permettant un accès direct aux produits du site. À la place des traditionnelles boutiques (femme, homme, enfant…) et/ou catégories de produits (pantalons, chaussures, accessoires…), on trouve une liste de mots assez obscurs pour le néophyte (« lookbook » je connais, « campagne »… peut-être les visuels d’une campagne d’affichage ? Quant à B-Scene, je sèche).

Je suppose qu’il s’agit d’un choix de l’équipe de production : présenter son site de façon « aspirationnelle » (pardon) plutôt que conventionnelle. Peut-être pour se distinguer, peut-être pour renforcer le côté « tendance » de la marque (je ne connais pas très bien l’enseigne)…

Ce choix a de fortes chances de perturber la cliente : celle-ci risque de passer plus de temps à chercher les produits qui l’intéressent, voire de quitter le site avant d’avoir trouvé quoi que ce soit. En terme d’ergonomie web, faire fi des conventions est rarement une bonne idée. Je note d’ailleurs que cette construction n’est pas la seule fantaisie du site (cf. l’emplacement du moteur de recherche).

Ce choix a de nombreuses conséquences sur le reste de la page d’accueil – et du site plus généralement. Le menu supérieur ne permet pas de comprendre que l’on se trouve sur un site e-commerce (la présence du panier aurait pu aider, malheureusement sa visibilité est bien trop faible ; quant à son libellé, c’est un exemple de traduction fantasque), l’équipe de production doit donc imaginer des moyens de renforcer le côté « marchand » de la boutique.

Tous les boutons du menu inférieur (en bleu ciel), qui contient les liens traditionnellement situés dans le menu supérieur (femme, homme…), se voient ainsi agrémentés de l’expression « Achetez maintenant ». Un menu « boutique online » (difficile à identifier comme tel) fait également son apparition en haut à droite de la page. Quant au carrousel principal, les liens qu’il contient ne renvoient pas vers des sélections de produits « Country life » ou « Dark attitude » comme on pourrait s’y attendre mais simplement vers les boutiques « femme », « homme » etc.

Je clique sur « Lookbook ». Je suis redirigé sur une page très élégante… dépourvue de menu inférieur. C’est à ce moment-là que l’on comprend mieux l’importance du menu « boutique online » en haut à droite : c’est ici le seul élément permettant d’accéder aux traditionnelles pages produits. Étrangement, ce menu n’utilise pas exactement les mêmes libellés que le menu inférieur de la page d’accueil (le terme « Bershka » remplace le terme « femme »).

Je clique sur « Hommes ». Je suis redirigé sur une page plus classique qui présente toutes les catégories de produits. Un menu latéral remplace cette fois le menu inférieur de la page d’accueil, mais ne contient pas tout à fait les mêmes éléments (le lien « Accésoires » – avec les fautes – se substitue au lien « dernière semaine »).

J’utilise le menu « boutique online » pour rejoindre la page « dernière semaine » : le menu de navigation principal ne se trouve désormais plus en bas ou à gauche, mais en haut !

Sur les 4 pages que j’ai visitées, j’ai donc trouvé 5 façons différentes d’accéder aux mêmes boutiques. 5 menus situés à des emplacements différents, c’est 5 fois plus de chances de perdre le visiteur (un raccourci un peu simpliste mais assez éloquent). L’utilisation d’un menu supérieur unique plus traditionnel permettrait à la cliente de se concentrer sur le contenu du site plutôt que sur sa structure.

Bonus

Quand je saisis l’adresse www.bershka.fr dans mon navigateur, je ne suis pas redirigé sur le site e-commerce français mais sur une page me permettant de sélectionner mon pays.

Vous connaissez beaucoup de gens qui tapent www.bershka.fr pour se rendre sur le site italien ? Plus pénible encore, après la page de choix du pays, Bershka me demande de sélectionner ma langue.

Il y a beaucoup d’anglophones en France ?

Note : si je vais sur google.fr et que je tape « Bershka », le premier lien me renvoie également sur ces 2 pages intermédiaires (la première fois, ensuite les choix sont gardés en mémoire). Ce n’est qu’en sélectionnant « pages en français » dans les paramètres du moteur de recherche que je pourrai éviter ces pages.

4 octobre 201119 février 2018

Lemonde.fr : une gestion des liens très confuse

Les articles des sites d’actualités sont fréquemment assortis de liens permettant aux visiteurs d’approfondir le sujet. Sur le site du Monde ces liens sont en bleus, ce qui les distingue bien du corps du texte noir. Ils passent au rouge et sont soulignés en rollover.

En revanche, ces liens ne changent pas de couleur lorsqu’ils ont déjà été visités. C’est un point régulièrement soulevé par certains experts : dans son livre « Site web : priorité à la simplicité », paru en 2006, Jakob Nielsen parle d’un « problème d’utilisabilité à fort impact ».

Dans les grandes lignes, ce comportement permet entre autres aux utilisateurs :
• de ne pas perdre de temps à consulter les mêmes liens de manière non intentionnelle ;
• de revisiter certains liens intéressants.
L’article détaillé se trouve ici. (1)

Sur le site du Monde, il y a plus gênant. En marge des liens bleus évoqués précédemment, on trouve de-ci de-là des « textes cliquables » (j’utilise cette expression pour les distinguer) qui se fondent dans le corps de l’article et qu’il est quasiment impossible de discerner. Sur l’image ci-dessous, les 2 paragraphes visibles ne contiennent pas 2 mais… 8 liens.
Note : l’article est actuellement consultable à cette adresse.

J’ai isolé 2 types de textes cliquables :
• les verbes employés à l’infinitif (« engager », « révoquer », « engager » à nouveau, « agir ») renvoient vers le site http://conjugaison.lemonde.fr ;

• certains noms propres (« François-Marie Banier », « Jean-René Farthouat ») redirigent le lecteur sur un genre de SERP (acronyme de Search Engine Result Page, page de résultat de recherche). Certains, mais pas tous ! (Le texte « Liliane Bettencourt » n’est pas un lien par exemple.) Par ailleurs, seule la première itération de ces noms propres est cliquable, les suivantes ne le sont pas.

Pour savoir que ces textes sont cliquables, il faut passer son curseur dessus : après une seconde de survol (sans bouger !), le pointeur de la souris se transforme en main et le texte se souligne. J’ai testé le site sur PC (Internet Explorer 8, Firefox 3.6) et Mac (Safari 5, Firefox 7), le comportement est le même partout.

Question : pourquoi traiter ces liens de cette manière ? Si on estime qu’ils présentent de l’intérêt pour le lecteur, pourquoi ne pas les mettre en valeur ? Si après réflexion on les considère comme peu appropriés, pourquoi ne pas les supprimer ?

Dans l’état actuel des choses, la plupart des visiteurs risquent de passer à côté.

(1) Je suis d’ailleurs assez ennuyé que mon propre site ne suive pas cette recommandation. Ma connaissance de WordPress est encore un peu limitée…