Design produit : adaptateur micro-USB, Apple ne joue pas le jeu

La commission européenne travaille depuis plusieurs années et en collaboration avec les principaux fabricants de téléphones mobiles sur un projet de chargeur universel. Cette démarche vise à simplifier la vie de l’utilisateur (un unique chargeur permettra de recharger tous les mobiles de la maison ; il sera également plus facile de trouver un chargeur de prêt en déplacement) et à diminuer la quantité de déchets électroniques générés par la filière (une fois le projet mis en place, plus besoin de fournir un chargeur avec chaque mobile vendu).

Ce chargeur universel s’appuie sur une connectique micro-USB, un format déjà existant et relativement répandu.

Apple ne propose pas de port micro-USB sur ses produits, mais un connecteur propriétaire aujourd’hui à la base de tout son écosystème. Ce connecteur permet de charger l’appareil et de le synchroniser (uniquement avec le logiciel iTunes d’Apple). On retrouve ce connecteur sur les innombrables accessoires et périphériques dédiés aux iAppareils (stations d’accueil, chaines Hi-Fi…)

Apple n’a pas l’intention de se séparer de son connecteur (qui lui rapporterait beaucoup d’argent). Pourtant, Apple fait partie des fabricants de téléphones mobiles qui collaborent avec la commission Européenne. Alors quoi ?

Alors c’est très simple : le chargeur universel au format micro-USB va se brancher sur le connecteur Apple… via un adaptateur.

Apple - adaptateur micro-USB

Simplifier la vie de l’utilisateur ? On oublie. En déplacement il faudra bien se souvenir de prendre son adaptateur. Pour une entreprise qui mise depuis toujours sur l’expérience utilisateur, c’est bien triste. Quant à la quantité de déchets électroniques, ce n’est pas en commercialisant de nouveaux produits qu’elle va diminuer. Apple aime pourtant beaucoup parler de ses pratiques en terme d’environnement (voir toute cette partie du site, ou les fiches produits des iMac, des MacBook Pro…)

Le plus fort, c’est que la commission européenne ne peut rien reprocher à Apple : il ne s’agit pas d’un projet de « connecteur universel de chargement » mais bien de « chargeur universel » (c’est même inscrit sur le site : « N.B.: L’accord prévoit l’utilisation éventuelle d’un adaptateur »). Les utilisateurs eux, sont un peu plus partagés.

C’était si compliqué que ça d’ajouter un connecteur micro-USB en plus du dock ?

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.

Bershka - lookbook homme

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).

Bershka - lookbook de septembre

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 ».

Bershka - lookbook 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 ».

Bershka - lookbook Bershka (femme)

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.

Bershka - lookbook Bershka (femme) avec menu

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).

Bershka - lookbook "afficher tout"

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.

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.

Bershka - des éléments qui rappellent qu'il s'agit d'un site e-commerce

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 »).

Bershka - Page Lookbook

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 »).

Bershka - Boutique homme

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 !

Bershka - Page dernière semaine

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.

Bershka - choix du 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.

Bershka - choix de la 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.