Interface utilisateur du panier d'achat : 5 meilleures pratiques de conception UX
Les paniers d'achat abandonnés sont un problème courant pour la plupart des propriétaires d'entreprises de commerce électronique. L'interface utilisateur (UI) du panier d'achat est cruciale pour réduire les abandons. Car si la procédure de paiement est trop compliquée, de nombreux clients abandonneront en fait leur panier.
Les clients souhaitent une solution rapide et facile à ce problème afin qu’ils puissent acheter sans souci.
Utilisez ces recommandations de bonnes pratiques pour créer l’interface de panier d’achat la plus conviviale possible.
1 - Proposer des options d'édition du panier
Les clients peuvent vérifier leur panier lorsqu’ils sont prêts à payer pour s’assurer qu’il contient les bons produits avant de continuer. Cependant, les clients peuvent parfois faire des erreurs. Ils peuvent sélectionner la mauvaise taille, par exemple, ou mettre trop de choses dans leur panier. Il peut être ennuyeux pour les clients de supprimer et d’ajouter le mauvais article à leur panier. Envisagez d’ajouter une fonctionnalité qui permet aux utilisateurs de modifier leurs produits dans l’interface utilisateur du panier d’achat pour l’améliorer.
Vous pouvez, par exemple, fournir une édition en ligne afin que les clients puissent modifier les détails du produit sans avoir à ouvrir une autre fenêtre contextuelle. Il y aura une fonction déroulante, des steppers (signes plus et moins) et des zones de saisie de quantité dans cette conception UX.
Les clients doivent pouvoir supprimer des éléments et voir un avis avec une option « Annuler » s’ils souhaitent récupérer l’élément qu’ils ont supprimé.
2 - Autoriser les clients à conserver les articles dans leurs paniers.
Les utilisateurs laisseront occasionnellement leurs paniers sans surveillance ; c’est un fait de gérer une boutique en ligne. Cela ne signifie cependant pas que le panier doit être mis à jour à chaque fois qu’un visiteur revient. Vous ne savez jamais la raison précise pour laquelle ils ont initialement abandonné. Ils voudront peut-être enregistrer leurs éléments sans se connecter à leurs comptes pour une utilisation ultérieure. Alternativement, ils peuvent être indécis sur le shopping ce jour-là. Ils pourraient souhaiter attendre jusqu’à ce qu’ils reçoivent leur chèque de paie d’ici la fin de la semaine.
Dans les deux cas, l’utilisateur ne voudra pas redémarrer son processus si le panier est actualisé. Pour utiliser cette fonctionnalité, vous devez inclure un code qui crée des cookies de longue durée. Vous devez également fournir un bouton qui permet aux utilisateurs d’enregistrer des éléments pour plus tard ou pour les conserver.
3 - Utiliser une mise en page basée sur un tableau
La mise en page optimale à utiliser lors de la création de l’interface utilisateur de votre panier est celle qui est construite sur des tableaux. Les utilisateurs doivent pouvoir scanner les données sans être gênés.
Par conséquent, vous devez utiliser des polices de caractères conventionnelles et éviter les arrière-plans élaborés. Assurez-vous qu’il y a toujours un espace suffisant entre les cellules et que les bordures sont suffisamment visibles pour le faire.
Il ne devrait pas y avoir d’éléments distrayants, car les informations sur le produit doivent être lisibles et scannables.
En général, avoir un design épuré est bénéfique. Les clients peuvent devenir confus et perdre tout intérêt pour votre produit si vous utilisez des éléments inutiles ou des conceptions complexes.
4- Limitez le nombre de champs que vous ajoutez
Avoir trop de champs à remplir par les clients est une méthode précise pour les amener à abandonner leurs paniers.
Supprimez tous les champs superflus du formulaire à remplir pour éviter cela. Il est important de simplifier le processus de paiement, car les clients n’achèteront pas chez vous si c’est difficile. Ils pourraient ne pas vouloir revenir en conséquence. Gardez le nombre de champs au minimum pour soulager votre esprit. Ne demandez que les détails dont vous avez besoin pour exécuter la commande, tels que :
- Nom du client
- Adresse de livraison
- Détails des paiements
5- Assurez-vous que vos CTA sont visibles
Assurez-vous d’offrir aux utilisateurs deux options une fois qu’ils ont atteint la page du panier : « Continuer les achats » et « Commander ». Le paiement sera votre principal appel à l’action, et « Continuer vos achats » sera votre appel à l’action secondaire.
Une fois ces deux options affichées, assurez-vous qu’elles sont claires en adhérant au principe de hiérarchie visuelle du design UX. Par exemple, le bouton « Commander » de la page de paiement doit être l’élément le plus gros et le plus audacieux. Assurez-vous de laisser suffisamment d’espace vide pour que le bouton puisse se démarquer.
Les utilisateurs doivent également pouvoir utiliser le bouton « Continuer les achats ». Faites-le plus petit et d’une couleur différente pour éviter de le rendre aussi attrayant visuellement que le CTA principal.
references
- https://www.trafiki-ecommerce.com/marketing-knowledge-hub/the-ultimate-guide-to-shopping-cart-ux/
- https://onilab.com/blog/shopping-cart-ux/#cart-ux-principles
- www.asos.com
- www.clarks.eu