Najlepsze praktyki w zakresie UX i interfejsu użytkownika kart podarunkowych

Nic dziwnego, że karty podarunkowe stały się gorącym tematem w e-commerce. Świetnie nadają się nie tylko do wyrażania wdzięczności i uczucia, ale także są skutecznym rozwiązaniem niektórych dylematów zakupowych, gdy kończy Ci się czas na sprytny pomysł na prezent.

Spis treści

• ‍ ‍ Zaprojektuj osobną ścieżkę zakupu dla kart podarunkowych
• Utwórz osobną stronę docelową z listą wszystkich opcji prezentów
• Zapewnij klientom osobną sekcję, aby sprawdzić status karty podarunkowej
• Promuj karty podarunkowe w wielu miejscach
• Zaprojektuj podróż do zakupu karty podarunkowej
• Wybór rodzaju prezentu
• Wybór formatu karty
• Wybór terminu dostawy (opcjonalnie)
• Wybór kwoty karty podarunkowej
• Udostępnianie informacji o odbiorcach
• Personalizacja kodu karty podarunkowej
• Wybór szablonów bonów upominkowych
• Przesyłanie zdjęcia w celu dostosowania kart
• Proces realizacji transakcji
• Wysyłaj karty do odbiorców wieloma kanałami
• Wymyśl skuteczny projekt e-maila
• Realizowanie kart podarunkowych‍
• Zezwól na częściowe wykupy
• Zaprojektuj pole wprowadzania karty podarunkowej
• Twórz komunikaty o sukcesach i błędach
• Zaprojektuj powiadomienia o wygaśnięciu ważności karty podarunkowej
• Streszczenie
  

Prawie 3 miliardy dolarów w gotówce z kart podarunkowych nie zostały wykorzystane w samym tylko 2019 roku. Tymczasem łączne wydatki na karty podarunkowe w 2019 roku wyniosły 98,6 miliarda dolarów. Źródło

Wiedząc, że karty podarunkowe są niezwykle potężnym narzędziem, warto uprościć proces zakupu i realizacji kart podarunkowych. Ale jak należy zaprojektować pola wejściowe? Na jakich podstronach powinny być promowane? A jak powinien wyglądać zakup i realizacja karty w oparciu o zasady UX?

W tym poście na blogu zebrano najlepsze praktyki i inspiracje dotyczące projektowania UX i interfejsu użytkownika kart podarunkowych dla witryn internetowych i urządzeń mobilnych. Zajmiemy się całą podróżą klienta, od promowania kart podarunkowych w Twojej witrynie, przez zakończenie procesu zakupu, udostępnienie karty szczęśliwemu odbiorcy, aż do realizacji karty w Twoim sklepie.

{{E-BOOK}}

{{ENDEBOOK}}

Uwaga: wszystkie zrzuty ekranu pulpitu zostały wykonane na Macu w Chrome.

Uwaga: ten post koncentruje się głównie na kartach upominkowych do kupienia w postaci kodów cyfrowych lub kart drukowanych. Jeśli chcesz dowiedzieć się więcej o korzystaniu z kart podarunkowych jako narzędzi promocyjnych i zachęt, gorąco polecam zapoznanie się z naszym przewodnikiem UX po kuponach i promocjach .

Zaprojektuj osobną ścieżkę zakupu dla kart podarunkowych

Ścieżka zakupu kart podarunkowych może znacznie różnić się od standardowej ścieżki klienta, zwłaszcza jeśli oferujesz cyfrowe bony podarunkowe. Dlatego powinien być zaprojektowany jako osobny moduł Twojej witryny. Większość ścieżek zakupu kart podarunkowych sprowadza się do kilku kluczowych kroków, które należy uwzględnić w projekcie interfejsu użytkownika:

• Najpierw znajdź sekcję kart podarunkowych w swoim sklepie.
• Wybór formatu i szablonu karty podarunkowej (zalecane).
• Wybór wartości karty.
• Ustalenie sposobu i terminu dostawy.
• Uzupełnienie danych odbiorcy oraz wiadomości, która zostanie wysłana wraz z kartą.
• Wymeldować się.
  

Jak możesz zauważyć, ten proces różni się od standardowego zakupu produktu, w którym produkt jest dodawany do koszyka i nie trzeba podawać żadnych dodatkowych szczegółów. Dlatego musisz opracować inny projekt tej sekcji, który różni się od standardowej strony widoku produktu. Ale o tym później.

Ten post jest napisany głównie z myślą o e-kartach podarunkowych. Jeśli oferujesz bony upominkowe tylko w tradycyjnych lokalizacjach, oto lista sprawdzonych metod UX dla kart fizycznych:

• Spraw, by przyciągały wzrok – projekt może decydować o tym, czy klient je zauważy i rozważy zakup.
• Zawiń je – włóż karty do kopert i zapewnij klientom miejsce na napisanie spersonalizowanej wiadomości lub życzeń.
• Wyeksponuj je – umieść je wszędzie i nie przeocz (np. biurko kasjera).
• Spraw, by były przyjazne dla urządzeń mobilnych – zapewnij realizacje mobilne i pozwól klientom realizować karty podarunkowe wyświetlane na urządzeniu mobilnym. Na przykład za pomocą kodów QR lub kodów kreskowych, które można zeskanować i zapisać na urządzeniu mobilnym.
  

Jeśli jednak przeszedłeś na technologię cyfrową, oto niektóre z najważniejszych wskazówek, aby upewnić się, że Twoja podróż z kartą podarunkową jest odpowiednio zaprojektowana z punktu widzenia UX i UI.

Utwórz osobną stronę docelową z listą wszystkich opcji prezentów

Teraz, gdy wiesz już o konieczności zainwestowania nieco więcej czasu w zaprojektowanie swojego modułu podarunkowego, staje się jasne, że będziesz potrzebować również strony docelowej. Strona docelowa karty podarunkowej powinna jasno wyjaśniać dostępne opcje kart podarunkowych. Powinien przedstawiać różne projekty kart (jeśli oferujesz ich wiele) i przedstawiać różne opcje dostawy kart (jeśli podasz zarówno e-mail, jak i wydruk). Zaleca się również umieszczenie tam niektórych FAQ lub T&C, aby zaoferować dodatkowe informacje potencjalnym kupującym.

Przykład:

Zalando posiada dedykowaną stronę docelową do promowania swoich kart podarunkowych. Z tego widoku potencjalni nabywcy mogą zobaczyć wszystkie możliwe opcje personalizacji i wybrać między standardowymi kartami a pudełkami upominkowymi.

Winc, firma zajmująca się sprzedażą internetową wina, umieściła sekcję FAQ na swojej stronie docelowej karty podarunkowej ze sprytną kopią.

Możesz użyć strony docelowej nie tylko do zaprezentowania swojej oferty, ale także do umożliwienia klientom sprawdzenia aktualnego salda karty. Niektóre firmy również wykorzystują tę przestrzeń, aby umożliwić użytkownikom ponowne doładowanie posiadanych już kart.

Zapewnij klientom osobną sekcję, aby sprawdzić status karty podarunkowej

Bez względu na to, czy oferujesz karty podarunkowe jako zachętę, czy jako produkt do kupienia, nadal zaleca się zapewnienie użytkownikom oddzielnej przestrzeni do weryfikacji statusu karty. Możesz pozwolić klientom sprawdzić ważność karty, aktualne saldo, a nawet doładować kartę lub przenieść kredyty na inną kartę.

Przykład:

Shein ma mały widżet w swojej sekcji kart podarunkowych, który pozwala klientom sprawdzić saldo karty podarunkowej, dzięki czemu ta przestrzeń jest miejscem, w którym można znaleźć wszystko, co dotyczy kart podarunkowych.

Starbucks pozwala użytkownikom sprawdzić saldo, saldo przelewu, zgłosić wszelkie problemy lub doładować karty w osobnej sekcji strony.

Promuj karty podarunkowe w wielu miejscach

Oprócz stworzenia strony docelowej dla kart podarunkowych, powinieneś sprawić, by ta część Twojego sklepu była łatwo dostępna dla potencjalnych klientów. Nie zobaczysz dużych przychodów z prezentów, jeśli klienci nie będą mogli łatwo znaleźć kart w Twojej witrynie. Informacje o kartach podarunkowych należy umieścić w pasku nawigacyjnym strony oraz w stopce. Jeśli karty podarunkowe to coś nowego lub zaczyna się sezon podarunkowy, możesz rozważyć uruchomienie specjalnej kampanii promocyjnej ze zniżką na karty podarunkowe, aby zwiększyć świadomość klientów.

Przykład:

Home Depot oprócz paska nawigacyjnego posiada również pasek górny z dodatkowymi usługami. Postanowili wykorzystać tę przestrzeń do promocji bonów upominkowych. Jest to zgodne z dobrymi praktykami UX, ponieważ klienci będą zawsze widzieć tę ofertę u góry strony.

W stopce znalazły się również karty podarunkowe.

Zalando informuje o kartach podarunkowych zarówno w pasku nawigacyjnym, jak iw stopce. Jednak w tym przypadku karty podarunkowe znalazły się w kategorii Akcesoria, przez co trudniej je znaleźć niż w The Home Depot.

Oprócz nawigacji w witrynie lub aplikacji mobilnej możesz również dodawać karty podarunkowe w stopce e-maili. Ponadto możesz również włączyć je do określonych etapów podróży klienta. Na przykład możesz wspomnieć o kartach podarunkowych w mailu z podziękowaniem po zakupie, aby zachęcić kupujących do kupienia karty podarunkowej w Twoim sklepie, ponieważ już lubili robić zakupy z Twoją marką. Innym pomysłem byłoby dodanie kart do sekcji zalecanych przedmiotów w pobliżu widoku koszyka.

Mówiąc o e-mailach, możesz również rozważyć wysłanie oddzielnych wiadomości promujących karty podarunkowe w określonych porach roku. Na przykład, ukierunkowaj święta, takie jak Boże Narodzenie czy Dzień Matki, wysyłając dedykowane wiadomości e-mail o możliwościach prezentów w Twoim sklepie.

Przykład :

Winc wysłał osobnego e-maila, aby przypomnieć subskrybentom o Dniu Matki i promować karty podarunkowe.

Firma Alloy Apparel rozpoczęła kampanię rabatową na wszystkie fizyczne karty podarunkowe w przeddzień Bożego Narodzenia, aby dać klientom szansę na zakup kart w ostatniej chwili.

Zaprojektuj podróż do zakupu karty podarunkowej

Wybór rodzaju prezentu

Teraz, gdy wiemy, jak upewnić się, że klienci znajdą naszą ofertę, możemy zaprojektować najlepszą możliwą ścieżkę zakupu. Oczywiście Twoja droga do zakupu może różnić się od tej, którą omówię poniżej.

Przykład:

PrettyLittleThing oferuje tylko jeden rodzaj i format prezentu. Dlatego ich podróż klienta zaczyna się od wyboru szablonów bonów upominkowych.

Zacznijmy od wyboru rodzaju karty podarunkowej. Dostępnych jest wiele opcji prezentów, od indywidualnych voucherów cyfrowych po karty firmowe i prezenty grupowe. Projekt tej fazy będzie się znacznie różnić w zależności od zakresu kart podarunkowych, które chcesz zaoferować. Upewnij się, że bez względu na liczbę dostępnych opcji, wszystkie są wymienione w sposób czytelny — zdecydowanie zaleca się zachowanie płaskiej architektury informacji, chyba że chcesz podkreślić tylko jedną opcję prezentowania.

Przykład :

Home Depot oferuje wiele opcji prezentów. Poszczególne karty są promowane na górnym banerze nad siatką równie ważnych opcji bonusowych, dzięki czemu układ jest zrozumiały dla użytkownika, a wszystkie opcje widoczne na pierwszy rzut oka.

Zalando oferuje również więcej opcji dostosowywania, ale wybrał układ pionowy, w którym klienci muszą przewinąć w dół, aby zobaczyć wszystkie dostępne opcje. Ponieważ Zalando oferuje tylko pojedyncze karty, nie wymagają one płaskiego układu. Zamiast tego używają strony, aby przełączyć fokus na różne szablony i opcje. Dodatkowa opcja (pudełka na prezenty) znajduje się na dole strony, co jasno pokazuje, że nie jest to główny produkt.

Wybór formatu karty

Jeśli oferujesz zarówno cyfrowe, jak i fizyczne bony upominkowe, następnym krokiem w ścieżce zakupu powinien być wybór między tymi dwiema opcjami. Zwróć uwagę, że ten i kolejne kroki powinny być przedstawione na jednej stronie. Kierowanie użytkowników na nowe strony w celu dokończenia procesu zakupu prawdopodobnie zaszkodzi ich obsłudze i spowoduje ich zniknięcie.

Wybór między metodami dostawy powinien być jasny. Możesz spróbować użyć kontrastujących kolorów lub ikon, aby podkreślić różnicę między obiema opcjami. Zaleca się również używanie wyraźnej kopii – kontrast między „Wyślij e-mailem” a „Wyślij pocztą” powinien być wystarczająco przejrzysty. Możesz również zaoferować opcję wydrukowania projektu (plik PDF dołączony do wiadomości e-mail) poza całkowicie cyfrowym formatem, jeśli obdarowana osoba otrzyma go e-mailem, ale chce go wydrukować w sklepie. Możesz również dołączyć upominkowy kod QR do wiadomości e-mail, aby można go było szybko zeskanować w punkcie sprzedaży.

Przykład:

Victoria's Secret rozpoczyna swoją podróż do klienta od wyboru między metodami dostawy. Interfejs użytkownika przywiązuje taką samą wagę do obu opcji. Polecam jednak bardziej kontrastujące CTA – „Wyślij pocztą” i „Wyślij e-mailem” mogą być mylące, szczególnie dla osób, dla których angielski nie jest językiem ojczystym.

Wybór terminu dostawy (opcjonalnie)

Aby poprawić UX swoich bonów upominkowych, możesz dodać nieco więcej personalizacji do swoich kart cyfrowych, pozwalając użytkownikom wybrać, kiedy dokładnie karta ma zostać wysłana. Ma to sens z punktu widzenia użyteczności, ponieważ karty są zwykle wysyłane jako prezenty – wysyłanie prezentu urodzinowego na pięć dni przed wielką randką jest do bani, prawda?

Przykład:

PrettyLittleThing sprawia, że ​​użytkownik musi ustawić żądaną datę i godzinę dostawy. Użyli prostej listy rozwijanej. Zalecam zamiast tego użycie selektora dat kalendarza, który daje użytkownikom lepszy widok wybranej daty (np. dnia tygodnia).

Wybór kwoty karty podarunkowej

W kolejnym kroku zezwól użytkownikom na wybór kwoty karty podarunkowej. Połączenie sugerowanych i klikalnych wartości oraz niestandardowych pól wejściowych działa najlepiej. W ten sposób dajesz użytkownikom wskazówkę, jaka powinna być wartość prezentu i ułatwiasz wybór, a jednocześnie oferujesz pole do personalizacji, jeśli klienci chcą kupić niestandardową wartość karty.

Przykład:

Saatchi Art, internetowy rynek sztuki, używa zarówno sugerowanych wartości, jak i niestandardowego pola wejściowego, aby nie nakładać żadnych ograniczeń. Jeśli użytkownik przekroczy maksymalną wartość karty podarunkowej, otrzyma komunikat o błędzie informujący o szczegółach błędu na górze strony.

Zalando nakłada limity na wartość karty podarunkowej, umieszczając możliwe wartości od 50 do 100 GBP. Takie podejście może mieć sens z ekonomicznego punktu widzenia. Jednak drastycznie ogranicza to elastyczność kuponów i może prowadzić do opuszczenia Twojej witryny, jeśli chcieliby otrzymać droższą kartę podarunkową.

Tiffany & Co. nie oferuje niestandardowych wartości kart. Zamiast tego zapewniają predefiniowane wartości kart. Warto zauważyć, że domyślna wartość karty to 500 USD, mimo że dostępne są niższe wartości. W ten sposób Tiffany & Co. udaje się nakłonić klientów do skupienia się na kartach o wyższej wartości i uczynienia ich bardziej pożądanymi i postrzeganymi jako standardowa cena.

Udostępnianie informacji o odbiorcach

To kluczowy krok w procesie projektowania, zwłaszcza w kontekście bonów cyfrowych. W tym miejscu należy zakryć co najmniej dwa pola wejściowe — adres e-mail odbiorcy i treść karty podarunkowej, którą e-mail powinien zawierać. Niektóre firmy oferują również opcje dostosowywania tematu, aby dostawa kart była jeszcze bardziej spersonalizowana. Kluczową sprawą jest wymaganie tylko niezbędnych informacji (imię i nazwisko odbiorcy oraz adres e-mail). Nie uwzględniaj zbyt wielu dodatkowych pól.

Kolejna sprawa to komunikat karty – najlepiej podać wcześniej napisaną wiadomość, aby ułatwić klientom szybsze wysyłanie kart. Powinieneś jednak pozwolić użytkownikom zmieniać lub dostosowywać wiadomości, jeśli nie podoba im się wstępnie napisany tekst. Ustaw także pole wiadomości jako opcjonalne.

Przykład :

Starbucks oferuje prosty interfejs użytkownika do informacji o odbiorcy i nadawcy.

Amazon daje użytkownikom prostą, wstępnie napisaną wiadomość, aby dać im wyobrażenie o tym, jak może wyglądać wiadomość.

Personalizacja kodu karty podarunkowej

Jeśli karty podarunkowe są dużą częścią Twojej firmy, możesz pomyśleć o dalszym zwiększeniu ich potencjału personalizacji. Oprogramowanie karty podarunkowej powinno umożliwiać dostosowanie kodu karty podarunkowej tak, aby pasował do imienia odbiorcy lub uwzględniał specjalną okazję, z którą karta jest połączona (np. HAPPYBIRTHDAY7593). Ta prosta sztuczka sprawi, że karta będzie bardziej zapadająca w pamięć. Unikalny wzór ułatwi również nałożenie kodu karty przy kasie dzięki wykluczeniu mylących znaków lub odpowiedniej długości. Przejdź tutaj, aby uzyskać więcej informacji na temat ulepszania walidacji kodu.

Wybór szablonów bonów upominkowych

Ponieważ karty podarunkowe są zwykle wysyłane jako prezenty, najlepiej, aby były atrakcyjne wizualnie i nawiązywały do ​​okazji. Na przykład wyobraź sobie kartkę urodzinową, która jest cała szara i bez życzeń urodzinowych. To nie byłby najlepszy prezent, prawda? Dlatego zaleca się oferowanie przynajmniej kilku szablonów bonów upominkowych.

Przykład:

Amazon oferuje wiele szablonów kart, a użytkownicy mogą robić zakupy przy okazji, upraszczając ścieżkę zakupu karty. Ich silnik kart podarunkowych zapewnia prezenty na wiele okazji. Co więcej, dzięki wielu zróżnicowanym wzorom sprawia, że ​​karta przedpłacona wygląda jak prezent szyty na miarę.

Przesyłanie zdjęcia w celu dostosowania kart

Dodatkową szybką wygraną UX byłoby umożliwienie użytkownikom przesyłania zdjęć w celu spersonalizowania karty. Pamiętaj jednak, że dodanie tej funkcji wymaga opracowania warunków użytkowania zdjęć, aby chronić się przed naruszeniem praw własności intelektualnej osób trzecich.

Przykład:

Zalando umożliwia użytkownikom tworzenie własnych projektów kart. Aby jednak mieć pewność, że wszystko jest uregulowane od strony prawnej, Zalando wymaga od użytkowników przestrzegania ich warunków użytkowania.

Proces realizacji transakcji

Gdy użytkownicy wprowadzą wszystkie niezbędne informacje, przejdź do etapu kasy, zaprojektowanego jako standardowa kasa. Zadbaj o to, aby użytkownicy mogli szybko poprawić podane przez siebie informacje lub dokonać zmian na karcie bez usuwania całego koszyka i zaczynania od zera za każdym razem, gdy dokonują zmiany. Zaleca się również umieszczenie w tym widoku danych karty. Możesz użyć rozwijanego tekstu, domyślnie ukrytego i prezentowanego, gdy użytkownicy klikają wyznaczoną ikonę lub najeżdżają kursorem na kartę.

Przykład :

PrettyLittleThing jest przykładem złego UX kasowania kart podarunkowych. Po dodaniu karty do koszyka przez użytkowników nie ma prostego sposobu na zaktualizowanie danych karty, takich jak dane odbiorcy lub wartość kuponu. Jedynym sposobem jest wyjęcie karty z koszyka i rozpoczęcie całego procesu od nowa.

Winc pozwala użytkownikom aktualizować wartość karty w widoku koszyka.

Wysyłaj karty do odbiorców wieloma kanałami

Istnieje wiele opcji udostępniania kart odbiorcom. Tutaj są niektóre z nich:

• Wyślij e-mailem.
• Wyślij kupującemu plik PDF do wydrukowania, który można fizycznie udostępnić odbiorcy.
• Dostarcz fizyczne karty pocztą do kupującego lub odbiorcy.
• Wysyłaj przez media społecznościowe, np. Messenger, Whatsapp.
  

Jeśli chodzi o projektowanie interfejsu użytkownika, skupimy się na kartach cyfrowych wysyłanych do odbiorcy w wiadomości e-mail. Jeśli po raz pierwszy odbiorcy słyszą o Twojej marce, możesz zaimplementować w swoim e-mailu kilka sygnałów zaufania. Oto kilka wskazówek, jak nie trafić do spamu:

• Jasna tożsamość nadawcy jest ważnym znacznikiem zaufania — możesz rozważyć umieszczenie imienia i nazwiska nadawcy w temacie wiadomości e-mail z dołączoną kartą podarunkową, aby zwiększyć zaufanie. Na przykład użyj tematu „Katie właśnie wysłała Ci prezent!”
• Wykorzystaj personalizację – jeśli masz imię i nazwisko odbiorcy, dodaj je do swojego e-maila, aby poprawić UX i sprawić, że wiadomość będzie bardziej wiarygodna.
• Nie przesadzaj z wartością karty podarunkowej w temacie – staraj się nie używać w temacie zwrotów takich jak „voucher”, „code”, „deal” lub numerycznej wartości karty. Dostawca poczty e-mail odbiorcy może potraktować Twoją wiadomość jako spam lub umieścić ją w zakładce Promocja skrzynki pocztowej.
  

Wymyśl skuteczny projekt e-maila

Jeśli chodzi o treść e-maila, musi obejmować kilka punktów:

• Uwzględnij wartość karty.
• Dołącz link do konkretnego Regulaminu lub dodatkowe informacje na temat ograniczeń wykorzystania karty (jeśli istnieją).
• Kod karty podarunkowej, który można łatwo skopiować do schowka, najlepiej jednym kliknięciem.
• CTA, które zabierze odbiorcę do Twojego sklepu.
  

Pamiętaj, że użytkownicy mogą czytać Twoją pocztę zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Aby upewnić się, że Twoje karty podarunkowe są przyjazne dla urządzeń mobilnych, możesz umieścić precyzyjne linki w CTA, aby zapewnić, że użytkownicy przejdą bezpośrednio do Twojej aplikacji e-commerce z kodem podarunkowym już dodanym do ich cyfrowego portfela. Jeśli zdecydujesz się tylko na format wiadomości e-mail, pamiętaj o dołączeniu kodu kreskowego lub QR o wysokim współczynniku kontrastu, który można łatwo powiększać, aby urządzenie skanujące w punkcie sprzedaży mogło go wykorzystać.

Przykład:

Watsi, organizacja charytatywna zajmująca się opieką zdrowotną, zaznacza wszystkie pola wyboru, jeśli chodzi o właściwy projekt wiadomości e-mail z kartą podarunkową.

Amazon traktuje karty podarunkowe jako kredyt sklepowy, który można przechowywać na koncie. W swojej wiadomości e-mail umieścili precyzyjny link, który prowadzi użytkowników bezpośrednio do witryny lub aplikacji Amazon (w zależności od urządzenia), która automatycznie dodaje kredyty do konta odbiorcy.

Realizowanie kart podarunkowych

Jak sugeruje Kim Salazar, użyteczność kuponów i bonów upominkowych jest wprost proporcjonalna do łatwości ich wykorzystania w sklepie internetowym.

Należy unikać nakładania jakichkolwiek limitów na wykorzystanie bonu podarunkowego, takich jak minimalna kwota zamówienia. Inną ogólną dobrą praktyką UX jest pamiętanie, że odbiorcy kart podarunkowych będą bardziej wrażliwi na informacje o dostawie i kosztach produktu. Taki klient konfiguruje zawartość koszyka z większą niż zwykle uwagą. Wynika to z obawy, że różnica w nominalnej wartości karty i kwocie zamówienia może zostać utracona. Dlatego powinieneś również spojrzeć na podróż użytkownika jako całość i wprowadzić poprawki, aby zapewnić jak najlepsze wrażenia użytkownika.

{{KLIENT}}

{{KLIENT KOŃCOWY}}

Zezwól na częściowe wykupy

Karty podarunkowe można traktować jako formę płatności, a nie kupon promocyjny. Ta opcja jest świetna, jeśli korzystasz z kart podarunkowych z możliwością doładowania, jak w przypadku Starbucks. Następnie saldo na karcie jest obliczane dynamicznie, a kredyty są wykorzystywane jako metoda płatności. Podobny do karty kredytowej lub debetowej. Decydując się na to rozwiązanie, upewnij się, że karty podarunkowe nie mają daty ważności (lub bardzo długiej). To może sprawić, że Twoje karty podarunkowe będą bardzo atrakcyjne, ale jednocześnie wymagają wysokiej jakości infrastruktury, aby karta była wymienialna na zawsze.

Przykład:

Zakupy z kartą podarunkową Zalando są łatwe, ale rozpoczęcie pracy może stanowić wyzwanie dla użytkownika. Aby wykorzystać kartę podarunkową zgodnie z przeznaczeniem, odbiorca musi założyć konto i znaleźć „Twoje kupony” i umieścić kod karty podarunkowej w wyznaczonym polu tekstowym, aby go zrealizować. Po wykupie gotówka załadowana na kartę jest traktowana jako kredyty Zalando i może być wykorzystana jako metoda zakupu.

Problem z tym podejściem polega na tym, że użytkownicy mogą nie wiedzieć, że muszą założyć konto, aby zrealizować kartę i zobaczyć swoje saldo. Realizacja karty jest również możliwa w kasie poprzez umieszczenie kodu karty podarunkowej w polu vouchera. Kwota kuponu jest następnie dodawana do całkowitej kwoty w koszyku. Zalecam, aby obie możliwości były jasne dla odbiorcy karty.

Zaprojektuj pole wprowadzania karty podarunkowej

Odbiorcy kart podarunkowych chcą jak najszybciej wykorzystać swoje prezenty. Aby spełnić tę potrzebę, należy podać pole wejściowe kuponu na początku procesu zakupu, najlepiej w koszyku przed kasą. Takie podejście umożliwia klientom wcześniejsze sprawdzenie, czy karta jest ważna, przed wprowadzeniem danych osobowych.

Jeszcze lepszym podejściem jest zaoferowanie możliwości realizacji bonu podarunkowego na jak najwcześniejszym etapie procesu zakupowego, znacznie wcześniej niż podczas finalizacji i opłacenia zamówienia.

Przykład:

Winc oferuje prosty projekt interfejsu użytkownika i pozwala użytkownikom zrealizować bon upominkowy na samym początku podróży, skutecznie ograniczając stres lub niedogodności związane z niemożnością znalezienia pola realizacji.

Birchbox, marka produktów kosmetycznych objętych subskrypcją, umożliwia również użytkownikom natychmiastową realizację bonu podarunkowego. Informacja o szybkim zrealizowaniu karty znajduje się w stopce strony.

Co więcej, umieszczenie danych wejściowych kuponu powinno być podstawową częścią procesu zakupu i być odpowiednio wyświetlane w strukturze witryny lub aplikacji. Upewnij się, że jest wystarczająco długi, aby zawierał cały kod kuponu.

Inną dobrą praktyką związaną z kodami prezentowymi jest wyraźne rozróżnienie pól płatności i bonów, ponieważ ich bliskość i podobieństwo może być źródłem frustracji potencjalnych nabywców.

Wytyczne są zgodne ze sprawdzonymi metodami dotyczącymi interfejsu kuponów. Jeśli chcesz dowiedzieć się, jak zaprojektować pola do wprowadzania kuponów, przeczytaj je.

Przykład:

Birchbox to doskonały przykład pudełka do wprowadzania kuponów. Nazwa pudełka „Kody promocyjne i upominkowe” jasno określa przeznaczenie pudełka. Wiele witryn e-commerce używa „Kody promocyjne” jako nazwę tej sekcji, co może zmylić właścicieli kart podarunkowych, ponieważ karty nie są uważane za promocje. Oferują również link do otwarcia pola z kodem kuponu w widoku kasy dla tych, którzy przegapili je w widoku koszyka. To świetny sposób, aby zachować opcję dodania kodu kuponu na obu etapach.

Twórz komunikaty o sukcesach i błędach

Pokaż komunikat o powodzeniu i zmienioną sumę zamówienia, aby potwierdzić, że kod kuponu podarunkowego został pomyślnie zastosowany. Umieść wiadomość w pobliżu pola kuponu, aby upewnić się, że użytkownicy ją zobaczą i powiąż z wprowadzonym kodem. Wyświetlanie tego komunikatu na górze lub na dole strony może być mylące. Jednak komunikat o sukcesie nie powinien być jedynym potwierdzeniem, jakie otrzymuje użytkownik. Odzwierciedlaj zmienioną sumę zamówienia zarówno w koszyku, jak i w widoku kasy.

Zgodnie z tą samą logiką powinieneś również wyświetlić odpowiedni komunikat o błędzie z informacją o rodzaju problemu z kartą podarunkową. Nie wyświetlaj tego samego komunikatu o błędzie w każdym przypadku, ponieważ nie poinformuje on użytkownika, co jest nie tak i jak może rozwiązać problem. Oto kilka przykładów:

• „Kod karty podarunkowej jest nieprawidłowy. Spróbuj ponownie”.
• „Kod karty podarunkowej stracił ważność”.
• „Nie jesteś posiadaczem karty podarunkowej (jeśli przypisujesz bony podarunkowe do poszczególnych klientów).”
• „Twoje zamówienie nie spełnia warunków karty podarunkowej (jeśli przypiszesz limity realizacji kart).”
  

Przykład:

SummerSalt wyświetla komunikat o błędzie, jeśli wprowadzony kod jest nieprawidłowy lub jeśli warunki promocji nie są spełnione. Zachęcają klientów do ponownego sprawdzenia kodu.

Zaprojektuj powiadomienia o wygaśnięciu ważności karty podarunkowej

Jeśli Twoje karty mają datę ważności, musisz zaplanować nieco więcej i skonfigurować automatyczne powiadomienia, aby zachęcić użytkowników do wykorzystania salda karty, zanim wygaśnie. W tym przypadku należy postępować zgodnie z najlepszymi praktykami UX związanymi z e-mail marketingiem, czyli sprawić, by wizualnie przyciągały wzrok, zachować sprytną kopię, dodać ładnie kontrastujące CTA i powstrzymać się od używania słów, które można oznaczyć jako spam („rabat” „oferta”, „wyprzedaż”).

Streszczenie

Mam nadzieję, że ta lista sprawdzonych metod pomoże Ci rozpocząć projektowanie witryny i telefonu komórkowego pod kątem kart podarunkowych lub ulepszyć obecny projekt interfejsu użytkownika. Jeśli szukasz ogólnych porad dotyczących tworzenia kampanii kart podarunkowych, zapoznaj się z tym przewodnikiem.

{{CTA}}

Gotowy, aby przenieść swoje karty podarunkowe na wyższy poziom?

Zaczynaj

{{ENDCTA}}