Najlepsze praktyki dotyczące kuponów, rabatów i promocji UI i UX

„Kupujący uwielbiają okazje, czy to w formie wyprzedaży w całej witrynie, wybranych przedmiotów z wyprzedaży czy kuponów. Jednak, aby użytkownicy odnieśli sukces w korzystaniu z promocji, witryna musi dobrze wykonywać dwie rzeczy: musi skutecznie komunikować te różne promocje w całej witrynie, a także musi ułatwiać użytkownikom uzyskanie komunikowanych ofert”. Kim Salazar, Senior User Experience Specialist w Nielsen Norman Group

W tym poście zebrano najlepsze praktyki i inspiracje dotyczące projektowania interfejsu użytkownika i doświadczeń związanych z promowaniem kodów kuponów i automatycznie stosowanych promocji w Twojej witrynie lub platformie mobilnej. Zajmiemy się całą podróżą klienta, od komunikatów promocyjnych i obniżek cen na stronie, poprzez walidację kuponów i promocji oraz zgłoszenie przy kasie, aż po realizację. Napisaliśmy ten post w oparciu o interfejs użytkownika i UX naszych klientów, najlepszy pod względem przychodów interfejs użytkownika platform e-commerce DTC, oraz różne badania UX.

Uwaga: wszystkie zrzuty ekranu pulpitu zostały wykonane na komputerach Mac i Chrome, a wszystkie zrzuty ekranu z urządzeń mobilnych zostały wykonane w rozdzielczości iPhone X w przeglądarce Chrome.

Mamy nadzieję, że ten przewodnik pomoże Ci przeprojektować platformę, tak aby zawierała promocje kuponowe i na poziomie koszyka lub poprawiła dotychczasowe doświadczenia klientów z kuponami. Jeśli masz jakiekolwiek pytania lub chcesz dowiedzieć się więcej o Voucherify, naszym silniku promocyjnym, skontaktuj się z nami.

Zestaw UI kuponów i promocji

Osiągnij szybszy czas wprowadzania na rynek dzięki gotowym komponentom kuponów i promocji z naszego zestawu UI kuponów i promocji dostępnego na Figma. Ucz się więcej.

Spis treści:

Ogólne porady dotyczące promocyjnego UI i UX:

• Wyraźnie określ ramy czasowe promocji.
• Automatycznie stosuj publicznie dostępne kupony.
• Zaoferuj stronę kompilacji sprzedaży.
• Włącz filtrowanie w swojej kategorii sprzedaży.
• Zaoferuj klientowi kokpit.
• Wymień przecenione produkty w sekcji Sprzedaż oraz w odpowiednich kategoriach.
• Komunikuj promocje w całej witrynie na całym świecie.
• Z góry wyjaśnij ograniczenia dotyczące promocji.

Najlepsze praktyki dotyczące kuponów UX na określonej stronie:

1. ‍ Strona główna:

• Rodzaje promocji reklamowanych na stronie głównej.
• Link do stron sprzedaży.

2. ‍ Strony kategorii.
3. ‍ Wyskakujące okienka.
4. ‍ Góra wstążki strony.
5. ‍ Stopka.
6. ‍ Strona produktu:

• Zostaw starą metkę z ceną.
• Wyraźnie określ zasady promocji pakietowych.

7. ‍ Koszyk:

• Uwzględnij pola kodu kuponu jako podstawową część koszyka na zakupy i stron kasy.
• W przypadku promocji o minimalnych wydatkach wykonaj obliczenia dla użytkowników i pomóż im osiągnąć cel wydatków.
• Przypomnij użytkownikom o dostępnych ofertach specjalnych, do których mogą się zakwalifikować w koszyku.
• Wspomnij o wszelkich specjalnych warunkach lub ograniczeniach.

8. Strona kasy:

• Dołącz pole kodu kuponu.
• Wyświetl komunikat o powodzeniu, jeśli kod zostanie pomyślnie zastosowany.
• Wyświetl komunikat o błędzie w przypadku nieprawidłowego kodu kuponu.
• Wyjaśnij, czy klient może dodać więcej niż jeden kupon rabatowy.
• Pomóż użytkownikom znaleźć ich rabaty.
• Odzwierciedlaj otrzymane rabaty.
  

Podstawy kodów kuponów UI i UX

Omówimy tutaj kilka ogólnych wskazówek, które dotyczą większości projektów kuponów rabatowych i promocji, miejsc docelowych i promocji. Później przejdziemy do konkretnych miejsc promocyjnych kuponów i koszyków w witrynie, podkreślając najlepsze rozwiązanie projektowe z punktu widzenia obsługi klienta. Pamiętaj, że uruchomienie kampanii z kuponami nigdy nie wystarczy, aby Twoja kampania odniosła niesamowity sukces, musisz również zadbać o projekt, rozmieszczenie, walidację i proces realizacji kuponów.

Wyraźnie określ ramy czasowe promocji

Powinieneś poinformować klientów o czasie trwania kuponu lub promocji na poziomie koszyka, aby uniknąć niezadowolonych klientów, którzy dowiadują się przy kasie, że oferta jest już nieaktualna. Pomaga również stworzyć poczucie pilności i lekko skłonić kupujących do zrealizowania zamówienia. Niezastosowanie się do tego prowadzi do zepsutego doświadczenia użytkownika i rezygnacji klientów z Twojej witryny.

Możesz to zrobić, podając ramy czasowe (daty lub godziny) promocji lub dodając minutnik. Najlepszą praktyką jest zawsze dodawanie ram czasowych promocji na każdym banerze i reklamie, nie tylko w regulaminie, aby klienci wiedzieli o terminie wygaśnięcia promocji.

Przykłady interfejsu użytkownika:

Pomelo Fashion używa minutnika, aby wyraźnie pokazać, kiedy ich oferty wygasają.

Shein informuje klientów obok banera promocyjnego lub kategorii o czasie trwania oferty z odliczaniem. Pokazują również liczbę pozostałych elementów, aby wywołać poczucie pilności.

Informują również klientów o czasie trwania oferty na stronie produktu, aby jeszcze bardziej zwiększyć atrakcyjność promocyjną.

I włączyli zegar nawet w koszyku.

Tak wygląda wyświetlacz w ich aplikacji mobilnej:

Pretty Little Thing posiada odliczanie promocji na banerze strony głównej, dostępne również w rozdzielczości mobilnej:

Automatycznie stosuj publicznie dostępne kupony, aby zapewnić jak najlepsze wrażenia

Jeśli na stronie jest oferowany kod rabatowy lub kupon, możesz uprościć proces realizacji, umożliwiając użytkownikom automatyczne zastosowanie go w koszyku poprzez kliknięcie kodu rabatowego lub przynajmniej automatyczne skopiowanie go po kliknięciu, aby nie muszą pamiętać kodu. Zwiększy to wykorzystanie promocji, ułatwiając użytkownikom stosowanie jej do swoich koszyków. Możesz również automatycznie zastosować unikalne kody rabatowe wysyłane różnymi kanałami (e-mail, SMS i inne), jeśli klient kliknie w otrzymany link. Dowiedz się, jak naprawić UX weryfikacji kuponów, śledząc ten post.

Jeśli oferta jest publicznie dostępna, zawsze dokładnie zastanów się, czy nie może to być tylko zniżka automatycznie zastosowana na poziomie koszyka, a nie publiczny kod kuponu. Ułatwia to klientom proces realizacji transakcji i może prowadzić do zwiększenia współczynników konwersji promocji.

Kolejną dobrą praktyką UX jest umożliwienie skopiowania kodu kuponu (umieszczanie go na stronie internetowej lub aplikacji mobilnej jako tekst, a nie osadzony w obrazie).

Przykłady interfejsu użytkownika:

Vanity Planet automatycznie stosuje publiczne kody kuponów do kwalifikujących się zamówień w koszyku. Po przejściu do kasy suma zamówienia jest przeliczana w celu odzwierciedlenia kodu rabatowego.

Dodają nawet darmowy produkt do zamówienia, jeśli zamówienie się do tego kwalifikuje, ponownie automatycznie stosując kod rabatowy:

Tutaj możesz zobaczyć ten sam przepływ, w rozdzielczości mobilnej:

Jeśli klikniesz przycisk „Pokaż podsumowanie zamówienia”, wyświetli się zawartość koszyka, w tym informacje o promocjach i kodach kuponów zastosowanych do zamówienia.

Zaoferuj stronę kompilacji sprzedaży

Zbieranie wszystkich publicznie dostępnych promocji na poziomie koszyka i kuponów rabatowych na jednej stronie to świetny sposób na ułatwienie klientom ich odnalezienia. W ten sposób możesz wyświetlać promocje również nowym lub niezalogowanym klientom, w przeciwieństwie do korzystania wyłącznie z kokpitów klienta do wyświetlania wszystkich promocji. Często firmy wyświetlają wszystkie banery promocyjne po prostu na stronie głównej, co może zasłaniać różne elementy strony i zakłócać wrażenia klientów.

Przykłady interfejsu użytkownika:

Victoria's Secret prezentuje wszystkie dostępne oferty w przejrzystym interfejsie użytkownika na jednej stronie. Zwróć uwagę, w jaki sposób architektura informacji w witrynie wykorzystuje rozmiar do uwydatniania lub zmniejszania nacisku na wybrane oferty.

Włącz filtrowanie w swojej kategorii sprzedaży dla lepszego UX

Jeśli oferujesz kategorię sprzedaży gromadzącą wszystkie przedmioty, do których ma zastosowanie dana promocja koszyka lub kod rabatowy, powinieneś umożliwić użytkownikom nawigację i filtrowanie tej kategorii. Niektórzy odwiedzający będą chcieli tylko zobaczyć produkty na wyprzedaży i nic więcej, więc oddzielne kategorie sprzedaży powinny umożliwić im przeglądanie wszystkich ofert i łatwe poruszanie się po tej sekcji. Filtrowane opcje nawigacji powinny umożliwiać kupującym sortowanie i filtrowanie w obrębie sekcji sprzedaży, aby skutecznie zawęzić wybór. Bez filtrów sprzedaż może być ciężką pracą i może spowodować, że klienci będą opuszczać Twoją witrynę.

Przykłady interfejsu użytkownika:

Pomelo Fashion oferuje filtry kategorii wyprzedaży według typu i rozmiaru produktu.

Fashion Nova oferuje filtrowanie kategorii sprzedaży według cen lub przedziałów:

Zaoferuj klientowi kokpit

Wyświetlanie wszystkich promocji koszyka i kodów rabatowych, do których dany klient może uzyskać dostęp w dedykowanym kokpicie klienta, pomaga klientom zrozumieć, które promocje są specjalnie dla nich dostępne. Umożliwia także wyświetlanie osobistych, unikalnych kuponów rabatowych, kart podarunkowych, salda punktów lojalnościowych lub innych nagród, w przeciwieństwie do strony sprzedaży, która wyświetla tylko promocje dostępne publicznie, a nie spersonalizowane.

Przykłady interfejsu użytkownika:

H&M oferuje kokpit klienta, w którym klienci mogą znaleźć saldo punktów lojalnościowych, dostępne promocje i rabaty, unikalne kupony oraz program poleceń.

Kokpit klienta w rozdzielczości mobilnej:

Wymień przecenione produkty w sekcji Sprzedaż i w odpowiednich kategoriach

Nie ograniczaj wyświetlania przedmiotów sprzedaży do dedykowanej sekcji sprzedaży witryny. Aby zapewnić najlepszą wykrywalność, najlepiej wystawiać przecenione przedmioty zarówno na odpowiedniej stronie kategorii, jak i w sekcji Sprzedaż. Niektórzy użytkownicy przechodzą bezpośrednio do sekcji sprzedaży, gdy są zmotywowani do znalezienia okazji, ale inni nie wyszukują konkretnie sekcji sprzedaży. Użytkownicy szukający konkretnego przedmiotu zazwyczaj przeglądają w oparciu o kategorie. Witryny, które wyświetlają przedmioty z wyprzedaży wraz z przedmiotami w pełnej cenie, pomagają użytkownikom odkrywać rabaty w ich obszarze zainteresowań.

Przykłady interfejsu użytkownika:

Pretty Little Thing wymienia przedmioty z wyprzedaży w ramach przedmiotów wyprzedażowych i kategorii produktów, aby można je było znaleźć w obu.

Komunikuj promocje w całej witrynie na całym świecie, aby uniknąć złej prasy

Jeśli witryna oferuje bezpłatną wysyłkę lub inne zniżki lub kupony obejmujące całą witrynę, wyświetl te oferty na każdej stronie witryny. Konsekwentne przypomnienia o rabatach mogą pomóc użytkownikom znaleźć przedmioty w ich budżecie, a także zachęcić ich do zakupu. Ponownie przedstawiają Twoją markę jako taką, która zapewnia korzyści kupującym. Wyświetlając promocje w całej witrynie tylko w wybranych obszarach, ryzykujesz, że nie wszyscy użytkownicy je odkryją. Ponadto, jeśli kupony nie są reklamowane na wszystkich stronach, ludzie mogą założyć, że zostały celowo ukryte, aby zapobiec ich wykorzystaniu, co ostatecznie odbija się negatywnie na marce.

Możliwe miejsca zniżek obejmują:

• Ogłoszenia promocyjne w przestrzeni bohatera na stronie głównej.
• Banery na górze każdej strony ze szczegółami promocji koszyka lub kodem kuponu – w tym na stronie koszyka na zakupy lub stronie kasy, gdzie należy wpisać kod kuponu.
• Objaśnienia promocyjne na stronie z listą produktów lub na prawej szynie.
• Banery na dole strony, w stopce lub w jej pobliżu.

Przykłady interfejsu użytkownika:

‍Pomelo Fashion komunikuje swój kupon w całej witrynie na banerze strony głównej, wstążce strony głównej i stronach kategorii.

PrettyLittleThing przypomina klientom o kuponach rabatowych w całej witrynie, nawet na stronach produktów – to świetne posunięcie z punktu widzenia UX.

Tak przedstawiają to w układzie mobilnym:

Pretty Little Thing reklamuje swoją promocję na poziomie koszyka na banerze strony głównej i wstążce strony głównej:

Oferują stronę sprzedaży, która wyświetla wszystkie przecenione produkty:

Pokazują również rabat na stronie produktu:

Wyjaśnij z góry ograniczenia dotyczące promocji

Czasami promocje koszyka lub kupony rabatowe mogą podlegać kwalifikacjom lub ograniczeniom. Jeśli tak jest, upewnij się, że oferta wyraźnie wskazuje, jakie ograniczenia mają zastosowanie. Link do bardziej szczegółowych informacji na temat tych warunków, jeśli to konieczne, ale nie wymagaj od użytkowników przekopywania się przez drobny druk, aby zrozumieć podstawowe ograniczenia. Nic nie jest bardziej frustrujące niż oczekiwanie na otrzymanie oferty, tylko po to, aby dowiedzieć się przy kasie, że nie kwalifikujesz się. Pamiętaj, że projekt kuponu powinien być nie tylko przyciągający wzrok, ale co ważniejsze, funkcjonalny.

Przykłady interfejsu użytkownika:

Pretty Little Thing stwierdza bezpośrednio na banerze swojej strony głównej, że promocja nie obejmuje artykułów wyprzedażowych i artykułów kosmetycznych.

Chewy podaje link do dodatkowych informacji o szczegółach promocji (przycisk „Dowiedz się więcej”), który jest reklamowany na wstążce „zaoszczędź 35% na swojej pierwszej wysyłce automatycznej”.

Oto wyskakujące okienko, które wyświetla się po kliknięciu promocyjnego CTA:

W rozdzielczości mobilnej wstążka nie zawiera przycisku, ale można ją kliknąć. Po kliknięciu wyświetla się to samo okienko z regulaminem promocji:

Najlepsze praktyki dotyczące kuponów UX na określonych stronach:

Strona główna:

Rodzaje promocji reklamowanych na stronie głównej:

Nie należy reklamować wszystkich promocji na stronie głównej, ponieważ klienci mogą zostać przytłoczeni liczbą ofert (i otrzymać tzw. ślepotę banerową). Powinny być tam reklamowane wyłącznie publicznie dostępne promocje koszyka lub kupony. Najlepszą praktyką UX jest pozostawienie zniżek dla poszczególnych produktów lub kategorii dla stron kategorii lub produktów.

Przykłady interfejsu użytkownika:

Happy Socks pokazało na swojej wstążce na górze strony i głównym banerze na stronie głównej z automatycznie zastosowanej 30% zniżki letniej wyprzedaży, która w tamtym momencie była ich największą zniżką publiczną.

Link do stron sprzedaży

Jeśli trwa trwająca w całej witrynie promocja kuponowa lub automatycznie stosowana, zamiast wymieniać wszystkie kwalifikujące się produkty i warunki na stronie głównej, możesz po prostu podać zwiastun, który będzie prowadzić do strony sprzedaży, na której klienci będą mogli przeczytać wszystkie warunki promocji i przeglądaj kwalifikujące się produkty i oferty.

Przykłady interfejsu użytkownika:

Chubbies Shorts wyświetla baner promocyjny na stronie głównej, prowadzący do strony kolekcji sprzedażowej.

Strony kategorii:

Wyskakujące okienka

Wyskakujące okienka mogą być wykorzystywane do reklamowania rabatów kuponowych i promocji na poziomie koszyka dostępnych w sklepie, ale mają one różne wady UX. Jeśli są one jedyną metodą reklamowania promocji, użytkownicy mogą je zamknąć i zapomnieć o dokładnych warunkach rabatu lub wymaganym kodzie kuponu. Dlatego wyskakujące okienka powinny być używane z innymi środkami komunikacji, takimi jak banery, e-maile, SMS-y. Inną kwestią wyskakujących okienek jest to, że są nachalne. Obejmują one treści, które użytkownicy faktycznie chcieli przeglądać i mogą być postrzegane jako irytujące.

Z drugiej strony wyskakujące okienka są świetnym zamiennikiem lub dodatkiem do wiadomości e-mail podczas przypisywania klientowi rabatu za akcję, którą właśnie wykonał. Na przykład, jeśli klient zasubskrybował biuletyn, możesz wyświetlić uzyskany rabat w wyskakującym okienku. W ten sposób klient uzyska to łatwiej i wcześniej niż gdyby musiał sprawdzać swoją skrzynkę. Ponownie, wyskakujące okienko i e-mail mogą współistnieć, aby udostępnić zniżkę, jeśli klient chciałby do niej wrócić później.

Dobrą alternatywą dla wyskakujących okienek w aplikacji mobilnej są powiadomienia push.

Przykłady interfejsu użytkownika:

Tula używa wyskakujących okienek do informowania o promocji na poziomie koszyka, ale dostęp do wyskakującego okienka można uzyskać również po kliknięciu przez użytkownika stałego banera z 15% zniżką. Dzięki temu do promocji można wrócić później.

Góra wstążki strony:

Podobnie jak w przypadku umieszczania na stronie głównej, wstążkę należy zarezerwować dla publicznych lub obejmujących całą witrynę promocji koszyka lub kuponów rabatowych. Jest to świetne miejsce na dodanie publicznego kodu kuponu i uwidocznienie go na wszystkich stronach, w tym przy kasie, aby kod był łatwo dostępny, gdy użytkownicy sprawdzają swój koszyk lub kończą kasę.

Przykłady interfejsu użytkownika:

Chubbies Shorts wykorzystuje wstążkę do reklamowania dużych, publicznie dostępnych promocji koszykowych.

Stopka:

Stopka to jedno z najmniej czytanych miejsc w serwisie. Umieszczanie kuponów rabatowych lub ofert na poziomie koszyka nie jest najlepszym pomysłem, ponieważ rabaty prawdopodobnie zostaną pominięte przez większość klientów. Z drugiej strony stopka to świetne miejsce na dodanie regulaminu promocji. Jeśli nie potrzebujesz osobnej strony z regulaminem promocji, ponieważ regulamin jest bardzo krótki, możesz umieścić go w stopce.

Przykłady interfejsu użytkownika:

ThredUp używa stopki do wyświetlania Regulaminu promocji koszyka.

Strona produktu:

Zostaw starą metkę z ceną

Upewnij się, że Twoi klienci wiedzą, jaka była cena, zanim ją obniżysz. Ludzie podejmują decyzje zakupowe na podstawie tego, jak bardzo cenią transakcję, a nie jak cenią produkt. Jeśli to możliwe, podawaj klientom cenę referencyjną, dzięki której Twoja oferta wygląda dobrze w porównaniu.

Przykłady interfejsu użytkownika:

Shein przekreśla starą cenę, umieszcza nową, a nawet dodaje tag określający poziom rabatu w procentach.

Na telefonie komórkowym pokazują procent rabatu i wartość rabatu w dolarach.

Jasno określ zasady promocji pakietów

W przypadku rabatów na pakiety, ułatw sobie przeglądanie ofert i podejmij kroki na stronach produktów, aby upewnić się, że użytkownicy kwalifikują się, jeśli zdecydują się na to. Jeśli witryna oferuje zniżkę na zakup wielu produktów tego samego produktu, użytkownicy powinni mieć możliwość łatwego zapoznania się z ofertą i osiągnięcia minimalnego wymagania.

Przykłady interfejsu użytkownika:

Chubbies Shorts wyświetla wyprzedaż „Kup 2, uzyskaj zniżkę” bezpośrednio obok metki z ceną produktu na stronie kategorii.

Wyświetlają również rabat w koszyku.

Po kliknięciu rabatu zostaje on zaznaczony i dodany do zamówienia, obniżając cenę o 10 zł.

Wózek sklepowy:

Uwzględnij pola kodu kuponu jako podstawową część zarówno koszyka na zakupy, jak i stron kasy

Użytkownicy posiadający kod kuponu chcą wprowadzić go jak najszybciej. Powinieneś zapewnić jasne miejsce na kody kuponów w koszyku przed pierwszym krokiem w procesie kasowym. Takie podejście do interfejsu użytkownika umożliwia ludziom sprawdzenie, czy jest ono prawidłowe przed wprowadzeniem jakichkolwiek danych osobowych, a także umożliwia odpowiednią aktualizację sumy na wczesnym etapie procesu.

Jeśli chodzi o umieszczanie kodu kuponu, zdecydowanie zaleca się, aby kody promocyjne stały się podstawową częścią procesu zakupu, a nie elementem paska bocznego. Kiedy promocje są umieszczane na właściwej szynie, są często mylone z reklamami i ignorowane z powodu ślepoty na banery.

Z drugiej strony, jeśli Twój klient nie ma kodu kuponu i widzi pole kuponu, może poczuć, że traci możliwą ofertę i odchodzi, ponieważ zacznie szukać rabatu. Jeśli nie wszystkie kupony są publicznie dostępne, najlepszym rozwiązaniem nie jest udostępnianie widocznego otwartego pola tekstowego. Powinieneś raczej podać link tekstowy, aby odsłonić pole tekstowe. Ten projekt jest mniej prawdopodobny, aby zachęcić użytkowników i wysłać ich na poszukiwanie kuponów, ponieważ wielu kupujących go nie zauważy. Kompromis polega oczywiście na tym, że jest mniej dostępny dla osób z kodem kuponu.

Pole kodu kuponu , automatycznie rozwinięte lub ukryte pod linkiem, powinno być polem tekstowym. Jeśli Twoje kody kuponów mają ustaloną liczbę znaków lub określony wzór, możesz również dodać automatyczną walidację, która podpowie użytkownikowi, jeśli doda za mało, za dużo lub niepoprawnego typu znaków (numerycznych, alfabetycznych, znaków specjalnych), aby pomóc zauważają błąd wcześniej. Pole powinno być wystarczająco długie, aby pomieścić kody kuponów używane w witrynie, aby użytkownicy mogli je poprawnie wprowadzić. Najlepsza długość kodów kuponów to 8-12 znaków. Jeśli oferujesz sugestie kodów kuponów, możesz również wyświetlić je na liście rozwijanej.

Jeśli chodzi o to, jak sformułować tekst wokół oferowanych kuponów , psychologia marketingu mentalnej rachunkowości sugeruje, że jeśli Twoje produkty zwykle należą do kategorii potrzebnych, powinieneś powiedzieć swoim klientom, że „zarobili” kupony (wyobraź sobie wyskakujące okienko wiadomość o treści „Cześć! Właśnie zarobiłeś kupon rabatowy o wartości 10 USD!”), ponieważ zarabianie sprawia, że ​​wydaje się to poważniejszym źródłem dochodu. W przeciwieństwie do tego, jeśli Twoje produkty są bardziej niepoważne, powinieneś spróbować rzucić kupony jako niespodziankę lub jako dane im z powodu szczęścia (wyobraź sobie wiadomość z napisem „Właśnie wygrałeś kupon o wartości 10 USD!”). Więcej o księgowości psychicznej przeczytasz w naszym poście na blogu.

Same kody kuponów powinny być łatwe do zapamiętania i wpisania w polu kuponów (chyba że oferujesz je jako listę rozwijaną lub przycisk opcji do wyboru). Oznacza to, że kombinacje znaczą coś dla klientów, unikając podobnych liter i cyfr, takich jak O i 0, i utrzymując długość poniżej 12 znaków. Przeczytaj więcej o płynności poznawczej w naszym poście na blogu.

Przykłady interfejsu użytkownika:

Birchbox ma bardzo widoczne pole z kodem kuponu w widoku koszyka. Oferują również link do otwarcia pola z kodem kuponu w widoku kasy, dla tych, którzy przegapili je w widoku koszyka. Jest to świetny sposób, aby zachować opcję dodania kodu kuponu na obu etapach, ukrywając pole z kodem kuponu w formularzu kasy, co pomaga zmniejszyć churn.

W rozdzielczości mobilnej pole kuponu jest ukryte i należy je rozwinąć, klikając je:

Ponownie, na stronie kasy znajduje się link do pola z kodem promocyjnym:

W przypadku promocji o minimalnych wydatkach wykonaj obliczenia dla użytkowników i pomóż im osiągnąć cel wydatków

Niektóre witryny oferują promocje, takie jak bezpłatna wysyłka w przypadku zakupów powyżej określonej kwoty w dolarach. Oferty te zachęcają użytkowników do spędzania dodatkowego czasu i pieniędzy, aby się do nich zakwalifikować.

W przypadku promocji z minimalnymi wydatkami witryny powinny dokładnie informować użytkowników, o ile więcej muszą wydać, aby zakwalifikować się do oferty. Świetnym pomysłem na interfejs użytkownika jest odliczanie bezpośrednio w koszyku, ile użytkownicy muszą wydać więcej, aby zakwalifikować się do rabatu, niezależnie od tego, czy jest to bezpłatna wysyłka, % czy rabat w dolarach.

Jeśli chcesz mieć pewność, że klienci są zmotywowani do wydawania większych pieniędzy w celu uzyskania bezpłatnej wysyłki, ale nie ograniczają swoich zakupów do osiągnięcia „wystarczającego” poziomu wydatków, ustalając pułap cenowy i zakotwiczając się w wartości wymaganej do uzyskania bezpłatnej wysyłki, możesz zagrać za pomocą interfejsu użytkownika, aby wyświetlić postęp w kierunku bezpłatnej wysyłki, który będzie szybszy na początku wydatków i wolniejszy w kierunku osiągnięcia „celu” wielkości zamówienia. Jest to zgodne z ideą „prędkości bramki”, opartą na badaniach. Więcej na ten temat możesz przeczytać w tym wpisie na blogu.

Witryny mogłyby pójść jeszcze dalej, proponując odpowiednie elementy w koszyku, które umożliwiłyby kupującym osiągnięcie minimalnego celu wydatków i oszczędziłyby im wysiłku związanego z samodzielną matematyką.

Przykłady interfejsu użytkownika:

Tula używa interfejsu użytkownika, aby pokazać w koszyku, ile brakuje, aby zakwalifikować się do bezpłatnej wysyłki.

Przypomnij użytkownikom o dostępnych ofertach specjalnych, do których mogą się zakwalifikować w koszyku

Ostatnia szansa na przyciągnięcie uwagi użytkowników i pomoc w odkryciu dostępnych promocji na poziomie koszyka i kuponów jest na stronie koszyka. Tam nadal mogą łatwo wprowadzać zmiany w zamówieniu, więc pamiętaj, aby uwzględnić wszelkie oferty specjalne, do których użytkownicy mogą się zakwalifikować, takie jak bezpłatna dostawa lub rabaty.

Oferty muszą być wyraźnie widoczne, aby przyciągnąć uwagę użytkowników. Aby przyciągnąć uwagę użytkownika, użyj odpowiedniego rozmieszczenia i wizualnej wagi.

Oto niektóre z najlepszych praktyk UX:

• W przypadku ofert na poziomie produktu umieść komunikaty w pobliżu samego produktu.
• W przypadku ofert obejmujących całą witrynę przedstaw ofertę w obszarze priorytetowym bezpośrednio nad opcją przejścia do kasy.
• Jeśli zniżka dotyczy wysyłki, odpowiednie może być umieszczenie z rabatami w całej witrynie lub obok sumy kosztów wysyłki.
  

Nie oferuj klientom zbyt wielu kuponów i promocji na poziomie koszyka, zwłaszcza przy kasie. Przeciążenie wyborem może prowadzić do rezygnacji. Przeczytaj więcej o wartości różnorodności i przeciążenia wyborem w naszym poście na blogu.

Przykłady interfejsu użytkownika:

Chubbies Shorts wyświetlają wszystkie dostępne rabaty i nagrody bezpośrednio w koszyku.

Wspomnij o specjalnych warunkach lub ograniczeniach

Jeśli promocja koszyka lub kupony mają jakieś specjalne warunki lub ograniczenia, poinformuj o tym na stronie sprzedaży, w regulaminie i w koszyku, zanim klienci sfinalizują zakup.

Przykłady interfejsu użytkownika:

Shein wspomina o specjalnych warunkach ich promocji w koszyku, na przykład o maksymalnej liczbie produktów promocyjnych, które klient może kupić, oraz o tym, że wyprzedaży nie można zwrócić.

Strona kasy:

Dołącz pole kodu kuponu

Jak wspomnieliśmy wcześniej, lepiej jest umieścić pole kodu kuponu zarówno na stronie koszyka na zakupy, jak i na stronie kasy, jeśli ktoś zapomniał go zastosować na stronie widoku koszyka.

Wyświetl komunikat o powodzeniu, jeśli kod zostanie zastosowany pomyślnie

Pokaż komunikat o sukcesie i kwotę rabatu, aby potwierdzić, że kod kuponu został pomyślnie zastosowany. Umieść wiadomość w pobliżu pola kodu kuponu, aby upewnić się, że użytkownicy ją zobaczą i powiąż z wprowadzonym kodem kuponu. Wyświetlanie tego komunikatu na górze lub na dole strony może być mylące. Upewnij się, że komunikat o sukcesie nie jest jedynym źródłem informacji o pomyślnym zastosowaniu kuponu. Wyświetl dodany rabat w sumie zamówienia, w koszyku i na stronie kasy, najlepiej określając, który kod kuponu został zastosowany do danego rabatu (zwłaszcza, jeśli klienci mogą dodać więcej niż jeden kod rabatowy do zamówienia).

Przykłady interfejsu użytkownika:

Pretty Little Thing pokazuje znacznik wyboru i kwotę oszczędności zastosowanych do zamówienia po wprowadzeniu prawidłowego kodu. Wyświetlają również kwotę rabatu obliczoną w sumie zamówienia, określając kod rabatowy zastosowany do rabatu.

Wyświetlają również zastosowany kod kuponu i powiązaną z nim zniżkę w widoku mobilnym:

{{CTA}}

Zbuduj swój frontend za pomocą gotowych komponentów zawartych w naszym UI Kit

Zacznij budować

{{ENDCTA}}

Wyświetl komunikat o błędzie dla nieprawidłowych kodów kuponów

Jeśli kod jest nieprawidłowy lub warunki promocji nie są spełnione, powinieneś wyświetlić stosowny komunikat o błędzie z informacją o rodzaju problemu z kodem kuponu. 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.

Wyświetlaj komunikat o błędzie tuż obok pola z kodem kuponu, a nie na górze lub na dole strony, ponieważ użytkownik może nie zauważyć komunikatu o błędzie. Upewnij się, że komunikat o błędzie jest widoczny, na przykład używając czerwonego lub innego kontrastowego koloru.

Rodzaje komunikatów o błędach do wyświetlenia:

• Kod kuponu jest nieprawidłowy.
• Kod kuponu został już wykorzystany i nie można go wykorzystać więcej razy.
• Kwota zamówienia jest niewystarczająca lub nadmierna do wykorzystania kuponu (w takim przypadku zwróć informację, ile brakuje do zakwalifikowania się do kuponu lub ile jest nadwyżki w koszyku).
• Treść zamówienia nie spełnia warunków promocji (w takim przypadku należy wskazać, które pozycje należy usunąć lub dodać, aby się zakwalifikować).
• Kupon stracił ważność.
• Inne powody – jeśli potrafisz sobie wyobrazić inne przypadki, stwórz wiadomość specjalnie dla nich. Miej jedną domyślną wiadomość dla wszystkich innych przypadków, o których nie mogłeś pomyśleć.

Przykłady interfejsu użytkownika:

Summer Salt 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. Widoczność publicznych kuponów na górnej wstążce pomaga naprawić błąd.

Oto jak wyświetlają to w rozdzielczości mobilnej:

Wyjaśnij, czy klient może dodać więcej niż jeden kupon rabatowy lub połączyć promocje

Jeśli pozwolisz na dodanie tylko jednego kuponu do zamówienia, gdy klient doda ważny kod kuponu, spraw, aby kod kuponu zniknął lub ukrył się. Zastąp go, dodając przycisk „zmień mój kod kuponu”, ponieważ klienci mogą chcieć zmienić kod kuponu na inny. Pamiętaj, aby mieć również możliwość usunięcia kodu kuponu. Powinieneś wyraźnie zaznaczyć na stronie, że klienci mogą dodać tylko jeden kod kuponu na zamówienie.

Jeśli klienci mogą dodać więcej kodów kuponu, po dodaniu jednego kodu kuponu możesz wyświetlić go jako „dodano do zamówienia” i pozwolić, aby pole kodu kuponu zostało ponownie załadowane i ponownie puste, aby klienci mogli zastosować kolejny kod kuponu.

Jeśli nie można łączyć kodów rabatowych i promocji koszyka, należy to wyraźnie zaznaczyć w reklamach promocyjnych, regulaminie i na stronie kasy, zwłaszcza jako komunikat o błędzie, jeśli ktoś próbuje dodać kupon na już wyprzedane produkty.

Przykłady interfejsu użytkownika:‍

Summer Salt dodaje dodany kupon poniżej pola kodu kuponu i opróżnia pole kodu kuponu po zastosowaniu kuponu do zamówienia, co sugeruje, że użytkownicy mogą zastosować więcej niż jeden kupon na zamówienie.

Pretty Little Thing pozwala klientom zastosować tylko jeden kod kuponu na zamówienie. Sprawiają, że pole kuponu znika po dodaniu kuponu do zamówienia i zastępuje je przyciskiem „zmień kod”.

Pomóż użytkownikom znaleźć rabaty zwiększające zadowolenie klientów

Obok pola z kodem kuponu powinieneś wyświetlić link do kokpitu klienta, w którym mogą zobaczyć wszystkie dostępne rabaty lub po prostu listę kuponów i promocji koszyka do wyboru. Ułatwia to klientom korzystanie z Twoich ofert i może zwiększyć rozmiar ich koszyka na zakupy, jeśli widzą, że mogą kwalifikować się do zniżki, jeśli tylko dodadzą kilka produktów do koszyka.

Przykłady interfejsu użytkownika:

Shein łączy się ze stroną „Moje kupony”, która zbiera dostępne kupony obok pola kodu kuponu przy kasie i wymienia publicznie dostępne kupony pod polem kodu kuponu.

Jest to kokpit klienta z dostępnymi kuponami i kuponami, które straciły ważność, który otwiera się po kliknięciu linku „Moje kupony”.

W aplikacji mobilnej wyświetlają kupony jako „powiadomienie o kuponie”. Jeśli klikniesz to wyskakujące okienko, zobaczysz wszystkie dostępne kupony i wybierzesz, którego chcesz użyć.

Odzwierciedlaj otrzymaną zniżkę

Pokaż wszelkie rabaty lub specjalne ograniczenia stosowane do produktów w koszyku, zarówno promocje na poziomie koszyka, jak i kupony. Kody kuponów należy zweryfikować i uwzględnić w koszcie przed zażądaniem informacji o płatności. Rabaty na poziomie koszyka powinny być wyświetlane na poziomie produktu lub zamówienia, w zależności od tego, do czego zostały zastosowane. Bardzo ważne jest, aby użytkownicy widzieli oszczędności i rozumieli, w jaki sposób obliczana jest suma. Najlepiej jest nawet wyświetlić, który kod kuponu i która promocja dała im dokładną kwotę oszczędności w sumie zamówienia.

Specjalne ograniczenia dotyczące przecenionych produktów należy poinformować przed złożeniem zamówienia przez klienta.

Przykłady interfejsu użytkownika:

Shein wyświetla rabaty na poziomie produktu na poziomie produktu w podsumowaniu koszyka.

Shein pozwala klientom stosować kody rabatowe tylko przy kasie. 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.

Streszczenie

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?

Zaczynaj

{{ENDCTA}}