Malgré  les nombreux défauts de notre nouvelle page d’accueil (que vous n’avez pas manqué de pointer – merci à tous ceux qui ont fait des commentaires, nous allons tâcher d’améliorer cela), je repars au charbon pour cette rubrique « Ergonomics Cordonnier » afin de continuer mon instruction sur l’ergonomie. On a encore beaucoup de choses à apprendre, on vient de le prouver.

Aujourd’hui, je vais tâcher d’analyser le site Made in Ethic. Autant vous le dire tout de suite, ça ne va pas être coton (c’était mon mauvais jeu de mot de la semaine – désolé) : Made in Ethic est un site e-commerce vraiment bien conçu niveau ergonomie et j’ai eu du mal à trouver des failles.

Mais avant de critiquer, voici quelques points positifs sur lesquels j’aimerais attirer votre attention et dont beaucoup d’e-commerçants (nous les premiers) pourraient s’inspirer :

La page produit

La page produit est vraiment bien structurée et très lisible. Les grandes photos et les différentes vues permettent de se faire une idée claire du produit et mettent en valeur les vêtements. Le soin apporté aux photos et à la mise en avant des détails est un des gros atouts de ce site.

Niveau texte, l’information est bien organisée avec tout ce qu’il faut pour prendre sa décision d’achat :
- un texte de présentation sympa mais pas trop long
- les caractéristiques essentielles du produit
- le prix est clairement affiché (un petit bug sur les prix barrés ou l’affichage du symbole € est décalé sur la droite)
- la disponibilité aussi : savoir si le produit est en stock est souvent un facteur décisif pour un achat sur le web
- le délai d’expédition (super rassurant pour l’internaute)
- il y a même les symboles pour l’entretien (et des petits liens discrets vers le guide d’entretien ou le guide des tailles)

La fonction de cross selling est gérée de façon simple mais superbement réalisée avec la remontée de grandes photos qui sont vraiment pushy.

Bref à mon sens, une page produit efficace où l’internaute qui accroche sur le produit, n’a pas trop de dilemme existentiel à se poser pour savoir s’il met le produit à son panier ou non.

Seul bémol : pour moi le « ajouter au panier » n’est pas assez visible. Le cintre est bien sympa, mais il n’attire pas suffisamment l’oeil et ce gris est un peu triste nuit également à sa visibilité. Peut-être faudrait-il l’encapsuler avec le lien « ajouter au panier » dans un bouton un peu plus coloré ?

La gestion du processus de commande

Une fois dans le panier, il y a vrai soin apporté au tunnel de commande. Regardons les points forts de ce process :

- La mention « plus que X euros pour bénéficier de la livraison gratuite.. » est une excellente idée pour augmenter le panier moyen.
- Les 3 blocs sous le panier « livraison rapide », « satisfait ou remboursé » et « paiement sécurisé » sont cruciaux à cette étape pour montrer au client que le site est sérieux et qu’il peut acheter en toute confiance.
- Le fait de pouvoir ajouter des commentaires sur sa commande est aussi un plus pour les clients exigeants ou pour capter des questions intéressants
- La commande est assez rapide dans l’ensemble : 4 étapes qui sont bien signalées.

Mais aussi

Il y a plein d’autres éléments positifs sur Made in Ethic comme :
- La page liste qui est claire et agréable :
- La possibilité de filtrer par Marques : pour les afficionados de Sobosibio, de Bilum ou des fées du Bengale
- La possibilité de trier par prix pour ceux qui recherchent d’abord une bonne affaire
- Des rubriques Nouveautés et Fin de séries
- Le moteur de recherche (pas indispensable à mon sens vu le nombre de références mais c’est un plus indéniable)

Mais trêve de compliments, passons maintenant aux critiques.

Outre la visibilité de la fonction « ajouter au panier » que j’essayerais d’améliorer, voici quelques points sur lesquels je me pencherais particulièrement afin de peaufiner l’ergonomie si je m’appelais Julie et que j’étais en charge de Made in Ethic.

1. Les pages d’accueil des catégories

La première chose qui m’a choqué quand j’ai commencé à analyser ce site est ce qui se passait quand je cliquais sur un des onglets du haut (femme, homme ou accessoires). On ne voyait que très peu de produits. Celui qui ne fait pas attention au menu de gauche, risque de croire que le choix sur Made in Ethic se résume à ce qu’il voit sur cette page. La page d’accueil de la catégorie femme n’affiche par exemple que 12 articles. Et il n’y a pas d’autres pages à faire défiler pour découvrir toute la collection. Cela peut être un choix de mise en avant éditorial mais comme cela n’est pas signalé clairement au niveau du design, on peut avoir l’impression que l’ensemble de la gamme Femme se résume à ses 12 produits.

Cela n’est pas rendre justice à la richesse du catalogue de ce site. Pourquoi ne pas faire remonter en premier les produits qu’on veut pousser si c’est bien l’intention de départ et laissez ensuite l’internaute naviguer en faisant défiler les pages (suivant, précedent..) ?

2. Le formulaire

Le formulaire d’inscription souffre d’un gros défaut à mon sens : il ne communique pas bien sur les erreurs.

On sait que le formulaire est un gros point de fuite d’un site e-commerce (personnellement si je n’en suis pas venu à bout en 3 fois, je laisse tomber) et celui de Made in Ethic gagnerait à mieux mettre en avant les erreurs faite par le client qui veut s’inscrire. Elles sont globalement signalées en petit, en rose tout en haut du formulaire, et il faut vraiment vouloir commander pour les voir. Il aurait mieux fallu un pop up ou un système contextuel qui mette en avant les problèmes à coté des champs erronés.

3. Les id?es cadeaux

L’icône « idée cadeau » présente sur certaines fiches produits donne envie de cliquer dessus (vs le bouton ajouter au panier qui est beaucoup moins visible), ce qui est dommage car elle ne mène à rien.

A mon sens, ce concept d’idée cadeau est une bonne idée, et il faudrait le relayer dans le menu de gauche de façon à générer une page qui remonte tous les produits labellisés « idée cadeau »

4. La page d’accueil

La page d’accueil n’est pas encore très aboutie (je sais la nôtre est pas top non plus, merci de me le rappeler) et je ne la trouve pas très lisible. J’y trouve plusieurs défauts importants :

- Globalement, il y a beaucoup d’informations secondaires à des places privilégiées : le texte central qui occupe une place de choix et que peu de monde va lire, le bandeau sur les marques (Les marques sont elles un vraiment vecteur d’appel pour le client ?)
- Un manque d’organisation. Même s’il y a en définitive peu de choses, ça me laisse une impression de fouillis.
- L’image du centre pas cliquable dans son intégralité. Dommage pour un push produit qui occupe tant d’espace
- A mon sens, il faudrait un peu plus de remontées produits.

5. Le panier

La gestion du panier pourrait être également optimisée. Après avoir mis un produit au panier, on arrive directement dessus, ce qui peut constituer un frein sérieux pour d’autres achats, l’internaute devant faire l’effort de recliquer pour aller voir d’autres produits. Instinctivement, j’aurais de plus en plus tendance à laisser l’internaute sur la page où il se trouve ou à le renvoyer vers une autre page qui montre d’autres produits (page liste/ page de cross selling).

Le bouton continuer vos achats n’a pas assez visible (toujours ce gris ) et j’aurais tendance à le mettre à droite plutôt qu’à gauche.

Autre idée : on pourrait pousser des produits en cross-selling dans le panier directement (ce qui renforcerait l’ingénieux le push sur le port gratuit)

Conclusion :

Made in Ethic, malgré quelques coups dans les dents en fin d’analyse, s’en tire plutôt bien niveau ergonomie. Je suis pas fan de tout ce qui a été fait, mais il y a des plus indéniables (notamment les photos et la mise en avant des produits sur la fiche produit). Finalement, et pour élargir le débat, s’il y a quelque chose qui me gêne vraiment dans le site (les petits défauts que j’ai mentionné ne sont pas critiques et facilement corrigeables), c’est le design que je trouve un peu tristoune avec tout ce gris. Mais là, on rentre dans un débat sur les goûts et les couleurs et on sort de l’ergonomie à proprement parler.

Quoi qu’il en soit, longue vie à Made in Ethic qui est un projet génial et engagé, s’il vous plaît.

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.

Nous venons de faire quelques optimisations sur le site Mandellia.fr. Je vous invite vivement à découvrir tout cela et à nous donner votre avis :

- 3 colonnes pour donner plus de visibilité à l’offre de stickers déco
- Une fonction « recommandez à un ami »
- Le processus de commande revu entièrement pour optimiser le tunnel d’achats depuis le panier
- Une fonction d’upselling dans le panier (qui va nous permettre notamment de proposer systématiquement la fameuse raclette essentielle à la pose d’un grand sticker)
- Ouverture officielle du site à une grande majorité pays européens (c’est nos amis Belges et Suisses qui vont être contents depuis le temps qu’ils nous harcelaient de mails ..)
- L’intégration du paiement sécurisé en pleine page

Et bien sûr, de nouveaux produits et des idées cadeaux pour noël.

En ce moment, nous chassons les derniers bugs (si vous en voyiez).

C’est un gros chantier de terminé, mais l’amélioration de Mandellia.fr est loin d’Être finie. Nous avons encore pas mal de projets en cours de développement, dont le lancement des produits personnalisés ! Mais je ne dis pas plus pour ne pas vous gâcher la suprise.

Et vous, qu’est ce qui vous intéresserait ? Qu’est ce qui vous paraît essentiel et qu’on aura oublié ?