Ergonomie site e-commerce

Lorsque la société SMH n’était qu’au stade de projet, j’ai passé pas mal d’heures à me documenter et à réfléchir sur le design graphique de la future boutique Chemises Chaussures Hommes.

Voici un extrait des points que je souhaitais pour la boutique :

• - Dès la page d’accueil et sans trop d’effort, l’ internaute doit comprendre immédiatement de quoi parle le site

• - Les rubriques principales (colonne vertébrale du site) doivent être bien visibles et mises en valeur

• - Le design doit être épuré au max, centré sur l’essentiel, les produits et les prix

• - La navigation doit être simple et intuitive

• - En permanence, l’internaute doit savoir sur quelle page il se situe

• - Le processus d’achat doit être à la fois simple et clair

Les points que je ne voulais pas :

• - Une page d’introduction type animation flash qui ne sert à rien, sauf à donner du travail aux web agency

• - Des couleurs agressives

• - Une profusion d’informations dans les pages

• - Des icônes et animations qui prennent de la place, et qui n’apportent rien niveau de l’information

Chemises Chaussures Hommes est un site qui fonctionne sous la solution e-commerce Prestashop , qui a permis entre autres de respecter mes différents points d’exigence pour la boutique.

Concernant l’aspect épuré que je souhaitais, nous avons dû finalement faire un compromis entre en mettre le moins possible (nous avions comme modèle la boutique en ligne Hugo Boss Store), et du contenu, nécessaire au référencement naturel.

Pour finir, je profite de ce billet pour présenter un de mes coups de cœur, niveau ergonomie de site web : Il s’agit de Headict, une boutique en ligne qui vend des bonnets, chapeaux, casquettes, bérets …
Ce site est un petit bijoux dans le genre, avec pas mal d’atouts qui font selon moi, l’efficacité d’un site e-commerce.

Si on regarde le site Headict de plus près.

La page d’accueil Headict.com

Le design est agréable et très propre, les couleurs sont franches et les photos sont de qualité. Le menu à gauche indique clairement les choix de navigation, qui permettent de guider l’internaute dans la recherche des produits du catalogue contenant plus de 300 références. En haut à droite et en permanence (sur toutes les pages du site), on trouve l’accès au panier, point de départ pour conclure son acte d’achat.

La fiche produit Headict.com

Headict.com a été conçue sur une base de la solution e-commerce Prestashop qui est par défaut sur 3 colonnes. Sur Headict, le site est sur deux colonnes, ce qui laisse de la place pour mettre en valeur le produit. Le prix et le bouton d’ajout au panier sont bien visibles et mis en valeur.

Le récapitulatif de la commande

Là encore, il y a eu de la personnalisation. Par défaut la solution Prestashop présente le récapitulatif de commande dans la colonne centrale comme ceci :

Sur Headict.com :
Le récapitulatif de la commande ici prend toute la largeur du site, avec les étapes du processus d’achat qui sont très visibles. L’internaute sait exactement ce qui l’attend, et dans quel ordre il doit procéder.
Outre l’avantage de clarté dans ce type de présentation, on remarque aussi que l’utilisateur n’est pas perturbé par des informations et liens qui pourraient le détourner dans la conclusion de la vente, la page ayant été implémentée sur toute la largeur du site.

En conclusion grâce à la solution open source Prestashop et à un gros travail en interne de personnalisation, Headict.com est un bel exemple de site e-commerce efficace.

Retrouvez aussi une interview du co-fondateur Headict.com dans cet article du blog capitaine commerce : Headict annonçait 1000 visiteurs par jour 15 jours après le lancement du site, c’est fort !