Vous êtes une entreprise et vous projetez de créer un site de e-commerce ? Dans ces cas-là, il peut être très utile de commencer par étudier des exemples de sites e-commerce déjà existants, histoire de vous faire une idée concrète de ce qu’il est possible de faire. Surtout si vous souhaitez mettre sur pieds la toute première version de votre site. Nous avons choisi cinq exemples de sites e-commerce. Ils pourront nourrir votre créativité, vous servir de sources d’inspirations tant pour ce qui est du design qu’en ce qui concerne les bonnes pratiques de conversion. Tous les sites proposés ici ne sont pas des sites « parfaits ». Mais, justement, les mauvais exemples sont parfois tout aussi utiles et instructifs que les bons exemples (à condition de réussir à distinguer les bons exemples des mauvais).
Decathlon – Sur mesure
Le site de Decathlon, lancé en 2011, est un exemple de sites e-commerce de qualité et efficace. Le dispositif de navigation est très bien pensé. Plusieurs axes de navigation sont proposés, avec un découpage en rubrique très lisible : Sports, Accessoires, Marques, Sexe. Chacune de ces rubriques principales donnent accès, en cliquant dessus, à des menus étendus à la fois denses et limpides (notamment grâce à l’utilisation des icônes). Profondeur de navigation et fluidité d’utilisation se combinent ici très bien, ce qui est assez rare pour être souligné. Vous pouvez aussi constater la présence d’un moteur de recherche interne, tout en haut des pages, à côté du logo, ce qui est très judicieux et permet aux visiteurs de trouver plus rapidement ce qu’ils recherchent.
Découvrez 15 exemples de sites e-commerce réussis [2020].
Les fiches-produits sont à la fois très claires et très complètes, grâce à une bonne hiérarchisation et une bonne organisation de l’information. Un diaporama permet de visualiser les produits sous toutes les coutures (au sens propre comme au figuré). La partie droite contient un résumé très concis donnant les informations principales. Cette partie, qui contient le bouton d’ajout au panier, reste fixe lorsqu’on scrolle vers le bas de la page. C’est une très bonne pratique, car grâce à cette technique les informations essentielles sont toujours présentes aux yeux de l’internaute. Les informations plus techniques (avantages, caractéristiques, composition), à même d’intéresser les potentiels acheteurs, ne sont pas oubliées et apparaissent sous la ligne de flottaison. De manière générale, plus l’information est importante, plus elle doit être mise en avant. Elles doivent tout de suite accrocher l’œil du visiteur. Intéressé, le visiteur sera ensuite amené à chercher les informations secondaires ou plus spécifiques.
Il est impossible de faire mention de toutes les fonctionnalités du site Decathlon, mais sachez que c’est une vraie mine d’inspirations. N’hésitez pas à fouiller dans le moindre détail le site. Ce site a été pensé de A à Z à la fois pour permettre une expérience utilisateur réussie et optimiser le taux de conversion.
Pour compléter, je vous invite à lire l’analyse du site Decathlon publiée sur BlogoErgoSum.
La compagnie du lit – Sur mesure avec le CMS Joomla
Le site e-commerce de « La Compagnie du Lit » , www.lacompagniedulit.com, est globalement satisfaisant, malgré son design assez tristounet. Les bonnes pratiques élémentaires sont respectées. Toutefois, comme le montre Laurent Danflous dans son analyse du site, certaines améliorations, plus ou moins importantes, pourraient être envisagées. On va insister ici sur certains leviers d’amélioration. Encore une fois, s’intéresser aux sites défectueux sur certains points est au moins aussi important que d’analyser les sites e-commerce au top (comme celui de Decathlon).
D’abord, le menu de navigation du site manque de clarté. 9 catégories dans le menu horizontal, c’est beaucoup, peut-être un peu trop. Certains sites proposent des catalogues plus importants que « La Compagnie du lit » et réussissent pourtant à présenter un menu plus léger. D’autre part, la police et les couleurs utilisées dans les menus étendus les rendent peu lisibles. Ils manquent de clarté. Sans compter l’emploi de termes très techniques qui rendent difficile la compréhension du contenu de certaines sous-catégories (exemple : « Sommier ressort ensaché »). Pour remédier à ce problème, un lien vers un guide aurait été bienvenu.
Le header lui aussi pourrait être optimisé. C’est une des parties centrales d’un site : c’est en général la première chose que le visiteur entrant sur le site voit. Le gros défaut du header est qu’il s’agit d’un carrousel composé de deux images. L’image la plus importante des deux est celle qui présente les avantages tels que la livraison gratuite, les possibilités de reprise et les 15 jours d’essai. La rotation automatique du carrousel, assez rapide, diminue le fort impact marketing de l’image principale.
Les marques, par ailleurs, ne sont pas assez mises en avant. Elles ne sont visibles que dans les menus étendus, sur une petite ligne tout en bas, et en bas de la page d’accueil, accessible en scrollant. Rendre plus visibles ces marques, en faisant apparaître la liste des marques/revendeurs au-dessus de la ligne de flottaison par exemple, permettrait d’accroître la crédibilité et la légitimité de la boutique e-commerce.
Les fiches produits sont quant à elles un peu trop légères. Au-delà de leur ergonomie assez moyenne, elles présentent beaucoup moins d’informations que les fiches produits Decathlon par exemple. La faiblesse des informations est justifiée lorsqu’il s’agit de vente de vêtements, mais pas quand il s’agit de vendre des produits complexes. Ces pages gagneraient donc à être optimisées et enrichies. Plus d’informations et plus de conseils seraient les bienvenus, d’autant que « La Compagnie du lit » se présente comme un spécialiste du secteur…
Pour approfondir l’analyse de ce site de e-commerce, lire l’analyse de Laurent Danflous.
Citadium – Sur mesure réalisé avec la technologie Hybris
Le design du site e-commerce de Citadium est plutôt agréable. Les bonnes pratiques sont globalement respectées. Le menu de navigation a récemment été amélioré (le menu étendu notamment). Le résultat est assez réussi, comme on peut le voir sur le screenshot ci-dessus. La segmentation des grandes catégories est très simple, mais efficace : Homme / Femme / Marques. Globalement, il est souvent préférable de proposer un menu de navigation comportant des grandes catégories peu nombreuses et simples, quitte à complexifier ensuite les menus étendus. Une barre horizontale de menu trop élargie peut rebuter les visiteurs qui arrivent sur le site.
Le moteur de recherche interne n’est quant à lui pas assez valorisé. Il apparaît sur une ligne très fine en haut à gauche de la page du site. Il gagnerait à être rabaissé et rapproché du menu de navigation (au-dessus du lien LookBook par exemple). Les pages produits sont assez bien conçues. Les photos des produits, de grande taille et de haute qualité, peuvent faire l’objet d’un zoom en positionnant la souris dessus. Les informations principales sont présentes. Seul petit défaut : les vêtements ne sont pas portés. Dans une logique d’optimisation de la conversion, quelques petites choses pourraient encore être améliorées, notamment au niveau de la réassurance (pas assez présente), de la visibilité du panier et du bouton panier, de la redirection après le « Continuer Shopping », des évaluations clients etc.
Petit + : la visibilité du fil d’ariane permet de toujours bien se situer lors de la navigation et ajoute donc au confort de navigation. La simplicité de la segmentation des catégories rend ce fil d’ariane très lisible. Pour qu’un fil d’ariane puisse être intégré sur les pages, il faut en effet que le chemin de navigation soit assez simple et court. Dans le cas contraire, le fil d’ariane est trop long et donc illisible.
MeilleuresPharmacies – Sur mesure avec la technologie NodeJS
Le site Meilleures Pharmacies a été réalisé sur mesure à l’aide de la technologie NodeJS. Le menu de navigation est plutôt bien conçu, avec trois entrées principales : Produits / Symptômes / Marques. Il est parfaitement en adéquation avec l’activité et les produits vendus par le site.
Pour les rubriques Symptômes et Marques, on constate que le fil d’ariane joue le rôle de menu de navigation. C’est assez original et plutôt convaincant. L’affichage des listes de produits est particulièrement réussi, tant du point de vue fonctionnel que du point de vue purement esthétique. Un onglet « Fiche complète » apparaît lorsque l’on passe la souris devant l’image du produit, ce qui incite à cliquer et annonce à l’avance la qualité des fiches produits. La qualité des fiches produits est en effet au rendez-vous. Elles sont très complètes, comme vous pourrez vous en apercevoir.. Le bloc « quantité – prix – ajouter au panier », à droite, ressort très bien. Ce bloc, de quelque manière qu’il se présente, joue un rôle essentiel dans le processus de conversion. Soignez bien cet élément. Une amélioration possible pourrait consister à mettre plus en valeur et à rendre plus visible le système de filtres (tri par ordre alphabétique, par prix croissant etc.) dans les pages de listes. Les filtres sont très plébiscités par les visiteurs et fluidifient l’expérience utilisateur.
Le petit + : l’intégration d’un module de questions / réponses avec les pharmaciens à toutes les étapes du parcours. Gage de professionnalisme certain.
Découvrez les 8 tendances ergonomie / design sur les sites ecommerce.
1001 Tasses – Wizishop
Le site Mille et une tasses a été conçu avec Wizishop. Le design est original et reflète bien l’image de marque de l’entreprise (le côté naturel et authentique, avec l’utilisation de la couleur verte, l’effet de texture papier, les photos du carrousel etc.). De manière générale, il est important de faire en sorte que le site, dans son design, reflète au mieux l’univers de votre marque et les valeurs de votre entreprise. Cela doit être un élément au cœur de votre réflexion pendant l’étape de définition de la charte graphique. L’utilisation de couleurs très tranchées pour distinguer les catégories dans le menu de navigation (vert, jaune, orange, bleu) est un plus indéniable en termes de visibilité. On est loin des tons monotones, indistincts et assez fades au final du site « La Compagnie du lit ».
Le moteur de recherche interne, situé en haut des pages en position centrale, apparaît bien. Ce n’est pas le cas de tous les sites ! De même que le numéro du service client, juste au-dessus du moteur de recherche. A ce propos, il est toujours recommandé de rendre bien visible les informations de réassurance, c’est un gage de sérieux qui compte beaucoup pour les internautes. Il n’y a pas grand-chose à dire sur les fiches produits. Elles sont très bien faites. Les descriptions des produits sont très complètes et mettent correctement en évidence l’expertise et le sérieux de l’entreprise. On n’a pas affaire à de purs vendeurs, mais à des gens qui connaissent bien leur métier. Du moins, c’est l’impression qui transparaît (c’est l’essentiel !). La mise en avant sur les pages de listes de produits des logos de certification (Agriculture biologique, etc.) et des notes d’utilisateurs (sous forme d’étoiles) est aussi une bonne idée. Autre élément que l’on peut remarquer : la présence d’un blog, accessible en haut à droite des pages du site. Ça ne coûte en général pas très cher, et c’est un bon moyen d’enrichir le contenu du site (ne serait-ce que pour des considérations de SEO). A noter, en bas de pages, la bonne organisation du footer, qui présente dans sa partie supérieure les services proposés par l’entreprise (livraison gratuite, satisfait ou remboursé…). La liste de ces services apparaît au milieu de la page lorsqu’on a scrollé jusqu’en bas. En un mot, les pratiques de base sont bien respectées, même si quelques améliorations pourraient être faites pour optimiser le taux de conversion.
Le petit + : les explications contextuelles lorsqu’on passe la souris sur une image de produit. On trouve cela assez rarement sur les sites de e-commerce, pourtant ça permet d’accéder à un descriptif clair du produit sans être obligé de cliquer sur le lien pour accéder à la page produit.
Pour aller plus loin, découvrez :
12 exemples inspirants de boutique en ligne
Conseils et astuces pour gérer une boutique en ligne
Guide complet pour créer un site ecommerce
Laisser un commentaire