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

ergonote-revue-ergonomique-du-site-1855-com-vignette

Comme beaucoup d’entre vous en cette période, l’ergo-note a cherché LA bouteille pour accompagner ses repas de fêtes. Et déformation professionnelle oblige, l’ergo-note en profite pour vous proposer, en toute sobriété, la revue ergonomique du site e-Commerce 1855.com.

Si on dit souvent qu’une bonne bouteille fait un bon repas, il semble qu’une bonne ergonomie fasse également un bon site, ou presque…

L’ergo-note : le site 1855.com

1. Présentation de la société

Note : compte tenu du nombre important d’informations, parfois contradictoires et souvent confuses, ainsi que de la situation actuelle du groupe, qui semble délicate, la description qui suit s’appuie sur les éléments les plus neutres et objectifs à disposition.  

1855.com est un site français spécialisé dans la vente de vins et disposant également de quelques références en spiritueux. Crée en 1995, par Emeric Sauty de Chalon, actuel Président Directeur Général, et Thierry Maincent, la marque au capital de 1 100 000 euros, cotée en Bourse et dont le fond Aphrodite possède la majorité, a au cours de l’année 2013 été renommée sous l’appellation Héraclès, société faîtière de différents sites spécialisés dans la vente en ligne de vins.

Le site 1855.com fait état d’un catalogue produits allant jusqu’à 25 000 références. La marque se positionne sur un segment très haut de gamme et se distingue par un large choix de vins, et notamment de vins primeurs. En 2005, le panier moyen se situait aux alentours de 1000 euros, bien au delà de la moyenne nationale et le site enregistrait plus de 10 000 visites par jour.

La société est depuis octobre 2013 en procédure de redressement judiciaire et se hisse néanmoins sur la même année, au 33ème rang du classement des 100 principaux sites e-Commerce français.

2. L’avis de l’ergo’note

Homepage

ergonote-revue-ergonomique-du-site-1855-com-homepage

Header

ergonote-revue-ergonomique-du-site-1855-com-header

Ce qui saute tout de suite aux yeux est un logo sous-dimensionné, alors que la baseline tombe dans l’excès inverse. Sa formulation est par contre très adéquate. Il aurait été préférable de mettre le lien vers la page d’accueil sur l’ensemble logo/baseline plutôt qu’uniquement sur le logo (effort inutile demandé à l’internaute de viser avec précision le “petit” logo, ce qui engendrera de la frustration).

Le panier est bien placé mais là encore, bien trop sous-dimensionné (Loi de Fitts).

Un n° de téléphone à ce niveau ne serait pas superflu.

Navigation

Un menu à l’horizontal dont les onglets sont bien distincts les uns des autres favorisant ainsi la lisibilité. Le nombre d’onglets est judicieusement restreint, mais le choix des catégories et leur ordre me laisse dubitatif… Une optimisation est largement possible.

Le moteur de recherche est (une fois n’est pas coutume) sous-dimensionné et n’a aucune fonctionnalité avancée du type auto-suggest. Il m’a semblé pour autant efficace au niveau des résultats renvoyés.

Notons malheureusement qu’aucune aide n’apparait dans le champ de recherche sous la forme de suggestions en police ombrée et venant guider l’internaute, comme par exemple: “saisir ici votre mot-clé, code article : bordeaux, bourgogne, petrus…”. Le champ est en effet vide par défaut, ce qui n’induit donc pas facilement la fonction de saisie.

Il n’y a également aucun bouton permettant de valider cette saisie, et un internaute profane n’aura pas forcément de lui-même “l’idée” d’utiliser la touche “entrée” de son clavier.

Même constat pour ce dernier point sur le champ d’inscription à la newsletter des ventes privées…

Corps

Slideshow sans aucun contrôle pour l’utilisateur : pas de flèches “gauche/droite”, pas de bouton pause, pas de petites vignettes numérotées non plus qui permettraient d’atteindre directement le slide de son choix.

Et quel intérêt d’avoir remis le moteur de recherche sous le slideshow ? Qui plus est ici encore sans tous les éléments dont je déplorais justement l’absence dans le header quelques lignes plus haut !?!

La navigation par régions/châteaux est idéale pour les connaisseurs (bien qu’elle ne soit pas très “sexy” en l‘état, il y a largement possibilité de faire mieux) mais très floue pour les profanes.

Il serait alors souhaitable de mettre en place un “guide” ou une navigation alternative didactique pour ce public spécifique, comme il serait d’ailleurs souhaitable d’envisager une refonte graphique pour rentrer en meilleure adéquation avec le segment visé par la marque.

Un point qui permet de relever le pendant marketing de l’ergonomie. Petite digression, l’ergonomie n’est plus un facteur tiers, une folie que l’on s’autorise en fin de parcours, mais bien une résultante directe de votre stratégie web marketing, en corrélation directe avec cette dernière et donc à traiter comme un des composants de fond de la construction de votre site/entreprise e-Commerce.

Il est essentiel que vous soyez parfaitement au fait du degrés d’implication d’achat lié à la spécificité de votre catalogue produits, autrement dit : avant de le vendre, sachez qualifier votre produit.

Enfin ne pas confondre le degré d’affinité entre vos prospects et votre produit avec celui qu’ils pourraient avoir avec internet, qui souvent s’avèreront être radicalement opposés…

Footer

ergonote-revue-ergonomique-du-site-1855-com-footer

Optimisé “SEO 2010’s style”, Google a depuis mis à jour son algorithme avec les updates « Penda » et « Penguin ». Il est urgent de revoir ce point qui pénalise probablement le site.

Tous les liens institutionnels sont illisibles, limite invisibles : trop petits, trop “écrasés” par le catalogue à la Prévert des différents vins. De plus, ils sont relégués dans la portion la moins lisible/vue d’une homepage : en bas à droite…

Si l’on prend les liens suivants du footer : | ServiceClient | Partenaires | Recrutements | Story | Legal
“Service Clients” et “Story” devraient pour commencer être mis en avant dans le header, d’une façon ou d’une autre. “Partenaires”, “Recrutements” et “Legal” (qui devrait par ailleurs s’écrire « Mentions légales »… Légalement !) sont bien placés, mais encore et toujours sous-dimensionnés.

Enfin le choix de la Langue aurait dû être placé dans le header (les pictogrammes de drapeaux sont pour cela tout à fait adaptés), surtout compte tenu du fait qu’il n’y en a que 2 disponibles ; ce qui est déjà très bien, et qui, sous forme de pictogrammes, aurait l’avantage de ne prendre que peu d’espace et d’être d’autant plus lisible et repérable.

Un site e-Commerce à vocation internationale ne peut se permettre de perdre des clients qui ne sauraient distinguer la fonction de traduction notamment lorsque se posent des différences fondamentales au niveau de l’alphabet employé et alors même que la traduction est disponible !

Quant au choix du pays de livraison, votre humble serviteur n’a pas compris/aperçu quelle était la conséquence de son utilisation : à éclaircir donc.

Performances

Un temps de chargement qui présente une moyenne de 1 sec (pile-poil !) en 5 essais pour 34 requêtes. Un résultat excellent.
Le poids total compressé de la page est de 502KB pour 34 requêtes, ce qui est également très bon et le poids compressé du document est de 63ko, ce qui, ici encore, est parfait.

Un bémol toutefois, ces tests ont permis de montrer qu’aucune compression n’était activée. Si compte tenu des résultats obtenus, l’impact n’est pas majeur, il serait néanmoins souhaitable que cela soit modifié lors d’une refonte prochaine du site.

Responsive

1855 a échoué au test du Responsive Web Design

Toutefois, la société propose une application pour iPhone sur l’Appstore. Celle-ci étant hors périmètre du présent audit, je n’ai pas pu vérifier sa valeur ajoutée par rapport à un site mobile, ou bien au site principal.

Page Catégorie

ergonote-revue-ergonomique-du-site-1855-com-page-categorie

Globalement, cette partie du site possède les mêmes faiblesses que celles précédemment énoncées.

Un bon point cependant grâce à la présence des meilleures ventes et des coffrets cadeaux dans un menu vertical à droite de la page.

Certaines choses demeurent encore assez obscures, comme la mention « 48h00 » sur ce même menu vertical au niveau de la catégorie des “Bordeaux”. La difficulté est néanmoins réelle compte tenu là encore des spécificités produits, à travers lesquelles il faut ici composer en terme de filtres avec des sujets aussi diverses que les marques/domaines/châteaux/distilleries/millésimes/maisons/artisans/etc…

Fiche produit

ergonote-revue-ergonomique-du-site-1855-com-page-produit

La fiche produit est plutôt bien construite. Il est appréciable d’avoir dans un même bloc la fonction “commander” avec le prix, le nombre de bouteilles souhaitées et le bouton d’ajout au panier. Regrettable toutefois de n’avoir pas remis la disponibilité/délai de livraison à cette même place…

Il manque quelques options de partage via email ou les réseaux sociaux. Sur ce dernier point, il est là encore question de bien étudier l’apport de chaque réseaux sociaux, fonction de ses spécificités, pour ce qu’il constituerait une valeur ajoutée compte tenu du produit vendu.

Enfin les précisions apportées devraient être au-dessus des avis utilisateurs, visibles au-dessus du fold.

Panier

ergonote-revue-ergonomique-du-site-1855-com-panier

Lors de l’ajout d’un produit au panier, on obtient une page de “confirmation d’ajout”.

Celle-ci, bien que judicieusement conceptualisée, néglige néanmoins un point essentiel et élémentaire : la partie texte confirmant l’ajout en question ne ressort pas assez.

De fait, la page ressemble à peu de chose près à toutes les autres pages du site pour un internaute lambda ayant une lecture en diagonale. D’autant que celui-ci commencera logiquement sa lecture en haut à gauche de la page, alors que l’information se situe elle en haut à droite.

La page panier dans sa globalité est un peu fouillis. Le résumé des frais est à droite, le listing des produits est lui quasiment sous le fold (il manque les + et – autour de la quantité, soit dit en passant). Ce sont enfin les éléments d’aide à la compréhension qui attirent assez rapidement l’attention du visiteur. Si compte tenu là encore des spécificités produits, ceux-ci pourraient apparaitre légitimes, je ne suis pas convaincu que ce soit de meilleure augure de démarrer la lecture par ces éléments, mais…

Parlons-en des frais : si les frais de livraison (pour ma bouteille de scotch dans l’exemple ci-dessus) sont ultra-raisonnables (0,50€), les “frais administratifs” d’un montant eux de 9,90€, au-delà d’être prohibitifs, m’ont surtout laissé perplexe. Utilisant donc l’aide dont je parlais il y a un instant, je clique sur “Frais administratifs” et tombe alors sur une page qui me donne… aucune information.

Frustration totale : en situation réelle, je quitterais immédiatement le site.

Tunnel d’Achat

ergonote-revue-ergonomique-du-site-1855-com-tunnel-achat

A l’entrée du tunnel d’achat, la saisie d’un email et la création d’un compte (ou l’identification via mot de passe en cas de compte déjà créé) est obligatoire. Il est regrettable de n’avoir su proposer une formule en “guest-checkout” (qui radote ?).

Les moyens de paiement sont diversifiés, mais pas les moyens de livraison pour lesquels aucun choix n’est possible.

ergonote-revue-ergonomique-du-site-1855-com-tunnel-achat-livraison

Au passage, cela devient une tradition lors de ces micro-audits, mais voici un petit bug détecté, ici sur la page des adresses de livraison enregistrées :

Cliquez sur le bouton “Valider” de la page des Adresses de livraison.

ergonote-revue-ergonomique-du-site-1855-com-tunnel-achat-livraison-validation

Vous obtiendrez alors la page suivante :

ergonote-revue-ergonomique-du-site-1855-com-tunnel-achat-livraison-validation-erreur

Et bug bonus : je n’ai jamais réussi à me déconnecter de mon compte. Même en cliquant sur le symbole en forme de croix ; la croix étant par ailleurs et habituellement plutôt associée à une suppression, on notera ici l’importance qu’il est nécessaire à apporter à l’utilisation et au choix de pictogrammes. Au final, le site se re-connecte automatiquement à mon compte dès que je re-clique sur mon panier…

Conclusion

Petit aparté sur la société : 

Cette rapide étude du cas de 1855.com nous permet de constater l’importance des réseaux sociaux, et à travers eux des échanges entre un e-Commerçant et ses clients, sa “communauté”.

Si ils ne sont bien évidemment pas la solution à tous les maux du e-Commerçant, ils restent un outil définitivement adéquat pour maintenir un contact privilégié et rassurer sa clientèle dans la gestion de cas difficiles, de problématiques de stocks, de fournisseurs, de livraisons, etc.

Le danger, et au-delà même de l’audit dont il est ici question, c’est encore et toujours de ne pas communiquer. Sans communication, il n’y a plus que la peur, l’angoisse, la frustration et en définitive : la colère.

J’aimerais également profiter de cette conclusion pour rappeler le message que nous nous évertuons à marteler à l’e-Commerce Academy :

contextualisez votre projet e-Commerce, et ne pensez pas en tant que “site e-Commerce”, mais en tant que “ENTREPRISE e-Commerce“.

On voit bien ici que l’ergonomie ne remplacera pas la gestion des stocks qui ne remplacera pas la qualité de la relation-client, qui ne remplacera pas la célérité des livraisons…

Il s’agit d’un tout, et contrairement à ce qu’essayeront de vous vendre les chantres du “e-Commerce Bullshit”, vous n’obtiendrez jamais une activité e-Commerce florissante avec juste un outil, aussi perfectionné et rôdé soit-il. La technique n’est pas tout !

Concernant le site :

Globalement, le site est clairement conçu par et pour les connaisseurs en vins & spiritueux.
On regrettera que le profane ne soit pas plus aidé. En particulier, les investisseurs et amateurs du divin nectar qui resteront sur leur soif…

Et n’oubliez pas, surtout en cette période de l’année très propice, de toujours consommer avec modération !

Santé ;-)

2 pings pour “L’ergo-note : revue ergonomique du site 1855.com

Un commentaire pour “L’ergo-note : revue ergonomique du site 1855.com

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">