L’ergo-note : revue ergonomique du site Aubade.com

Nouvelle revue ergonomique consacrée au site e-Commerce Aubade.com. Cette fois encore l’ergo-note déshabille la marque et plus précisément sa boutique e-Commerce.

Interface échancrée, navigation dentelée, accompagnez l’ergo-note dans l’effeuillage de l’enseigne, et découvrez les dessous de son ergonomie, page après page…

[toc ordered_list= »false » wrapping= »left » heading_levels= »2,3,4,5″]

L’ergo-note : le site Aubade.com

1. Présentation de la société

Aubade est une marque française de lingerie féminine créée en 1958 par Claude Pasquier (merci Wikipedia !). Elle appartient désormais au groupe Calida (holding suisse).

Aubade est une entreprise en SAS au capital de 15 millions d’€ ; son chiffre d’affaires 2012 était de 51 millions d’euros,

Aubade s’est assortie une image « artistique » très forte auprès du public, image que l’on retrouve au niveau de sa communication et notamment par le biais de l’utilisation de photographies désaturées, élégantes et soignées, mettant en scène des corps de femme aux courbes stylisées et accompagnées d’accroches simples mais incisives. Des déclinaisons ont assuré l’enracinement de cette communication auprès des cibles concernées.

La marque s’est notamment fait remarquer grâce à ses aguichantes « leçons de séduction » principe narratif, ou story-telling, particulièrement valorisant en terme de communication et dont l’utilisation est assez rare (quand il fonctionne) pour être relevé.

Différents supports ont été utilisés, et Aubade a même su capitaliser sur l’image qu’elle a construite pour décliner ses leçons de séduction sous forme de livres et de calendrier, présentant notamment des rétrospectives des campagnes de publicité des années passées. Si le sujet s’y prête plutôt bien… Très peu de marques peuvent pour autant se permettre de mener de telles actions !

Aubade est une société qui maîtrise donc parfaitement sa communication et ne cesse d’innover en la matière. Il s’agit probablement de l’une des marques de lingerie les plus connues en France.

2. L’avis de l’ergo’note

Homepage

Aubade se démarque par l’obligation de passer par son site institutionnel pour pouvoir accéder à sa boutique en ligne.

Chose remarquable, lorsque l’on pointe le curseur de sa souris sur le mot « e-Boutique » (chose qui n’est déjà pas aisée sur une résolution 1920×1080), la forme de « main » apparaît bien, comme si il existait un élément cliquable, alors que dans les faits aucun renvoi n’est effectif… Il faut obligatoirement pointer son curseur vers l’un des drapeaux pour pouvoir accéder à l’un des sites marchands localisés dans la langue correspondante.

De plus, la zone de clic n’a pas été étendue au picto-panier, ce qui est regrettable, cela aurait pu soulager l’effort de l’internaute qui est obligé de « viser » juste (encore une fois : plus la résolution est grande, plus l’effort sera grand pour un design non responsive de ce type).

Notons enfin que Aubade est capable « d’habiller » sa page institutionnelle au gré des évènements :

Sans plus tarder, déshabillons la e-boutique d’Aubade :

Header

Aubade ayant fait le choix d’une double navigation verticale/horizontale, il n’y a pas du coup à proprement parler de « header ».

C’est très troublant, les codes actuels sont cassés car on retrouve un design en « 3 colonnes » qui n’est plus vraiment dans l’usage. On ne retrouve, de plus, aux niveaux des conventions ergonomiques élémentaires que le logo et 4 menus horizontaux. Même le panier est placé à un endroit discutable.

On notera :

• 4 liens horizontaux permettant de consulter tour à tour : une page sur la marque et sa philosophie, les désormais célébrissimes « leçons de séduction », la liste des boutiques en France et à l’international et le catalogue à consulter en ligne ou à télécharger au format PDF.

Pourquoi ne pas illustrer ces fameuses « leçons de séduction » dès la homepage, elles sont connues et seraient donc facilement identifiées (et cliquées) ? Mystère…

• le choix du pays sous forme de menu déroulant est mal avisé (un clic inutile de plus), surtout compte tenu du faible nombre de pays (4 dans le cas présent). De plus, Aubade confond pays et langue (cas de la Belgique, par exemple) puisque l’on reste sur une page francophone en basculant sur ce pays, alors que la Belgique comprend 3 langues officielles, dont 2 largement majoritaires. On néglige donc ici près de la moitié de sa population ! (La problématique de l’internationalisation prend d’ailleurs une place croissante dans les différentes réflexions qui peuvent nourrir l’ergo-note et fera à priori d’ici peu de temps l’objet d’un article à part entière… A suivre donc !)

• le moteur de recherche est trop petit et à l’opposé du principal point d’entrée visuel de l’utilisateur – 95% des utilisateurs commencent par regarder en haut à gauche d’une page. Ce dernier est particulièrement pauvre et banal, on n’y retrouve ni saisie dynamique, ni corrections orthographique, pas de preview des articles en cours de frappe, pas non plus de mémorisation des recherches antérieures de l’utilisateur, etc…

C’est pourtant là, le minimum syndical du moteur de recherche…

• même symptôme, même diagnostic pour les liens « compte client », « dreamlist », « shopping bag » et « paiement » : trop petits, peu intuitifs et une répétition inutile pour le « shopping bag » dont il est fait mention 2 fois. Le lien « Paiement » est quant à lui peu explicite, on pourrait penser arriver sur une page nous décrivant les différents moyens de paiement acceptés, et il s’agit en fait de valider son panier et de procéder au paiement (entrée dans le checkout) ; si le panier est vide, ce lien emmènera vers le panier également…

3 liens vers le panier à quelques pixels d’intervalles, ça fait peut-être un peu beaucoup, non ?

Bref, tout est globalement trop petit, réparti un peu partout dans l’espace (à gauche, à droite, en haut…) sans qu’il semble possible d’en extraire une quelconque logique relative à la hiérarchisation de l’information, et forçant donc l’utilisateur à faire des efforts pour passer d’un item à un autre. Il n’y a quasiment aucun effet « mouse-over » qui permettrait à l’utilisateur de mieux appréhender l’environnement dans lequel il se trouve ainsi que les différentes fonctionnalités du site, lui indiquant concrètement ce qui est cliquable ou non.

Ce qui est inexcusable, ce sont des termes en anglais sur une boutique « France » pour une marque 100% française. L’idée n’est pas ici de venir grossir la coalition des journalistes sportifs de France télévision qui milite pour le retour du surf des neiges, si encore il était question d’anglicismes passés dans le langage courant, mais je ne suis pas du tout convaincu que le terme « dreamlist » soit clairement évocateur pour la cliente lambda de Aubade ; au même titre d’ailleurs que la « Lettre Audade » mais suivant la rhétorique inverse…

Quant à « shopping bag », si sa compréhension (notamment grâce au picto – voir par ailleurs publication relative : « Un bon pictogramme = une bonne ressource« ) sera plus aisée, on peut quand même se demander où se trouve la valeur ajoutée à utiliser deux mots anglais là où l’intitulé « Panier » est devenu le standard du e-Commerce francophone et qu’il a (pour une fois !!!) l’avantage d’être plus court.

Navigation

Elle est constituée de 5 catégories principales parmi lesquelles les « Collections femme » et « Collections homme » se détachent plus nettement, comprenant respectivement 8 sous-catégories et 1 sous-catégorie.

D’emblée, on notera que le déséquilibre est patent, et que par conséquent le pluriel de « Collections homme » est superflu.

Les 3 autres catégories principales sont des éléments « d’aide » relatifs au port de la lingerie, au choix de la taille, et à l’inscription/désinscription à la newsletter via un lien sobrement intitulé « Lettre aubade », ce qui n’est pas forcément très explicite…

Corps

3 éléments visuels accompagnés d’un rédactionnel court (3 lignes) et présentant les « Nouveauté » (au singulier), « Coup de Coeur » et « Rien que pour vous ».

On retrouve donc ici au niveau du corps de page, les nouveaux produits, les produits phares, et une incitation à l’achat sous forme de cadeau. La précision « *dans la limite des stocks disponibles » pour le-dit cadeau particulièrement « cheap ». A peu de chose près, on se croirait sur le bon de commande papier d’un VPCiste…

Autre fait relativement incompréhensible, la présence, à ce niveau, de l’information selon laquelle les frais de port sont offerts à partir de 120€ d’achat. Cela gagnerait à plutôt être mentionné au niveau du header.

D’autant que, étant donné la gamme de prix d’Aubade, il ne laisse guère de doute que cette somme sera rapidement/facilement atteinte. Il semblerait dès lors particulièrement judicieux d’en faire sinon un argument de vente à part entière (pas forcément pertinent compte tenu du positionnement de la marque) au moins un élément de conversion du type « frais de port gratuit pour toute commande », ce qui semble bien plus attrayant (web)marketing-ment parlant…

On peut constater que la page ne comprend aucun scroll, et cela de façon probablement délibérée. La question du « fold » ne se pose donc pas pour Aubade.

Profitons-en pour rappeler que l’affirmation selon laquelle « les utilisateurs ne scrollent pas » est l’un des mythes ergonomiques les plus répandus sur le web ; les utilisateurs scrolleront si vous leur donnez matière à le faire, et d’autant plus si vous maîtrisez votre « fold » afin de leur indiquer visuellement que du contenu (intéressant, oserais-je souligner…) est encore disponible sous la ligne de flottaison.

Footer

Le footer revient dans les conventions habituelles de l’ergonomie web. C’est toujours trop petit, mais c’était déjà plus intuitif.

La présence de 3 langues différentes (Français, English, Deutsch) pour la boutique « France » est à nouveau incompréhensible, pour ne pas dire, illogique. Comble de l’ironie, cette fonctionnalité est absente des pages des autres pays, alors même qu’elle se serait pour le coup avérée des plus pertinentes au niveau de la boutique BE.

Autre problématique du même acabit concernant les icônes relatives aux moyens de paiement qui favorisent clairement le principe de rassurance sur les boutique UK et DE, mais pas sur les boutiques FR et BE puisqu’ils y sont absents ! L’ergo-note y vois alors 1 explication : en France, on à pas besoin d’être rassuré (on est plusieurs à être perplexe je crois…)

Concernant les autres liens du footer :

• les CGV : elles sont illisibles notamment à cause du manque de contraste entre la couleur de la police et celle du background. Des raccourcis vers les différents points importants (commande, livraison, paiement…) auraient été bien utiles. On pourra remarquer l’absence complète de CGU (Conditions Générales d’Utilisation) alors même que l’on peut être utilisateur d’un site e-Commerce sans en être toutefois client et/ou acheteur. Le e-Commerçant est tout de même engagé sur le respect de la confidentialité des données personnelles qui pourront lui être fournies (adresse, téléphone…) via la création d’un éventuel compte-client, et celui-ci serait bien inspiré d’expliciter le périmètre de sa responsabilité entre autre sur ce point via des CGU (prenant soin de les distinguer autant que possible des CGV). Le dernier article des CGV (16.2) est une clause abusive : en commerce B2C, le commerçant n’a pas le droit de décréter la compétence territoriale de tel ou tel Tribunal. Le choix du Tribunal est à la discrétion du consommateur. Il n’y a qu’en B2B que cette clause est envisageable.

Carton rouge au département juridique d’Aubade.

• Livraison et retour : Il est appréciable d’avoir explicité les conditions de livraison et de retour. Il aurait été plus utile de les inclure aux CGV, quitte à créer un lien direct avec une ancre sur cette partie spécifique.

• Contact : pas de formulaire pour contacter Aubade, pas non plus de numéro de téléphone… Ou comment ne pas anticiper un bad buzz…

• FAQ : cette partie regroupe à la fois des informations vu dans les précédents liens, mais également un complément sur d’autres non-négligeables. Pour rappel, si l’un de vos utilisateurs visite votre FAQ, c’est à priori ici la preuve que l’ergonomie de votre site est encore perfectible. Dans un monde idéal, vos pages « FAQ, Plan du site, Aide » ne doivent pas être consultées (ce qui ne veut pas dire qu’elles ne doivent pas exister). L’idée étant à peu de chose près celle d’une notice, dans laquelle on se plonge quand le problème survient…

Votre site doit être IN-TUI-TIF ! Si vous détectez des clics en nombre sur ces pages via vos Analytics, c’est alors que la navigation n’est pas assez fluide et qu’il est peut-être temps de remettre en question la qualité de celle-ci…

• Mentions légales : toujours ce problème de lisibilité, avec des informations copiées/collées de façon assez désorganisées. On nous parle d’un enregistrement à la CNIL sans faire figurer le numéro qui s’y rapporte, puis c’est seulement 4 ou 5 paragraphes plus bas qu’on retrouvera la même information avec cette fois, enfin, le dit numéro. L’enregistrement à la CNIL (laquelle délivre en récépissé le fameux numéro d’enregistrement) n’est pas facultatif, mais bel et bien obligatoire pour un site e-Commerce. C’est dit…

Performances

Le site s’est chargé en 865ms. C’est absolument parfait.

Le poids total compressé de la page est de 250Ko pour 34 requêtes, ce qui est excellent. Le poids compressé du document est de 7ko, rien à redire…

La performance est donc au rendez-vous !

Responsive

Aubade a échoué au test Responsive Web Design, et le site ne possède pas de version « mobile ».

Le footer est d’ailleurs sous le fold à partir de la résolution 1366×768 (à noter que la plupart des ordinateurs portables avec écran 13’’ sont en 1366 de résolution), ce qui est passablement déplorable si le but du design actuel du site était justement d’éviter le scroll…

Page Catégorie

On trouve sur la page catégorie les quelques éléments suivants :

• Tendances de la collection : une description succincte

• Coloris : si j’admets ne pas forcément faire partie du coeur de cible d’Aubade, j’aimerais réellement avoir le détail, sinon l’avis des potentiels lectrices de l’ergo-note – avis donc au « fashonistas » qui pourront dans leurs commentaires m’indiquer les correspondances des coloris « Ginger » et « Estampe » (entre autres) qui s’avèrent à priori pour une très large partie de l’audience aussi évocateur qu’un code couleur hexadécimal.

• Conseils d’entretien : des pictogrammes universels (ou presque…)

• Carrousel produits : présentation des produits de la collection sous forme de slider que l’on peut gérer manuellement, avec le nom de chaque produit, sa référence et son prix ; ce dernier étant précédé de la mention « à partir de », mention qui ne semble pas varier malgré la sélection de différentes caractéristiques…

Fiche Produit

La fiche produit ressemble trait pour trait à la page catégorie, ce qui en soi pose déjà un problème de similarité (voir : Théories de la Gestalt).

Et chose frustrante, je n’ai aucun moyen de savoir au niveau de quelle collection je me situe une fois sur la page produit. Force est d’avouer qu’après un moment passé à surfer sur le site d’Aubade, je ne savais plus vraiment où j’en étais…

D’autant qu’aucun fil d’Ariane n’est là pour permettre à l’utilisateur de se situer !!!

Des vignettes miniatures permettent d’accéder aux différentes « vues » du produit.
Malheureusement, la photo active n’est pas clairement mise en avant, et il n’y a là-encore aucun effet « mouse-over » permettant de guider l’utilisateur vers ce qui est cliquable ou ce qui ne l’est pas…

Les couleurs sont cependant désormais illustrées par un aperçu et la mention du modèle sélectionné, ce qui est un très bon point, quand bien même mon interrogation sur les correspondances colorimétriques et surtout ce qu’elles évoquent, demeure…

Il est regrettable de laisser envisager le choix d’une couleur dans le champ déroulant alors qu’une seule existe ; encore un élément de frustration, inutile, et facilement supprimable !

Le bouton « Ajouter au shopping-bag » est pour sa part :

• trop petit,
• trop peu visible (contraste…)
• et son intitulé est discutable (voir plus haut)

Enfin on retrouve les options relatives au produit présentées sous la forme de menus déroulants. Encore des clics inutiles, alors qu’il existe des alternatives, certaines déjà très usitées dans l’univers de la mode et du prêt-à-porter…

On retrouve le même carrousel que sur la page catégorie, ce qui là encore n’aide pas vraiment à distinguer les 2 types de page (Catégorie et Produit).

Panier

J’ai déjà évoqué les 3 liens redondants vers le panier.

Je vais donc me concentrer sur l’ajout au panier, la page panier et l’aperçu du panier sur la colonne fixe de droite durant le parcours utilisateur.

• l’ajout au panier : la confirmation de l’ajout au panier se traduit par l’accès à la page « panier ». C’est très regrettable puisque l’on « extrait » l’utilisateur de son parcours en lui imposant un chemin qu’il n’aura pas forcément choisi. On préfèrera généralement un feedback sous forme de lightbox ou une translation visuelle du produit vers le panier.

• la page panier : un bon point pour la présence des visuels dans le panier et pour le rappel des tailles, ainsi que pour les liens sur les produits ramenant directement à leur page. Par contre, on aurait souhaité avoir des boutons « + » et « – » de chaque côté du champ « quantité » afin de ne pas être obligé d’effectuer une saisie clavier (source d’erreurs de frappe de surcroît). Le rappel concernant les « frais de port offerts à partir de 120€ d’achat » aurait pu avantageusement laisser sa place à un incitatif « Encore XX€ avant que les frais de port vous soient offerts ! ». Sur le même registre, on regrettera qu’aucune estimation des frais de port n’apparaisse à ce stade, même des frais de port « par défaut ». Dommage par ailleurs que le cross-selling n’apparaisse qu’à partir du panier, et pas sur les pages catégories, ou fiches produits. Quand à la présence du champ « Code réduction », j’ai déjà pu faire mention sur les différentes chroniques de l’ergo-note tout le mal que j’en pensais. C’est une invitation directe pour l’utilisateur à quitter votre site pour partir à la recherche de codes sur Google, et à éventuellement en trouver un plus avantageux chez la concurrence !

• la preview du panier :  la pré-visualisation des images n’est pas fonctionnelles au niveau de l’aperçu du panier ; et à nouveau l’illustration de la multitude de liens redondants, avec les intitulés « Shopping-bag » et « Paiement » en double.

Tunnel d’Achat

Sans surprise, il s’agit d’un checkout « à l’ancienne », avec une progression par étapes, en vertical. Soit le module Magento de base, reconnaissable entre 1000 !

Authentification/Création de compte

L’authentification (ou à défaut l’enregistrement) est obligatoire, je ne vous ferais pas l’offense de ré-éditer l’éternelle critique qui s’y rapporte…

Ce besoin irrépressible qu’ont beaucoup de e-Commerçants de vouloir absolument vous faire créer un compte chez eux avant de réaliser votre achat ne cesser de me plonger dans une profonde perplexité. Ils doivent probablement adorer se faire du mal et voir leur taux d’abandon de panier exploser. Ou alors ils n’ont tout simplement jamais pensé à tester sans forcer l’inscription, via un profil « invité ». Ou peut-être encore qu’ils ne se remettent pas en question et font « comme tout le monde »…

Si c’était un débat, on dirait qu’il s’agit d’un sophisme, et plus précisément d’un « argumentum ad populum ».

Bref, il nous faudra donc en passer par la création d’un compte et cela nous permet de jeter au passage un oeil au formulaire à compléter qui y est immanquablement associé.

Formulaire de création de compte

Bon point : les intitulés des champs ne sont pas situés à gauche de ceux-ci mais au-dessus d’eux. La lecture en « z » s’avère fatigante autant qu’inutile.

Mauvais point : on impose la saisie d’un numéro de téléphone, ce qui nuit à l’objectif poursuivi, soit la livraison chez le client du produit commandé, et rien d’autres (du moins s’en tenir déjà à cela pourrait constituer une base solide !). Tout le reste doit être facultatif, voir idéalement absent.

Heureusement, contrairement à ce qui est souvent observé, la saisie d’une date de naissance n’est pas obligatoire.

L’obligation de renseigner son propre mot de passe (et de le retaper une seconde fois pour le confirmer) est l’option de base et le choix qui doit être proposé dans tous les cas. Pour autant, il peut être envisageable de proposer au client de générer pour lui un mot de passe automatique (alors envoyé par mail), quitte à ce qu’il puisse le changer et/ou le personnaliser par lui-même ensuite. Si ce n’est pas encore un standard, cela pourrait le devenir, notamment au vue des problématiques de sécurité encore existantes.

L’inscription à la newsletter est en opt-in passif (pré-cochée). C’est regrettable, car rigoureusement illégal.

En France, l’article L34-5 du Code des postes et des communications électroniques stipule que seul l’opt-in actif (case cochée en tout état de cause) est autorisée pour les envois de messages électroniques (dont les SMS font partis au même titre que les emails) à des particuliers ou des personnes physiques. Second carton rouge donc pour le département juridique de Aubade ; il me semble que certain sont sortis pour moins que ça…

Plus grave, il s’est avéré impossible en pratique de décocher la case ! Celle-ci se re-cochant instantanément !

A noter que si la création du compte-client est faite « hors checkout » (ce qui n’est quasiment jamais le cas), ce bug n’est pas reproduit (et accessoirement, on demande moins d’informations personnelles aux utilisateurs !).

Livraison

Puisque j’ai coché « même adresse de livraison » lors de la 1ère étape (adresse de facturation), on passe directement à l’étape 4 : le mode de livraison.

Bonne surprise : le port est effectivement bien offert au-delà de 120€, et c’est du Chronopost ! Pourquoi ne pas avoir mis en avant cet argument de vente supplémentaire plus tôt ?!?

Paiement

Le paiement est on ne peut plus restrictif : Visa, Mastercard ou Paypal. Ca fait 2 possibilités, voir une seule si l’on considère que cela reste quelque soit le cas du paiement par cartes…

La dernière étape est sans surprise, validation des CGV (présentes dans un menu déroulant), puis passage au paiement. On constate qu’un retour en arrière à ce niveau du checkout oblige à reprendre le process depuis l’étape 1 :(

Enfin, on notera qu’il n’y a absolument aucun moyen prévu pour supprimer son compte-client, côté utilisateur…

Conclusion

Aubade possède une infrastructure e-Commerce avec des performances solides, propres à encaisser un trafic à la hauteur de l’enseigne.

Toutefois, sur le plan ergonomique, il y a vraiment une très nette marge de progression.

La fluidité donnée au parcours de l’utilisateur et la lisibilité des différents éléments de contenu ne sont que quelques-unes des pistes d’amélioration à suivre.

La marque peut toutefois rebondir assez facilement si elle remet l’expérience utilisateur de sa boutique e-Commerce en question et si elle arrive à placer la satisfaction au centre de ses préoccupations. Un site e-Commerce utile et utilisable, tel est le secret (de polichinelle) d’une ergonomie web réussie !

D’autant que satisfaction rime aussi et surtout plus facilement avec conversion ! ;)