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 ?

• Il veut évidemment que le bouton ajoute l’article au panier,
• Il veut être certain que l’article ait bien été ajouté,
• Il veut ensuite poursuivre ses achats ou procéder au règlement.

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 [en], 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 chances que l’utilisateur ne le remarque pas.

Pour plus de visibilité, deux options sont communément adoptées. La première est d’emmener 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’utilisateur 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.

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 :

• Une liste de produits qui pourraient l’intéresser en complément (cross-selling) ou remplacement (upselling),
• Se rendre sur le panier si c’est ce qu’il souhaite,
• Poursuivre ses achats (on ferme simplement la modale et l’utilisateur poursuit sa navigation comme il l’entend.

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 opportunité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émentaires de la même gamme et/ou des produits plus haut de gamme répondants au même besoin.

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 saisissez 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 interaction facile.

Par ailleurs, les internautes ont certaines attentes [en] concernant cette page :

• articles avec les images,
• pouvoir retourner sur la fiche produit d’un clic,
• pouvoir facilement ajuster la quantité.

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’utilisateur à cliquer sur un bouton pour calculer le nouveau sous-total et prendre en compte ses changements.

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 ce 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 sûrement 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 :

• Répartition des champs du formulaire en étapes ou one-page,
• Mettre en avant les éléments de réassurance,
• Enlever toutes les distractions pour que l’utilisateur se concentre sur sa mission.

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.

Par ailleurs, 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”.

En outre, 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.

De plus, faites en sorte que le résumé de la commande soit facilement localisable, même sur mobile, l’utilisateur voudra sûrement 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 sûrement 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 informations 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.

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’orthographe 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>

Informations de paiements

Entrer ses numéros de carte n’est à nouveau pas le plus fun dans une transaction, d’autant plus que c’est souvent source d’erreur. Une fois de plus, les navigateurs tentent de faciliter la vie des internautes.

Si les informations de carte sont déjà disponibles dans le navigateur, elles pourront être remplies automatiquement à la demande de l’utilisateur. Si elles ne sont pas présentes, certains navigateurs/appareils offriront la possibilité de scanner les numéros de la carte via l’appareil photo.

Ces deux fonctionnalité ne sont disponibles que lorsque les attributs des champs de carte sont bien renseignés.

En terme de design, si vous en avez le contrôle, rendre le tout visuel améliore grandement l’expérience utilisateur.

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.

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 :

• espace facilement accessible depuis le menu,
• facilité d’accès aux informations et modifications aisée lorsqu’utile,
• accès aux commandes en cours et passées (avec téléchargement des factures),
• informations sur le programme fidélité si applicable,
• récupération du mot de passe (social login et magic link connect sont un plus).

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

• Lacoste vous accueille immédiatement dans “son club” en mettant en avant son programme fidélité. Le compte client est simple et épuré, tout en étant design.
• SEOPress (outil de référencement) guide les clients grâce à la mise en avant de guides et d’éléments essentiels au démarrage de l’outil. Les autres options sont toujours à portée de main.

2FA

Si ce terme ne vous parle pas, il s’agit d’un acronyme signifiant Two-factor authentication, soit en français, l’authentification à deux facteurs.

Cela peut concerner entre autre le compte client. Il s’agit en fait de confirmer l’identité de la personne par une seconde méthode (la première étant en général le mot de passe). Cette seconde méthode passe en général par un de ces trois moyens :

• envoi d’un code ou d’un lien de validation sur l’email préalablement connu de l’utilisateur,
• envoi d’un code par SMS ou appel automatisé sur le numéro de téléphone préalablement connu de l’utilisateur,
• validation depuis une application préalablement installée sur l’appareil de l’utilisateur.

L’email comme le SMS sont éligibles à l’autofill. Par exemple, sur macOS et iOS, si vous recevez un SMS contenant un jeton de sécurité et que vous êtes sur la page vous demandant de rentrer ledit jeton, Safari vous pourra vous proposer de remplir le jeton automatiquement, sans même que vous ayez eu à consulter vos messages.

Pour cela, comme vous l’autofill des coordonnées et des informations de carte bancaire, il faut renseigner un attribut spécifique. Il n’y en a qu’un seul.

  autocomplete="one-time-code"

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 commentaires, c’est toujours très intéressant.