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

octobre 1, 2019

Les paniers d'achat sont un élément clé de tout commerce électronique. Mais qu'est-ce qui fait qu'un panier a une bonne conversion ? Lisez la suite et découvrez-le !

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.

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

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.

Pourquoi investir dans le design d'un panier d'achat : le commerce électronique et la danse des ventes

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.

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

Modèles de design de panier d'achat : principales lignes directrices

Qu’est-ce qui rend le design d’un panier d’achat vraiment fonctionnel ? Il doit offrir des informations importantes tout en donnant à l’utilisateur la possibilité d’apporter des modifications, en lui indiquant ce qui l’attend une fois l’achat effectué.

Logiquement, cela implique de nombreuses questions fondamentales telles que la définition des informations importantes. Les informations sur les frais de port, par exemple, sont-elles censées se trouver dans le panier ? Si l’objectif principal du panier est purement fonctionnel, pouvons-nous essayer d’encourager les utilisateurs à acheter davantage ? Découvrons-le.

1. Page du panier d'achat ou panier d'achat navigationnel

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.

Consultez notre liste d'exemples de wireframes pour trouver l'inspiration en matière de design.

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.

2. Panier d'icônes : emplacement, emplacement, emplacement

Comme les utilisateurs verront cette icône dans pratiquement tous les écrans de la plateforme, vous voulez qu’elle soit facile à trouver. Il est important qu’elle soit facile à repérer, mais qu’elle s’intègre au reste du design de navigation de la plateforme.

Il y a quelque chose à dire sur l’emplacement du panier sur le site web : aujourd’hui, l’approche classique consiste à le placer dans le coin supérieur droit (généralement, à l’intérieur de la barre de navigation). Cela signifie que la plupart des utilisateurs d’aujourd’hui, en particulier les jeunes qui ont l’habitude de faire des achats en ligne, s’attendent à trouver l’icône du panier à cet endroit.

En tant que designer d’une toute nouvelle plateforme, vous avez deux possibilités d’utiliser ces informations à votre avantage.

Exemples : Les grands noms sont des adeptes du panier supérieur droit ! Il s'agit notamment d'Amazon, Ebay, Target, Asos, Flipkart, Apple et Best Buy - parmi beaucoup d'autres.

La première consiste à tirer parti de la familiarité des utilisateurs avec l’emplacement classique. Si les utilisateurs s’attendent déjà à trouver l’icône du panier en haut à droite, il y a plus de marge pour que votre panier soit discret et se fonde davantage dans le design général de la navigation. Cela peut améliorer l’aspect visuel de votre site web et créer une expérience plus cohérente pour les utilisateurs.

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” ?

3. Afficher le nombre d'éléments : indiquer aux utilisateurs où ils se situent

C’est ce que font de nombreux grands magasins de commerce électronique. Indiquer à l’utilisateur combien d’articles se trouvent dans le panier peut fonctionner de plusieurs manières. Par exemple, certains utilisateurs peuvent se sentir encouragés à mettre plus d’articles dans un panier vide – et donc, en montrant un zéro dans l’icône du panier, nous pouvons changer cela. Le seul moyen de savoir ce qui fonctionne avec vos utilisateurs est de tester votre théorie !

Cependant, la principale raison pour laquelle de nombreux designs choisissent d’inclure le nombre d’articles dans le panier est que cela aide l’utilisateur à en prendre conscience. Les gens aiment se référer à leur panier pour vérifier le nombre d’articles qu’ils ont au fur et à mesure qu’ils poursuivent leurs achats.

Cela crée une forme de retour d’information où les utilisateurs peuvent être sûrs que l’article a été ajouté au panier avec succès. Cela peut aider l’utilisateur à se sentir plus en contrôle de l’expérience, ce qui est toujours une bonne chose en UX.

En ajoutant un numéro à l’icône du panier d’achat, nous pouvons également la transformer en une forme de CTA. Le numéro peut utiliser des couleurs plus vives et une animation pour se démarquer, et tenter de motiver les utilisateurs à passer à la caisse avant qu’ils n’abandonnent la recherche.

4. Le mini-panier : à mi-chemin

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.

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

5. Informez les utilisateurs de l'ajout d'un nouvel élément : ils doivent s'en assurer.

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.

Il s’agit également d’éviter que les utilisateurs aient à vérifier leur panier pour s’assurer que l’article a bien été ajouté. Il est essentiel de se rappeler que l’ensemble de l’expérience d’achat doit comporter le moins de frictions possible !

Lorsqu’il s’agit de savoir quel type de notification les sites de commerce électronique utilisent le plus, nous constatons que les fenêtres modales superposées sont un moyen courant d’informer les utilisateurs de l’arrivée d’un nouvel article dans leur panier. Voici quelques liens utiles concernant les modèles de superposition :

De cette façon, vous pouvez vous assurer que l’utilisateur voit l’information sur le nouvel élément sans qu’il ait à naviguer hors de la page actuelle. En créant cette fenêtre, vous vous assurez également que l’utilisateur n’a rien qui puisse le distraire de ce nouvel élément d’information.

6. Le panier complet : la dernière frontière

La page du panier d’achat est souvent le dernier arrêt que font les utilisateurs avant de passer à la caisse. C’est également à ce moment-là que les utilisateurs passent en revue les articles de leur panier et prennent la décision de les conserver, de les supprimer ou d’abandonner l’ensemble du processus d’achat.

Cette page est très importante pour toute plateforme de commerce électronique. Le design de cette page vous demande d’inclure toutes les informations importantes tout en donnant aux utilisateurs la liberté et le contrôle sur le panier. Voici quelques aspects fondamentaux dont le design du panier d’achat doit tenir compte :

  • 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.

Les concepteurs peuvent également inclure une boîte de récapitulation de la commande, qui simplifie l’ensemble de la commande et n’affiche que le résultat final : le coût des articles plus les frais supplémentaires ou les remises. Les utilisateurs se sentiront ainsi plus à l’aise avec le montant total de leur achat et n’auront pas de surprise au moment du paiement.

7. Un panier d'achat propre : la simplicité est la clé

Comment inclure tous ces éléments dans une seule page sans que l’encombrement ne devienne un problème ? Il est vrai que la page du panier d’achat doit contenir beaucoup d’informations, mais elle doit se lire un peu comme une simple liste de courses. L’utilisateur doit avoir l’impression que la page est simple et directe.

L’architecture de l’information et la hiérarchie visuelle sont les clés qui permettent de créer ce sentiment de simplicité. Vous voulez que les éléments soient clairement différenciés les uns des autres. Les informations doivent être en harmonie et non en concurrence pour attirer l’attention, afin que l’utilisateur puisse comprendre immédiatement ce qui se passe.

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 !

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

Conception d'un panier d'achat mobile : le design de demain

Maintenant que nous connaissons bien les caractéristiques classiques d’un bon design de panier d’achat, examinons les changements qui interviennent lors de la conception pour les mobiles.

1. Le CTA doit être visible à tout moment.

Cela peut sembler difficile, mais un CTA flottant peut faire une énorme différence pour les utilisateurs. Le design doit permettre à l’utilisateur d’examiner les articles à son rythme, tout en facilitant au maximum le passage à la caisse.

Il est important que le bouton de paiement ne soit pas seulement visible. Il doit être cliquable, ce qui touche à plusieurs aspects du design des boutons.

Design by Kohutpiotr.

Les designers doivent veiller à ce que le bouton soit suffisamment grand pour que les utilisateurs n’aient pas à se battre avec précision pour cliquer. Le choix des couleurs doit garantir un contraste suffisant contre l’éblouissement du soleil ou pour les acheteurs souffrant d’une déficience visuelle. Si vous craignez que les malvoyants n’utilisent votre produit, consultez notre guide des tests d’accessibilité.

2. Faites attention à ce que vous incluez - et à ce que vous n'incluez pas

Les utilisateurs mobiles ont toujours besoin de toutes les informations essentielles : l’espace réduit n’exclut pas la nécessité de savoir si la livraison est gratuite ou si elle est payante. Au contraire, la conception pour les téléphones mobiles rend encore plus difficile l’inclusion de toutes ces informations sans étouffer l’écran et l’utilisateur.

Cela dit, il est vrai que le design pour le web vous donne une grande marge de manœuvre pour jouer avec les éléments inclus dans la page. De nombreuses plateformes de commerce électronique pratiquent la vente croisée sur les sites web, mais s’abstiennent de le faire sur les écrans mobiles.

En effet, les utilisateurs seront facilement déconcertés par tout ce qui ne semble pas à sa place sur l’écran de leur téléphone, ce qui ajoutera de la friction au processus de paiement. Les utilisateurs regarderont de plus près et comprendront que ces articles sont offerts et n’ont pas leur place dans la commande – mais ce regard plus attentif demande un effort. Il ajoute au coût d’interaction de la page. L’ensemble du processus d’achat doit au contraire se dérouler sans effort.

L’objectif général est de supprimer tout ce qui peut prêter à confusion ou détourner l’attention. Pour de nombreux magasins, cela signifie supprimer les publicités, les promotions et les ventes croisées. Il s’agit également de supprimer les incitations à la vente incitative, telles que les bannières « Livraison gratuite à partir de 50 $ d’achat ».

3. Décidez avec soin du choix et de la taille des éléments

Cette lutte est vraie pour tout design mobile, pas seulement pour le design de panier d’achat. L’écran étant plus petit, tout est plus comprimé, et des éléments tels que le texte peuvent poser problème. Un autre problème n’est pas seulement que les utilisateurs lisent les petites lettres, mais aussi qu’ils cliquent et tapent sur des éléments trop petits.

Par exemple, la taille de la police fonctionne généralement pour indiquer que certaines informations appartiennent à un article dans le design du panier d’achat. Cependant, sur un appareil mobile, la marge dont disposent les designers pour une police acceptable est beaucoup plus étroite. Cela rend l’organisation de la hiérarchie visuelle du design du panier d’achat plus difficile.

Check out our prototype examples.

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.

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

Prototyper le design d'un panier d'achat : pourquoi c'est indispensable

Le panier d’achat peut souvent sembler être une simple partie de la plateforme de commerce électronique, ce qui fait qu’il est tentant de sauter la phase de prototypage du processus. C’est une erreur qui conduira à des paniers d’achat très peu utilisables, ce qui peut être une force fatale pour n’importe quelle plateforme d’e-commerce.

S’il existe de nombreuses raisons créatives de s’assurer qu’il existe un processus de prototypage pour le panier d’achat, il ne faut jamais oublier les raisons commerciales. Après tout, une plateforme de commerce électronique a un objectif très clair : vendre. Tout comme d’autres parties plus classiques du design UX, la vente consiste à parler le langage de l’utilisateur.

Il peut être étonnamment difficile de concevoir quelque chose du point de vue de l’utilisateur. L’empathie nécessaire pour créer exactement ce dont l’utilisateur a besoin ou ce qu’il veut est carrément surhumaine – aucun d’entre nous, simples mortels, ne peut y parvenir du premier coup. Les utilisateurs ont leur propre esprit, et l’équipe de design doit éplucher des couches et des couches de comportement de l’utilisateur afin de décider de la voie à suivre.

Ne passez pas à côté du prototypage du design de votre panier d'achat ! Ce n'est pas aussi difficile qu'on pourrait le croire. Voici un tutoriel sur la construction d'un panier d'achat avec Justinmind - c'est une question de minutes.

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.

Testez le design de votre panier d'achat : la conversion est essentielle

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.

Le véritable secret d’un test réussi de votre panier d’achat réside dans la conversion. Avant de commencer les tests, vous devez déterminer où se situent vos standards. Qu’espérez-vous atteindre avec cette version du design ? Nous vous recommandons de toujours avoir une ligne claire, un objectif que vous souhaitez atteindre avec le design.

Exemple : Nous voulons une conversion d'au moins 50 % sur le panier d'achat dans les 3 minutes qui suivent la visualisation de l'écran par les utilisateurs. Si les tests révèlent que nous n'atteignons pas ces 50 %, il est temps d'optimiser le design.

L’idée est qu’à chaque fois que vous effectuez un test, vous remarquerez les petites choses qui provoquent des réactions négatives de la part des utilisateurs. Il peut s’agir d’un petit texte qui oblige les utilisateurs à revenir en arrière et à le relire, ou d’une animation visuelle qui les déconcerte quelque peu. Il est important de se rappeler qu’aucun design de panier d’achat n’est parfait et qu’il est toujours possible de l’optimiser.

Vous devez être très attentif à la rapidité avec laquelle les utilisateurs comprennent le design du panier d’achat et s’ils ont des doutes sur les détails de la commande. L’objectif ultime est que les utilisateurs voient tout ce dont ils ont besoin sur ce seul écran – et, avec un peu de chance, passent à la caisse.

Commencez dès aujourd'hui à concevoir votre site web de commerce électronique avec Justinmind

télécharger cta

Des exemples de paniers d'achat que nous adorons

1. Victoria's Secret

Le design du panier d’achat de Victoria’s Secret est innovant et bénéficie d’un aspect inattendu. Lorsque l’utilisateur clique sur l’icône du panier en haut à droite, il n’est pas dirigé vers un autre écran – au lieu de cela, le panier s’ouvre à partir du côté droit de l’écran.

Ce design vertical laisse de la place pour une autre barre verticale dans laquelle l’entreprise effectue des ventes croisées d’autres articles. Nous apprécions également le fait que le panier comporte un lien « modifier » qui mène à une fenêtre modale superposée dans laquelle les utilisateurs peuvent modifier complètement l’article commandé – sans encombrer le design du panier.

La seule chose que nous aurions aimé avoir dans ce panier est une estimation du total avec les taxes et les frais d’expédition – mais aucun design n’est parfait !

2. Walmart

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.

Le panier lui-même est simple, avec peu de distractions par rapport à l’achat. On peut voir la division claire de l’écran, ce qui constitue une excellente architecture de l’information.

Les utilisateurs peuvent y trouver toutes les informations dont ils ont besoin, y compris un récapitulatif de commande. Walmart a choisi d’inclure des ventes croisées sous les informations, de manière à ce que les utilisateurs puissent les voir sans être dérangés par elles lorsqu’ils lisent les informations.

3. Etsy

Etsy est un exemple intéressant de design de panier d’achat. Comme de nombreuses plateformes qui proposent aux utilisateurs des articles provenant de vendeurs individuels, Etsy fait en sorte que les utilisateurs paient en une seule fois les articles provenant du même vendeur. Cela signifie qu’en achetant deux articles de vendeurs différents, les utilisateurs doivent passer deux fois à la caisse.

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 !

4. Achat rapide de livres sur l'UX

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.

5. Application Food Finder

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é.

La synthèse

Le panier d’achat est un élément essentiel de toute plateforme de commerce électronique. Il peut être facile de négliger cette page en raison d’autres grandes parties du projet, comme c’est généralement le cas avec le design de la navigation. Si le panier d’achat n’est pas aussi passionnant à concevoir, il n’en est pas moins important pour le bon fonctionnement de la plateforme.

Lorsque vous optez pour un design de panier d’achat, le strict minimum à garder à l’esprit est que les gens ont besoin de contrôle, de liberté et d’information. C’est à ce stade que les utilisateurs passent en revue leurs articles et décident réellement de ce qu’ils vont acheter – à vous de faire en sorte que cette décision soit facile à prendre !

PROTOTYPER - COMMUNIQUER - VALIDER
OUTIL DE PROTOTYPAGE TOUT-EN-UN POUR LES PANIERS D'ACHAT WEB ET MOBILES
Rebeka Costa
In-house SEO manager, usability enthusiast and patron of all sleep-deprived designers