À faire et à ne pas faire dans la conception d'un panier d'achat mobile : 6 démontages pratiques (Guide détaillé sur le mCommerce)

Vous savez déjà que votre page de panier est un rouage essentiel de votre machine de commerce électronique. Mais vos pages de panier mobile – la page que les visiteurs voient avant de passer à la caisse – font-elles leur poids ?

Chez Growcode, nous constatons à plusieurs reprises que les pages de panier sont l'une des parties les plus ignorées des magasins de nos clients, en particulier en ce qui concerne le mobile. Et les conséquences sont importantes, nuisant sérieusement à leurs résultats.

Les ventes de commerce mobile devraient représenter 52,9% de toutes les ventes de commerce électronique d'ici 2021. Pourtant, en 2017, le taux moyen d'abandon de panier d'achat mobile était de 85,65 %.

Cela signifie que sur tous les clients qui ont ajouté un ou plusieurs produits à un panier, près de 9 sur 10 sont restés sans finaliser l'achat.

Les ventes de #commerce mobile devraient représenter 52,9% de toutes les ventes de commerce électronique d'ici 2021. #EcommerceStats Cliquez pour tweeter
Les prospects mobiles sur l'abandon de panier. N'oubliez pas que les données agrégées, comme dans le graphique ci-dessus, ne tiennent pas compte des différences importantes entre les industries. La source.
Dans cet article, nous allons examiner six exemples de pages d'examen de panier. Les trois premiers utilisent des pratiques de conception solides que vous devriez envisager de reproduire, tandis que les exemples restants incluent des éléments qu'il vaut mieux éviter.

Il convient également de mentionner que même si nous nous concentrons sur les erreurs de certaines conceptions de panier d'achat, cela ne signifie pas qu'elles sont complètement terribles dans l'ensemble. Plongeons-nous dans les meilleures pratiques en matière de panier d'achat mobile.

1. Faire : Amazon

Le panier d'achat d'Amazon pour les sites Web mobiles est un excellent exemple de conception de panier d'achat mobile bien fait. Il n'y a pas trop de monde, mais ce n'est pas trop minime non plus. Tous les éléments nécessaires sont inclus, sans détourner l'attention du CTA principal. Il existe également un certain nombre de « modules complémentaires » discrets qui peuvent être sélectionnés pour augmenter la valeur de la commande, de l'emballage cadeau aux articles connexes.
Le panier d'achat mobile d'Amazon ux. Tous les éléments nécessaires sont inclus.

Astuce n°1 : Un CTA clair en haut de la page, défini dans une couleur contrastante. Au fur et à mesure que l'utilisateur fait défiler vers le bas, ce CTA continue de flotter en haut de l'écran.

#Conseil d'optimisation du #panier mobile : placez un #CTA clair en haut de la page dans une couleur contrastante. #ecommerce #optimisation Cliquez pour tweeter
Le CTA flotte en haut de l'écran lorsque l'utilisateur fait défiler vers le bas.
Conseil n° 2 : Le CTA s'étend sur tout l'écran, il est donc facile de l'appuyer pour les utilisateurs gauchers et droitiers.
Conseil n°3 : Réitération de la livraison gratuite en haut de la page pour dissiper les doutes et « adoucir l'affaire ».
Conseil n°4 : Les images et les noms des produits renvoient à la page de description pour ceux qui souhaitent revérifier les détails du produit.
Conseil n°5 : Il existe des boutons clairs et faciles à utiliser pour modifier le montant de la commande, supprimer des articles et les enregistrer pour plus tard.
Astuce n°6 : La notification « En stock » rassure les clients qu'ils n'auront pas à attendre le produit.
Conseil d'optimisation du #panier #Mobile : La notification "En stock" rassure les #clients qu'ils n'auront pas à attendre le produit. #ecommerce Cliquez pour tweeter
Conseil n°7 : Amazon présente les produits qui ont été « enregistrés pour plus tard », avec un simple bouton « Déplacer vers le panier » en dessous.
Les éléments enregistrés pour plus tard sont clairement visibles.
Conseil n°8 : Inclusion de produits connexes – « Les clients ont également fait des achats » – qui peuvent être ajoutés au panier sans quitter la page. Plus supplémentaire pour la conception de cet élément car le troisième élément n'est pas entièrement représenté et suggère donc un mouvement de balayage.
Astuce n°9 : Beaucoup d'espaces blancs et l'absence de détails de « remplissage » inutiles. Amazon n'a inclus que ce qui est absolument nécessaire.
Conseil n°10 : Lien vers le « Haut de la page » dans le pied de page.

Vous voulez plus d'informations comme celle-ci ?

Obtenez des conseils, des stratégies et des connaissances de pointe sur le commerce électronique chaque semaine.
Livré directement dans votre boîte de réception.

sur J'ai lu la politique de confidentialité et j'accepte les termes et conditions de la newsletter.

Veuillez cocher cette case pour continuer

Waouh ! Vous venez de vous inscrire. Vérifiez votre boîte de réception pour confirmer l'abonnement.

2. À faire : les agrafes

La beauté du chariot Staples est sa simplicité. Les produits peuvent être examinés en quelques secondes. Le résultat est une plus grande emphase sur les options qui sont incluses.
La beauté du chariot Staples est sa simplicité. L'un des meilleurs chariots de commerce électronique mobile.
Astuce n°1 : A l' instar d'Amazon, l'attention est attirée sur le fait que le produit sera expédié gratuitement, aussi bien en haut de la page que dans le récapitulatif de paiement. De plus, le texte est en vert, ce qui fait ressortir davantage la notification. La date exacte de la « livraison prévue » est également indiquée.
Astuce #2 : Le design est ultra-simple et une excellente utilisation est faite de l'espace blanc. Les clients peuvent vérifier rapidement leurs commandes, apporter les modifications nécessaires sans quitter la page et vérifier le total.
Astuce n°3 : La case « Coupons et récompenses » est discrète. L'option importante de "retrait en magasin" est également fournie sans détourner l'attention du CTA principal.
Conseil n°4 : Le mot « Sécurisé » est inclus dans le CTA de paiement.
Astuce n°5 : le pied de page a été supprimé.

Y a-t-il quelque chose qui ne va pas? Alors que Staples obtient beaucoup de bons résultats, un problème avec cette conception de panier est la simplicité de l'en-tête, qui n'inclut pas de menu extensible ou de formulaire de recherche. Si une entreprise ne vend qu'un seul produit, cela peut être une solution viable. Pour les sites à produits multiples, cependant, il vaut toujours la peine de donner aux clients la possibilité de naviguer à nouveau s'ils le souhaitent.

3. À faire : Sears

Sears propose de nombreuses options supplémentaires, notamment des plans de paiement, un ramassage en magasin, des options de cadeaux et des promotions. Leur panier est un bon exemple pour les détaillants qui souhaitent combiner de nombreux éléments différents sur une seule page sans ruiner la conception qui empêche l'abandon du panier d'achat mobile.
La conception du chariot mobile Sears contient de nombreux éléments, mais reste simple.
Astuce n°1 : Un CTA est inclus en haut de la page à côté du sous-total. Une icône de cadenas renforce la confiance et la possibilité de payer en utilisant Paypal est également offerte.
Conseil n° 2 : En tant qu'article coûteux, des plans de paiement sont inclus pour dissiper toute hésitation à ce stade.
Conseil n°3 : Les économies sur les ventes sont incluses en rouge dans la section récapitulative de la commande, encourageant les clients à cliquer pour passer à la caisse en créant à la fois l'urgence et la réduction des doutes.
Astuce n°4 : Un lien est fourni pour vous connecter au programme de fidélité, ce qui constitue une incitation supplémentaire pour les nouveaux clients. Il est important de noter qu'il ne s'agit pas d'un lien pour créer un compte en magasin sans aucun avantage, qui serait mieux intégré dans le formulaire de paiement.
Conseil n°5 : Un sceau « paiement sécurisé » est inclus au bas de la page.
Y a-t-il quelque chose qui ne va pas? Il y en a juste un peu trop, et l'effet est probablement une attention dispersée pour certains clients. Il n'est pas nécessaire de proposer des abonnements à des magazines et un lien vers le programme de fidélité en bas, par exemple.

4. À ne pas faire : Vitacost

Bien que Vitacost utilise de nombreux éléments décrits ci-dessus, leur mise en œuvre est souvent imparfaite. Le résultat est une page de panier mal conçue qui entraînerait probablement une augmentation des conversions de panier d'achat avec quelques petits ajustements.
Vitacost utilise de nombreux éléments décrits ci-dessus mais leur mise en œuvre est souvent imparfaite.
Erreur n° 1 : Inclusion d'une barre de recherche intrusive qui éloigne les gens de la page du panier. C'est une bonne idée d'inclure une icône de barre de recherche (comme dans l'exemple Amazon) pour les personnes qui souhaitent continuer à naviguer. Mais ne le faites pas trop grand.

#Conseil d'optimisation du #panier mobile : n'incluez pas de barre de recherche intrusive qui éloigne les gens du panier. #ecommerce Cliquez pour tweeter
Erreur n° 2 : Inclusion automatique d'un produit « BOGO » peu clair (achetez-en un, obtenez la moitié du prix) qui peut dérouter ou ennuyer les clients.
Erreur n°3 : Barre de code promo intrusive. Cela détourne l'attention du CTA principal et encourage les clients à quitter le panier pour rechercher des promotions en ligne. Les boîtes promotionnelles doivent être visibles mais pas trop. Ils devraient certainement être après un CTA.
ERREUR n°4 : Les frais de port sont fixés à « TBD », ce qui entretient le doute (en règle générale il faut éviter les abréviations)
Erreur n°5 : Le pied de page est trop grand. Vitacost souhaite-t-il que les clients terminent l'achat ou téléchargent l'application ?
Erreur n°6 : les options de produits – pour supprimer ou augmenter des articles – sont bien trop petites et difficiles à exploiter.
Erreur n°7 : La barre flottante, qui peut être vue juste en bas de la capture d'écran, prend trop d'espace à l'écran sur les téléphones plus petits.

5. À ne pas faire : Lonely Planet

Là où la page Staples utilise efficacement un design minimal, Lonely Planet exclut trop d'éléments. Il n'y a pas de fonctionnalités pour réduire les hésitations et renforcer la confiance, pas de recommandations ou de suggestions de produits pour augmenter la valeur de l'achat, et de nombreux boutons sont difficiles à cliquer.
Lonely Planet exclut trop d'éléments. Il leur reste beaucoup d'espace qui pourrait être utilisé pour améliorer l'utilisation du panier.
Erreur #1 : L' espace est mal utilisé. Il serait préférable que le panier remplisse toute la page et utilise un espace blanc plutôt que de sortir par-dessus le contenu actuel.
Erreur n°2 : aucune information sur la livraison, les remises ou les options de paiement n'est incluse. Ceux-ci diminueraient probablement les doutes et les craintes des clients incertains.
Erreur n°3 : Il n'y a pas de suggestions de produits connexes.
Erreur n°4 : Les boutons permettant d'augmenter ou de réduire le nombre de produits sont si petits qu'ils sont virtuellement non cliquables.
Erreur n°5 : le CTA – « Passer à la caisse » – ne ressemble pas à un bouton.
Erreur n°6 : Le format pop-out rend difficile l'utilisation du CTA à partir de la gauche. Laissez les clients utiliser leurs deux pouces !

6. À ne pas faire : Nike

Le principal problème avec la page de Nike est la façon dont divers éléments ont été inclus au hasard, avec peu de réflexion apparente sur la façon dont ils pourraient fonctionner s'ils étaient placés ensemble ou à différents points de la page. Il y a aussi une confusion au sujet du CTA.
Sur la page de Nike, divers éléments ont été inclus au hasard.
Erreur n°1 : les remises sur les frais d'expédition ne sont disponibles que pour les membres. Cela ajoute des frictions inutiles et est susceptible d'avoir un effet dissuasif sur les clients qui ne souhaitent pas se joindre, qui penseront qu'ils sont perdants. Offrez aux clients la possibilité de se connecter à l'étape du paiement, ainsi que la possibilité de s'inscrire pour de nouveaux clients. La page du panier doit être exclusivement destinée à l'examen des commandes.

Erreur #2 : L'utilisation de deux CTA. Il est presque toujours préférable d'avoir un CTA sur les pages de panier, car vous recherchez un plan d'action spécifique. La seule raison d'offrir plusieurs CTA est de donner aux clients le choix entre différentes options de paiement. Il serait préférable d'afficher un formulaire approprié (soit un formulaire de connexion, soit un formulaire d'adresse) après qu'un utilisateur vous ait fourni son adresse e-mail.

Erreur n°3 : les « types de paiement acceptés » ne sont pas répertoriés à côté du CTA de paiement. C'est une bonne idée d'inclure ces badges sur votre page de panier, surtout si vous n'êtes pas aussi connu que Nike, mais le pied de page n'est pas l'endroit pour eux.

Erreur n°4 : Le terme « invité » peut prêter à confusion si les clients ne s'identifient pas de cette manière (pouvez-vous devenir membre si vous magasinez en tant qu'invité ?)

Emballage de la conception du panier d'achat mobile

La plupart des pages de panier les plus performantes ont un design épuré et simple, tout en fournissant également le bon type et la bonne quantité d'informations. Pendant que vous redéfinissez la vôtre, gardez à l'esprit que le but des pages de panier est de permettre aux acheteurs de vérifier et de confirmer leur commande, de supprimer tous les articles inutiles et d'ajouter des produits similaires. Toutes les autres actions souhaitées, telles que la connexion à leur compte ou l'inscription, peuvent être laissées pour la page de paiement. N'oubliez donc pas ces bonnes pratiques de panier d'achat mobile et d'autres techniques d'optimisation de panier d'achat.

Et n'oubliez pas que les tests fractionnés sont essentiels ! Utilisez les tactiques décrites ici pour créer vos propres tests et vous engager à peaufiner les éléments sur le long terme. Si vous faites cela, vous constaterez presque certainement une augmentation constante de vos conversions.

Obtenez la liste de contrôle d'optimisation du commerce électronique en 115 points

Forts de huit années d'expérience, nous avons rassemblé toutes nos meilleures idées dans un seul livre : La liste de contrôle pour l'optimisation du commerce électronique d'une boutique en ligne à 7+ figures. Si vous souhaitez augmenter les performances de toutes vos pages - de la page d'accueil à la caisse, récupérez votre copie ici.