Best Practices für Gutscheine, Rabatte und Werbeaktionen UI & UX

„Käufer lieben Angebote, sei es in Form von Angeboten auf der gesamten Website, ausgewählten Verkaufsartikeln oder Coupons. Damit Benutzer jedoch Werbeaktionen erfolgreich nutzen können, muss eine Website zwei Dinge gut machen: Sie muss diese verschiedenen Werbeaktionen auf der gesamten Website effektiv kommunizieren und es den Benutzern auch leicht machen, die kommunizierten Angebote zu erhalten.“ Kim Salazar, Senior User Experience Specialist bei der Nielsen Norman Group

Dieser Beitrag sammelt Best Practices und Inspirationen für die Gestaltung von Benutzeroberflächen und Erfahrungen zur Bewerbung von Gutscheincodes und automatisch angewendeten Werbeaktionen auf Ihrer Website oder mobilen Plattform. Wir decken die gesamte Customer Journey ab, von Werbebotschaften und Preisnachlässen auf der Website über die Validierung von Gutscheinen und Werbeaktionen und die Anwendung an der Kasse bis hin zur Einlösung. Wir haben diesen Beitrag basierend auf der UI & UX unserer Kunden, der umsatzstärksten UI der DTC-E-Commerce-Plattformen und verschiedenen UX-Studien geschrieben.

Hinweis: Alle Desktop-Screenshots wurden auf Mac, Chrome und alle mobilen Screenshots mit der iPhone X-Auflösung auf Chrome erstellt.

Wir hoffen, dass dieser Leitfaden Ihnen dabei hilft, Ihre Plattform neu zu gestalten, um Werbeaktionen auf Coupon- und Warenkorbebene einzubeziehen oder Ihr Couponing-Erlebnis für bestehende Kunden zu verbessern. Wenn Sie Fragen haben oder mehr über Voucherify, unsere Promotion Engine, erfahren möchten, können Sie sich gerne an uns wenden.

UI-Kit für Gutscheine und Werbeaktionen

Erzielen Sie eine schnellere Markteinführung mit fertigen Coupon- und Promotion-Komponenten aus unserem Coupons & Promotions UI Kit, das auf Figma verfügbar ist. Mehr erfahren.

Inhaltsverzeichnis:

Allgemeine Hinweise zu Promotion UI & UX:

• Geben Sie den Aktionszeitraum klar an.
• Wenden Sie automatisch öffentlich verfügbare Coupons an.
• Bieten Sie eine Verkaufszusammenstellungsseite an.
• Aktivieren Sie die Filterung in Ihrer Verkaufskategorie.
• Bieten Sie ein Kundencockpit an.
• Listen Sie rabattierte Artikel im Abschnitt „Verkäufe“ sowie in den entsprechenden Kategorien auf.
• Kommunizieren Sie standortweite Werbeaktionen weltweit.
• Seien Sie sich im Voraus über Promo-Einschränkungen im Klaren.

Coupon UX Best Practices auf einer bestimmten Seite:

1. ‍ Startseite:

• Arten von Werbeaktionen, die auf der Homepage beworben werden.
• Link zu den Verkaufsseiten.

2. ‍ Kategorieseiten.
3. ‍ Popups.
4. ‍ Oberer Rand des Seitenbands .
5. ‍ Fußzeile.
6. ‍ Produktseite:

• Lassen Sie das alte Preisschild dran.
• Geben Sie die Regeln für Bundle-Aktionen klar an.

7. ‍ Warenkorb:

• Fügen Sie Gutscheincode-Felder als Kernbestandteil sowohl der Warenkorb- als auch der Checkout-Seite ein.
• Rechnen Sie bei Werbeaktionen mit Mindestausgaben für die Nutzer und helfen Sie ihnen, das Ausgabenziel zu erreichen.
• Erinnern Sie Benutzer an verfügbare Sonderangebote, für die sie sich im Warenkorb qualifizieren können.
• Erwähnen Sie besondere Bedingungen oder Einschränkungen.

8. Checkout-Seite:

• Fügen Sie ein Gutscheincode-Feld hinzu.
• Zeigen Sie eine Erfolgsmeldung an, wenn der Code erfolgreich angewendet wurde.
• Anzeige einer Fehlermeldung im Falle eines ungültigen Gutscheincodes.
• Machen Sie deutlich, ob der Kunde mehr als einen Rabattgutschein hinzufügen kann.
• Helfen Sie Benutzern, ihre Rabatte zu finden.
• Reflektieren Sie die erhaltenen Rabatte.
  

Die Grundlagen von Gutscheincodes UI & UX

Wir werden hier einige allgemeine Tipps behandeln, die für die meisten Designs, Platzierungen und Werbeaktionen von Rabattgutscheinen und Werbeaktionen gelten. Später werden wir zu den spezifischen Coupon- und Warenkorb-Promos-Platzierungen auf der Website übergehen und dabei die beste Designlösung aus Sicht des Kundenerlebnisses hervorheben. Denken Sie daran, dass es nie ausreicht, nur eine Gutscheinkampagne zu starten. Sie müssen sich auch um das Design, die Platzierung, die Validierung und den Einlöseprozess des Gutscheins kümmern, damit Ihre Kampagne ein voller Erfolg wird.

Geben Sie den Aktionszeitraum klar an

Sie sollten die Kunden über die Dauer des Gutscheins oder der Aktion auf Warenkorbebene informieren, um unzufriedene Kunden zu vermeiden, die an der Kasse erfahren, dass das Angebot nicht mehr gültig ist. Es hilft auch, ein Gefühl der Dringlichkeit zu erzeugen und Käufer leicht anzustoßen, ihre Bestellungen abzuschließen. Wenn Sie dies nicht tun, führt dies zu einer fehlerhaften Benutzererfahrung und Kunden, die Ihre Website verlassen.

Sie können dies tun, indem Sie entweder den Zeitrahmen (Daten oder Stunden) der Aktion angeben oder einen Countdown-Timer hinzufügen. Best Practice ist es, den Aktionszeitraum immer auf jedem Banner und jeder Anzeige hinzuzufügen, nicht nur in den Allgemeinen Geschäftsbedingungen, um sicherzustellen, dass die Kunden über das Ablaufdatum der Aktion Bescheid wissen.

UI-Beispiele:

Pomelo Fashion verwendet einen Countdown-Timer, um deutlich anzuzeigen, wann ihre Angebote ablaufen.

Shein informiert Kunden neben dem Werbebanner oder der Kategorie mit einem Countdown über die Dauer des Angebots. Sie zeigen auch die Anzahl der verbleibenden Teile an, um ein Gefühl der Dringlichkeit zu vermitteln.

Sie informieren Kunden auch über die Angebotsdauer auf der Produktseite, um das Werbeerlebnis weiter zu verbessern.

Und sie haben den Timer sogar in den Warenkorb gelegt.

So sieht die Anzeige in ihrer mobilen App aus:

Pretty Little Thing hat einen Promotion-Countdown auf dem Hauptseitenbanner, der auch in der mobilen Auflösung verfügbar ist:

Wenden Sie automatisch öffentlich verfügbare Coupons an, um das bestmögliche Erlebnis zu bieten

Wenn auf der Website ein Rabatt- oder Gutscheincode angeboten wird, könnten Sie den Einlösungsprozess vereinfachen, indem Sie Benutzern erlauben, diesen automatisch in ihren Warenkorb zu übernehmen, indem sie auf den Rabattcode klicken, oder ihn zumindest automatisch kopieren, wenn sie darauf klicken, so dass Sie müssen sich den Code nicht merken. Dies erhöht die Nutzung der Werbeaktion, indem es den Benutzern erleichtert wird, sie auf ihre Warenkörbe anzuwenden. Sie können auch automatisch eindeutige Rabattcodes anwenden, die über verschiedene Kanäle (E-Mail, SMS und andere) gesendet werden, wenn der Kunde auf den erhaltenen Link klickt. Erfahren Sie, wie Sie die Coupon-Validierungs-UX beheben können, indem Sie diesem Beitrag folgen.

Wenn das Angebot öffentlich verfügbar ist, überlegen Sie immer sorgfältig, ob es sich nicht um einen automatisch angewendeten Rabatt auf Warenkorbebene anstelle eines öffentlichen Gutscheincodes handeln könnte. Es vereinfacht den Checkout-Prozess für Kunden und kann zu erhöhten Konversionsraten der Aktion führen.

Eine weitere gute UX-Praxis besteht darin, den Gutscheincode kopieren zu können (platzieren Sie ihn als Text auf der Website oder in der mobilen App, nicht eingebettet in ein Bild).

UI-Beispiele:

Vanity Planet wendet automatisch öffentliche Gutscheincodes auf berechtigte Bestellungen im Warenkorb an. Nachdem Sie zur Kasse gegangen sind, wird die Bestellsumme neu berechnet, um den Rabattcode widerzuspiegeln.

Sie fügen der Bestellung sogar ein kostenloses Produkt hinzu, wenn sich die Bestellung dafür qualifiziert, und wenden den Rabattcode erneut automatisch an:

Hier sehen Sie den gleichen Ablauf in mobiler Auflösung:

Wenn Sie auf die Schaltfläche „Bestellübersicht anzeigen“ klicken, wird der Inhalt des Warenkorbs angezeigt, einschließlich der Informationen zu den Aktionen und Gutscheincodes, die auf die Bestellung angewendet wurden.

Bieten Sie eine Verkaufszusammenstellungsseite an

Das Sammeln aller öffentlich verfügbaren Werbeaktionen und Rabattgutscheine auf Warenkorbebene auf einer Seite ist eine großartige Möglichkeit, Kunden das Auffinden zu erleichtern. Auf diese Weise können Sie die Aktionen auch neuen oder nicht eingeloggten Kunden anzeigen, anstatt nur Kunden-Cockpits zu verwenden, um alle Aktionen anzuzeigen. Oft zeigen Unternehmen alle Werbebanner einfach auf der Homepage an, was verschiedene Seitenelemente verdecken und das Kundenerlebnis beeinträchtigen kann.

UI-Beispiele:

Victoria's Secret präsentiert alle verfügbaren Angebote in einer übersichtlichen Benutzeroberfläche auf einer Seite. Beachten Sie, wie die Informationsarchitektur auf der Website die Größe verwendet, um ausgewählte Angebote hervorzuheben oder abzuschwächen.

Aktivieren Sie die Filterung in Ihrer Verkaufskategorie für eine bessere UX

Wenn Sie eine Verkaufskategorie anbieten, in der alle Artikel gesammelt sind, auf die eine bestimmte Warenkorbaktion oder ein bestimmter Rabattcode anwendbar ist, sollten Sie den Benutzern erlauben, in dieser Kategorie zu navigieren und sie zu filtern. Einige Besucher möchten nur Produkte im Angebot sehen und sonst nichts, daher sollten separate Verkaufskategorien es ihnen ermöglichen, alle Angebote anzuzeigen und problemlos durch diesen Abschnitt zu navigieren. Gefilterte Navigationsoptionen sollten es Käufern ermöglichen, innerhalb von Verkaufsabschnitten zu sortieren und zu filtern, um die Auswahl effektiv einzugrenzen. Ohne Filter kann das Einkaufen im Sale harte Arbeit sein und dazu führen, dass Kunden Ihre Website verlassen.

UI-Beispiele:

Pomelo Fashion bietet Sale-Kategorienfilter nach Produkttyp und -größe.

Fashion Nova bietet Sale-Kategorie-Filterung nach Preispunkt oder Fächern:

Bieten Sie ein Kundencockpit an

Die Anzeige aller Warenkorbaktionen und Rabattcodes, auf die ein bestimmter Kunde in einem speziellen Kundencockpit zugreifen kann, hilft Kunden zu verstehen, welche Aktionen speziell für sie verfügbar sind. Es ermöglicht Ihnen auch, persönliche, einzigartige Rabattgutscheine, Geschenkkarten, Treuepunkteguthaben oder andere Prämien anzuzeigen, im Gegensatz zu einer Verkaufsseite, die nur öffentlich zugängliche Werbeaktionen anzeigt, keine personalisierten.

UI-Beispiele:

H&M bietet ein Kunden-Cockpit, in dem Kunden ihren Treuepunktestand, verfügbare Aktionen und Rabatte, einzigartige Gutscheine und ein Empfehlungsprogramm finden.

Kundencockpit bei mobiler Auflösung:

Führen Sie rabattierte Artikel im Abschnitt „Verkäufe“ und in den entsprechenden Kategorien auf

Beschränken Sie die Anzeige von Verkaufsartikeln nicht auf einen speziellen Verkaufsbereich der Website. Für die beste Auffindbarkeit ist es am besten, reduzierte Artikel sowohl auf der entsprechenden Kategorieseite als auch im Abschnitt „Verkäufe“ aufzulisten. Einige Benutzer navigieren direkt zu Verkaufsabschnitten, wenn sie motiviert sind, ein Schnäppchen zu finden, andere suchen jedoch nicht speziell nach Verkaufsabschnitten. Benutzer, die nach einem bestimmten Artikel suchen, durchsuchen im Allgemeinen nach Kategorien. Websites, die Verkaufsartikel zusammen mit Artikeln zum vollen Preis anzeigen, helfen Benutzern, Rabatte in ihrem Interessengebiet zu entdecken.

UI-Beispiele:

Pretty Little Thing listet Sale-Artikel unter Sale-Artikeln und Produktkategorien auf, damit sie in beiden gefunden werden können.

Kommunizieren Sie standortweite Werbeaktionen weltweit, um schlechte Presse zu vermeiden

Wenn die Website kostenlosen Versand oder andere Website-weite Rabatte oder Coupons anbietet, zeigen Sie diese Angebote auf jeder Seite der Website an. Konsistente Rabatterinnerungen können Benutzern helfen, Artikel in ihrem Budget zu finden, und sie zum Kauf anregen. Auch hier stellen sie Ihre Marke als eine Marke dar, die Käufern Vorteile bietet. Indem Sie seitenweite Werbeaktionen nur in ausgewählten Bereichen anzeigen, riskieren Sie, dass nicht alle Benutzer sie entdecken. Wenn Coupons nicht auf allen Seiten beworben werden, kann außerdem davon ausgegangen werden, dass sie absichtlich ausgeblendet wurden, um eine Verwendung zu verhindern, was sich letztendlich negativ auf die Marke auswirkt.

Mögliche Rabattplatzierungen sind:

• Werbeankündigungen im Heldenbereich auf der Homepage.
• Banner oben auf jeder Seite mit den Warenkorb-Aktionsdetails oder dem Gutscheincode – einschließlich auf der Warenkorbseite oder der Checkout-Seite, wo der Gutscheincode eingegeben werden sollte.
• Werbe-Callouts auf der Produktlistenseite oder in der rechten Leiste.
• Banner unten auf der Seite, in oder neben der Fußzeile.

UI-Beispiele:

‍Pomelo Fashion kommuniziert seinen Website-weiten Coupon auf dem Homepage-Banner, dem Top-Page-Ribbon und den Kategorieseiten.

PrettyLittleThing erinnert Kunden sogar auf Produktseiten an Rabattcoupons auf der ganzen Website – ein großartiger Schachzug aus UX-Sicht.

So präsentieren sie es im mobilen Layout:

Pretty Little Thing bewirbt seine Promotion auf Warenkorbebene auf seinem Hauptseitenbanner und dem oberen Seitenband:

Sie bieten eine Verkaufsseite an, auf der alle reduzierten Artikel angezeigt werden:

Sie zeigen auch den Rabatt auf der Produktseite:

Machen Sie sich im Voraus über Einschränkungen bei Werbeaktionen im Klaren

Manchmal können Warenkorb-Aktionen oder Rabatt-Coupons Qualifizierungen oder Einschränkungen unterliegen. Stellen Sie in diesem Fall sicher, dass im Angebot klar angegeben ist, welche Einschränkungen gelten. Verlinken Sie bei Bedarf auf detailliertere Informationen zu diesen Bedingungen, aber verlangen Sie nicht, dass Benutzer das Kleingedruckte durchforsten, um grundlegende Einschränkungen zu verstehen. Nichts ist frustrierender, als auf ein Angebot zu warten, nur um an der Kasse festzustellen, dass Sie sich nicht qualifizieren. Denken Sie daran, dass Ihr Coupon-Design nicht nur auffällig, sondern vor allem funktional sein sollte.

UI-Beispiele:

Pretty Little Thing gibt direkt auf seinem Hauptseitenbanner an, dass die Aktion Sale-Artikel und Schönheitsartikel ausschließt.

Chewy gibt einen Link zu weiteren Informationen zu ihren Aktionsdetails (Schaltfläche „Weitere Informationen“), die auf dem Band „Sparen Sie 35 % bei Ihrem ersten Autoship“ beworben werden.

Dies ist das Pop-up, das nach dem Klicken auf den Aktions-CTA angezeigt wird:

In der mobilen Auflösung enthält das Menüband keine Schaltfläche, ist aber anklickbar. Nachdem Sie darauf geklickt haben, wird dasselbe Popup-Fenster mit den Geschäftsbedingungen der Aktion angezeigt:

Coupon UX Best Practices auf bestimmten Seiten:

Startseite:

Arten von Werbeaktionen, die auf der Homepage beworben werden:

Sie sollten nicht alle Werbeaktionen auf der Homepage bewerben, da die Kunden von der Anzahl der Angebote überwältigt werden könnten (und sogenannte Bannerblindheit bekommen). Dort sollten nur öffentlich verfügbare Warenkorb-Aktionen oder Coupons beworben werden. Die beste UX-Praxis besteht darin, die produkt- oder kategoriespezifischen Rabatte für Kategorie- oder Produktseiten zu belassen.

UI-Beispiele:

Happy Socks zeigte auf dem Band auf der obersten Seite und dem Hauptbanner auf der Startseite den automatisch gewährten 30 % Rabatt auf den Sommerschlussverkauf, der zu diesem Zeitpunkt der größte öffentliche Rabatt war.

Link zu den Verkaufsseiten

Wenn es eine fortlaufende Website-weite automatisch angewendete oder Gutschein-Werbeaktion gibt, könnten Sie, anstatt alle berechtigten Produkte und Bedingungen auf der Startseite aufzulisten, einfach einen Teaser bereitstellen, der zur Verkaufsseite führt, wo Kunden alle Geschäftsbedingungen lesen können die Aktion und stöbern Sie durch die berechtigten Produkte und Angebote.

UI-Beispiele:

Chubbies Shorts zeigt auf der Hauptseite ein Werbebanner an, das auf die Verkaufskollektionsseite verlinkt.

Kategorieseiten:

Pop-ups

Pop-ups können verwendet werden, um Gutscheinrabatte und Werbeaktionen auf Warenkorbebene zu bewerben, die im Geschäft verfügbar sind, aber sie haben verschiedene UX-Nachteile. Wenn sie die einzige Möglichkeit sind, eine Aktion zu bewerben, können Benutzer sie schließen und die genauen Rabattbedingungen oder den erforderlichen Gutscheincode vergessen. Daher sollten Pop-ups mit anderen Kommunikationsmitteln wie Bannern, E-Mails, SMS verwendet werden. Ein weiteres Problem von Pop-ups ist, dass sie aufdringlich sind. Sie überdecken die Inhalte, die Nutzer eigentlich durchsuchen wollten und können als störend empfunden werden.

Andererseits sind Pop-ups ein toller Ersatz oder Ergänzung zu E-Mails, wenn dem Kunden für eine gerade durchgeführte Aktion ein Rabatt gewährt wird. Wenn der Kunde beispielsweise den Newsletter abonniert hat, könnten Sie den verdienten Rabatt in einem Popup anzeigen. Auf diese Weise erhält der Kunde es einfacher und früher, als wenn er seinen Posteingang überprüfen müsste. Auch hier könnten Pop-up und E-Mail nebeneinander existieren, um den Rabatt verfügbar zu machen, wenn ein Kunde später darauf zurückkommen möchte.

Eine gute Alternative zu Popups in der mobilen App sind Push-Benachrichtigungen.

UI-Beispiele:

Tula verwendet Pop-ups, um eine Promotion auf Warenkorbebene zu kommunizieren, aber auf das Pop-up kann auch zugegriffen werden, wenn der Benutzer auf ein festes Banner mit 15 % Rabatt klickt. Das macht es möglich, später auf die Promotion zurückzukommen.

Seitenband oben:

Ähnlich wie bei der Platzierung auf der Homepage sollte das Band für öffentliche oder Website-weite Warenkorb- oder Rabattgutschein-Aktionen reserviert sein. Es ist ein großartiger Ort, um einen öffentlichen Gutscheincode hinzuzufügen und ihn auf allen Seiten, einschließlich der Kasse, sichtbar zu machen, damit der Code leicht zugänglich ist, wenn Benutzer ihren Einkaufswagen überprüfen oder die Kasse abschließen.

UI-Beispiele:

Chubbies Shorts verwendet das Band, um für große, öffentlich verfügbare Warenkorb-Aktionen zu werben.

Fusszeile:

Die Fußzeile ist eine der am wenigsten gelesenen Stellen auf der Website. Das Platzieren von Rabattcoupons oder Angeboten auf Warenkorbebene ist nicht die beste Idee, da die Rabatte wahrscheinlich von den meisten Kunden verpasst werden. Auf der anderen Seite ist die Fußzeile ein großartiger Ort, um die Geschäftsbedingungen für Werbeaktionen hinzuzufügen. Wenn Sie keine separate Seite für die AGB der Aktion benötigen, da die AGB sehr kurz sind, können Sie sie in der Fußzeile platzieren.

UI-Beispiele:

ThredUp verwendet die Fußzeile, um die Allgemeinen Geschäftsbedingungen seiner Warenkorb-Aktionen anzuzeigen.

Produktseite:

Lassen Sie das alte Preisschild dran

Stellen Sie sicher, dass Ihre Kunden den Preis kennen, bevor Sie ihn senken. Menschen treffen Kaufentscheidungen basierend darauf, wie sehr sie das Geschäft schätzen, nicht wie sehr sie das Produkt schätzen. Geben Sie Ihren Kunden nach Möglichkeit einen Referenzpreis, der Ihr Geschäft im Vergleich gut aussehen lässt.

UI-Beispiele:

Shein streicht den alten Preis durch, platziert den neuen Preis und fügt sogar ein Schild hinzu, das die Höhe des Rabatts in Prozent angibt.

Auf dem Handy zeigen sie den Prozentsatz des Rabatts und den Dollarwert des Rabatts an.

Geben Sie die Regeln für Bundle-Aktionen klar an

Machen Sie Angebote für Paketrabatte leicht sichtbar und ergreifen Sie auf den Produktseiten Maßnahmen, um sicherzustellen, dass sich die Benutzer qualifizieren, wenn sie dies wünschen. Wenn die Website einen Rabatt für den Kauf mehrerer Artikel desselben Produkts anbietet, sollten Benutzer das Angebot leicht entdecken und die Mindestanforderung erreichen können.

UI-Beispiele:

Chubbies Shorts zeigt das Sonderangebot „Kaufen Sie 2, erhalten Sie einen Rabatt“ direkt neben dem Produktpreisschild auf der Kategorieseite.

Sie zeigen auch den Rabatt im Warenkorb an.

Wenn Sie auf den Rabatt klicken, wird er ausgewählt und der Bestellung hinzugefügt, wodurch der Preis um 10 $ verringert wird.

Einkaufswagen:

Fügen Sie Gutscheincode-Felder als Kernbestandteil sowohl der Warenkorb- als auch der Checkout-Seite ein

Benutzer, die einen Gutscheincode haben, möchten diesen so schnell wie möglich eingeben. Sie sollten einen eindeutigen Platz für Gutscheincodes im Warenkorb vor dem ersten Schritt des Bestellvorgangs bereitstellen. Dieser UI-Ansatz ermöglicht es den Benutzern, zu überprüfen, ob sie gültig sind, bevor sie persönliche Informationen eingeben, und ermöglicht auch, dass die Gesamtzahl entsprechend früh im Prozess aktualisiert wird.

Wenn es um die Platzierung von Gutscheincodes geht, wird dringend empfohlen, Gutscheincodes zu einem zentralen Bestandteil des Checkout-Prozesses zu machen und nicht zu einem Element in der Seitenleiste. Wenn Werbeaktionen in der rechten Schiene platziert werden, werden sie tendenziell mit Anzeigen verwechselt und aufgrund von Bannerblindheit ignoriert.

Wenn Ihr Kunde andererseits keinen Gutscheincode hat und ein Gutscheinfeld sieht, hat er möglicherweise das Gefühl, dass er ein mögliches Angebot verpasst und abwandert, weil er nach einem Rabatt suchen wird. Wenn nicht alle Ihre Coupons öffentlich verfügbar sind, besteht die beste Lösung darin, kein sichtbares offenes Textfeld bereitzustellen. Sie sollten lieber einen Textlink bereitstellen, um ein Textfeld anzuzeigen. Es ist weniger wahrscheinlich, dass dieses Design Benutzer dazu bringt, sie auf eine Coupon-Suche zu schicken, da viele Käufer es nicht bemerken werden. Der Nachteil ist natürlich, dass es für diejenigen mit einem Gutscheincode weniger auffindbar ist.

Das Gutscheincode-Feld sollte ein Textfeld sein, unabhängig davon, ob es automatisch erweitert oder unter einem Link ausgeblendet wird. Wenn Ihre Gutscheincodes eine feste Anzahl von Zeichen oder ein bestimmtes Muster haben, können Sie auch eine automatische Validierung hinzufügen, die den Benutzer auffordert, zu helfen, wenn er nicht genug, zu viele oder falsche Zeichen (numerisch, alphabetisch, Sonderzeichen) hinzufügt sie erkennen den Fehler früher. Das Feld sollte lang genug sein, um Gutscheincodes aufzunehmen, die auf der Website verwendet werden, um sicherzustellen, dass Benutzer sie korrekt eingeben. Die beste Länge von Gutscheincodes beträgt 8-12 Zeichen. Wenn Sie Gutscheincode-Vorschläge anbieten, können Sie diese auch in einer Dropdown-Liste anzeigen.

Wenn es darum geht, wie Sie den Text um angebotene Coupons herum formulieren , schlägt die Marketingpsychologie des Mental Accounting vor, dass Sie Ihren Kunden mitteilen sollten, dass sie Coupons „verdient“ haben (stellen Sie sich ein Pop-up vor, wenn Ihre Produkte eher in die Kategorie des täglichen Bedarfs fallen). Nachricht mit der Aufschrift „Hallo! Sie haben gerade einen 10-Dollar-Rabattgutschein verdient! Wenn Ihre Produkte dagegen eher frivol sind, sollten Sie versuchen, Ihre Coupons als Überraschung oder als Glücksgeschenk darzustellen (stellen Sie sich eine Nachricht vor, die besagt: „Sie haben gerade einen 10-Dollar-Gutschein gewonnen!“). Mehr über Mental Accounting erfahren Sie in unserem Blogbeitrag.

Die Gutscheincodes selbst sollten leicht zu merken sein und in das Gutscheinfeld geschrieben werden (es sei denn, Sie bieten sie als Dropdown oder Optionsfeld zur Auswahl an). Das bedeutet, dass die Kombinationen den Kunden etwas bedeuten, ähnliche Buchstaben und Zahlen wie O und 0 vermeiden und die Länge unter 12 Zeichen halten. Lesen Sie mehr über kognitive Gewandtheit in unserem Blogbeitrag.

UI-Beispiele:

Birchbox hat ein gut sichtbares Gutscheincode-Feld in der Warenkorbansicht. Sie bieten auch einen Link zum Öffnen eines Gutscheincode-Felds in der Checkout-Ansicht für diejenigen, die es in der Warenkorbansicht verpasst haben. Es ist eine großartige Möglichkeit, die Option zum Hinzufügen eines Gutscheincodes in beiden Schritten beizubehalten und das Gutscheincode-Feld auf dem Checkout-Formular auszublenden, was dazu beiträgt, die Abwanderung zu verringern.

Bei der mobilen Auflösung ist die Coupon-Box ausgeblendet und muss per Klick aufgeklappt werden:

Auch hier gibt es einen Link zum Promo-Code-Feld auf der Checkout-Seite:

Rechnen Sie bei Werbeaktionen mit Mindestausgaben für die Nutzer und helfen Sie ihnen, das Ausgabenziel zu erreichen

Einige Websites bieten Werbeaktionen wie kostenlosen Versand für Einkäufe über einem bestimmten Dollarbetrag an. Diese Angebote verleiten Benutzer dazu, zusätzliche Zeit und Geld aufzuwenden, um sich für sie zu qualifizieren.

Bei Werbeaktionen mit Mindestausgaben sollten Websites den Benutzern genau mitteilen, wie viel mehr sie ausgeben müssen, um sich für das Angebot zu qualifizieren. Eine großartige UI-Idee dafür ist, direkt im Warenkorb herunterzuzählen, wie viel Benutzer mehr ausgeben müssen, um sich für den Rabatt zu qualifizieren, egal ob es sich um kostenlosen Versand, % oder Rabatt in Dollar handelt.

Wenn Sie sicherstellen möchten, dass Kunden motiviert sind, mehr auszugeben, um kostenlosen Versand zu erreichen, aber ihre Einkäufe nicht einschränken, um „gerade genug“ Ausgaben zu erreichen, eine Preisobergrenze festlegen und sich an dem Wert verankern, der erforderlich ist, um kostenlosen Versand zu erreichen, können Sie spielen mit Ihrer Benutzeroberfläche, um den Fortschritt zum kostenlosen Versand anzuzeigen, der zu Beginn der Ausgaben schneller und langsamer zum Erreichen des „Ziels“ des Bestellvolumens verläuft. Dies entspricht der Idee der „Zielgeschwindigkeit“, die auf Forschungsergebnissen basiert. Mehr dazu können Sie in diesem Blogbeitrag nachlesen.

Websites könnten sogar noch weiter gehen, indem sie relevante Artikel im Warenkorb vorschlagen, die es den Käufern ermöglichen würden, das Mindestausgabenziel zu erreichen, und ihnen die Mühe ersparen würden, selbst zu rechnen.

UI-Beispiele:

Tula verwendet die Benutzeroberfläche, um im Warenkorb anzuzeigen, wie viel fehlt, um sich für den kostenlosen Versand zu qualifizieren.

Erinnern Sie Benutzer an verfügbare Sonderangebote, für die sie sich im Warenkorb qualifizieren können

Die letzte Möglichkeit, die Aufmerksamkeit der Benutzer zu erregen und ihnen dabei zu helfen, verfügbare Aktionen auf Warenkorbebene und Coupon-Aktionen zu entdecken, ist die Warenkorbseite. Dort können sie noch problemlos Änderungen an der Bestellung vornehmen, stellen Sie also sicher, dass Sie alle Sonderangebote angeben, für die sich Benutzer qualifizieren können, wie z. B. kostenloser Versand oder Rabatte.

Angebote müssen gut sichtbar sein, um die Aufmerksamkeit der Nutzer zu gewinnen. Um das Auge des Benutzers auf sich zu ziehen, verwenden Sie eine angemessene Platzierung und visuelle Gewichtung.

Hier sind einige der besten UX-Praktiken:

• Präsentieren Sie bei Angeboten auf Produktebene Nachrichten in der Nähe des Produkts selbst.
• Präsentieren Sie bei Angeboten für die gesamte Website das Angebot in einem Prioritätsbereich direkt über der Option, zur Kasse zu gehen.
• Wenn der Rabatt für den Versand gilt, kann eine Platzierung mit Rabatten auf der gesamten Website oder neben einer Gesamtversandsumme angemessen sein.
  

Bieten Sie den Kunden nicht zu viele Gutscheine und Werbeaktionen auf Warenkorbebene an, insbesondere an der Kasse. Auswahlüberlastung kann zu Abwanderung führen. Lesen Sie mehr über den Wert von Vielfalt und Auswahlüberlastung in unserem Blogbeitrag.

UI-Beispiele:

Chubbies Shorts zeigt alle verfügbaren Rabatte und Prämien direkt im Warenkorb an.

Erwähnen Sie besondere Bedingungen oder Einschränkungen

Wenn die Warenkorb-Aktion oder Coupons besondere Bedingungen oder Einschränkungen haben, erwähnen Sie dies auf der Verkaufsseite, in Ihren Allgemeinen Geschäftsbedingungen und im Warenkorb, bevor Kunden den Kauf abschließen.

UI-Beispiele:

Shein weist im Warenkorb auf die besonderen Bedingungen ihrer Aktion hin, zum Beispiel die maximale Anzahl an Aktionsprodukten, die ein Kunde kaufen kann, und dass reduzierte Artikel nicht zurückgegeben werden können.

Kassenseite:

Fügen Sie ein Gutscheincode-Feld hinzu

Wie wir bereits erwähnt haben, ist es besser, das Feld für den Gutscheincode sowohl auf der Warenkorbseite als auch auf der Checkout-Seite einzufügen, falls jemand vergessen hat, es auf der Ansichtsseite des Warenkorbs anzuwenden.

Zeigen Sie eine Erfolgsmeldung an, wenn der Code erfolgreich angewendet wurde

Zeigen Sie eine Erfolgsmeldung und den Rabattbetrag an, um zu bestätigen, dass der Gutscheincode erfolgreich angewendet wurde. Platzieren Sie die Nachricht in der Nähe des Felds für den Gutscheincode, um sicherzustellen, dass die Benutzer sie sehen, und verknüpfen Sie sie mit dem eingegebenen Gutscheincode. Wenn diese Nachricht oben oder unten auf der Seite angezeigt wird, kann dies verwirrend sein. Stellen Sie sicher, dass die Erfolgsmeldung nicht die einzige Informationsquelle ist, dass der Gutschein erfolgreich eingelöst wurde. Zeigen Sie den hinzugefügten Rabatt in den Bestellsummen, im Warenkorb und auf der Checkout-Seite an, vorzugsweise mit Angabe, welcher Gutscheincode welchen Rabatt angewendet hat (insbesondere, wenn Kunden der Bestellung mehr als einen Rabattcode hinzufügen können).

UI-Beispiele:

Pretty Little Thing zeigt ein Häkchen und die Höhe der Ersparnis, die nach Eingabe eines gültigen Codes auf die Bestellung angewendet wird. Sie zeigen auch den in den Bestellsummen berechneten Rabattbetrag an und geben an, welcher Rabattcode den Rabatt angewendet hat.

Sie zeigen auch den angewendeten Gutscheincode und den zugehörigen Rabatt in der mobilen Ansicht an:

{{CTA}}

Erstellen Sie Ihr Frontend mit fertigen Komponenten, die in unserem UI-Kit enthalten sind

Beginnen Sie mit dem Bauen

{{ENDCTA}}

Zeigt eine Fehlermeldung für ungültige Gutscheincodes an

Wenn der Code ungültig ist oder die Aktionsbedingungen nicht erfüllt sind, sollten Sie eine entsprechende Fehlermeldung anzeigen, die die Art des Problems mit dem Gutscheincode angibt. Zeigen Sie nicht in jedem Fall dieselbe Fehlermeldung an, da sie den Benutzer nicht darüber informiert, was falsch ist und wie er das Problem beheben kann.

Zeigen Sie die Fehlermeldung direkt neben dem Gutscheincode-Feld an, nicht oben oder unten auf der Seite, da der Benutzer die Fehlermeldung möglicherweise nicht bemerkt. Stellen Sie sicher, dass die Fehlermeldung sichtbar ist, indem Sie beispielsweise Rot oder eine andere Kontrastfarbe verwenden.

Arten von anzuzeigenden Fehlermeldungen:

• Gutscheincode ist ungültig.
• Der Gutscheincode wurde bereits verwendet und kann nicht mehrmals eingelöst werden.
• Der Bestellbetrag ist nicht ausreichend oder zu hoch, um den Coupon einzulösen (in diesem Fall geben Sie die Information zurück, wie viel fehlt, um sich für den Coupon zu qualifizieren, oder wie viel Überschuss im Warenkorb vorhanden ist).
• Der Inhalt der Bestellung entspricht nicht den Aktionsbedingungen (geben Sie in diesem Fall an, welche Artikel entfernt oder hinzugefügt werden sollten, um sich zu qualifizieren).
• Der Gutschein ist abgelaufen.
• Andere Gründe – wenn Sie sich andere Fälle vorstellen können, erstellen Sie eine Nachricht speziell für sie. Haben Sie eine Standardnachricht für alle anderen Fälle, an die Sie nicht gedacht haben.

UI-Beispiele:

Summer Salt zeigt eine Fehlermeldung an, wenn der eingegebene Code ungültig ist oder die Aktionsbedingungen nicht erfüllt sind. Sie ermutigen Kunden, ihren Code noch einmal zu überprüfen. Wenn die öffentlichen Coupons im oberen Menüband sichtbar sind, hilft dies, den Fehler zu korrigieren.

So zeigen sie es in der mobilen Auflösung an:

Machen Sie deutlich, ob der Kunde mehr als einen Rabattgutschein hinzufügen oder Werbeaktionen kombinieren kann

Wenn Sie zulassen, dass der Bestellung nur ein Gutschein hinzugefügt wird, lassen Sie den Gutscheincode verschwinden oder verbergen, sobald ein Kunde einen gültigen Gutscheincode hinzufügt. Ersetzen Sie ihn durch Hinzufügen einer Schaltfläche „Meinen Gutscheincode ändern“, da Kunden den Gutscheincode möglicherweise in einen anderen ändern möchten. Denken Sie daran, auch eine Option zum Entfernen des Gutscheincodes zu haben. Sie sollten irgendwo auf der Seite deutlich machen, dass Kunden nur einen Gutscheincode pro Bestellung hinzufügen können.

Wenn Kunden weitere Gutscheincodes hinzufügen können, könnten Sie nach dem Hinzufügen eines Gutscheincodes diesen als „zur Bestellung hinzugefügt“ anzeigen und das Gutscheincodefeld neu laden und wieder leer lassen, damit Kunden einen weiteren Gutscheincode anwenden können.

Wenn Rabattcodes und Warenkorbaktionen nicht kombiniert werden können, sollten Sie dies in den Werbeanzeigen, den AGB und auf der Checkout-Seite deutlich angeben, insbesondere als Fehlermeldung, wenn jemand versucht, einen Gutschein zusätzlich zu bereits reduzierten Artikeln hinzuzufügen.

UI-Beispiele:‍

Summer Salt fügt den hinzugefügten Coupon unter dem Couponcode-Feld hinzu und leert das Couponcode-Feld, sobald ein Coupon auf die Bestellung angewendet wurde, was darauf hindeutet, dass Benutzer mehr als einen Coupon pro Bestellung anwenden können.

Bei Pretty Little Thing können Kunden nur einen Gutscheincode pro Bestellung anwenden. Sie lassen das Coupon-Feld verschwinden, nachdem der Coupon auf die Bestellung angewendet wurde, und ersetzen es durch eine Schaltfläche „Code ändern“.

Helfen Sie Benutzern, Rabatte für ein verbessertes Kundenerlebnis zu finden

Neben dem Gutscheincode-Feld sollten Sie einen Link zum Kunden-Cockpit anzeigen, wo sie alle verfügbaren Rabatte oder einfach eine Liste mit Gutscheinen und Einkaufswagenaktionen zur Auswahl sehen können. Dies macht es für Kunden viel einfacher, Ihre Angebote zu nutzen, und kann die Größe ihres Einkaufswagens erhöhen, wenn sie sehen, dass sie sich für einen Rabatt qualifizieren könnten, wenn sie nur einige Artikel mehr in ihren Einkaufswagen legen.

UI-Beispiele:

Shein verlinkt auf die Seite „Meine Coupons“, die verfügbare Coupons neben dem Couponcode-Feld an der Kasse sammelt und öffentlich verfügbare Coupons unter dem Couponcode-Feld erwähnt.

Dies ist das Kundencockpit mit den verfügbaren Coupons und abgelaufenen Coupons, das sich öffnet, wenn man auf den Link „Meine Coupons“ klickt.

In der mobilen App zeigen sie die Coupons als „Coupon Alert“ an. Wenn Sie auf dieses Popup klicken, können Sie alle verfügbaren Coupons sehen und auswählen, welchen Sie verwenden möchten.

Reflektieren Sie den erhaltenen Rabatt

Zeigen Sie alle Rabatte oder besonderen Einschränkungen an, die für Artikel im Einkaufswagen gelten, sowohl Werbeaktionen auf Einkaufswagenebene als auch Coupons. Gutscheincodes sollten validiert und in den Kosten berücksichtigt werden, bevor die Zahlungsinformationen angefordert werden. Rabatte auf Warenkorbebene sollten auf Produkt- oder Bestellebene angezeigt werden, je nachdem, worauf sie angewendet wurden. Es ist wichtig, dass Benutzer Einsparungen sehen und verstehen können, wie die Summe berechnet wird. Am besten wird sogar angezeigt, welcher Gutscheincode und welche Aktion ihnen genau welche Ersparnis in der Bestellsumme beschert hat.

Besondere Beschränkungen für reduzierte Artikel sollten dem Kunden mitgeteilt werden, bevor er seine Bestellung aufgibt.

UI-Beispiele:

Shein zeigt Rabatte auf Produktebene auf Produktebene in der Warenkorbzusammenfassung an.

Shein lässt Kunden Rabattcodes nur an der Kasse anwenden. 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.

Zusammenfassung

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?

Loslegen

{{ENDCTA}}