Les 9 caractéristiques d’un bon design pour un site e-Commerce

1. Facilitez la navigation

Lorsque vous souhaitez vendre des produits à vos visiteurs, le premier besoin est que l’eMarchand doit permettre facilement au visiteur de trouver le produit recherché. Une navigation efficace est importante pour n’importe quel site web, mais elle l’est encore plus pour un site e-Commerce. Perdre des visiteurs revient à perdre des clients, vous devez donc faire le maximum pour avoir un site clair et une navigation logique et intuitive.

Les sites e-Commerce doivent faire face à de nombreux challenges avec leur système de navigation à cause du nombre de produits présents. Les grands sites ont l’habitude de porter leur attention sur ces problématiques de navigation car trouver un produit est de plus en plus difficile à mesure que le nombre d’options augmente. Un facteur essentiel est la façon dont un utilisateur moyen tentera de trouver un produit spécifique. Ce qui a du sens pour le designer ou l’équipe de l’entreprise du marchand n’est pas forcément identique au chemin utilisé par l’internaute moyen pour trouver son produit. Les tests utilisateurs s’avèrent souvent aussi utiles que surprenants pour identifier ces usages.

Exemples :

Asos utilise un menu déroulant pour afficher l’ensemble des-sous rubriques. Les produits sont d’abord classés en grandes rubriques avant d’être affichés par catégories de produits, style ou type de magasin.

Asos

La boutique en ligne de Nike utilise une navigation verticale. Lorsque vous passez votre souris sur une rubrique, comme “homme”, un sous-menu affiche les types de produits classés par marque, collection ou sport, rendant plus simple et rapide la navigation.

Nike ID

2. Le design ne doit pas surpasser le produit

L’attention d’un site e-Commerce doit se porter sur les produits disponibles à l’achat. Un design trop extravagant aura généralement des conséquences plutôt négatives, l’attention étant attirée par le design du site et non sur les produits. Il est plus pertinent d’être neutre, voir minimaliste, dans le design et de se concentrer sur la mise en avant des produits pour capter l’attention de vos visiteurs.

Exemples :

L’Apple Store propose des produits au design simple et épuré. Leur magasin en ligne reprend une approche similaire, simple, claire et attirante qui ne distrait pas les acheteurs potentiels.

Apple Store

Rapha a réussi à allier un site Internet avec une vraie approche graphique tout en gardant une approche ergonomique très simple.

Rapha

Le site de Shoe Guru est un autre site au design très épuré et efficace. la page ci-dessous affiche les chaussures de la catégorie “homme” qui sont disponibles à la vente. Les informations affichées sont uniquement la photo, le prix, le nom du produit et bien sûr un lien vers la fiche produit pour avoir les détails du produit.

Shoe Guru

3. Faciliter la validation du panier

L’expérience utilisateur est un élément critique sur un site e-Commerce. Si le processus de validation du paiement est trop compliqué ou demande trop d’étapes, les acheteurs potentiels abandonneront leurs paniers avant de les payer. Idéalement, le processus de paiement doit se faire en un minimum d’étapes et être aussi simple que possible pour les acheteurs.

Exemples :

Lorsque vous ajoutez un produit sur le site Darty, vous arrivez directement dans le panier qui affichera l’ensemble des produits ajoutés, vous proposera de continuer vos achats ou de valider le panier tout de suite et de passer à l’étape de paiement en vous identifiant si vous avez déjà un compte ou en vous inscrivant.

Darty

Sur la boutique en ligne de GAP, lorsque vous ajoutez un produit au panier, au lieu d’être amené sur une nouvelle page, un cadre d’affiche près du résumé du panier en haut à droite, récapitulant les caractéristiques du produit que vous venez d’ajouter et vous proposant de passer à la validation de votre panier. Au bout de quelques secondes, sans action de la part de l’internaute, le cadre se referme et vous permet de continuer vos achats.

Gap

4. Une communication de marque

Beaucoup d’acheteurs sont influencés par la marque des produits lors de l’achat; établir une image forte et identifiable pour la marque et les produits est donc très important. Dans le cas de sites qui ont également des points de vente physique, le site Internet doit s’insérer dans une stratégie globale de marque. Dans ce cas, le site Internet fonctionnera en conformité avec les autres efforts entreprises par la société pour développer la marque au delà du site Internet.

Exemple :

Oakley est une marque établie et reconnue comme un leader sur son marché. Leur site Internet relaie de façon très efficace l’image de la marque et leur communication hors ligne. C’est un site de vente en ligne très attractif qui se distingue de ses nombreux concurrents vendant également des lunettes de soleil en ligne.

Oakley

5. Le design doit correspondre aux produits

Comme pour les autres types de sites Internet, les sites e-Commerce peuvent avoir un nombre infini de styles graphiques. Pourtant, en pensant le design d’un site e-Commerce, il est important de penser aux types de produits qui seront proposés sur le site. C’est d’autant plus important pour les petits sites proposant peu de références mais une gamme de produits spécifiques et tous centrés autour d’une thématique commune.

Si le design ne correspond pas parfaitement aux produits disponibles à la vente, les internautes seront perturbés et auront plus de difficultés à identifier clairement la thématique et à porter une pleine attention aux produits.

Exemples :

Innovative Baby vend tout type de produits pour les enfants. Le choix du design et du code couleur correspond à la gamme de produits mais reste toujours très propre, professionnel et adapté aux adultes qui sont ceux qui effectuent les achats.

Innovative Baby

Le site Internet de ShopRush a un design tendance qui correspond parfaitement à sa gamme de produits et à la cible visée.

Shoprush

6. Mettez en avant les produits les plus populaires

Souvent, les sites e-Commerce font un effort pour mettre en avant les produits qu’ils estiment les plus intéressants pour leurs visiteurs, l’objectif étant d’aider les visiteurs à trouver les produits qu’ils achèteront. Un grand nombre de sites utilisent un espace assez large sur leur page d’accueil pour promouvoir leurs promotions, nouveaux produits ou ce qui génèrera de l’intérêt. Sur ces sites, cet espace est mis à jour fréquemment et peut intégrer un carrousel afin d’afficher plus d’informations sans envahir l’espace.

Exemple :

Lorsque vous allez dans la rubrique “girls” du site TooByDoo, vous arrivez sur la page ci-dessous. Les liens vers les catégories spécifiques de produits sont à gauche mais une grande partie de la page est dédiée à la promotion des produits les plus populaires. Plusieurs produits sont affichés via un carrousel.

Toobydoo

7. Faites la promotion des produits associés

Une des clés du succès pour un site e-Commerce est la promotion des produits associés qui pourraient éventuellement intéresser vos visiteurs. Parfois ces produits associés sont listés directement sur les fiches produit; sur d’autres sites, ces suggestions n’apparaîtront qu’une fois vos premiers produits ajoutés au panier. Promouvoir le bon produit qui intéressera votre visiteur est la clé de cette approche visant à augmenter le panier moyen de vos acheteurs.

Exemple :

Lorsque vous êtes sur la fiche d’un produit sur le site The Company Store, les visiteurs se voient présentés les produits associés les plus pertinents. La pertinence des produits proposés est essentielle pour inciter vos visiteurs à ajouter des produits complémentaires.

The Company Store

8. Faites de belles photos

La vente en ligne est très différente de la vente en magasin car l’acheteur ne peut ni voir ni toucher le produit que vous lui proposez avant de prendre une décision d’achat. Afficher des photos de qualité, sous plusieurs angles et avec un zoom efficace aidera énormément vos visiteurs à surpasser l’appréhension de ne pas voir le produit  et facilitera leur prise de décision.

Exemples :

Rei a fait le choix d’afficher une multitude d’images pour chaque produit. Dans cet exemple, la tente est montrée sous plusieurs angles mais également dans son sac de rangement. Les acheteurs potentiels peuvent se faire une idée très précise du produit en se basant uniquement sur ces photos et n’auront donc pas peur de l’inconnu qu’ils auraient pu avoir sans voir toutes ces photos. Parfois, les images sont plus parlantes que les mots.

Rei

Sur son site Armani Exchange affiche des photos sous plusieurs angles ainsi que des détails du produit afin de permettre aux acheteurs potentiels de découvrir le produit dans son ensemble et d’éviter les mauvaises surprises.

Armani Exchange

9. Un système de filtre produit efficace

Bien que la navigation soit un élément critique afin de permettre aux visiteurs de trouver ce qu’ils cherchent,  il faut tout de même leur permettre d’effectuer une recherche. Certains visiteurs auront toujours du mal à trouver un produit trop spécifique même avec un bon système de navigation; plus les sites e-Commerce ont de référence, plus il y a de niveaux de navigation et la navigation se complexifie. Le type de recherche et de la quantité d’options qui doivent être offerts doit être basée sur le nombre de produits et d’options disponibles.

Exemple :

Sur le site Lee, après le choix du type de produit que vous souhaitez afficher, la barre de gauche se transforme en système avancé de filtrage des produits. Très efficace pour aider leurs internautes à trouver rapidement le produit qu’ils cherchent dans la taille, la couleur ou le style souhaité.

Lee

Et votre expérience ?

Evidement, il y a bien d’autres aspects à prendre en compte, ça fera sans doute l’objet d’un prochain article. Mais pour vous, quelles sont les éléments qui vous semblent essentiels dans le design d’un site e-Commerce ?