Laisser un commentaire

10 règles d'UX design spécifiques au e-commerce

L’UX design (design de l’expérience utilisateur) est depuis quelques années dans toutes les bouches, le terme est à la mode. En contrepartie, nombre de sites ont encore beaucoup de progrès à faire. Tout site tire profit d’une bonne UX, cependant il y a quelques règles qui sont spécifiques au e-commerce.

Quand on connait l’impact spectaculaire qu’elles peuvent engendrer sur le taux de conversion et donc le chiffre d’affaire, mieux vaut ne pas passer à côté ! Voyons donc les quelques règles à absolument avoir en tête lors du design et du développement d’un site e-commerce. Il s’agit de conseils concrets, cet article est donc aussi bien destiné aux designers qu’aux développeurs, let’s go!

Je suis un développeur et je n’ai pas de compétence particulière en design d’interface (UI design). Cependant, j’estime qu’il est important d’acquérir une compréhension du fonctionnement d’un design. En outre, co-construire avec le designer (ou l’équipe design) sur les projets que je réalise mène toujours à de meilleurs résultats.

En ce sens, lors de la refonte du site d’Alphapole, j’ai effectué de nombreuses recherches et analysé les différentes itérations des designs, afin d’identifier les points de friction potentiels au niveau de l’expérience utilisateur.

Ajout au panier

Le bouton d’ajout au panier est omniprésent sur un site e-commerce. C’est l’essence même d’un site e-commerce que de pouvoir ajouter les articles dans le panier.

Je ne vais donc pas parler ici de la forme et du positionnement de ce bouton, lequel est un CTA qui répond aux règles d’UX classiques du call to action. Je vais plutôt détailler le comportement attendu lors du clic sur ce bouton.

En effet, l’ajout au panier est une étape essentielle dans le processus d’achat, il ne faut donc ni perdre ni frustrer l’utilisateur. Qu’attend-il du site lorsqu’il clique sur ce bouton ?

Notre e-shopper veut être certain que son action a bien été prise en compte. Il faut donc que l’interface reflète l’action effectuée, un feedback visuel. Sans cela, il risque de cliquer une seconde fois sur le bouton et se retrouver avec l’article en double ou triple dans son panier.

En général, un site e-commerce possède une icône “panier”. Il est donc conseillé d’avoir un badge qui indique le nombre de produits présents dans le panier et optionellement le total ou sous-total. Ainsi, un ajout au panier viendra immédiatement mettre à jour ces informations. Cependant, cette icône manque de visibilité et, même avec une subtile animation, il y a de fortes chancs que l’utilisateur ne le remarque pas.

Pour plus de visibilité, deux options sont communément adoptées. La première est d’ammener l’utilisateur directement sur la page panier. Cette première option est à considérer très soigneusement. En effet, “ajouter au panier“ ne veut pas dire “aller au panier“. À moins que le site privilégie des paniers avec un seul article, cette option laisse moins de chance à l’utilisateur d’augmenter son panier moyen.

Dans un restaurant, lorsque vous avez fini votre plat, le serveur s’enquiert de savoir si vous voulez un dessert ou des cafés avant de vous apporter l’addition. La logique est ici la même. À moins qu’il s’agisse d’un site ne vendant qu’un seul type de produit ou des produits mutuellement exlusifs, cette solution est à éviter si vous voulez augmenter le panier moyen.

L’autre option existe sous différentes formes. Certains sites mènent à une page intermédiaire, d’autres utilisent une modale (ou popin). La logique est la même, on confirme à l’utilisateur que son article a bien été ajouté au panier. L’utilisateut veut également être certain que le bon article a été ajouté au panier. On affiche donc une image de l’article une image et le nom de l’article et la quantité ajoutée.

ajout au panier chez Patagonia
Chez Patagonia, on a une fenêtre qui descend, impossible pour l'utilisateur de ne pas le voir. Seul problème, elle disparaît d'elle même après quelques secondes. Mieux vaut laisser l'utilisateur maître de l'action

On peut également en profiter pour présenter à l’utilisateur un résumé de sa commande avec le nombre total d’articles dans le panier ainsi que le sous-total. De plus, on peut en profiter pour faire un cross-selling ou de l’upselling. Nous allons y revenir.

J’ai tendance à préférer l’utilisation de la modale à la page intermédiaire. Ainsi, le bouton fait vraiment ce qu’il indique : il se contente d’ajouter au panier et laisse l’utilisateur sur la même page. Vous avez dès lors l’opportunité de lui présenter ses options :

Upselling et cross-selling

Ces deux pratiquent signifient respectivement vendre des produits complémentaires et vendre un produit plus haut de gamme. Les deux peuvent s’utiliser en complément, tout dépend du besoin de la boutique en question.

L’important est de saisir les oppotunités de x-selling et d’upselling. Certaines boutiques présentent ces options sur la page panier. La règle n’est ici pas absolue, mais une fois l’utilisateur sur la page panier, mieux vaut ne plus trop le distraire.

En revanche, les pages produits et la modale de confirmation d’ajout au panier sont des emplacements tout indiqués. Sur la page produit, le prospect exprime un besoin ou une envie par rapport au produit en question. Il a donc de grande chance d’être réceptif à des produits complémenaire de la même gamme et/ou des produits plus haut de gamme répondants au même besoin.

OVH vous propose d'autres produits lorsque vous achetez un nom de domaine
OVH propose toujours des produits complémentaires lors d'une commande

Lorsque notre utilisateur ajoute un produit au panier, il indique clairement si ce n’est une volonté d’acquérir ce produit, un très fort intérêt. C’est le moment idéal pour lui proposer des produits qui se marient bien avec celui qu’il est sur le point d’acquérir. Nouveau téléphone ou ordinateur ? Une housse ou coque de protection est une très bonne idée. Nom de domaine ? Voici une offre d’hébergement idéale pour votre prochain site…

Vous saissisez l’idée. L’utilisateur se sent accompagné dans sa démarche d’achat par un site “qui le comprend” et vous augmentez à coup sûr le panier moyen. C’est gagnant-gagnant.

Page panier

La page panier est un incontournable. La première erreur est de ne pas en avoir. Certains sites se limitent en effet à un “mini panier” qui s’affiche au survol de l’icône panier ou sur le côté. Ce choix a pour principal inconvénient de ne pas présenter une vue globale des éléments du panier ainsi qu’une interraction facile.

Les utilisateurs utilisent aussi le panier comme moyen de stockage. Ils y reviennent par la suite pour comparer différents produits entre lesquels ils hésitaient. Il faut donc leur faciliter la tâche en affichant les différentes informations utiles et un lien vers la fiche produit complète (en général le titre et la photo du produit). Cela permet de facilement retrouver tous les détails d’un produit avant la décision finale.

En outre, la panier doit permettre de supprimer des articles et d’ajuster la quantité facilement avec une mise a jour automatique. N’obligez pas l’utilisateurt à cliquer sur un bouton pour calculer le nouveau sous-total et prendre en compte ses changements.

panier site Ralph Lauren
Ralph Lauren permet d'un clic de modifier, supprimer ou sauvegarder les articles du panier

Une fonction qui peut s’avérer appréciable : “envoyer ce panier par email”. De nombreux shoppers commencent sur mobile et terminent le processus d’achat sur leur ordinateur. Vous leur facilitez ainsi la tâche et vous gagnez une adresse email. Mieux vaut un tiens que deux tu l’auras ! De cette manière, vous serez en mesure de relancer le client s’il ne termine pas son achat, encore une fois, gagant-gagnant. On peut alternativement offrir la sauvegarde via un compte client.

Par ailleurs, c’est généralement sur cette page que se trouve le champ permettant d’entrer un code de réduction. Il est conseillé de ne pas rendre se champ trop proéminent. L’utilisateur qui n’a pas de réduction risque d’être frustré de savoir qu’il est possible d’obtenir des réduction mais que lui n’en a pas.

En revanche, l’utilisateur qui possède un code de réduction cherchera l’endroit où rentrer son code. Au lieu de directement afficher le champ avec le bouton qui permet d’appliquer le code, vous pouvez simplement utiliser un lien “J’ai un code de réduction”. Ce n’est qu’au clic qu’apparaît le champ permettant à l’utilisateur d’entrer son code.

Mini panier

Il ne faut surtout pas penser que le mini panier est à bannir. Ce qui est contre-productif est de le concevoir en tant que substitut au panier normal. En revanche, grâce au mini panier, l’utilisateur peut d’un coup d’œil savoir ce que contient son panier et quel est le total de la commande.

Évidemment, le mini panier permet de naviguer vers la panier complet. En outre, l’utilisateur apprécie d’avoir l’option de passer directement au règlement de la commande. Comme toujours, l’utilisateur est maître et s’il le souhaite, il gagne un clic en évitant l’étape intermédiaire de la page panier.

En général, le mini panier apparaît au survol de l’icône du panier. Chez Alphapole, pour la version mobile, j’ai fait le choix de ne pas avoir de mini panier car son utilisabilité est bien moindre sur petit écran.

Le checkout

C’est là que tout se passe, l’étape finale jusqu’au paiement ! Cette étape est souvent appelée “tunnel de conversion”, car il regroupe les informations de livraison, facturation et paiement.

J’enfonce surement une porte ouverte mais il est bon de le rappeler : moins il y a de choses à rentrer pour l’utilisateur, meilleur sera le taux de conversion. Cela passe par de nombreuses choses :

La première chose à faire est de définir les étapes du processus de checkout. Il est tentant de tout mettre sur une seule page, cependant, s’il y a trop de champs, cela risque d’effrayer l’utilisateur. Cependant, si vous vendez des services numériques par exemple, vous pouvez peut-être vous contenter du nom, prénom et informations de paiement. Dans ce cas, le one-page checkout peut faire sens. Il n’y a là pas de règle unique, le mieux est de trouver des exemples qui peuvent s’appliquer à votre situation.

Voyez par exemple dans cet article pourquoi Banana Moon a fait le choix de migrer d’un checkout en une seule page vers un checkout en plusieurs étapes. Quel que soit votre choix, tentez de limitez au maximum les informations et de diminuez le travail de votre client.

Par exemple, si vous demandez les informations de facturation, il y a de grandes chances pour qu’elles soient les mêmes que celles de livraisons. Vous pouvez n’affichez ce formulaire que dans le cas où l’utilisateur clique sur “entrer une adresse de facturation différente”.

Par ailleurs, comme mentionné, il ne faut pas que l’utilisateur soit distrait. On peut enlever tous les éléments d’interaction tels que les menus et autres éléments cliquable. Amazon adopte par exemple cette approche. Vous ne laissez dans ce cas qu’un lien permettant à l’utilisateur de revenir au panier s’il le souhaite.

page de confirmation de commande Amazon
Sur Amazon, au stade de la confirmation de paiement, le menu et la plupart des liens disparaissent

De plus, faites en sorte que le résumé de la commande soit facilement localisable, même sur mobile, l’utilisateur voudra surement vérifier une dernière fois le total, les frais de port et le contenu de sa commande avant de la payer.

En dernier lieu, vous avez surement déjà vécu cette expérience où, prêt à réaliser votre achat, on vous demande de créer un compte. Mais vous souhaitez juste régler la commande, pas prendre une carte d’abonnement. C’est un peu comme si au supermarché, vous étiez obligé de prendre une carte de fidélité pour pouvoir acheter quoi que ce soit.

Obliger l’utilisateur a avoir un compte peut faire sens pour Amazon, cependant, c’est un frein énorme pour la majorité des sites, même de marques connues. Vous devez donc impérativement offrir un guest checkout qui ne nécessite pas de compte. Une fois la commande passée, comme vous avez déjà toutes les inforations nécessaires, vous pouvez proposer à l’utilisateur de créer un compte (en lui expliquant les avantages, tel que le suivi de commande). Il n’a alors plus qu’à entrer un mot de passe et voilà le compte est créé !

Aspects techniques

Pour faciliter la saisie des informations, on veillera bien à préciser le type adéquat pour chaque champ de formulaire. Ainsi, le clavier du téléphone s’adapte lorsqu’il faut saisir un téléphone ou un email par exemple. C’est bien plus agréable !

En outre, si rentrer des informations est fastidieux, ce n’en est pas moins inévitable… ou presque ! Que l’on soit sur mobile ou desktop, la plupart des navigateurs connaissent déjà les informations de l’utilisateur et peuvent donc remplir automatiquement le formulaire.

pre-remplissage du formulaire avec iOS
Safari sur iOS propose de pre-remplir le formulaire sur le checkout d'Alphapole, l'utilisateur n'a alors rien à saisir manuellement

Le pre-remplissage fonctionne pour toutes les coordonnées ainsi que pour les cartes de crédits. Il suffit de bien indiquer au navigateur quelles sont les données à placer dans chaque champ. Cela s’effectue via des attributs HTML.

Enfin, la dernière chose à faire est de penser à désactiver la correction automatique sur les champs qui risquent d’être problématique. Ainsi, personne n’a envie de se voir corriger l’ortographe de son nom de famille… De nouveau, la désactivation de la correction se fait via un simple attribut HTML sur les input et textarea :

<input autocorrect="off" autocapitalize="off" spellcheck="false">
<textarea autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>

Programme fidélité

Pour certains, cela peut paraître anodin, mais les consommateurs adorent les programmes de fidélité. Vous seriez surpris de savoir combien de clients demandent si un tel programme existe.

Cela créé véritablement un lien entre un client et l’entreprise. Un programme fidélité, comme son nom l’indique, permet bien entendu de “récompenser” la fidélité des clients : ventes privées, offres spéciales, réductions en fonction du statut.

programme de fidélité Alphapole
Le programme fidélité Alphapole à base de points

Le programme de fidélité est aussi l’occasion de créer une actualité avec les clients. Vous les contactez ainsi pour leur signifier qu’ils ont gagné des points, qu’ils ont débloqué une nouvelle réduction ou un statut de membre. Grâce à cela, ils pensent plus souvent à l’entreprise et saisiront peut être l’occasion pour réaliser un achat.

Le compte client

Un site e-commerce peut difficilement se passer de compte client. Ces derniers voudront pouvoir vérifier le statut d’une commande, télécharger leur facture, enregistrer leurs coordonnées et préférences (livraison, facturation, cartes bancaires…) pour faciliter les prochains achats etc.

De même que pour le checkout, l’espace client est parfois contraint par la solution technique utilisée (Prestashop, WooCommerce, Shopify…). Il ne sera donc pas toujours possible, ou techniquement compliqué, donc financièrement assez cher, de fournir une interface 100% personnalisée.

Bien qu’il soit presque toujours possible d’offrir une expérience unique aux visiteurs, dans ce domaine, on peut s’en tenir à un design simple et fonctionnel :

Parmi les sites desquels je suis client, deux m’ont particulièrement impressionnés par leur design fonctionnel :

Voilà, il me semble que nous avons fait le tour. N’hésitez pas à partager d’autres règles que j’aurais oublié. De plus, si vous avez des retours d’expérience sur le sujet, faites en part dans les commenaires, c’est toujours très intéressant.

Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```