UX- und UI-Best Practices für Geschenkkarten

Veröffentlicht: 2022-04-18

Es überrascht nicht, dass Geschenkkarten zu einem heißen Thema im E-Commerce geworden sind. Sie eignen sich nicht nur hervorragend, um Dankbarkeit und Zuneigung auszudrücken, sondern sind auch eine effektive Lösung für einige haarsträubende Kaufdilemmas, wenn Sie keine Zeit mehr haben, um eine clevere Geschenkidee zu entwickeln.

Inhaltsverzeichnis

  • ‍ ‍ Entwerfen Sie einen separaten Kaufpfad für Geschenkkarten
  • Erstellen Sie eine separate Zielseite, auf der alle Geschenkoptionen aufgelistet sind
  • Stellen Sie einen separaten Abschnitt bereit, in dem Kunden den Geschenkkartenstatus überprüfen können
  • Bewerben Sie Geschenkkarten in mehreren Bereichen
  • Entwerfen Sie den Kaufprozess für Geschenkkarten
  • Auswahl der Geschenkart
  • Auswahl des Kartenformats
  • Lieferdatum auswählen (optional)
  • Auswahl des Geschenkkartenbetrags
  • Bereitstellung von Empfängerinformationen
  • Personalisierung des Geschenkkartencodes
  • Vorlagen für Geschenkgutscheine auswählen
  • Hochladen eines Fotos zum Anpassen der Karten
  • Check-out-Prozess
  • Senden Sie Karten über mehrere Kanäle an die Empfänger
  • Lassen Sie sich ein effektives E-Mail-Design einfallen
  • Einlösen von Geschenkkarten‍
  • Teilrücknahmen zulassen
  • Gestalten Sie das Geschenkkarten-Eingabefeld
  • Erstellen Sie Erfolgs- und Fehlermeldungen
  • Gestalten Sie Ablaufbenachrichtigungen für Geschenkkarten
  • Zusammenfassung
Allein im Jahr 2019 blieben fast 3 Milliarden US-Dollar an Geschenkkarten-Bargeld ungenutzt. Unterdessen beliefen sich die Gesamtausgaben für Geschenkkarten im Jahr 2019 auf 98,6 Milliarden US-Dollar. Quelle

Da Sie wissen, dass Geschenkkarten ein äußerst wirksames Instrument sind, lohnt es sich, den Weg zum Kauf und zur Einlösung der Geschenkkarten zu vereinfachen. Doch wie sollen die Eingabefelder gestaltet sein? Auf welchen Unterseiten sollen sie beworben werden? Und wie soll der Kartenkauf und die Karteneinlösung nach UX-Prinzipien aussehen?

Dieser Blogbeitrag sammelt Best Practices und Inspirationen für die Gestaltung von UX und UI für Geschenkkarten für Websites und Mobilgeräte. Wir decken die gesamte Customer Journey ab, von der Bewerbung von Geschenkkarten auf Ihrer Website über den Abschluss des Kaufvorgangs, das Teilen der Karte mit dem glücklichen Empfänger bis hin zum Einlösen der Karte in Ihrem Geschäft.

{{EBOOK}}

{{ENDEBOOK}}

Hinweis: Alle Desktop-Screenshots wurden auf Mac, Chrome erstellt.

Hinweis: Der Hauptfokus dieses Beitrags liegt auf käuflichen Geschenkkarten als digitale Codes oder gedruckte Karten. Wenn Sie mehr über die Verwendung von Geschenkkarten als Werbemittel und Anreize erfahren möchten, empfehle ich Ihnen dringend, unseren UX-Leitfaden zu Coupons und Werbeaktionen zu lesen .

Entwerfen Sie einen separaten Kaufpfad für Geschenkkarten

Der Kaufpfad für Geschenkkarten kann sich stark von der Standard-Kundenreise unterscheiden, insbesondere wenn Sie digitale Geschenkgutscheine anbieten. Aus diesem Grund sollte es als separates Modul Ihrer Website konzipiert werden. Die meisten Kaufwege für Geschenkkarten bestehen aus mehreren entscheidenden Schritten, die sich in Ihrem UI-Design widerspiegeln müssen:

  • Suchen Sie zunächst den Abschnitt für Geschenkkarten in Ihrem Geschäft.
  • Auswahl des Geschenkkartenformats und der Vorlage (empfohlen).
  • Kartenwert auswählen.
  • Einstellen der Liefermethode und des Datums.
  • Füllen Sie die Informationen des Empfängers und die Nachricht aus, die mit der Karte gesendet wird.
  • Kasse.

Wie Sie feststellen können, unterscheidet sich dieser Prozess vom Standardproduktkauf, bei dem ein Produkt zum Warenkorb hinzugefügt wird, und es müssen keine zusätzlichen Details angegeben werden. Aus diesem Grund müssen Sie für diesen Bereich ein anderes Design entwickeln, das sich von Ihrer Standard-Produktansichtsseite unterscheidet. Aber dazu später mehr.

Dieser Beitrag ist hauptsächlich für E-Geschenkkarten geschrieben. Wenn Sie Geschenkgutscheine nur an stationären Standorten anbieten, finden Sie hier eine Liste mit UX Best Practices für physische Karten:

  • Machen Sie sie zum Blickfang – das Design kann entscheiden, ob ein Kunde sie bemerkt und einen Kauf in Betracht zieht.
  • Verpacken Sie sie – stecken Sie die Karten in Umschläge und geben Sie den Kunden Platz, um eine persönliche Nachricht oder die besten Wünsche zu schreiben.
  • Präsentieren Sie sie – stellen Sie sie überall auf und machen Sie sie unübersehbar (z. B. Kassentisch).
  • Machen Sie sie mobilfreundlich – stellen Sie mobile Einlösungen sicher und ermöglichen Sie Kunden, Geschenkkarten einzulösen, die auf einem mobilen Gerät angezeigt werden. Zum Beispiel durch die Verwendung von QR-Codes oder Barcodes, die gescannt und auf einem mobilen Gerät gespeichert werden können.

Wenn Sie jedoch digitalisiert haben, finden Sie hier einige der wichtigsten Richtlinien, um sicherzustellen, dass Ihre Geschenkkartenreise aus UX- und UI-Perspektive angemessen gestaltet ist.

Erstellen Sie eine separate Zielseite, auf der alle Geschenkoptionen aufgelistet sind

Nachdem Sie nun wissen, dass Sie etwas mehr Zeit in die Gestaltung Ihres Geschenkmoduls investieren müssen, wird klar, dass Sie auch eine Landingpage benötigen. Auf Ihrer Zielseite für Geschenkkarten sollten die verfügbaren Optionen für Geschenkkarten klar erläutert werden. Es sollte verschiedene Kartendesigns zeigen (wenn Sie viele anbieten) und verschiedene Kartenversandoptionen präsentieren (wenn Sie sowohl E-Mail als auch Druck bereitstellen). Es wird auch empfohlen, dort einige FAQ oder AGB zu platzieren, um potenziellen Käufern zusätzliche Informationen anzubieten.

Beispiel:

Zalando hat eine eigene Landing Page, um für seine Geschenkkarten zu werben. Aus dieser Ansicht können potenzielle Käufer alle möglichen Personalisierungsoptionen sehen und zwischen Standardkarten und Geschenkboxen wählen.

Anpassungsoptionen für Zalando-Geschenkkarten auf der Zielseite

Winc, ein Wein-E-Commerce-Unternehmen, hat einen FAQ-Bereich auf seiner Geschenkkarten-Landingpage mit einer cleveren Kopie eingefügt.

Winc FAQ-Bereich über Geschenkkarten

Sie können die Zielseite nicht nur verwenden, um Ihr Angebot zu präsentieren, sondern auch, um Kunden zu ermöglichen, ihren aktuellen Kartensaldo zu überprüfen. Einige Unternehmen nutzen diesen Bereich auch, um Benutzern die Möglichkeit zu geben, die Karten, die sie bereits besitzen, aufzuladen.

Stellen Sie einen separaten Abschnitt bereit, in dem Kunden den Geschenkkartenstatus überprüfen können

Es spielt keine Rolle, ob Sie Geschenkkarten als Anreiz oder als käufliches Produkt anbieten, es wird dennoch empfohlen, einen separaten Bereich für Benutzer bereitzustellen, in dem sie ihren Kartenstatus überprüfen können. Sie können Kunden erlauben, die Gültigkeit der Karte, das aktuelle Guthaben zu überprüfen oder sogar die Karte aufzuladen oder Guthaben auf eine andere Karte zu übertragen.

Beispiel:

Shein hat ein kleines Widget in seinem Geschenkkartenbereich, mit dem Kunden ihr Geschenkkartenguthaben überprüfen können, was diesen Bereich zur Anlaufstelle für alles macht, was mit Geschenkkarten zu tun hat.

Shein-Abschnitt, um das Guthaben der Geschenkkarte zu überprüfen

Starbucks ermöglicht es Benutzern, in einem separaten Abschnitt der Seite das Guthaben zu überprüfen, Guthaben zu übertragen, Probleme zu melden oder Karten neu zu laden.

Starbucks-Landingpage mit mehreren Optionen für Geschenkkarten

Bewerben Sie Geschenkkarten in mehreren Bereichen

Neben der Erstellung einer Zielseite für Ihre Geschenkkarten sollten Sie diesen Teil Ihres Shops für potenzielle Kunden leicht zugänglich machen. Sie werden nicht viele Einnahmen aus dem Verschenken sehen, wenn Kunden Karten auf Ihrer Website nicht leicht finden können. Informationen zu Geschenkkarten sollten in der Seitennavigationsleiste und in der Fußzeile platziert werden. Wenn Geschenkkarten etwas Neues sind oder eine Geschenksaison beginnt, können Sie erwägen, eine spezielle Werbekampagne mit einem Rabatt auf die Geschenkkarten zu starten, um das Kundenbewusstsein zu erhöhen.

Beispiel:

Das Home Depot hat neben einer Navigationsleiste auch eine Top-Leiste mit zusätzlichen Diensten. Sie entschieden sich, diesen Raum für die Bewerbung von Geschenkgutscheinen zu nutzen. Es folgt bewährten UX-Praktiken, da Kunden dieses Angebot jederzeit oben auf der Seite sehen.

Home Depot-Promotion der Karte im oberen Banner

Sie haben auch Geschenkkarten in der Fußzeile enthalten.

HomeDepot-Fußzeile

Zalando informiert sowohl in der Navigationsleiste als auch in der Fußzeile über Geschenkgutscheine. In diesem Fall wurden Geschenkkarten jedoch unter der Kategorie Zubehör aufgeführt, wodurch sie schwerer zu finden sind als in The Home Depot.

Zalando-Geschenkkarten in der Navigationsleiste

Neben der Website- oder mobilen App-Navigation können Sie auch Geschenkkarten zur Fußzeile Ihrer E-Mails hinzufügen. Darüber hinaus können Sie sie auch in bestimmte Phasen der Customer Journey einbinden. Sie können beispielsweise Geschenkkarten in der Dankesmail nach dem Kauf erwähnen, um Käufer zu ermutigen, jemandem eine Geschenkkarte für Ihr Geschäft zu besorgen, da sie bereits gerne bei Ihrer Marke eingekauft haben. Eine andere Idee wäre, Karten zum Abschnitt mit den empfohlenen Artikeln in der Nähe der Einkaufswagenansicht hinzuzufügen.

Apropos E-Mails, Sie können auch erwägen, zu bestimmten Jahreszeiten separate Nachrichten zu senden, um Geschenkkarten zu bewerben. Richten Sie zum Beispiel Feiertage wie Weihnachten oder Muttertag mit speziellen E-Mail-Nachrichten über Geschenkmöglichkeiten in Ihrem Geschäft ein.

Beispiel :

Winc schickte eine separate E-Mail, um die Abonnenten an den Muttertag zu erinnern und für Geschenkkarten zu werben.

Winc E-Mail-Werbung für Geschenkkarten zum Muttertag


Alloy Apparel startete am Tag vor Weihnachten eine Rabattaktion für alle physischen Geschenkkarten, um Kunden die Möglichkeit zu geben, die Karten in letzter Minute zu kaufen.

Geschenkgutscheine von Alloy Apparel zu Weihnachten

Entwerfen Sie den Kaufprozess für Geschenkkarten

Auswahl der Geschenkart

Jetzt, da wir wissen, wie wir sicherstellen können, dass Kunden unser Angebot finden, können wir den bestmöglichen Weg zum Kauf gestalten. Natürlich kann sich Ihr Weg zum Kauf von dem unterscheiden, den ich unten behandeln werde.

Beispiel:

PrettyLittleThing bietet nur einen Geschenktyp und ein Format an. Deshalb beginnt ihre Customer Journey mit der Auswahl von Geschenkgutschein-Vorlagen.

Hübsches kleines Ding, das Geschenkkartendesign wählt

Beginnen wir mit der Auswahl des Geschenkkartentyps. Es gibt viele verfügbare Geschenkoptionen, die von individuellen digitalen Gutscheinen bis hin zu Firmenkarten und Gruppengeschenken reichen. Das Design für diese Phase hängt stark von der Auswahl an Geschenkkarten ab, die Sie anbieten möchten. Stellen Sie sicher, dass, egal wie viele Optionen es gibt, sie alle lesbar aufgelistet sind – es wird dringend empfohlen, Ihre Informationsarchitektur flach zu halten, es sei denn, Sie möchten nur eine Schenkungsoption hervorheben.

Beispiel :

Das Home Depot bietet mehrere Geschenkoptionen. Die einzelnen Karten werden am oberen Banner über dem Raster der ebenso wichtigen Bonusoptionen beworben, wodurch das Layout für den Benutzer verständlich und alle Optionen auf einen Blick sichtbar sind.

Auswahl des Geschenkkartentyps von Home Depot

Zalando bietet auch mehr Anpassungsoptionen, hat sich aber für ein vertikales Layout entschieden, bei dem Kunden nach unten scrollen müssen, um alle verfügbaren Optionen zu sehen. Da Zalando nur einzelne Karten anbietet, benötigen diese kein flaches Layout. Stattdessen verwenden sie die Seite, um den Fokus auf andere Vorlagen und Optionen zu lenken. Die Zusatzoption (Geschenkboxen) wird unten auf der Seite angeboten und macht deutlich, dass es sich nicht um das Hauptprodukt handelt.

Optionen für Zalando-Geschenkkarten

Auswahl des Kartenformats

Wenn Sie sowohl digitale als auch physische Geschenkgutscheine anbieten, sollte der nächste Schritt auf dem Weg zum Kauf die Wahl zwischen diesen beiden Optionen sein. Beachten Sie, dass dieser und die folgenden Schritte alle auf einer einzigen Seite dargestellt werden sollten. Benutzer auf neue Seiten zu leiten, um den Kaufvorgang abzuschließen, wird wahrscheinlich die Erfahrung beeinträchtigen und dazu führen, dass sie abbrechen.

Die Auswahl zwischen den Liefermethoden sollte klar sein. Sie können versuchen, kontrastierende Farben oder Symbole zu verwenden, um den Unterschied zwischen beiden Optionen zu unterstreichen. Außerdem empfiehlt es sich, Klartext zu verwenden – der Kontrast zwischen „Per E-Mail versenden“ und „Postalisch versenden“ sollte transparent genug sein. Sie können neben dem vollständig digitalen Format auch ein druckbares Design (ein an die E-Mail angehängtes PDF) anbieten, wenn die beschenkte Person es per E-Mail erhält, es aber gedruckt in den Laden bringen möchte. Sie können auch einen Geschenk-QR-Code in die E-Mail integrieren, damit dieser am POS schnell gescannt werden kann.

Beispiel:

Victoria's Secret beginnt seine Customer Journey mit der Wahl zwischen Versandmethoden. Die Benutzeroberfläche misst beiden Optionen die gleiche Bedeutung bei. Ich würde jedoch kontrastreichere CTAs empfehlen – „Send by Mail“ und „Send by email“ können verwirrend sein, insbesondere für Nicht-Muttersprachler.

Victoria's Secret Wahl des Kartenformats

Lieferdatum auswählen (optional)

Um die UX Ihrer Geschenkgutscheine zu steigern, können Sie Ihre digitalen Karten etwas mehr personalisieren, indem Sie den Benutzern überlassen, wann genau die Karte gesendet werden soll. Aus Usability-Sicht macht es Sinn, da Karten normalerweise als Geschenk verschickt werden – es ist scheiße, ein Geburtstagsgeschenk fünf Tage vor dem großen Date zu verschicken, oder?

Beispiel:

PrettyLittleThing macht es erforderlich, dass der Benutzer das gewünschte Lieferdatum und die Uhrzeit einstellt. Sie verwendeten eine einfache Dropdown-Liste. Ich würde stattdessen die Verwendung einer Kalender-Datumsauswahl empfehlen, die den Benutzern einen besseren Überblick über das von ihnen ausgewählte Datum (z. B. Wochentag) gibt.

Auswahl der Lieferoption Prettylittlething

Auswahl des Geschenkkartenbetrags

Im nächsten Schritt sollten Sie den Benutzern erlauben, den Geschenkkartenbetrag auszuwählen. Die Kombination aus vorgeschlagenen und anklickbaren Werten und benutzerdefinierten Eingabefeldern funktioniert am besten. Auf diese Weise geben Sie den Benutzern einen Hinweis darauf, wie hoch der Geschenkwert sein sollte, erleichtern die Auswahl und bieten gleichzeitig ein Feld zur Anpassung, wenn die Kunden einen nicht standardmäßigen Kartenwert erwerben möchten.

Beispiel:

Saatchi Art, ein Online-Marktplatz für Kunst, verwendet sowohl vorgeschlagene Werte als auch ein benutzerdefiniertes Eingabefeld, um keine Grenzen zu setzen. Wenn der Benutzer den maximalen Geschenkkartenwert überschreitet, erhält er eine Fehlermeldung, die ihn über die Fehlerdetails oben auf der Seite informiert.

Saatchi Art wählt den Kartenwert aus
Saatchi-Kunst, die den Kartenwert auswählt

Zalando begrenzt den Wert der Geschenkkarte und legt die möglichen Werte zwischen 50 und 100 GBP fest. Dieser Ansatz kann aus wirtschaftlicher Sicht sinnvoll sein. Es schränkt jedoch die Flexibilität Ihrer Gutscheine dramatisch ein und kann Benutzer von Ihrer Website ablenken, wenn sie eine teurere Geschenkkarte erhalten möchten.

Mindest- und Höchstbetrag der Zalando-Geschenkkarte

Tiffany & Co. bietet keine benutzerdefinierten Kartenwerte an. Stattdessen liefern sie vordefinierte Kartenwerte. Erwähnenswert ist, dass der Standardkartenwert 500 $ beträgt, obwohl niedrigere Werte verfügbar sind. Auf diese Weise schafft es Tiffany & Co., Kunden dazu zu bringen, sich auf Karten mit höherem Wert zu konzentrieren und sie begehrenswerter zu machen und als Standardpreis wahrzunehmen.

Standardbetrag der Geschenkkarte von Tiffany Co

Bereitstellung von Empfängerinformationen

Gerade im Zusammenhang mit digitalen Gutscheinen ist dies ein entscheidender Schritt im Gestaltungsprozess. Hier sollten Sie mindestens zwei Eingabefelder abdecken – die E-Mail-Adresse des Empfängers und die Botschaft des Geschenkgutscheins, die die E-Mail enthalten soll. Einige Unternehmen bieten auch Anpassungsoptionen für die Betreffzeile an, um die Kartenzustellung noch persönlicher zu gestalten. Das Wichtigste ist, nur notwendige Informationen (Name und E-Mail-Adresse des Empfängers) anzufordern. Schließen Sie nicht zu viele zusätzliche Felder ein.

Eine andere Sache ist die Kartennachricht – es ist am besten, eine vorgefertigte Nachricht bereitzustellen, um es den Kunden zu erleichtern, die Karten schneller zu versenden. Sie sollten Benutzern jedoch erlauben, die Nachrichten zu ändern oder anzupassen, wenn ihnen der vorgefertigte Text nicht gefällt. Machen Sie das Nachrichtenfeld außerdem optional.

Beispiel :

Starbucks bietet eine einfache Benutzeroberfläche für Empfänger- und Absenderinformationen.

Starbucks fügt Empfängerinformationen hinzu

Amazon gibt den Benutzern eine einfache vorgefertigte Nachricht, um ihnen eine Vorstellung davon zu geben, wie die Nachricht aussehen könnte.

Amazon vorgefertigte Geschenkkartennachricht

Personalisierung des Geschenkkartencodes

Wenn Geschenkkarten einen großen Teil Ihres Geschäfts ausmachen, denken Sie vielleicht darüber nach, ihr Personalisierungspotenzial weiter zu steigern. Ihre Geschenkkartensoftware sollte es Ihnen ermöglichen, den Geschenkkartencode so anzupassen, dass er mit dem Vornamen des Empfängers übereinstimmt oder den besonderen Anlass enthält, mit dem die Karte verbunden ist (z. B. HAPPYBIRTHDAY7593). Dieser einfache Trick macht die Karte einprägsamer. Das einzigartige Muster erleichtert auch das Anbringen des Kartencodes an der Kasse, da verwirrende Zeichen oder die richtige Länge ausgeschlossen werden. Hier finden Sie weitere Einzelheiten zur Verbesserung der Codevalidierungserfahrung.

Vorlagen für Geschenkgutscheine auswählen

Da Geschenkkarten in der Regel als Geschenk verschickt werden, ist es am besten, sie optisch ansprechend und anlassbezogen zu gestalten. Stellen Sie sich zum Beispiel vor, Sie bekommen eine Geburtstagskarte, die ganz grau ist und keine Geburtstagswünsche enthält. Das wäre nicht das beste Geschenk, oder? Aus diesem Grund empfiehlt es sich, mindestens mehrere Geschenkgutschein-Vorlagen anzubieten.

Beispiel:

Amazon bietet zahlreiche Kartenvorlagen, und Benutzer können nach Anlass einkaufen, was den Weg zum Kartenkauf vereinfacht. Ihre Geschenkkarten-Engine bietet Geschenke für viele Gelegenheiten. Darüber hinaus lässt es mit mehreren, abwechslungsreichen Designs eine Prepaid-Karte wie ein maßgeschneidertes Geschenk aussehen.

Vorlagen für Amazon-Karten

Hochladen eines Fotos zum Anpassen der Karten

Ein zusätzlicher UX-Schnellgewinn wäre es, Benutzern zu ermöglichen, ihre Fotos hochzuladen, um die Karte zu personalisieren. Beachten Sie jedoch, dass Sie für das Hinzufügen dieser Funktion Nutzungsbedingungen für Fotos erstellen müssen, um sich vor der Verletzung von geistigen Eigentumsrechten Dritter zu schützen.

Beispiel:

Zalando ermöglicht es Benutzern, ihre Kartendesigns zu erstellen. Damit aber auch rechtlich alles geregelt ist, fordert Zalando die Nutzer auf, sich an ihre Nutzungsbedingungen zu halten.

Zalando wählt Kartenversand

Check-out-Prozess

Wenn Benutzer alle erforderlichen Informationen ausgefüllt haben, fahren Sie mit dem Checkout-Schritt fort, der als Standard-Checkout konzipiert ist. Stellen Sie sicher, dass Benutzer die von ihnen bereitgestellten Informationen schnell korrigieren oder Änderungen an der Karte vornehmen können, ohne den gesamten Warenkorb zu löschen und bei jeder Änderung von vorne zu beginnen. Es wird auch empfohlen, Kartendetails in diese Ansicht einzupassen. Sie könnten einen erweiterbaren Text verwenden, der standardmäßig ausgeblendet ist und angezeigt wird, wenn Benutzer auf ein bestimmtes Symbol klicken oder den Mauszeiger über die Karte bewegen.

Beispiel :

PrettyLittleThing ist ein Beispiel für eine schlechte Geschenkkarten-Checkout-UX. Nachdem Benutzer die Karte in den Warenkorb gelegt haben, gibt es keine einfache Möglichkeit, die Kartendetails wie die Informationen des Empfängers oder den Wert des Gutscheins zu aktualisieren. Die einzige Möglichkeit besteht darin, die Karte aus dem Einkaufswagen zu entfernen und den gesamten Vorgang erneut zu beginnen.

Schlechte Checkout-Erfahrung von PrettyLittleThing

Winc ermöglicht es Benutzern, den Kartenwert zu aktualisieren, während sie sich noch in der Warenkorbansicht befinden.

Kartenwert in Winc ändern

Senden Sie Karten über mehrere Kanäle an die Empfänger

Es gibt mehrere Möglichkeiten, Karten mit den Empfängern zu teilen. Hier sind einige davon:

  • Per E-Mail-Nachricht senden.
  • Als druckbares PDF an den Käufer senden, das physisch mit dem Empfänger geteilt werden kann.
  • Physische Karten per Post an den Käufer oder Empfänger zustellen.
  • Senden Sie über soziale Medien, z. B. Messenger, WhatsApp.

In Bezug auf das UI-Design konzentrieren wir uns auf die digitalen Karten, die per E-Mail an den Empfänger gesendet werden. Wenn die Empfänger zum ersten Mal von Ihrer Marke hören, können Sie mehrere Vertrauenssignale in Ihre E-Mail integrieren. Hier sind einige Tipps, wie Sie nicht im Spam landen:

  • Eine eindeutige Absenderidentität ist ein wichtiger Vertrauensmarker – Sie können den Namen des Absenders in die Betreffzeile der E-Mail mit angehängter Geschenkkarte aufnehmen, um das Vertrauen zu stärken. Verwenden Sie zum Beispiel die Betreffzeile „Katie hat Ihnen gerade ein Geschenk geschickt!“.
  • Nutzen Sie die Personalisierung – wenn Sie den Namen des Empfängers kennen, sollten Sie ihn Ihrer E-Mail hinzufügen, um die UX zu verbessern und die Nachricht vertrauenswürdiger zu machen.
  • Übertreiben Sie den Geschenkkartenwert in der Betreffzeile nicht – versuchen Sie, Ausdrücke wie „Gutschein“, „Code“, „Deal“ oder numerischen Kartenwert in der Betreffzeile zu vermeiden. Der E-Mail-Anbieter des Empfängers behandelt Ihre Nachricht möglicherweise als Spam oder platziert sie auf der Registerkarte „Werbung“ des Postfachs.

Lassen Sie sich ein effektives E-Mail-Design einfallen

Wenn es um den E-Mail-Inhalt geht, muss dieser mehrere Punkte abdecken:

  • Geben Sie den Wert der Karte an.
  • Fügen Sie einen Link zu bestimmten AGB oder zusätzlichen Informationen zu Einschränkungen bei der Karteneinlösung hinzu (falls vorhanden).
  • Geschenkkartencode, der einfach in eine Zwischenablage kopiert werden kann, vorzugsweise mit einem Klick.
  • Ein CTA, der den Empfänger zu Ihrem Geschäft führt.

Denken Sie daran, dass Benutzer Ihre E-Mails sowohl auf Desktop- als auch auf Mobilgeräten lesen können. Um sicherzustellen, dass Ihre Geschenkkarten mobilfreundlich sind, können Sie Deep-Links in den CTA einfügen, um sicherzustellen, dass die Benutzer direkt zu Ihrer E-Commerce-App gehen, wobei der Geschenkcode bereits zu ihrer digitalen Brieftasche hinzugefügt wurde. Wenn Sie sich nur für das E-Mail-Format entscheiden, dann achten Sie darauf, einen leicht zoombaren Barcode oder QR-Code mit hohem Kontrast einzufügen, damit das Scangerät am POS ihn einlösen kann.

Beispiel:

Watsi, eine Wohltätigkeitsorganisation im Gesundheitswesen, markiert alle Kontrollkästchen, wenn es um das richtige Design von Geschenkkarten-E-Mails geht.

E-Mail mit der Watsi-Geschenkkarte

Amazon behandelt Geschenkgutscheine als Guthaben, das auf dem Konto aufbewahrt werden kann. In ihre E-Mail-Nachricht fügten sie einen Deep-Link ein, der die Benutzer direkt zur Amazon-Website oder -App (je nach Gerät) führt, die das Guthaben automatisch dem Konto des Empfängers gutgeschrieben hat.

Amazon-E-Mail mit der Geschenkkarte

Einlösen von Geschenkkarten

Wie von Kim Salazar vorgeschlagen, ist die Nützlichkeit von Coupons und Geschenkgutscheinen direkt proportional zu ihrer Benutzerfreundlichkeit im Online-Shop.

Vermeiden Sie Einschränkungen bei der Einlösung von Geschenkgutscheinen, wie z. B. den Mindestbestellwert. Eine weitere allgemeine gute UX-Praxis besteht darin, daran zu denken, dass Empfänger von Geschenkkarten sensibler auf Liefer- und Produktkosteninformationen reagieren. Ein solcher Kunde konfiguriert den Inhalt des Warenkorbs mit größerer Aufmerksamkeit als gewöhnlich. Grund dafür ist die Befürchtung, dass die Differenz zwischen Kartennennwert und Bestellbetrag verloren gehen könnte. Deshalb sollten Sie auch die User Journey als Ganzes betrachten und Fixes einführen, um die bestmögliche User Experience zu liefern.

{{KUNDE}}

{{ENDKUNDE}}

Teilrücknahmen zulassen

Sie können Geschenkkarten als Zahlungsmethode behandeln, nicht als Aktionsgutschein. Diese Option ist großartig, wenn Sie wiederaufladbare Geschenkkarten verwenden, wie im Fall von Starbucks. Dann wird das Guthaben auf der Karte dynamisch berechnet und das Guthaben als Zahlungsmittel verwendet. Ähnlich wie eine Kredit- oder Debitkarte. Wenn Sie sich für diese Lösung entscheiden, müssen Sie sicherstellen, dass die Geschenkkarten kein (oder ein sehr langes) Verfallsdatum haben. Das kann Ihre Geschenkkarten sehr attraktiv machen, erfordert aber gleichzeitig eine hochwertige Infrastruktur, um die Karte für immer einlösbar zu halten.

Beispiel:

Einkaufen mit einer Zalando-Geschenkkarte ist einfach, aber der Einstieg kann für den Benutzer eine Herausforderung darstellen. Um die Geschenkkarte bestimmungsgemäß zu verwenden, muss der Empfänger ein Konto einrichten und die Registerkarte „Ihre Gutscheine“ finden und den Geschenkkartencode in das dafür vorgesehene Textfeld eingeben, um ihn einzulösen. Nach dem Einlösen wird das auf die Karte geladene Bargeld als Zalando-Guthaben behandelt und kann als Kaufmethode verwendet werden.

Zalando-Karteneinlösung

Das Problem bei diesem Ansatz besteht darin, dass die Benutzer möglicherweise nicht wissen, dass sie ein Konto einrichten müssen, um die Karte einzulösen und ihr Guthaben anzuzeigen. Die Karteneinlösung ist auch im Checkout möglich, indem Sie den Geschenkkartencode in das Gutscheinfeld eingeben. Der Gutscheinbetrag wird dann auf den Gesamtbetrag im Warenkorb angerechnet. Ich würde empfehlen, dem Kartenempfänger beide Möglichkeiten deutlich zu machen.

Gestalten Sie das Geschenkkarten-Eingabefeld

Geschenkkartenempfänger möchten ihre Geschenke so schnell wie möglich verwenden. Um diesem Bedarf gerecht zu werden, sollten Sie frühzeitig im Kaufprozess ein Gutschein-Eingabefeld bereitstellen, vorzugsweise im Warenkorb vor der Kasse. Dieser Ansatz ermöglicht es Kunden, die Gültigkeit der Karte frühzeitig zu überprüfen, bevor sie persönliche Daten eingeben.

Ein noch besserer Ansatz ist es, die Möglichkeit anzubieten, einen Geschenkgutschein in einer möglichst frühen Phase des Kaufprozesses einzulösen, viel früher als während des Abschlusses und der Bezahlung der Bestellung.

Beispiel:

Winc bietet ein unkompliziertes UI-Design und ermöglicht es Benutzern, einen Geschenkgutschein gleich zu Beginn ihrer Reise einzulösen, wodurch Stress oder Unannehmlichkeiten im Zusammenhang mit der Unfähigkeit, das Einlösungsfeld zu finden, effektiv begrenzt werden.

Winc geschenkgutschein einlösen

Birchbox, eine Marke für Schönheitsprodukte im Abonnement, ermöglicht Benutzern auch, den Geschenkgutschein sofort einzulösen. Die Informationen zur schnellen Karteneinlösung befinden sich in der Fußzeile der Seite.

Einlösung der Birchbox-Karte

Darüber hinaus sollte die Gutscheineingabe das Herzstück des Checkout-Prozesses sein und in der Website- oder App-Struktur richtig angezeigt werden. Stellen Sie sicher, dass es lang genug ist, um den gesamten Gutscheincode zu enthalten.

Eine weitere bewährte Vorgehensweise im Zusammenhang mit Geschenkcodes besteht darin, klar zwischen Zahlungs- und Gutscheinfeldern zu unterscheiden, da ihre Nähe und Ähnlichkeit potenzielle Käufer frustrieren kann.

Die Richtlinien entsprechen den Best Practices für die Coupon-Benutzeroberfläche. Wenn Sie lernen möchten, wie Sie Gutschein-Eingabefelder gestalten, lesen Sie es.

Beispiel:

Birchbox ist ein hervorragendes Beispiel für eine Gutschein-Eingabebox. Der Name der Box „Promos & Geschenkcodes“ macht den Zweck der Box glasklar. Viele E-Commerce-Websites verwenden „Promo-Codes“ als Bezeichnung für diesen Abschnitt, was Besitzer von Geschenkkarten verwirren kann, da Karten nicht als Werbeaktionen gelten. 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.

Birchbox Einlösebox

Erstellen Sie Erfolgs- und Fehlermeldungen

Zeigen Sie eine Erfolgsmeldung und die geänderte Bestellsumme an, um zu bestätigen, dass der Geschenkgutscheincode erfolgreich angewendet wurde. Platzieren Sie die Nachricht in der Nähe des Gutscheinfelds, um sicherzustellen, dass die Benutzer sie sehen, und verknüpfen Sie sie mit dem eingegebenen Code. Wenn diese Nachricht oben oder unten auf der Seite angezeigt wird, kann dies verwirrend sein. Die Erfolgsmeldung sollte jedoch nicht die einzige Bestätigung sein, die der Benutzer erhält. Spiegeln Sie die geänderte Bestellsumme sowohl im Warenkorb als auch in der Checkout-Ansicht wider.

Nach der gleichen Logik sollten Sie auch eine relevante Fehlermeldung anzeigen, die die Art des Problems mit der Geschenkkarte 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. Hier sind einige Beispiele:

  • "Der Geschenkkartencode ist falsch. Bitte versuchen Sie es erneut."
  • "Der Geschenkkartencode ist abgelaufen."
  • „Sie sind nicht der Inhaber der Geschenkkarte (wenn Sie Geschenkgutscheine einzelnen Kunden zuweisen).“
  • "Ihre Bestellung erfüllt nicht die Bedingungen für Geschenkkarten (wenn Sie Limits für Karteneinlösungen zuweisen)."

Beispiel:

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

Summersalt-Fehlermeldung

Gestalten Sie Ablaufbenachrichtigungen für Geschenkkarten

Wenn Ihre Karten ein Ablaufdatum haben, müssen Sie etwas mehr vorausplanen und automatische Benachrichtigungen einrichten, um Benutzer aufzufordern, ihr Kartenguthaben zu verwenden, bevor es abläuft. Hier sollten Sie die besten UX-Praktiken im Zusammenhang mit E-Mail-Marketing befolgen, d. h. die Optik auffällig gestalten, den Text clever halten, einen schön kontrastierenden CTA hinzufügen und keine Wörter verwenden, die als Spam markiert werden können („Rabatt“). „Deal“, „Verkauf“).

Zusammenfassung

Ich hoffe, diese Liste mit Best Practices hilft Ihnen dabei, Ihre Website und Ihr Handy für Geschenkkarten zu entwerfen oder Ihr aktuelles UI-Design zu verbessern. Wenn Sie nach allgemeinen Ratschlägen zum Erstellen einer Geschenkkartenkampagne suchen, lesen Sie unbedingt diesen Leitfaden.

{{CTA}}

Sind Sie bereit, Ihre Geschenkkarten auf die nächste Stufe zu bringen?

Loslegen

{{ENDCTA}}