Design du panier d’achat : modèles pour une meilleure conversion

Le commerce électronique est aujourd’hui une composante essentielle de l’internet. Au fil du temps, les magasins en ligne se sont développés à une telle échelle qu’ils ont gagné une place dans notre vie quotidienne. La popularité croissante du commerce électronique s’accompagne toutefois d’une concurrence accrue.

Les détaillants du monde entier se sont interrogés sur le coût et les avantages d’un investissement dans l’UX de leurs boutiques en ligne. Que faut-il pour qu’un site de commerce électronique offre une bonne UX ? Qu’est-ce qui fait une bonne expérience d’achat en ligne ? Et surtout : pouvons-nous survivre si nous ne faisons pas cet investissement ?

Le commerce électronique a déferlé sur le commerce de détail – il est maintenant temps pour les magasins physiques de couler ou de nager. Les détaillants en ligne optimisent de plus en plus le design de leur UI dans le but d’obtenir une bonne conversion et des ventes saines, il est temps de rattraper le retard et de rester pertinent.

Et quel meilleur endroit pour commencer que le design classique du panier d’achat ? C’est un élément clé de l’expérience d’achat, et il peut avoir un impact étonnamment important sur les indicateurs clés de la plateforme. C’est l’aspect typique d’un site web qui peut être largement amélioré par des ajustements mineurs – et les bénéfices peuvent être énormes.

Dans cet article, nous allons discuter des principaux modèles de panier d’achat, de quelques exemples impressionnants et de la façon de les utiliser avec votre outil de prototypage.

Un site de commerce électronique comporte de nombreux aspects différents qui doivent fonctionner ensemble afin de répondre aux besoins de l’utilisateur et de l’encourager à acheter. Parmi ces aspects, certains visent à aider les utilisateurs à voir et à explorer les articles disponibles, comme la navigation. D’autres visent à aider les utilisateurs à saisir les caractéristiques d’un article particulier, comme la page produit.

Le panier d’achat joue un rôle très important dans la danse générale des ventes en ligne. La page du panier n’est pas tant un dernier arrêt avant le paiement, même si les utilisateurs passent en revue les articles de leur panier avant de passer à la caisse. En effet, l’utilisateur découvre le panier au fur et à mesure qu’il navigue et explore le site, généralement sous la forme d’une petite icône en haut à droite de l’écran. C’est pourquoi il est si important de respecter les principes généraux du design de l’UI pour créer une expérience fluide.

L’objectif principal du panier d’achat est d’aider l’utilisateur à bien comprendre ce qu’il commande et les détails de sa commande. Il permet également à l’utilisateur d’effectuer des changements de dernière minute, par exemple de commander deux chemises au lieu d’une seule ou de changer la couleur de la chemise.

Le panier d’achat est souvent un élément que les utilisateurs n’examinent pas activement, mais qu’ils remarquent immédiatement lorsqu’il ne répond pas à leurs attentes. Il s’agit d’un bref aperçu de toutes les informations importantes, la fonctionnalité étant la principale préoccupation. Cela nécessite une bonne architecture de l’information qui permette aux acheteurs de se concentrer sur l’expérience.

Le design des paniers d’achat n’a pas vraiment pour but d’inciter l’utilisateur à acheter davantage (bien que cela soit possible). Il s’agit de faire en sorte que l’utilisateur puisse facilement passer sa commande, avec le moins de frictions possible. Il s’agit d’éliminer tous les obstacles et d’amener l’utilisateur à la ligne d’arrivée rapidement.

Une distinction fondamentale importante est que la plupart des plateformes proposent deux designs pour le panier d’achat. Le premier est le panier de navigation que les utilisateurs verront lorsqu’ils exploreront et achèteront. Il s’agit généralement d’une icône qui se trouve dans la barre de navigation et qui indique le nombre d’articles qu’il contient. La seconde est la page du panier, consacrée uniquement au panier et aux articles qu’il contient.

Les deux sont importants et peuvent être façonnés pour servir des objectifs différents. L’icône du panier de navigation, par exemple, peut être un allié utile si vous souhaitez encourager les utilisateurs à faire plus d’achats ou à passer rapidement à la caisse. Lorsque les utilisateurs naviguent sur le site web, l’icône peut faire l’objet de brèves animations ou d’autres signaux visuels qui attirent l’attention sur elle et incitent les utilisateurs à chercher à passer à la caisse plus rapidement.

La page du panier d’achat est cruciale, car elle doit offrir beaucoup d’informations aux utilisateurs de manière organisée, afin de ne pas les submerger. Cela dit, cette page est une excellente occasion d’inciter les utilisateurs à acheter de plus grandes quantités d’un même article, ou de faire un peu de vente croisée.

L’autre façon dont les designers peuvent utiliser ces informations est de nager sciemment à contre-courant. Sachant que la plupart des utilisateurs s’attendent à ce que le panier se trouve en haut à droite, les designers peuvent créer quelque chose de complètement différent. C’est généralement le cas des sites web qui visent à être mémorables et à repousser les limites du design conventionnel.

Cette voie peut s’avérer délicate, comme vous le diront la plupart des designers en soupirant. Être unique et innovant, c’est bien, mais cela comporte des risques. Après tout, tant de choses peuvent mal tourner lorsqu’il s’agit de l’expérience utilisateur avec un design ingénieux. Dans le cas présent, l’idée que les utilisateurs ne trouveront pas le chariot à l’endroit prévu renforce le besoin de trouver le chariot, où qu’il soit.

Il n’y a rien de mal à offrir aux utilisateurs une toute nouvelle expérience – mais si les utilisateurs ne peuvent pas accomplir leur tâche d’achat d’articles, leur expérience n’a pas été bonne. Le panier est un élément qui doit toujours être à portée de vue, auquel les utilisateurs peuvent se référer rapidement. Il doit être immédiatement reconnaissable.

Vous cherchez à créer quelque chose de nouveau ? Pourquoi ne pas jeter un coup d’œil au nouveau style à la mode appelé ” neumorphisme” ?

De plus en plus de sites web proposent aux utilisateurs un mini-panier. Il s’agit, en pratique, d’une vue agrandie de l’icône du panier dans laquelle les utilisateurs peuvent voir les détails des articles. C’est un excellent moyen de donner à l’utilisateur plus de contrôle sur ce qui se trouve dans le panier, par exemple en rectifiant instantanément un parapluie ajouté par erreur.

Il convient toutefois de faire une distinction importante entre ce mini-panier et le design d’un panier d’achat pleine page. Compte tenu de l’espace réduit, vous ne voulez pas submerger les utilisateurs en leur offrant trop d’options. Ce mini-panier doit être un petit carré ou rectangle qui n’occupe qu’une fraction de l’écran.

Il doit inclure la liste complète des articles dans le panier, ainsi que la possibilité de supprimer l’article ou de modifier le nombre d’articles dans la commande. Ce design de mini-panier d’achat doit offrir aux utilisateurs deux CTA de base : l’alternative de passer directement à la caisse ou d’aller dans le panier d’achat pour tout voir plus en détail.

Mais c’est là qu’il faut s’arrêter. N’oubliez jamais que ce design est destiné à un espace très restreint, et que même si les utilisateurs veulent de la liberté et du contrôle, ils peuvent être facilement surchargés. Vous pouvez lire notre article sur le Paradoxe du choix pour les UXers, mais l’essentiel est que les utilisateurs peuvent prendre beaucoup de temps avant de prendre une décision. Si ce temps s’étire trop longtemps, les utilisateurs peuvent être paralysés et cesser de s’amuser.

Pour que les utilisateurs soient pleinement maîtres de la situation, ils doivent savoir à quoi s’en tenir. Ils ne doivent pas se demander si la dernière tâche qu’ils ont effectuée a été menée à bien – ce n’est pas une façon de faire du commerce.

Pour les consommateurs, le fait de recevoir une notification indiquant qu’un nouvel article a été ajouté constitue une confirmation de réussite. Cela réduit le nombre de fois où les utilisateurs ajoutent plusieurs fois le même article, car ils ne sont pas sûrs que le système a compris leur commande. Le processus de paiement s’en trouve facilité et accéléré, car les utilisateurs n’ont plus besoin de passer en revue chaque article de leur panier pour en corriger les numéros.

• La possibilité de retirer des éléments
• La possibilité de modifier tout ce qui concerne les articles. Cela inclut la modification des quantités et de toute autre spécification. Un menu déroulant est un choix courant pour ces contrôles.
• Informations de base sur chaque article, y compris une photo.
• Un lien vers la page produit de l’article
• Estimation du montant total de l’achat, y compris les frais supplémentaires tels que les taxes ou les frais d’expédition.
• La possibilité de transformer n’importe quel article en cadeau : il peut s’agir d’une simple case à cocher ou de boutons radio.
• Un emplacement pour insérer d’éventuels codes promotionnels ou coupons, si la plateforme fonctionne avec ces derniers.
• Options de paiement

Ce sont les éléments clés que toutes les pages de panier doivent contenir. S’il y en a autant, c’est précisément parce qu’il s’agit du dernier examen que les utilisateurs font de l’ensemble de leur commande. Le design du panier d’achat doit donc offrir toutes les informations importantes dont l’utilisateur peut avoir besoin, tout en lui donnant la possibilité de changer quoi que ce soit dans sa commande.

Cela inclut les mouvements classiques de hiérarchie visuelle, tels que le regroupement d’éléments d’information pour que les utilisateurs comprennent qu’il s’agit d’un seul et même élément. Comme il s’agit d’un sujet très vaste, vous pouvez consulter nos deux articles sur la hiérarchie visuelle et l’architecture de l’information pour plus de détails.

De nombreux magasins tentent également d’épurer les visuels du design du panier d’achat en cachant certains éléments derrière des icônes ou des boutons qui font apparaître des popups. Les emplacements pour les coupons et les remises, par exemple, peuvent être dissimulés afin que les utilisateurs puissent cliquer dessus en cas de besoin. Cela dit, il est toujours essentiel de s’assurer que les utilisateurs peuvent localiser ces boutons et en comprendre la signification avant de cliquer.

À plus grande échelle, le design du panier d’achat pourrait être conçu de manière à ce que chaque article soit extensible au survol ou au clic. De cette manière, les utilisateurs peuvent choisir d’examiner chaque article plus en détail ou de poursuivre avec les informations de base qui leur ont été données. Les possibilités sont infinies !

Il en va de même pour les commandes. Le design d’un panier d’achat doit permettre à l’utilisateur de modifier ses achats, mais toutes les commandes associées à chaque article ont besoin d’espace. Ils doivent tous être cliquables, par exemple pour augmenter ou diminuer la quantité d’un article.

Certains designs de paniers d’achat mobiles contournent ce problème de convivialité en proposant un bouton unique pour toute modification des articles. Ce bouton permet d’accéder à un autre écran ou à une fenêtre modale superposée offrant davantage d’options.

C’est la raison pour laquelle les plateformes de commerce électronique ne peuvent tout simplement pas se passer de prototyper le design du panier d’achat : les tests. Il n’est pas possible de tester un simple concept. L’équipe a besoin d’un prototype physique à placer devant les utilisateurs et à tester leur réaction.

Les concepteurs ont souvent une idée précise de ce qui est bon ou mauvais dans le design – mais le comportement de l’utilisateur est la seule chose qui sépare un succès d’un échec.

Il est donc temps pour l’équipe de design de mettre toutes ses idées à l’épreuve. À l’aide d’un outil de prototypage professionnel, l’objectif devrait être de créer plusieurs prototypes initiaux et de progresser progressivement. Au fur et à mesure que le projet évolue, le prototype devient de plus en plus détaillé, jusqu’à ce qu’il devienne une représentation haute-fidélité qui ressemble à s’y méprendre au chariot réel.

Pour beaucoup, c’est le moment de vérité. Le moment où nous découvrons si le design va être un succès ou s’il est temps de retourner à la planche à dessin. Voici le problème avec cette idée : le test n’est pas un moment unique. Il s’agit d’une série de moments qui se déroulent tout au long du processus de développement.

À l’instar du processus de design thinking, nous, chez Justinmind, croyons fermement aux tests précoces et fréquents. Le design de votre panier d’achat doit être testé plusieurs fois au fur et à mesure que vous progressez et que vous le développez.

Walmart est un grand nom du secteur de la vente au détail – et sa course pour rattraper les plates-formes de commerce électronique est une histoire intéressante à suivre. Le design de leur panier d’achat nous donne une idée du temps qu’ils ont investi dans leur présence en ligne.

Nous apprécions le fait que les informations relatives au panier d’achat parviennent à afficher toutes les informations pertinentes, à présenter deux cases distinctes pour le récapitulatif de la commande, tout en conservant une interface propre. Cela n’a pas dû être facile !

Les utilisateurs apprécieront également le fait qu’ils puissent utiliser des bons de réduction lorsque les vendeurs les acceptent, offrir des articles en cadeau et même laisser un message cadeau gratuitement. Nous apprécions également le fait que les CTA soient cohérents et ne se fassent pas concurrence. C’est génial !

Cette application est dotée d’un magnifique design de panier d’achat conçu par Abinash Mohanty. Il utilise intelligemment l’espace, la hiérarchie visuelle jouant le rôle principal à l’écran. Nous savons tous que les écrans mobiles peuvent représenter un véritable défi pour les designers – c’est pourquoi ce design est si génial.

Il prend toutes les informations excessives et les range, tout en affichant toutes les informations clés pour l’utilisateur – y compris l’adresse de facturation, les frais d’expédition, la liste complète des articles et le total. Nous apprécions particulièrement le fait que les commandes permettant de modifier l’ordre des livres soient utilisables, plutôt que de minuscules icônes que la plupart d’entre nous auraient du mal à manipuler.

Cette application de Shojol Islam utilise une interface épurée, avec une architecture de l’information intelligente pour que tout soit logique et utile. Nous aimons la proportion des composants de l’UI, qui permet de tapoter confortablement – ainsi que l’espace suffisant entre les commandes pour éviter les erreurs.

L’encadré récapitulatif situé sous la liste des articles est un grand avantage de ce design. L’utilisateur peut passer en revue les articles et modifier ce qu’il souhaite, puis voir le coût total de la commande ventilé. L’orientation de la navigation en dessous de tout cela n’est que la cerise sur le gâteau de la convivialité.