Archives des traduction

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.

18 juillet 20117 mars 2019

Zara.fr : quelques soucis sur la page-liste (2/2)

La page-liste du site de Zara s’apparente beaucoup à la page des résultats du moteur de recherche dont j’ai parlé dans mon message précédent. On y retrouve donc le problème du bouton « page précédente » en plus d’un certain nombre d’éléments qui pourraient être améliorés. Tous ne présentent pas la même importance ; je commence donc par les plus anecdotiques, visibles sur cette première copie d’écran.

• La balise ALT des boutons permettant de faire défiler les pages est bien remplie… mais avec du texte en espagnol. Pas très sérieux, mais pas bien grave.
Note : c’est aussi le cas du logo du site.

• Plusieurs articles ont des dénominations étranges. Sur la première page de la catégorie « T-shirt », on trouve par exemple un débardeur intitulé « chemise texte ». Dans la catégorie « chemises », les 4 premiers produits sont des tops. Pas sûr que la cliente s’y retrouve.
Note : au lancement du site on trouvait des choses bien plus surprenantes. J’avais lu un message à ce sujet mais je ne le retrouve pas, avis aux connaisseurs…

• Certaines descriptions sont agrémentées d’un lien « + Couleurs » qui renvoie vers la fiche produit. Si l’information « cet article existe en plusieurs coloris » est intéressante pour la cliente, le libellé du lien n’est pas parfaitement adapté. Il l’aurait été s’il permettait par exemple l’ouverture d’un layer présentant l’ensemble des coloris disponibles.

• Un clic sur le lien « collection » du breadcrumb me renvoie… sur la catégorie de produits « trenchs et parkas ». Pas très logique. Par ailleurs, l’arborescence de la boutique « femme » pourrait être simplifiée : quel est l’intérêt de ce niveau « collection » puisqu’il est le seul élément de niveau 2 ?

• Lorsque je clique sur le lien « voir tout » tous les produits s’affichent. Pratique… jusqu’à ce que j’affine ma sélection : à chaque nouveau critère, je dois appuyer à nouveau sur le lien.

Je continue avec des problèmes plus gênants, qui concernent à une exception près le module d’affinage.

• La taille des boutons de navigation mériterait d’être revue, les 2 flèches sont vraiment trop petites.

• Lorsque je coche un critère (par exemple couleur > « noirs »), la page se rafraîchit et seuls les produits qui correspondent à ma recherche s’affichent. Parfait. Malheureusement, mes critères ne sont affichés nulle part ; le seul indice me permettant de savoir quels critères sont sélectionnés est le graissage du type de critère sélectionné (dans cet exemple, le mot couleur).
Cette absence est gênante pour deux raisons : il est impossible de connaître les critères d’affichage des produits de la page autrement qu’en ouvrant les menus les uns après les autres, et il est impossible de tous les supprimer d’un clic.

• L’utilisation de l’affinage par prix est assez obscure, et l’absence de curseur « prix minimal » déroute.

• Je clique sur « couleur » pour ouvrir le menu correspondant. Si je clique sur une zone vide du menu, celui-ci se referme. Mieux vaut bien viser… Par ailleurs, les intitulés des critères sont cliquables (si je clique sur le texte « noirs », la case se coche) : c’est un bon point, malheureusement peu mis en valeur puisque aucun élément de l’interface n’indique cette possibilité (au passage de la souris, l’intitulé ne change pas d’état – pas de soulignement, par exemple – et le curseur ne se transforme pas en « main »).

• Certaines sélections (même très simples, comme « T-shirt + jaune », « Chaussures + chaussures de sport ») ne retournent aucun produit.

• Plusieurs critères de taille sont rangés dans un ordre inexplicable : les pointures ne sont pas dans l’ordre, les ages (mélangés aux codes – XS, XL, L…) non plus. Pire, certaines tailles sont tout simplement incompréhensible (à quoi correspondent les nombres 19, 20, 21 ?) Par ailleurs, j’ai trouvé 2 fois le critère « Autres » (un critère fort utile au passage) dans les couleurs de la sous-catégorie « chaussures femme ».

• Comme je le disais plus haut, lorsque je coche un critère (par exemple couleur > « noirs »), la page se rafraîchit et seuls les produits qui correspondent à ma recherche s’affichent. Parfait… enfin presque, puisque les visuels des articles ne sont pas ceux de la couleur choisie, mais ceux « par défaut ». C’est d’autant plus dommage qu’apparemment tous les produits sont photographiés dans toutes les couleurs possibles (cf. fiche produit).

• La catégorie « chaussures » de la boutique femme regroupe plusieurs sous-catégories (« chaussures à talon », « sandales plates » etc.) Étrangement, la sous-catégorie « sandales à talons » ne présente pas le même nombre d’articles que la catégorie « chaussures » agrémentée du critère de sélection « sandales à talons ».
Note : le problème est le même avec les sous-catégories « sandales plates », « talons compensés »…

Bonus

Le premier niveau de l’arborescence du site propose les traditionnelles catégories « femme », « homme », « enfants »… ainsi qu’une catégorie au nom plus obscur, « TRF ». Un clic sur cet intitulé m’indique qu’il s’agit de produits féminins, mais ne m’en dit pas davantage sur la signification de l’acronyme.
Après avoir cherché un petit moment sur le site sans trouver de réponse, je m’en suis remis à Google : le premier résultat de la recherche est le site de la Table Ronde Française, le second une page de Wikipédia traitant d’un groupe de J-pop et le troisième un aéroport d’Oslo. Pas très convaincant. Je demande à plusieurs personnes de mon entourage, certaines travaillant dans la mode : pas de réponse non plus.
Alors d’accord, une recherche un peu plus poussée sur Google me donnera une réponse, mais quand même, ne serait-il pas intéressant d’en dire un peu plus ?
Et ici, quelqu’un connait-il la signification de TRF ?

Bilan

balises ALT mal remplies
libellé approximatif
niveau d’arborescence inutile
fonctionnalités à retravailler
sélections simples vides
affichage des articles dans la bonne couleur
taille des boutons de navigation
affichage des critères d’affinage
détails du layer d’affinage
critères mal rangés
variation du nombre d’articles sur des critères identiques