Analyse ergonomique du site e-commerce Saveur Bière

Ca fait un moment que cela me trotte dans la tête, et je pense que l’exercice est assez périlleux, mais j’ai bien envie de lancer sur ce blog une rubrique traitant de l’ergonomie dans le e-commerce. Mon objectif est d’essayer de déceler les meilleures pratiques en la matière, d’analyser ce qui est efficace, ce qui ne l’est pas, de comprendre comment est un bon site e-commerce doit être construit.

Et plutôt que de parler dans le vide, je vais me pencher sur des sites e-commerce existants et les décortiquer. Je vais tenter de mettre en lumière ce qu’ils font bien (ou plutôt ce que je trouve bien), ce qu’ils font moins bien, de suggérer des idées d’améliorations, de dénoncer sauvagement leurs erreurs, de les massacrer s’il le faut ou d’encenser leurs idées de génie. Je choisirais les sites un peu en fonction de mon envie du moment, sans réel programme. Je piocherais un peu partout, petits ou gros sites, anciens ou nouveaux, positionnés sur différents secteurs, stars ou bouzes… bref, l’idée est de construire un panel complet.

Evidemment, je suis très mal placé pour parler d’ergonomie, puisque des trois personnes de l’équipe de départ de Mandellia, c’est moi qui possède le moins d’expérience en matière de web et d’e-commerce, que je n’ai jamais été ergonome e-commerce en agence web et que je n’ai pas lu les 25 bouquins d’ergonomie américains sur le sujet qu’il faut avoir lu.

Il s’agira donc de l’analyse d’un néophyte qui se pose des questions dans l’espoir de se perfectionner sur le sujet. J’en serais gré à tous mes lecteurs d’en tenir compte dans leur appréciation de mes billets. Mon objectif est avant tout d’apprendre et d’en tirer les enseignements qui nous permettront d’améliorer notre propre site e-commerce Mandellia. C’est une démarche de chercheur plus que de critique.

Et pour bien commencer cette nouvelle rubrique, que j’ai intitulé « Ergonomics Cordonnier », je vais m’attaquer à mon chouchou du moment (on va finir par croire que j’ai été payé) : Saveur-Biere

Pour moi, ce site est un concentré de bonnes pratiques, et l’agence qui l’a développé, Open Ressources (encore de la pub) a fait un excellent job.

1. La home

La structure de la home est très classique, avec un bandeau en haut pour le logo et le moteur de recherche. Le menu est juste en dessous. Innovation intéressante qui n’est pas encore très répandue, un petit icône Rss pour s’abonner à l’actualité de la boutique. Même si en cliquant sur cet bouton, on arrive sur une page explicative où l’on on comprend bien la nature du service proposé, le néophyte risque de passer à coté de cet icône discret et un alt sur l’image aurait permis d’en dire un peu plus avant le clic.

En dessous, la home est séparée en deux colonnes. Ce d?coupage permet de maximiser l’espace pour faire remonter des opérations promotionnelles ou événementielles. Ce sont ce type d’infos qui intéresse principalement les internautes arrivant sur une home. Une home doit montrer la vie du site, les nouveautés, l’actualité, les offres ou les recommandations du moment. Bref, il faut montrer que ça bouge.

Par exemple, ici on a la mise en avant d’un nouveau produit comme le panier cadeau, une offre promo sur les futs de bière, ou encore les vidéos de présentation des bières.

Astucieux aussi juste à droite, la remontée d’info du blog qui confirme au visiteur l’idée qu’il y a régulièrement de l’actualité sur ce site. Cette partie évènementielle qui est la première zone vue par l’internaute est pour moi une des grandes réussites de ce site. Elle communique beaucoup mais de façon agréable, sans surcharger la vision de l’internaute de gifs clignotants ou d’ »horribles pubs » qui enlèvent toute la lisibilité au site. Comme cela se passe sur le site de cdiscount pour ne pas le citer.

En dessous, plus classique, des recommandations produits, des nouveautés et un espace éditorial. On regrettera juste ici, l’absence des meilleures ventes qui ont souvent un bon taux de conversion sur le visiteur qui cherche la facilité.

La colonne de droite suffit pour caser toutes les accès secondaires (newsletter, panier, compte client..) et les messages de réassurisation (garanties, livraison, paiement sécurisé). Ces messages sont essentiels, car malgré le développement du commerce en ligne, il y a toujours un vrai déficit de confiance vis à vis de la vente en ligne. Il est également prouvé par de nombreuses études que l’affichage de ces messages a un effet plus que positif sur le taux de conversion d’un site. J’aime particulièrement ici l’iconographie associée avec le téléphone pour la rubrique contact et le camion.

En bas de page, un pavé noir qui sert de mini-plan du site et permet également de pousser quelques occurrences de mots clés pour le référencement.

Un autre point intéressant est la façon dont est géré le menu déroulant.

J’y trouve du plus et du moins. Le plus, c’est d’avoir mis des images qui expriment visuellement les catégories. Il permet également de mettre en avant une sélection de produits et donc de pousser les ventes sur certaines offres.

Le moins c’est qu’il ne permet pas de voir la richesse de l’offre d’un coup, comme c’est le cas d’un menu déroulant classique. De plus, je trouve qu’il a tendance à freiner le clic vers la page liste d’une gamme.

Petit point noir enfin sur la home, le trop discret picto de la maison qui renvoie sur l’accueil. Beaucoup d’internautes néophytes (qui sont les e-acheteurs de demain) on encore du mal à se retrouver sur un site et la présence d’un lien « accueil » bien visible est souvent d’un secours précieux pour eux.

2. La page liste produits

La bonne idée dans cette page est d’avoir imaginé un zone éditoriale aménageable en haut de page. Certes, cela ralentit un peu la découverte des produits, mais c’est assez efficace pour faire passer un message fort si besoin. On le voit par exemple sur la page des tireuses à bière où la livraison gratuite est bien mise en évidence.

Choix intéressant également mais contestable, la possibilité de mettre au panier un produit directement depuis cette page liste. Intéressant pour l’internaute qui connaît bien le site car cela lui permet d’accélérer sa prise de commande. Contestable pour le nouvel arrivant qui aura tendance à penser que ce gros bouton noir est un accès à la fiche produit et risque de gonfler de voir son panier gonfler artificiellement.

Sinon, à part un petit bug d’affichage quand le nom du produit passe sur 3 lignes, rien à dire de plus sur cette page liste. Jolis visuels produits, affichage clair du prix, tout est nickel.

3. La page produit

Toutes les pages du tunnel de commande d’un site e-commerce sont capitales. Mais la page produit l’est ? mon sens plus que les autres. Car c’est sur cette page que l’internaute décide s’il met le produit au panier ou pas. C’est sur cette page, qu’il change éventue
llement de d’état d’esprit et passe d’une logique de visiteur (je regarde les produits)à une logique d’acheteur (ce produit m’intéresse, j’envisage de l’acheter). C’est donc une page critique, il est important d’y accorder un soin particulier.

Le site Saveur Biere s’en tire là encore vraiment bien. Le visuel produit est propre et suffisamment gros. En première lecture, il n’y pas d’infos parasites qui viendraient détourner l’internaute de l’acte d’achat. Les caractéristiques du produit, ainsi qu’un petit texte de présentation permettent à l’acheteur potentiel de se faire un avis.

Seuls bémols : le bouton « ajouter au panier » qui se trouve sous la ligne de visibilité sur un ordinateur 15″ en 1024 (encore une grande part des utilisateurs sont sous cette configuration) et la zone des commentaires qui est souvent désespérément vide. Une zone de commentaire est en général une bonne idée car elle peut confirmer une intention d’achat si les avis sont positifs. Mais elle est peut-être un peu prématurée pour un site qui ne génère pas encore un trafic très important. Un dispositif marketing (par exemple un bon d’achat pour un commentaire) permettrait d’accélérer l’ajout de commentaires.

En dessous du produit, on trouve les classiques rubriques « produits similaires » et « Les clients qui ont acheté ce produit ont aussi acheté ». Deux incontournables du cross-selling qui viennent généralement augmenter le panier moyen. Idéalement ici, un bouton ajouter au panier depuis cette zone de cross-selling serait un plus qui permettrait d’augmenter le taux de conversion de l’opération.

Conclusion :

On pourrait continuer ainsi sur tout le processus de commande mais je sens que votre attention a été déjà bien sollicitée. On n’a vu qu’une partie du site et ces 3 pages nous ont déjà donné pas mal de bonnes pratiques en matière d’ergonomie de site e-commerce. Globalement, le site Saveur-Bière est un bon exemple à suivre ergonomiquement parlant et j’ai beaucoup appris en l’étudiant.

La prochaine fois, je continuerais mon investigation avec un site moins réussi, (si j’arrive à en trouver un qui soit parlant) histoire d’apprendre un peu des erreurs des autres.

J’essaierais de faire un peu plus court également, promis.