Meilleures pratiques des coupons, remises et promotions UI & UX

"Les acheteurs adorent les offres, que ce soit sous la forme de ventes sur l'ensemble du site, de certains articles en solde ou de coupons. Cependant, pour que les utilisateurs réussissent à utiliser les promotions, un site Web doit bien faire deux choses : il doit communiquer efficacement ces différentes promotions sur l'ensemble du site, et il doit également permettre aux utilisateurs de communiquer facilement les offres." Kim Salazar, spécialiste senior de l'expérience utilisateur chez Nielsen Norman Group

Cet article rassemble les meilleures pratiques et inspirations pour la conception d'une interface utilisateur et d'une expérience pour la promotion de codes de réduction et de promotions appliquées automatiquement sur votre site Web ou votre plate-forme mobile. Nous couvrirons l'ensemble du parcours client, depuis les messages promotionnels et les baisses de prix sur le site Web jusqu'à la validation et l'application des coupons et des promotions à la caisse, et enfin, l'échange. Nous avons rédigé cet article en nous basant sur l'UI & UX de nos clients, l'UI des plateformes e-commerce les plus performantes en termes de revenus DTC et diverses études UX.

Remarque : Toutes les captures d'écran de bureau ont été réalisées sur Mac, Chrome et toutes les captures d'écran mobiles ont été réalisées à l'aide de la résolution iPhone X sur Chrome.

Nous espérons que ce guide vous aidera à repenser votre plate-forme pour inclure des promotions au niveau des coupons et des paniers ou pour améliorer votre expérience client existante en matière de coupons. Si vous avez des questions ou souhaitez en savoir plus sur Voucherify, notre moteur de promotion, n'hésitez pas à nous contacter.

Kit d'interface utilisateur pour les coupons et les promotions

Accélérez la mise sur le marché avec des composants de coupons et de promotions prêts à l'emploi de notre kit d'interface utilisateur de coupons et de promotions disponible sur Figma. Apprendre encore plus.

Table des matières:

Conseils généraux sur l'UI et l'UX promotionnels :

• Indiquez clairement le délai de promotion.
• Appliquez automatiquement les coupons accessibles au public.
• Offrez une page de compilation des ventes.
• Activez le filtrage dans votre catégorie de ventes.
• Proposez un cockpit client.
• Répertoriez les articles en promotion dans la section Ventes ainsi que dans les catégories appropriées.
• Communiquez les promotions à l'échelle du site à l'échelle mondiale.
• Soyez clair sur les restrictions promotionnelles dès le départ.

Coupon sur les meilleures pratiques UX sur une page spécifique :

1. ‍ Page d'accueil :

• Types de promotions annoncées sur la page d'accueil.
• Lien vers les pages de vente.

2. ‍ Pages de catégories.
3. ‍ Pop-up.
4. ‍ Ruban haut de page .
5. ‍ Pied de page.
6. ‍ Fiche produit :

• Laissez l'ancienne étiquette de prix.
• Énoncez clairement les règles des promotions groupées.

7. ‍ Panier :

• Incluez les champs de code de coupon dans le cœur des pages de panier et de paiement.
• Pour les promotions à dépenses minimales, faites le calcul pour les utilisateurs et aidez-les à atteindre l'objectif de dépenses.
• Rappeler aux utilisateurs les offres spéciales disponibles auxquelles ils peuvent prétendre dans le panier.
• Mentionnez toute condition ou restriction particulière.

8. Page de paiement :

• Inclure un champ de code de coupon.
• Affiche un message de réussite si le code est appliqué avec succès.
• Afficher un message d'erreur en cas de code de coupon invalide.
• Indiquez clairement si le client peut ajouter plusieurs bons de réduction.
• Aidez les utilisateurs à trouver leurs réductions.
• Refléter les remises reçues.
  

Les bases des codes promo UI & UX

Nous couvrirons ici quelques conseils généraux qui s'appliquent à la plupart des conceptions, placements et promotions de coupons de réduction et de promotions. Plus tard, nous passerons aux emplacements spécifiques des coupons et des promotions de panier sur le site Web tout en mettant en évidence la meilleure solution de conception du point de vue de l'expérience client. N'oubliez pas qu'il ne suffit jamais de lancer une campagne de coupons, vous devez également vous occuper de la conception, du placement, de la validation et du processus d'échange des coupons pour faire de votre campagne un succès retentissant.

Indiquez clairement le délai de promotion

Vous devez informer les clients de la durée du coupon ou de la promotion au niveau du panier pour éviter que les clients mécontents apprennent à la caisse que l'offre n'est plus valable. Cela aide également à créer un sentiment d'urgence et à inciter légèrement les acheteurs à terminer leurs commandes. Si vous ne le faites pas, l'expérience utilisateur sera interrompue et les clients quitteront votre site.

Vous pouvez le faire soit en mentionnant la période (dates ou heures) de la promotion, soit en ajoutant un compte à rebours. La meilleure pratique consiste à toujours ajouter le délai de promotion sur chaque bannière et publicité, et pas seulement dans les conditions générales, pour s'assurer que les clients connaissent la date d'expiration de la promotion.

Exemples d'interface utilisateur :

Pomelo Fashion utilise un compte à rebours pour afficher clairement l'expiration de ses offres.

Shein informe les clients à côté de la bannière ou de la catégorie promotionnelle de la durée de l'offre avec un compte à rebours. Ils montrent également le nombre de pièces restantes, pour induire un sentiment d'urgence.

Ils informent également les clients de la durée de l'offre sur la page du produit afin d'améliorer encore l'expérience promotionnelle.

Et ils ont inclus la minuterie même dans le panier.

Voici à quoi ressemble l'affichage sur leur application mobile :

Pretty Little Thing a un compte à rebours promotionnel sur la bannière de la page principale, disponible également dans la résolution mobile :

Appliquez automatiquement des coupons accessibles au public pour offrir la meilleure expérience possible

Si un code de réduction ou de coupon est proposé sur le site, vous pouvez simplifier le processus d'échange en permettant aux utilisateurs de l'appliquer automatiquement à leur panier en cliquant sur le code de réduction ou, au moins, de le copier automatiquement en cliquant dessus, afin que ils n'ont pas à se souvenir du code. Cela augmentera l'utilisation de la promotion en permettant aux utilisateurs de l'appliquer plus facilement à leurs paniers. Vous pouvez également appliquer automatiquement des codes de réduction uniques envoyés via différents canaux (e-mail, SMS et autres) si le client clique sur le lien qu'il a reçu. Apprenez à réparer l'UX de validation des coupons en suivant ce post.

Si l'offre est accessible au public, réfléchissez toujours attentivement s'il ne s'agit pas simplement d'une remise appliquée automatiquement au niveau du panier au lieu d'un code de coupon public. Cela simplifie le processus de paiement pour les clients et peut entraîner une augmentation des taux de conversion de la promotion.

Une autre bonne pratique UX consiste à permettre la copie du code de coupon (placez-le sur le site Web ou l'application mobile sous forme de texte, et non intégré dans une image).

Exemples d'interface utilisateur :

Vanity Planet applique automatiquement les codes de réduction publics sur les commandes éligibles dans le panier. Après être passé à la caisse, le total de la commande est recalculé pour refléter le code de réduction.

Ils ajoutent même un produit gratuit à la commande, si la commande y est éligible, en appliquant à nouveau automatiquement le code de réduction :

Ici, vous pouvez voir le même flux, en résolution mobile :

Si vous cliquez sur le bouton "Afficher le récapitulatif de la commande", le contenu du panier s'affiche, y compris les informations sur les promotions et les codes de réduction appliqués à la commande.

Offrir une page de compilation des ventes

La collecte de toutes les promotions au niveau du panier et des coupons de réduction disponibles au public sur une seule page est un excellent moyen de faciliter la recherche des clients. De cette façon, vous pouvez également afficher les promotions aux clients nouveaux ou non connectés, au lieu d'utiliser uniquement les cockpits des clients pour afficher toutes les promotions. Souvent, les entreprises affichent toutes les bannières promotionnelles simplement sur la page d'accueil, ce qui peut masquer différents éléments de la page et nuire à l'expérience client.

Exemples d'interface utilisateur :

Victoria's Secret présente toutes les offres disponibles dans une interface utilisateur claire sur un seul site. Notez comment l'architecture de l'information sur le site utilise la taille pour mettre en valeur ou minimiser les offres sélectionnées.

Activez le filtrage dans votre catégorie de vente pour une meilleure UX

Si vous proposez une catégorie de vente rassemblant tous les articles auxquels s'applique une certaine promotion de panier ou un code de réduction, vous devez autoriser les utilisateurs à naviguer et à filtrer cette catégorie. Certains visiteurs voudront simplement voir les produits en vente et rien d'autre, donc des catégories de vente distinctes devraient leur permettre de voir toutes les offres et de naviguer facilement dans cette section. Les options de navigation filtrée doivent permettre aux acheteurs de trier et de filtrer les sections de vente pour affiner efficacement la sélection. Sans filtres, les achats de vente peuvent être un travail difficile et peuvent entraîner le départ de clients de votre site.

Exemples d'interface utilisateur :

Pomelo Fashion propose des filtres de catégorie de vente par type et taille de produit.

Fashion Nova propose un filtrage des catégories de vente par prix ou compartiments :

Offrir un cockpit client

L'affichage de toutes les promotions de panier et codes de réduction auxquels un certain client peut accéder dans un cockpit client dédié aide les clients à comprendre quelles promotions sont disponibles spécifiquement pour eux. Il vous permet également d'afficher des coupons de réduction personnels et uniques, des cartes-cadeaux, un solde de points de fidélité ou d'autres récompenses, par opposition à une page de vente qui affiche uniquement les promotions disponibles au public, et non personnalisées.

Exemples d'interface utilisateur :

H&M propose un cockpit client, où les clients peuvent trouver leur solde de points de fidélité, les promotions et remises disponibles, des bons uniques et un programme de parrainage.

Cockpit client sur résolution mobile :

Répertorier les articles en promotion dans la section Ventes et dans les catégories appropriées

Ne limitez pas l'affichage des articles soldés à une section Ventes dédiée du site. Pour une meilleure visibilité, il est préférable de répertorier les articles en promotion à la fois sur la page de catégorie appropriée et dans la section Ventes. Certains utilisateurs accèdent directement aux sections Ventes lorsqu'ils sont motivés pour trouver une bonne affaire, mais d'autres ne recherchent pas spécifiquement les sections Ventes. Les utilisateurs à la recherche d'un article particulier naviguent généralement en fonction de la catégorie. Les sites qui affichent des articles en solde avec des articles à prix plein aident les utilisateurs à découvrir des remises dans leur domaine d'intérêt.

Exemples d'interface utilisateur :

Pretty Little Thing répertorie les articles en vente sous les articles en vente et les catégories de produits afin qu'ils puissent être trouvés dans les deux.

Communiquez les promotions à l'échelle du site à l'échelle mondiale pour éviter la mauvaise presse

Si le site propose la livraison gratuite ou d'autres remises ou bons de réduction à l'échelle du site, affichez ces offres sur chaque page du site. Des rappels de remise cohérents peuvent aider les utilisateurs à trouver des articles dans leur budget et les encourager à acheter. Encore une fois, ils décrivent votre marque comme une marque qui offre des avantages aux acheteurs. En affichant uniquement les promotions sur l'ensemble du site dans des zones sélectionnées, vous risquez que tous les utilisateurs ne les découvrent pas. De plus, si les coupons ne sont pas annoncés sur toutes les pages, les gens peuvent supposer qu'ils ont été intentionnellement cachés pour empêcher leur utilisation, ce qui a finalement un impact négatif sur la marque.

Les emplacements de remise possibles incluent :

• Annonces promotionnelles dans l'espace héros sur la page d'accueil.
• Bannières en haut de chaque page avec les détails de la promotion du panier ou le code de coupon - y compris sur la page du panier ou la page de paiement où le code de coupon doit être saisi.
• Légendes promotionnelles dans la page de liste de produits ou dans le rail de droite.
• Bannières en bas de page, dans ou près du pied de page.

Exemples d'interface utilisateur :

‍Pomelo Fashion communique son coupon à l'échelle du site sur la bannière de la page d'accueil, le ruban de la page d'accueil et les pages de catégorie.

PrettyLittleThing rappelle aux clients les coupons de réduction sur l'ensemble du site, même sur les pages de produits - une excellente initiative du point de vue UX.

Voici comment ils le présentent dans la mise en page mobile :

Pretty Little Thing annonce sa promotion au niveau du panier sur sa bannière de page principale et son ruban de page supérieure :

Ils proposent une page de vente qui affiche tous les articles en promotion :

Ils affichent également la remise sur la page du produit :

Soyez clair sur les restrictions sur les promotions dès le départ

Parfois, les promotions de panier ou les bons de réduction peuvent être soumis à des qualificatifs ou à des restrictions. Si tel est le cas, assurez-vous que l'offre indique clairement quelles restrictions s'appliquent. Lien vers des informations plus détaillées sur ces conditions si nécessaire, mais n'oblige pas les utilisateurs à parcourir les petits caractères pour comprendre les restrictions de base. Rien n'est plus frustrant que de s'attendre à recevoir une offre, pour découvrir à la caisse que vous n'êtes pas éligible. Gardez à l'esprit que la conception de votre coupon ne doit pas seulement être accrocheuse, mais surtout fonctionnelle.

Exemples d'interface utilisateur :

Pretty Little Thing indique directement sur la bannière de sa page principale que la promotion exclut les articles en solde et les articles de beauté.

Chewy donne un lien vers plus d'informations sur les détails de leur promotion (bouton "En savoir plus") qui est annoncé sur le ruban "économisez 35 % sur votre premier envoi automatique".

Voici la pop-up qui s'affiche après avoir cliqué sur le CTA de la promotion :

Dans la résolution mobile, le ruban ne contient pas le bouton mais est cliquable. Après avoir cliqué, la même fenêtre contextuelle contenant les conditions générales de la promotion s'affiche :

Coupon UX best practices sur des pages spécifiques :

Page d'accueil :

Types de promotions annoncées sur la page d'accueil :

Vous ne devez pas annoncer toutes les promotions sur la page d'accueil car les clients peuvent être submergés par le nombre d'offres (et obtenir ce que l'on appelle la cécité des bannières). Seules les promotions ou les coupons de panier accessibles au public doivent y être annoncés. La meilleure pratique UX consiste à laisser les remises spécifiques au produit ou à la catégorie pour les pages de catégorie ou de produit.

Exemples d'interface utilisateur :

Happy Socks affichait sur le ruban de sa page d'accueil et la bannière principale de sa page d'accueil les 30 % de réduction appliqués automatiquement sur les soldes d'été, qui constituaient leur plus grande remise publique à ce moment-là.

Lien vers les pages de vente

S'il existe une promotion d'application automatique ou de coupon en cours sur l'ensemble du site, au lieu d'énumérer tous les produits et conditions éligibles sur la page d'accueil, vous pouvez simplement fournir un teaser qui mènera à la page de vente où les clients peuvent lire tous les termes et conditions de la promotion et parcourez les produits et offres éligibles.

Exemples d'interface utilisateur :

Chubbies Shorts affiche une bannière promotionnelle sur la page principale, renvoyant à la page de collecte des ventes.

Pages de catégorie :

Pop-up

Les pop-ups peuvent être utilisés pour annoncer des réductions sur les coupons et des promotions au niveau du panier disponibles dans le magasin, mais ils présentent divers inconvénients UX. S'il s'agit de la seule méthode de publicité d'une promotion, les utilisateurs peuvent les fermer et oublier les conditions exactes de réduction ou le code de réduction requis. Par conséquent, les pop-ups doivent être utilisés avec d'autres moyens de communication comme les bannières, les e-mails, les SMS. Un autre problème des pop-ups est qu'ils sont intrusifs. Ils couvrent le contenu que les utilisateurs voulaient réellement parcourir et peuvent être considérés comme ennuyeux.

D'autre part, les pop-ups sont un excellent remplacement ou complément aux e-mails lors de l'attribution d'une remise au client pour une action qu'il vient d'effectuer. Par exemple, si le client s'est abonné à la newsletter, vous pouvez afficher la remise obtenue sur une pop-up. De cette façon, le client l'obtiendra plus facilement et plus tôt que s'il devait vérifier sa boîte de réception. Encore une fois, pop-up et e-mail pourraient coexister, pour rendre la remise disponible si un client souhaite y revenir plus tard.

Une bonne alternative aux pop-ups sur l'application mobile sont les notifications push.

Exemples d'interface utilisateur :

Tula utilise des fenêtres contextuelles pour communiquer une promotion au niveau du panier, mais la fenêtre contextuelle est également accessible lorsque l'utilisateur clique sur une bannière fixe de 15 % de réduction. Cela permet de revenir sur la promotion plus tard.

Ruban haut de page :

De même que pour le placement de la page d'accueil, le ruban doit être réservé aux promotions publiques ou à l'échelle du site ou du panier ou des coupons de réduction. C'est un endroit idéal pour ajouter un code de coupon public et le rendre visible sur toutes les pages, y compris le paiement, pour rendre le code facilement accessible lorsque les utilisateurs vérifient leur panier ou terminent le paiement.

Exemples d'interface utilisateur :

Chubbies Shorts utilise le ruban pour annoncer de grandes promotions de panier accessibles au public.

Bas de page:

Le pied de page est l'un des endroits les moins lus du site Web. Placer des coupons de réduction ou des offres au niveau du panier n'est pas la meilleure idée car les réductions seront probablement manquées par la plupart des clients. D'autre part, le pied de page est un endroit idéal pour ajouter des termes et conditions de promotion. Si vous n'avez pas besoin d'une page séparée pour les T&C de la promotion car les T&C sont très courts, vous pouvez les placer dans le pied de page.

Exemples d'interface utilisateur :

ThredUp utilise le pied de page pour afficher les conditions générales de ses promotions de panier.

Fiche produit :

Laissez l'ancienne étiquette de prix sur

Assurez-vous que vos clients connaissent le prix avant de le réduire. Les gens prennent des décisions d'achat en fonction de la valeur qu'ils accordent à la transaction, et non de la valeur qu'ils accordent au produit. Dans la mesure du possible, donnez à vos clients un prix de référence qui rend votre offre intéressante en comparaison.

Exemples d'interface utilisateur :

Shein barre l'ancien prix, place le nouveau prix et ajoute même une étiquette indiquant le niveau de la remise en pourcentage.

Sur le mobile, ils affichent le pourcentage de remise et la valeur en dollars de la remise.

Énoncez clairement les règles des promotions groupées

Pour les remises groupées, rendez les offres faciles à voir et suivez les étapes sur les pages de produits pour vous assurer que les utilisateurs sont éligibles s'ils le souhaitent. Si le site propose une remise pour l'achat de plusieurs articles d'un même produit, les utilisateurs devraient pouvoir découvrir facilement l'offre et atteindre le minimum requis.

Exemples d'interface utilisateur :

Chubbies Shorts affiche la vente "Achetez-en 2, obtenez une réduction" juste à côté de l'étiquette de prix du produit sur la page de catégorie.

Ils affichent également la réduction dans le panier.

Lorsque vous cliquez sur la réduction, celle-ci est sélectionnée et ajoutée à la commande, diminuant le prix de 10 $.

Panier:

Inclure les champs de code de coupon comme élément central du panier et des pages de paiement

Les utilisateurs qui ont un code promo veulent le saisir dès que possible. Vous devez fournir un emplacement clair pour les codes de réduction dans le panier, avant la première étape du processus de paiement. Cette approche de l'interface utilisateur permet aux utilisateurs de vérifier si elle est valide avant de saisir des informations personnelles et permet également de mettre à jour le total de manière appropriée au début du processus.

En ce qui concerne le placement du code de coupon, il est fortement recommandé de faire des codes promotionnels un élément central du processus de paiement au lieu d'un élément de la barre latérale. Lorsque les promotions sont placées dans le bon rail, elles ont tendance à être confondues avec des publicités et ignorées en raison de la cécité des bannières.

D'un autre côté, si votre client n'a pas de code de coupon et qu'il voit un champ de coupon, il peut avoir l'impression de manquer une offre possible et de se désabonner, car il commencera à chercher une remise. Si tous vos coupons ne sont pas accessibles au public, la meilleure solution consiste à ne pas fournir de champ de texte ouvert visible. Vous devriez plutôt fournir un lien texte pour exposer un champ de texte. Cette conception est moins susceptible d'intéresser les utilisateurs et de les envoyer dans une quête de coupon, car de nombreux acheteurs ne le remarqueront pas. Le compromis, bien sûr, est qu'il est moins trouvable pour ceux qui ont un code promo.

La zone de code de coupon , qu'elle soit automatiquement agrandie ou masquée sous un lien, doit être un champ de texte. Si vos codes de réduction ont un nombre fixe de caractères ou un certain modèle, vous pouvez également ajouter une validation automatique qui avertira l'utilisateur s'il ajoute pas assez, trop de caractères ou un mauvais type (numérique, alphabétique, signes spéciaux) pour aider ils repèrent l'erreur plus tôt. Le champ doit être suffisamment long pour accueillir les codes de coupon utilisés sur le site, afin de garantir que les utilisateurs les saisissent correctement. La meilleure longueur des codes promo est de 8 à 12 caractères. Si vous proposez des suggestions de codes de réduction, vous pouvez également les afficher dans une liste déroulante.

En ce qui concerne la façon dont vous formulez la copie autour des coupons offerts , la psychologie du marketing de la comptabilité mentale suggère que si vos produits ont tendance à tomber davantage dans la catégorie des produits de première nécessité, vous devriez dire à vos clients qu'ils ont des coupons "gagnés" (imaginez un pop-up message disant "Bonjour! Vous venez de gagner un bon de réduction de 10 $!"), Parce que le fait de gagner le fait apparaître comme une source de revenu plus sérieuse. En revanche, si vos produits sont plus frivoles, vous devriez essayer de présenter vos coupons comme une surprise ou comme leur ayant été donné par chance (imaginez un message disant "Vous venez de gagner un coupon de 10 € !"). Vous pouvez en savoir plus sur la comptabilité mentale dans notre article de blog.

Les codes de coupon eux-mêmes doivent être faciles à retenir et à écrire dans la boîte de coupon (à moins que vous ne les proposiez sous forme de liste déroulante ou de bouton radio parmi lesquels choisir). Cela signifie que les combinaisons signifient quelque chose pour les clients, en évitant les lettres et les chiffres similaires comme O et 0 et en gardant la longueur inférieure à 12 caractères. En savoir plus sur la fluidité cognitive dans notre article de blog.

Exemples d'interface utilisateur :

Birchbox a une boîte de code de coupon très visible dans la vue du panier. Ils offrent également un lien pour ouvrir une boîte de code de coupon dans la vue de paiement, pour ceux qui l'ont manqué dans la vue du panier. C'est un excellent moyen de conserver l'option d'ajouter un code de coupon aux deux étapes, en masquant la case du code de coupon sur le formulaire de paiement, ce qui aide à réduire le taux de désabonnement.

Sur la résolution mobile, la boîte de coupon est masquée et doit être agrandie en cliquant dessus :

Encore une fois, il y a un lien vers la boîte de code promotionnel sur la page de paiement :

Pour les promotions à dépenses minimales, faites le calcul pour les utilisateurs et aidez-les à atteindre l'objectif de dépenses

Certains sites proposent des promotions telles que la livraison gratuite pour les achats supérieurs à un certain montant. Ces offres incitent les utilisateurs à dépenser plus de temps et d'argent pour en bénéficier.

Pour les promotions à dépenses minimales, les sites doivent indiquer aux utilisateurs exactement combien ils doivent dépenser en plus pour bénéficier de l'offre. Une excellente idée d'interface utilisateur pour cela est de compter directement dans le panier combien les utilisateurs doivent dépenser plus pour bénéficier de la remise, qu'il s'agisse de la livraison gratuite, d'une remise en % ou d'un dollar.

Si vous souhaitez vous assurer que les clients sont motivés à dépenser plus pour bénéficier de la livraison gratuite, mais ne limitent pas leurs achats pour atteindre un niveau de dépenses "juste suffisant", en fixant un prix plafond et en ancrant la valeur requise pour atteindre la livraison gratuite, vous pouvez jouer avec votre interface utilisateur pour afficher la progression vers la livraison gratuite plus rapide au début des dépenses et plus lente vers l'atteinte de l'« objectif » de volume de commande. Ceci est conforme à l'idée de « vitesse d'objectif », basée sur la recherche. Vous pouvez en savoir plus à ce sujet dans cet article de blog.

Les sites pourraient aller encore plus loin, en suggérant des articles pertinents dans le panier qui permettraient aux acheteurs d'atteindre l'objectif de dépenses minimum et leur épargneraient l'effort de faire le calcul eux-mêmes.

Exemples d'interface utilisateur :

Tula utilise l'interface utilisateur pour afficher dans le panier la quantité manquante pour bénéficier de la livraison gratuite.

Rappeler aux utilisateurs les offres spéciales disponibles auxquelles ils peuvent prétendre dans le panier

La dernière chance d'attirer l'attention des utilisateurs et de les aider à découvrir les promotions disponibles au niveau du panier et des coupons se trouve sur la page du panier. Là, ils peuvent toujours apporter facilement des modifications à la commande, alors assurez-vous d'inclure toutes les offres spéciales auxquelles les utilisateurs peuvent prétendre, telles que la livraison gratuite ou les remises.

Les offres doivent être clairement visibles pour attirer l'attention des utilisateurs. Pour attirer l'œil de l'utilisateur, utilisez un placement et un poids visuel appropriés.

Voici quelques-unes des meilleures pratiques UX :

• Pour les offres au niveau du produit, présentez la messagerie près du produit lui-même.
• Pour les offres à l'échelle du site, présentez l'offre dans un espace prioritaire directement au-dessus de l'option pour passer à la caisse.
• Si la remise s'applique à l'expédition, le placement avec des remises sur l'ensemble du site ou à côté d'un total d'expédition peut être approprié.
  

N'offrez pas trop de coupons et de promotions au niveau du panier aux clients, en particulier lors du paiement. La surcharge de choix peut entraîner un désabonnement. En savoir plus sur la valeur de la variété et la surcharge de choix dans notre article de blog.

Exemples d'interface utilisateur :

Chubbies Shorts affiche toutes les remises et récompenses disponibles directement dans le panier.

Mentionnez toute condition ou restriction particulière

Si la promotion du panier ou les coupons comportent des conditions ou des restrictions spéciales, mentionnez-les sur la page de vente, dans vos conditions générales et dans le panier, avant que les clients ne finalisent l'achat.

Exemples d'interface utilisateur :

Shein mentionne les conditions particulières de leur promotion dans le panier, par exemple le nombre maximum de produits promotionnels qu'un client peut acheter et que les articles soldés ne peuvent pas être retournés.

Page de paiement :

Inclure un champ de code de coupon

Comme nous l'avons mentionné précédemment, il est préférable d'inclure le champ du code de coupon à la fois sur la page du panier et sur la page de paiement si quelqu'un a oublié de l'appliquer sur la page d'affichage du panier.

Afficher un message de réussite si le code est appliqué avec succès

Affichez un message de réussite et le montant de la réduction pour confirmer que le code de réduction a été appliqué avec succès. Placez le message près du champ du code de coupon pour vous assurer que les utilisateurs le voient et associez-le au code de coupon saisi. Avoir ce message affiché en haut ou en bas de la page peut prêter à confusion. Assurez-vous que le message de réussite n'est pas la seule source d'information indiquant que le coupon a été appliqué avec succès. Affichez la réduction ajoutée dans les totaux de la commande, dans le panier et sur la page de paiement, en précisant de préférence quel code de réduction a appliqué quelle réduction (en particulier, si les clients peuvent ajouter plusieurs codes de réduction à la commande).

Exemples d'interface utilisateur :

Pretty Little Thing affiche une coche et le montant de l'économie appliquée à la commande après avoir entré un code valide. Ils affichent également le montant de la remise calculé dans les totaux de la commande, en précisant quel code de remise a appliqué la remise.

Ils affichent également le code promo appliqué et la réduction associée sur la vue mobile :

{{CTA}}

Construisez votre interface avec des composants prêts à l'emploi inclus dans notre kit d'interface utilisateur

Commencer à construire

{{ENDCTA}}

Afficher un message d'erreur pour les codes de coupon invalides

Si le code n'est pas valide ou si les conditions de la promotion ne sont pas remplies, vous devez afficher un message d'erreur pertinent indiquant le type de problème avec le code de coupon. N'affichez pas le même message d'erreur dans tous les cas car il n'indiquera pas à l'utilisateur ce qui ne va pas et comment il peut résoudre le problème.

Affichez le message d'erreur juste à côté de la zone de code de coupon, et non en haut ou en bas de la page car l'utilisateur peut ne pas remarquer le message d'erreur. Assurez-vous que le message d'erreur est visible, par exemple en utilisant du rouge ou une autre couleur contrastante.

Types de messages d'erreur à afficher :

• Le code promo n'est pas valide.
• Le code de coupon a déjà été utilisé et ne peut pas être échangé plusieurs fois.
• Le montant de la commande est insuffisant ou excessif pour appliquer le coupon (dans ce cas, retournez les informations sur la quantité manquante pour bénéficier du coupon ou sur le montant excédentaire dans le panier).
• Le contenu de la commande ne respecte pas les conditions de la promotion (dans ce cas, mentionnez les articles qui doivent être supprimés ou ajoutés pour être éligibles).
• Le coupon a expiré.
• Autres raisons - si vous pouvez imaginer d'autres cas, rédigez un message spécialement pour eux. Ayez un message par défaut pour tous les autres cas auxquels vous n'auriez pas pu penser.

Exemples d'interface utilisateur :

Summer Salt affiche un message d'erreur si le code saisi n'est pas valide ou si les conditions de la promotion ne sont pas remplies. Ils encouragent les clients à revérifier leur code. Avoir les coupons publics visibles sur le ruban supérieur aide à corriger l'erreur.

Voici comment ils l'affichent sur la résolution mobile :

Indiquez clairement si le client peut ajouter plusieurs coupons de réduction ou combiner des promotions

Si vous autorisez l'ajout d'un seul coupon à la commande, une fois qu'un client ajoute un code de coupon valide, faites disparaître ou masquer le code de coupon. Remplacez-le en ajoutant un bouton "changer mon code de coupon" car les clients peuvent vouloir changer le code de coupon pour un autre. N'oubliez pas d'avoir également la possibilité de supprimer le code de coupon. Vous devez clairement indiquer quelque part sur la page que les clients ne peuvent ajouter qu'un seul code de coupon par commande.

Si les clients peuvent ajouter plus de codes de réduction, une fois qu'ils ont ajouté un code de réduction, vous pouvez l'afficher comme "ajouté à la commande" et laisser le champ du code de réduction se recharger et être à nouveau vide, afin que les clients puissent appliquer un autre code de réduction.

Si les codes de réduction et les promotions de panier ne peuvent pas être combinés, vous devez l'indiquer clairement dans les publicités de promotion, les conditions générales et sur la page de paiement, en particulier sous forme de message d'erreur si quelqu'un essaie d'ajouter un coupon en plus d'articles déjà en vente.

Exemples d'interface utilisateur :‍

Summer Salt ajoute le coupon ajouté sous le champ du code de coupon et vide le champ du code de coupon une fois qu'un coupon est appliqué à la commande, suggérant aux utilisateurs d'appliquer plus d'un coupon par commande.

Pretty Little Thing permet aux clients d'appliquer un seul code promo par commande. Ils font disparaître le champ du coupon après l'application du coupon à la commande et le remplacent par un bouton "modifier le code".

Aidez les utilisateurs à trouver des remises pour une expérience client améliorée

À côté du champ du code de coupon, vous devez afficher un lien vers le cockpit du client où il peut voir toutes les remises disponibles ou simplement une liste de coupons et de promotions de panier parmi lesquelles choisir. Cela permet aux clients d'utiliser vos offres beaucoup plus facilement et peut augmenter la taille de leur panier, s'ils voient qu'ils pourraient bénéficier d'une réduction s'ils ajoutent simplement quelques articles supplémentaires à leur panier.

Exemples d'interface utilisateur :

Shein établit un lien vers la page "Mes coupons" qui collecte les coupons disponibles à côté du champ du code de coupon lors du paiement et mentionne les coupons accessibles au public sous le champ du code de coupon.

Il s'agit du cockpit client affichant les coupons disponibles et les coupons expirés qui s'ouvre en cliquant sur le lien "Mes coupons".

Sur l'application mobile, ils affichent les coupons sous forme d'« alerte de coupon ». Si vous cliquez sur cette fenêtre contextuelle, vous pouvez voir tous les coupons disponibles et choisir celui à utiliser.

Refléter la remise reçue

Affichez toutes les remises ou restrictions spéciales appliquées aux articles dans le panier, à la fois les promotions au niveau du panier et les coupons. Les codes de coupon doivent être validés et reflétés dans le coût avant de demander les informations de paiement. Les remises au niveau du panier doivent être affichées au niveau du produit ou de la commande, en fonction de ce à quoi elles ont été appliquées. Il est essentiel que les utilisateurs puissent voir les économies et comprendre comment le total est calculé. Le mieux est même d'afficher quel code promo et quelle promotion leur ont permis de réaliser le montant exact d'économies réalisées sur le total de la commande.

Les restrictions spéciales sur les articles à prix réduit doivent être communiquées avant que les clients ne passent leur commande.

Exemples d'interface utilisateur :

Shein affiche les remises au niveau du produit au niveau du produit dans le résumé du panier.

Shein permet aux clients d'appliquer des codes de réduction uniquement à la caisse. In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

Résumé

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

Commencer

{{ENDCTA}}