Création d’une boutique en ligne ( site E-commerce ) : les fondamentaux

Cours du mardi 13 novembre 2012
Le visiteur d’une boutique en ligne (ou site e-commerce) , un habitué des sites marchands dans la plupart des cas, doit être en mesure de retrouver facilement ses repères et ses habitudes de navigation. En général, il achète en ligne pour gagner du temps. Une bonne ergonomie et une navigation fluide et intuitive seront les critères qui le convaincra à devenir acheteur d’une part et d’autre part, qui l’incitera à revenir sur ce même site et devenir client fidèle.


Voyons donc comment un site ecommerce se distingue généralement.

1 – L’entête des pages web d’une boutique en ligne : le header

Dans tous ou presque tous les cas on retrouvera dans le header, et donc dans chacune des pages du site ecommerce et au-dessus de la navigation principale :

le logo – la recherche – mon compte – mon panier

– une recherche rapide

un champ de recherche rapide qui permettra au visiteur de taper directement le nom du produit ou la référence.
Elle est dans la plupart des cas placée à droite. Elle est destinée aux visiteurs qui savent déjà et avec précision ce qu’il cherche comme produit sur le site.

– un accés vers mon compte

L’accès à « mon compte » permet aux internautes qui ont déjà achetés sur le site d’accéder à leur information, leur suivi des commandes ou leur avoir …
Dans une boutique en ligne « Mon compte » est généralement placé aussi à droite dans le header.

– un bouton panier

Le bouton panier est facilement repérable toujours à l’extrémité à droite et juste à côté de l’accès à « mon compte »,il est souvent représenté par un petit icône en forme de sac ou panier avec le nombre d’articles qu’il contient.

Ainsi je vois combien d’articles j’ai ajouté sans avoir besoin d’aller dans ma page panier. Lorsque je n’ai aucun article dans mon panier, il sera inscrit « 0 article » afin que le visiteur comprenne que le décompte sera calculé ici.

boutique en ligne fondamentaux conception

2 – Les pages principales d’un site ecommerce

Ci-dessous le shéma des pages clés d’une boutique en ligne suivant le chemin type de l’utilisateur :

Page d’accueil > Page catalogue > Page détail produit > Panier > Tunel d’achat

La page d’accueil bien sûr est essentiel, elle est la vitrine de la boutique avec des produits mise en avant ou des bandeaux offres événementiels, coups de coeur, bonnes affaires, nouveautés.

En ce moment même ce sont les offres noël qui sont prépondérantes. On remarquera pour les sites habitat et fnac par exemple, qu’une nouvelle rubrique « noël » à vu le jour, en premier lien dans la navigation principale (voir plus haut).

La page catalogue montre tous les articles de la catégorie avec quelquefois le choix d’afficher 100 ou 200 produits sur la page ou de les trier par nouveauté ou par prix.

Souvent une colonne à gauche s’affiche afin de filtrer la catégorie selon la taille, la couleur, la marque et d’ accèder au niveau plus profond de l’arborescence (sous sous-rubriques).



Par exemple dans le site zalando.fr, je clique dans Femme > Vêtements > Robes par le menu du haut,
puis une fois dans la page catalogue je peux accéder par la colonne de gauche aux sous-catégories de la rubrique « Robes » correspondant au niveau 4 de l’arborescence.

Page détail produit

La page détail produit d’un site ecommerce permet une meilleure visibilité du produit avec un aperçu dans une fenêtre plus large et différentes vues du produit (de face, de profil, de dos par exemple pour une boutique en ligne de prêt à porter).

Le bouton « ajouter au panier » sera bien lisible et plutôt vers le haut de la page.

creation e-commerce conception

Dans l’exemple ci-dessus « paiement sécurisé, livraison gratuite, satisfait ou remboursé, service client  » à été ajouté en-dessous du bouton « ajouter au panier » pour sécuriser et convaincre l’acheteur de passer sa commande.

Page panier
Dans la page panier on retrouve le récapitulatif de la commande avec en général 2 boutons : « < continuer mes achats  » marche arrière vers le catalogue et « > valider la commande » on entre dans le tunel d’achats.

Les 2 entrées se trouve tout en haut de la page et répété plus loin en-dessous de notre liste d’achats.

construction e-commerce fondamentaux

En général on trouve dans la page panier du site web, des mises en avant de produits par exemple ici le bandeau « vous aimerez aussi ».

Pour convaincre le visiteur d’ajouter d’autres produits avant la validation de sa commande.

Tunnel d’achat

Le tunnel d’achat d’une boutique e ligne correspond à toutes les étapes à suivre une fois que l’on a cliqué sur « valider la commande ».

En général un schéma de navigation du tunnel d’achats est ajouté dans une barre horizontale en haut pour aider l’acheteur à se repérer

au fil des étapes. Comme le tunnel d’achat Zalando ci-dessous avec :

1- Mode de livraison ( actif car je suis dans l’étape 1 )

et 2, 3, 4 inactives pour l’instant.

Un tunnel d’achat ne doit jamais dépasser 4 étapes, plus long et l’acheteur risque d’abandonner en cours de route !

construction boutique en ligne fondamentaux

Laisser un commentaire