Cele mai bune practici pentru cupoane, reduceri și promoții UI și UX

„Cumpărătorii adora ofertele, fie că sunt sub formă de vânzări la nivelul întregului site, articole selectate de vânzare sau cupoane. Cu toate acestea, pentru ca utilizatorii să aibă succes în utilizarea promoțiilor, un site web trebuie să facă bine două lucruri: trebuie să comunice aceste diferite promoții în mod eficient pe tot site-ul și, de asemenea, trebuie să faciliteze accesul utilizatorilor la ofertele care sunt comunicate.” Kim Salazar, specialist senior în experiența utilizatorului la Nielsen Norman Group

Această postare colectează cele mai bune practici și inspirații pentru proiectarea interfeței de utilizator și a experienței pentru promovarea codurilor de cupon și a promoțiilor aplicate automat pe site-ul dvs. web sau pe platforma dvs. mobilă. Vom acoperi întreaga călătorie a clienților, de la mesaje promoționale și scăderi de preț pe site, până la validarea cuponului și promoțiilor și aplicarea la finalizarea comenzii și, în final, răscumpărare. Am scris această postare pe baza interfeței UI și UX ale clienților noștri, cea mai performantă în ceea ce privește veniturile UI a platformelor de comerț electronic DTC și diverse studii UX.

Notă: Toate capturile de ecran pentru desktop au fost făcute pe Mac, Chrome și toate capturile de ecran pentru dispozitive mobile au fost făcute folosind rezoluția iPhone X pe Chrome.

Sperăm că acest ghid vă va ajuta să vă reproiectați platforma pentru a include promoții la nivel de cupon și coș sau pentru a vă îmbunătăți experiența existentă de cupoane pentru clienți. Dacă aveți întrebări sau doriți să aflați mai multe despre Voucherify, motorul nostru de promovare, nu ezitați să ne contactați.

Kit UI Cupoane și Promoții

Obține un timp de lansare mai rapid pe piață cu componente gata de cupon și promoție din Kitul nostru de interfață cu cupoane și promoții disponibil pe Figma. Află mai multe.

Cuprins:

Sfaturi generale privind UI și UX promoțional:

• Precizați clar intervalul de timp al promovării.
• Aplicați automat cupoane disponibile public.
• Oferiți o pagină de compilare a vânzărilor.
• Activați filtrarea în categoria dvs. de vânzări.
• Oferiți un cockpit pentru clienți.
• Listați articolele cu reducere în secțiunea Vânzări, precum și în categoriile corespunzătoare.
• Comunicați promoții la nivelul întregului site la nivel global.
• Fiți clar cu privire la restricțiile promoționale în avans.

Cele mai bune practici UX cu cupoane pe o anumită pagină:

1. Pagina de pornire:

• Tipuri de promoții anunțate pe pagina principală.
• Link către paginile de vânzări.

2. Pagini de categorii.
3. Ferestre pop-up.
4. Panglică de sus a paginii.
5. Subsol.
6. Pagina produsului:

• Lăsați vechiul preț activat.
• Spuneți clar regulile de promovare a pachetului.

7. Coș de cumpărături:

• Includeți câmpuri cu cod de cupon ca parte esențială atât a coșului de cumpărături, cât și a paginilor de finalizare a achiziției.
• Pentru promoțiile cu cheltuieli minime, faceți calculul pentru utilizatori și ajutați-i să atingă obiectivul de cheltuieli.
• Amintiți-le utilizatorilor despre ofertele speciale disponibile pentru care se pot califica în coșul de cumpărături.
• Menționați orice condiții sau restricții speciale.

8. Pagina de checkout:

• Includeți un câmp de cod de cupon.
• Afișează un mesaj de succes dacă codul este aplicat cu succes.
• Afișează un mesaj de eroare în cazul codului de cupon nevalid.
• Spuneți clar dacă clientul poate adăuga mai mult de un cupon de reducere.
• Ajutați utilizatorii să-și găsească reducerile.
• Reflectați reducerile primite.
  

Elementele de bază ale codurilor de cupon UI și UX

Vom acoperi aici câteva sfaturi generale care se aplică la majoritatea designului, destinațiilor de plasare și promovării cupoanelor de reducere și promoțiilor. Mai târziu, vom trece la plasările specifice de promoții cu cupoane și coșuri pe site, evidențiind în același timp cea mai bună soluție de design din punctul de vedere al experienței clienților. Amintiți-vă că nu este niciodată suficient să lansați o campanie de cupoane, trebuie să vă ocupați și de proiectarea, plasarea, validarea și procesul de valorificare a cupoanelor pentru a face campania dvs. un succes fulgerător.

Precizați clar intervalul de timp al promovării

Ar trebui să informați clienții cu privire la durata promoției la nivel de cupon sau de coș, pentru a evita clienții nemulțumiți care află la checkout că oferta nu mai este valabilă. De asemenea, ajută la crearea unui sentiment de urgență și îi împinge ușor pe cumpărători să își finalizeze comenzile. Nerespectarea acestui lucru duce la pierderea experienței utilizatorilor și la părăsirea clienților de pe site-ul dvs.

O poți face fie menționând intervalul de timp (date sau ore) promoției, fie adăugând un cronometru cu numărătoare inversă. Cea mai bună practică este să adăugați întotdeauna intervalul de timp al promoției pe fiecare banner și reclamă, nu numai în termeni și condiții, pentru a vă asigura că clienții știu despre data de expirare a promoției.

Exemple de interfață de utilizare:

Pomelo Fashion folosește un cronometru pentru a afișa clar când expiră ofertele lor.

Shein informează clienții de lângă bannerul sau categoria promoțională despre durata ofertei printr-o numărătoare inversă. Ele arată și numărul de piese rămase, pentru a induce un sentiment de urgență.

De asemenea, informează clienții despre durata ofertei pe pagina produsului pentru a îmbunătăți și mai mult experiența promoțională.

Și au inclus cronometrul chiar și în coșul de cumpărături.

Iată cum arată afișajul în aplicația lor mobilă:

Pretty Little Thing are o numărătoare inversă de promovare pe bannerul paginii principale, disponibilă și în rezoluția mobilă:

Aplicați automat cupoane disponibile public pentru a oferi cea mai bună experiență posibilă

Dacă pe site este oferit un cod de reducere sau de cupon, ați putea simplifica procesul de răscumpărare permițând utilizatorilor să îl aplice automat în coșul lor dând clic pe codul de reducere sau, cel puțin, să îl copieze automat când fac clic pe acesta, astfel încât nu trebuie să-și amintească codul. Acest lucru va crește utilizarea promoției, facilitând aplicarea acesteia în cărucioarele lor de către utilizatori. De asemenea, puteți aplica automat coduri unice de reducere trimise prin diverse canale (e-mail, SMS și altele) dacă clientul face clic pe linkul pe care l-a primit. Aflați cum să remediați UX-ul de validare a cuponului urmând această postare.

Dacă oferta este disponibilă public, luați întotdeauna în considerare cu atenție dacă ar putea fi doar o reducere aplicată automat la nivel de coș în loc de un cod de cupon public. Simplifică procesul de plată pentru clienți și poate duce la rate de conversie crescute ale promoției.

O altă practică bună UX este să faceți codul cuponului posibil de copiat (plasați-l pe site-ul web sau în aplicația mobilă ca text, nu încorporat într-o imagine).

Exemple de interfață de utilizare:

Vanity Planet aplică automat coduri de cupon publice pentru comenzile eligibile din coș. După ce mergeți la casă, totalul comenzii este recalculat pentru a reflecta codul de reducere.

Ei adaugă chiar și un produs gratuit la comandă, dacă comanda se califică pentru acesta, aplicând din nou automat codul de reducere:

Aici puteți vedea același flux, la rezoluția mobilă:

Dacă faceți clic pe butonul „Afișează rezumatul comenzii”, conținutul coșului este afișat inclusiv informațiile despre promoții și codurile de cupon aplicate comenzii.

Oferiți o pagină de compilare a vânzărilor

Colectarea tuturor promoțiilor la nivel de coș și a cupoanelor de reducere disponibile public pe o singură pagină este o modalitate excelentă de a facilita găsirea acestora de către clienți. În acest fel, puteți afișa promoțiile și clienților noi sau neconectați, spre deosebire de a utiliza doar cockpit-urile clienților pentru a afișa toate promoțiile. Adesea, companiile afișează toate bannerele promoționale pur și simplu pe pagina de pornire, ceea ce poate ascunde diferite elemente ale paginii și poate distruge experiența clienților.

Exemple de interfață de utilizare:

Victoria's Secret prezintă toate ofertele disponibile într-o interfață de utilizare clară pe un singur site. Observați modul în care arhitectura informațională de pe site folosește dimensiunea pentru a sublinia sau a sublinia ofertele selectate.

Activați filtrarea în categoria dvs. de vânzări pentru o UX mai bună

Dacă oferiți o categorie de vânzări care colectează toate articolele pentru care se aplică o anumită promoție în coș sau un cod de reducere, ar trebui să permiteți utilizatorilor să navigheze și să filtreze categoria respectivă. Unii vizitatori vor dori doar să vadă produse la reducere și nimic altceva, așa că categoriile de vânzări separate ar trebui să le permită să vadă toate ofertele și să navigheze cu ușurință prin această secțiune. Opțiunile de navigare filtrate ar trebui să permită cumpărătorilor să sorteze și să filtreze în secțiunile de vânzări pentru a restrânge selecția în mod eficient. Fără filtre, cumpărăturile de vânzări pot fi o muncă grea și pot duce la părăsirea clienților de pe site-ul dvs.

Exemple de interfață de utilizare:

Pomelo Fashion oferă filtre de categorie de vânzare după tipul și dimensiunea produsului.

Fashion Nova oferă filtrarea categoriei de vânzare după preț sau compartimente:

Oferiți un cockpit pentru clienți

Afișarea tuturor promoțiilor la coș și a codurilor de reducere pe care un anumit client le poate accesa într-un cockpit dedicat clienților îi ajută pe clienți să înțeleagă care promoții sunt disponibile în mod special pentru ei. De asemenea, vă permite să afișați cupoane de reducere personale, unice, carduri cadou, sold de puncte de fidelitate sau alte recompense, spre deosebire de o pagină de vânzări care afișează numai promoții disponibile publicului, nu cele personalizate.

Exemple de interfață de utilizare:

H&M oferă un cockpit pentru clienți, unde clienții își pot găsi soldul punctelor de fidelitate, promoțiile și reducerile disponibile, vouchere unice și un program de recomandare.

Cabina clientului la rezoluție mobilă:

Listați articolele cu reducere în secțiunea Vânzări și în categoriile corespunzătoare

Nu limitați afișarea articolelor de vânzare la o secțiune dedicată de vânzări a site-ului. Pentru cea mai bună descoperire, cel mai bine este să enumerați articolele cu reducere atât pe pagina categoriei corespunzătoare, cât și în secțiunea Vânzări. Unii utilizatori navighează direct la secțiunile de vânzări atunci când sunt motivați să găsească o afacere, dar alții nu caută în mod specific secțiunile de vânzări. Utilizatorii care caută un anumit articol navighează în general în funcție de categorie. Site-urile care afișează articole de vânzare împreună cu articole cu preț întreg îi ajută pe utilizatori să descopere reduceri în zona lor de interes.

Exemple de interfață de utilizare:

Pretty Little Thing listează articolele de vânzare sub articolele de reducere și categoriile de produse, astfel încât acestea să poată fi găsite în ambele.

Comunicați promoții la nivel global pentru a evita presa proastă

Dacă site-ul oferă transport gratuit sau alte reduceri sau cupoane la nivelul întregului site, afișați aceste oferte pe fiecare pagină a site-ului. Mementourile consecvente pentru reduceri pot ajuta utilizatorii să găsească articole în bugetul lor și îi pot încuraja să cumpere. Din nou, ei prezintă marca dvs. ca fiind una care oferă avantaje cumpărătorilor. Afișând doar promoții la nivel de site în zonele selectate, riscați ca nu toți utilizatorii să le descopere. În plus, dacă cupoanele nu sunt anunțate pe toate paginile, oamenii pot presupune că au fost ascunse în mod intenționat pentru a preveni utilizarea, care în cele din urmă se reflectă negativ asupra mărcii.

Posibilele plasări cu reduceri includ:

• Anunțuri promoționale în spațiul eroilor de pe pagina principală.
• Bannere în partea de sus a fiecărei pagini cu detaliile promoției coșului sau codul cuponului – inclusiv pe pagina coșului de cumpărături sau pe pagina de finalizare a comenzii unde trebuie introdus codul cuponului.
• Înștiințări promoționale în pagina de listare a produselor sau în șina din dreapta.
• Bannere în partea de jos a paginii, în sau lângă subsol.

Exemple de interfață de utilizare:

‍Pomelo Fashion își comunică cuponul la nivelul întregului site pe bannerul paginii de pornire, panglica paginii de sus și paginile categoriei.

PrettyLittleThing le reamintește clienților cupoanele de reducere la nivelul întregului site chiar și pe paginile de produse – o mișcare grozavă din punct de vedere UX.

Iată cum îl prezintă ei în aspectul mobil:

Pretty Little Thing își face reclamă promovarea la nivel de coș pe bannerul paginii principale și pe panglica de sus:

Oferă o pagină de vânzări care afișează toate articolele cu reducere:

De asemenea, afișează reducerea pe pagina produsului:

Fiți clar cu privire la restricțiile privind promoțiile în avans

Uneori, promoțiile la coș sau cupoanele de reducere pot face obiectul unor calificări sau restricții. Dacă acesta este cazul, asigurați-vă că oferta indică clar ce restricții se aplică. Link către informații mai detaliate despre aceste condiții, dacă este necesar, dar nu solicitați utilizatorilor să caute prin literă mică pentru a înțelege restricțiile de bază. Nimic nu este mai frustrant decât să te aștepți să primești o ofertă, doar pentru a afla la checkout că nu te califică. Rețineți că designul cuponului dvs. nu ar trebui să fie doar atrăgător, ci și mai important, funcțional.

Exemple de interfață de utilizare:

Pretty Little Thing afirmă direct pe bannerul de pe pagina principală că promoția exclude articolele de vânzare și articolele de frumusețe.

Chewy oferă un link către mai multe informații către detaliile promoției lor (butonul „Aflați mai multe”) care este anunțat pe panglică „economisiți 35% la prima autoship”.

Aceasta este fereastra pop-up care se afișează după ce faceți clic pe CTA de promovare:

În rezoluția mobilă, panglica nu conține butonul, dar se poate face clic. După ce faceți clic pe aceeași fereastră pop-up cu termenii și condițiile promoției, se afișează:

Cele mai bune practici UX cu cupoane pe anumite pagini:

Pagina principala:

Tipuri de promoții anunțate pe pagina principală:

Nu ar trebui să faceți publicitate tuturor promoțiilor pe pagina principală, deoarece clienții pot fi copleșiți de numărul de oferte (și pot obține așa-numita orbire a bannerului). Numai promoțiile sau cupoanele pentru coș disponibile public ar trebui să fie anunțate acolo. Cea mai bună practică UX este să lăsați reducerile specifice produsului sau categoriei pentru paginile de categorie sau produse.

Exemple de interfață de utilizare:

Happy Socks a afișat pe panglica paginii de sus și pe pagina de pornire banner-ul principal al reducerii de vară de 30% aplicată automat, care era cea mai mare reducere publică a lor la acel moment.

Link către paginile de vânzări

Dacă există în desfășurare o promovare aplicată automat la nivelul întregului site sau cu cupon, în loc să enumerați toate produsele și condițiile eligibile pe pagina de pornire, puteți doar să oferiți un teaser care va duce la pagina de vânzări unde clienții pot citi toți termenii și condițiile promovarea și răsfoiți produsele și ofertele eligibile.

Exemple de interfață de utilizare:

Chubbies Shorts afișează un banner promoțional pe pagina principală, care trimite la pagina de colecție de vânzări.

Pagini de categorie:

Ferestre pop-up

Ferestrele pop-up pot fi folosite pentru a promova reduceri de cupoane și promoții la nivel de coș disponibile în magazin, dar au diverse dezavantaje UX. Dacă sunt singura metodă de a promova o promoție, utilizatorii le pot închide și pot uita condițiile exacte de reducere sau codul voucher solicitat. Prin urmare, ferestrele pop-up ar trebui folosite cu alte mijloace de comunicare precum bannere, e-mailuri, SMS-uri. O altă problemă a ferestrelor pop-up este că sunt intruzive. Acestea acoperă conținutul pe care utilizatorii au dorit de fapt să îl răsfoiască și pot fi considerate enervante.

Pe de altă parte, ferestrele pop-up sunt un înlocuitor grozav sau o completare la e-mailuri atunci când acordă o reducere clientului pentru o acțiune pe care tocmai a efectuat-o. De exemplu, dacă clientul s-a abonat la newsletter, ați putea afișa discountul câștigat într-un pop-up. În acest fel, clientul îl va primi mai ușor și mai devreme decât dacă ar trebui să își verifice căsuța de e-mail. Din nou, pop-up-ul și e-mailul ar putea coexista, pentru a face reducerea disponibilă dacă un client dorește să revină la ea mai târziu.

O alternativă bună la ferestrele pop-up din aplicația mobilă sunt notificările push.

Exemple de interfață de utilizare:

Tula folosește ferestre pop-up pentru a comunica o promovare la nivel de coș, dar fereastra pop-up poate fi accesată și atunci când utilizatorul face clic pe un banner fix cu o reducere de 15%. Asta face posibilă revenirea la promoție mai târziu.

Panglică de sus a paginii:

Similar cu plasarea în pagina de pornire, panglica ar trebui să fie rezervată pentru promoțiile publice sau la nivelul întregului site sau cu cupoane de reducere. Este un loc grozav pentru a adăuga un cod de cupon public și a-l face vizibil în toate paginile, inclusiv în finalizarea comenzii, pentru a face codul ușor accesibil atunci când utilizatorii își verifică coșul de cumpărături sau finalizează finalizarea plății.

Exemple de interfață de utilizare:

Chubbies Shorts folosește panglica pentru a face publicitate unor promoții mari de coș disponibile public.

Subsol:

Subsolul este unul dintre cele mai puțin citite locuri de pe site. Plasarea cupoanelor de reducere sau a ofertelor la nivel de coș nu este cea mai bună idee, deoarece reducerile vor fi probabil ratate de majoritatea clienților. Pe de altă parte, subsolul este un loc grozav pentru adăugarea termenilor și condițiilor promoționale. Dacă nu aveți nevoie de o pagină separată pentru T&C a promoției, deoarece T&C sunt foarte scurte, le puteți plasa în subsol.

Exemple de interfață de utilizare:

ThredUp folosește subsolul pentru a afișa Termenii și condițiile promoțiilor din coș.

Pagina produsului:

Lăsați vechiul preț activat

Asigurați-vă că clienții dvs. știu care a fost prețul înainte de a-l reduce. Oamenii iau decizii de cumpărare în funcție de cât de mult prețuiesc afacerea, nu de cât de mult prețuiesc produsul. Ori de câte ori este posibil, oferiți clienților dvs. un preț de referință care să facă oferta dvs. să arate bine prin comparație.

Exemple de interfață de utilizare:

Shein taie vechiul preț, plasează noul preț și chiar adaugă o etichetă care indică nivelul reducerii în procente.

Pe mobil, acestea arată procentul reducerii și valoarea în dolari a reducerii.

Spuneți clar regulile de promovare a pachetului

Pentru reducerile la pachet, faceți ofertele ușor de văzut și luați măsuri pe paginile produselor pentru a vă asigura că utilizatorii se califică dacă aleg. Dacă site-ul oferă o reducere pentru achiziționarea mai multor articole din același produs, utilizatorii ar trebui să poată descoperi cu ușurință oferta și să atingă cerința minimă.

Exemple de interfață de utilizare:

Chubbies Shorts afișează vânzarea „Cumpărați 2, obțineți o reducere” chiar lângă eticheta de preț a produsului de pe pagina categoriei.

De asemenea, afișează reducerea în coșul de cumpărături.

Când dați clic pe reducere, aceasta este selectată și adăugată la comandă, scăzând prețul cu 10 USD.

Cărucior de cumpărături:

Includeți câmpurile de cod de cupon ca parte esențială atât a coșului de cumpărături, cât și a paginilor de finalizare a achiziției

Utilizatorii care au un cod de cupon doresc să îl introducă cât mai curând posibil. Ar trebui să oferiți un loc clar pentru codurile de cupon în coșul de cumpărături, înainte de primul pas în procesul de finalizare a comenzii. Această abordare a interfeței de utilizare le permite oamenilor să verifice dacă este validă înainte de a introduce orice informații personale și, de asemenea, permite ca totalul să fie actualizat corespunzător la începutul procesului.

Când vine vorba de plasarea codului de cupon, este recomandat să faceți din codurile promoționale o parte esențială a procesului de finalizare a comenzii în loc de un articol din bara laterală. Când promoțiile sunt plasate pe șina potrivită, acestea tind să fie confundate cu reclamele și ignorate din cauza orbirii bannerului.

Pe de altă parte, dacă clientul dvs. nu are un cod de cupon și vede un câmp de cupon, ar putea simți că pierde o posibilă ofertă și va pierde, deoarece va începe să caute o reducere. Dacă nu toate cupoanele dvs. sunt disponibile public, cea mai bună soluție este să nu furnizați un câmp de text deschis vizibil. Ar trebui mai degrabă să furnizați un link text pentru a expune un câmp de text. Acest design este mai puțin probabil să atragă utilizatorii și să-i trimită într-o căutare de cupon, deoarece mulți cumpărători nu îl vor observa. Desigur, compromisul este că este mai puțin găsit pentru cei cu un cod de cupon.

Caseta de cod de cupon , fie că este extinsă automat sau ascunsă sub un link, ar trebui să fie un câmp de text. Dacă codurile dvs. de cupon au un număr fix de caractere sau un anumit model, puteți adăuga, de asemenea, o validare automată care să solicite utilizatorului dacă nu adaugă caractere de tip insuficient, prea multe sau greșit (numerice, alfabetice, semne speciale) pentru a ajuta ei identifică eroarea mai devreme. Câmpul ar trebui să fie suficient de lung pentru a găzdui codurile de cupon utilizate pe site, pentru a se asigura că utilizatorii le introduc corect. Cea mai bună lungime a codurilor de cupon este de 8-12 caractere. Dacă oferiți sugestii de coduri de cupon, le puteți afișa și într-o listă derulantă.

Când vine vorba de modul în care formulați copia în jurul cupoanelor oferite , psihologia de marketing al contabilității mentale sugerează că, dacă produsele dvs. tind să se încadreze mai mult în categoria de necesități, ar trebui să le spuneți clienților că au „câștigat” cupoane (imaginați-vă o fereastră pop-up). mesaj care spune „Bună! Tocmai ați câștigat un cupon de 10 USD!”), deoarece actul de a câștiga îl face să pară o sursă mai serioasă de venit. În schimb, dacă produsele dvs. sunt mai frivole, ar trebui să încercați să vă aruncați cupoanele ca o surpriză sau ca fiind oferite din cauza norocului (imaginați-vă un mesaj care spune „Tocmai ați câștigat un cupon de 10 USD!”). Puteți citi mai multe despre contabilitatea mentală în postarea noastră de blog.

Codurile de cupon în sine ar trebui să fie ușor de reținut și de scris în caseta de cupon (cu excepția cazului în care le oferiți ca un meniu vertical sau un buton radio din care să alegeți). Aceasta înseamnă ca combinațiile să însemne ceva pentru clienți, evitând litere și numere similare precum O și 0 și păstrând lungimea sub 12 caractere. Citiți mai multe despre fluența cognitivă în postarea noastră de blog.

Exemple de interfață de utilizare:

Birchbox are o casetă de cod de cupon foarte vizibilă în vizualizarea coșului. De asemenea, oferă un link pentru a deschide o casetă de cod de cupon în vizualizarea de finalizare a comenzii, pentru cei care l-au ratat în vizualizarea coșului de cumpărături. Este o modalitate excelentă de a păstra opțiunea de a adăuga un cod de cupon la ambii pași, ascunzând caseta de cod de cupon de pe formularul de finalizare, ceea ce ajută la scăderea pierderii.

Pe rezoluția mobilă, caseta de cupon este ascunsă și trebuie extinsă făcând clic pe ea:

Din nou, există un link către caseta de cod promoțional la pagina de finalizare a comenzii:

Pentru promoțiile cu cheltuieli minime, faceți calculul pentru utilizatori și ajutați-i să atingă obiectivul de cheltuieli

Unele site-uri oferă promoții, cum ar fi transportul gratuit pentru achiziții de peste o anumită sumă de dolari. Aceste oferte îi atrag pe utilizatori să cheltuiască timp și bani suplimentari pentru a se califica pentru ele.

Pentru promoțiile cu cheltuieli minime, site-urile ar trebui să spună utilizatorilor exact cât trebuie să cheltuiască mai mult pentru a se califica pentru ofertă. O idee grozavă de interfață este să numărați direct în coșul de cumpărături cât trebuie să cheltuiască utilizatorii mai mult pentru a se califica pentru reducere, fie că este vorba de transport gratuit, reducere procentuală sau dolari.

Dacă doriți să vă asigurați că clienții sunt motivați să cheltuiască mai mult pentru a ajunge la livrare gratuită, dar nu își limitează cumpărăturile pentru a atinge un nivel „doar suficient” de cheltuieli, punând un plafon de preț și ancorând la valoarea necesară pentru a ajunge la transportul gratuit, puteți juca cu UI pentru a afișa progresul către livrarea gratuită care merge mai rapid la începutul cheltuielilor și mai lent către atingerea „obiectivului” privind volumul comenzii. Aceasta este conform ideii „viteza obiectivului”, bazată pe cercetare. Puteți citi mai multe despre asta în această postare pe blog.

Site-urile ar putea merge și mai departe, sugerând articole relevante în coșul de cumpărături, care le-ar permite cumpărătorilor să atingă ținta minimă de cheltuieli și să-i scutească de efortul de a face calculul ei înșiși.

Exemple de interfață de utilizare:

Tula folosește interfața de utilizare pentru a afișa în coșul de cumpărături cât lipsește pentru a se califica pentru livrare gratuită.

Amintiți-le utilizatorilor despre ofertele speciale disponibile pentru care se pot califica în coșul de cumpărături

Ultima șansă de a atrage atenția utilizatorilor și de a-i ajuta să descopere promoțiile disponibile la nivel de coș și cupon este pe pagina coșului. Acolo pot face în continuare modificări cu ușurință la comandă, așa că asigurați-vă că includeți orice oferte speciale pentru care se pot califica utilizatorii, cum ar fi transport gratuit sau reduceri.

Ofertele trebuie să fie clar vizibile pentru a atrage atenția utilizatorilor. Pentru a atrage privirea utilizatorului, utilizați o poziție adecvată și greutatea vizuală.

Iată câteva dintre cele mai bune practici UX:

• Pentru oferte la nivel de produs, prezentați mesaje lângă produsul în sine.
• Pentru oferte la nivelul întregului site, prezentați oferta într-un spațiu prioritar chiar deasupra opțiunii de a trece la finalizarea comenzii.
• Dacă reducerea se aplică transportului, poate fi adecvată plasarea cu reduceri la nivelul întregului site sau lângă un total de expediere.
  

Nu oferiți clienților prea multe cupoane și promoții la nivel de coș, în special la finalizarea comenzii. Supraîncărcarea la alegere poate duce la pierdere. Citiți mai multe despre valoarea varietății și supraîncărcarea de alegeri în postarea noastră de blog.

Exemple de interfață de utilizare:

Pantalonii scurti Chubbies afișează toate reducerile și recompensele disponibile direct în coșul de cumpărături.

Menționați orice condiții sau restricții speciale

Dacă promoția sau cupoanele coșului au condiții sau restricții speciale, menționați-o pe pagina de vânzare, în termenii și condițiile dumneavoastră și în coșul de cumpărături, înainte ca clienții să finalizeze achiziția.

Exemple de interfață de utilizare:

Shein menționează condițiile speciale ale promovării lor în coșul de cumpărături, de exemplu numărul maxim de produse promoționale pe care un client le poate achiziționa și acele articole de vânzare nu pot fi returnate.

Pagina de checkout:

Includeți un câmp de cod de cupon

După cum am menționat mai devreme, este mai bine să includeți câmpul de cod de cupon atât pe pagina coșului de cumpărături, cât și pe pagina de plată, dacă cineva a uitat să îl aplice pe pagina de vizualizare a coșului de cumpărături.

Afișează un mesaj de succes dacă codul este aplicat cu succes

Afișați un mesaj de succes și suma reducerii pentru a confirma că codul de cupon a fost aplicat cu succes. Plasați mesajul aproape de câmpul de cod de cupon pentru a vă asigura că utilizatorii îl văd și îl asociați cu codul de cupon introdus. Faptul ca acel mesaj să fie afișat în partea de sus sau de jos a paginii poate fi confuz. Asigurați-vă că mesajul de succes nu este singura sursă de informații că cuponul a fost aplicat cu succes. Afișați reducerea adăugată în totalurile comenzii, în coșul de cumpărături și la pagina de finalizare a comenzii, specificând de preferință ce cod de cupon a aplicat care reducere (mai ales dacă clienții pot adăuga mai mult de un cod de reducere la comandă).

Exemple de interfață de utilizare:

Pretty Little Thing afișează o bifă și suma de economii aplicată comenzii după introducerea unui cod valid. Ele afișează și suma reducerii calculată în totalurile comenzii, specificând care cod de reducere a aplicat reducerea.

Ele afișează, de asemenea, codul de cupon aplicat și reducerea aferentă pe vizualizarea mobilă:

{{CTA}}

Construiți-vă frontend-ul cu componente gata incluse în kit-ul nostru UI

Începeți să construiți

{{ENDCTA}}

Afișează un mesaj de eroare pentru codurile de cupon nevalide

Dacă codul este invalid sau condițiile promoției nu sunt îndeplinite, ar trebui să afișați un mesaj de eroare relevant care să precizeze tipul problemei cu codul de cupon. Nu afișați același mesaj de eroare în fiecare caz, deoarece nu va informa utilizatorul ce este greșit și cum poate rezolva problema.

Afișați mesajul de eroare chiar lângă caseta codului cuponului, nu în partea de sus sau de jos a paginii, deoarece este posibil ca utilizatorul să nu observe mesajul de eroare. Asigurați-vă că mesajul de eroare este vizibil, de exemplu folosind roșu sau altă culoare contrastantă.

Tipuri de mesaje de eroare de afișat:

• Codul de cupon este nevalid.
• Codul de cupon a fost deja folosit și nu poate fi valorificat de mai multe ori.
• Suma comenzii este insuficientă sau excesivă pentru a aplica cuponul (în acest caz, returnați informațiile despre cât lipsește pentru a vă califica pentru cupon sau cât exces există în coșul de cumpărături).
• Conținutul comenzii nu îndeplinește condițiile promoționale (în acest caz, menționați ce articole ar trebui eliminate sau adăugate pentru a se califica).
• Cuponul a expirat.
• Alte motive – dacă vă puteți imagina alte cazuri, creați un mesaj special pentru acestea. Aveți un mesaj implicit pentru toate celelalte cazuri la care nu v-ați fi putut gândi.

Exemple de interfață de utilizare:

Summer Salt afișează un mesaj de eroare dacă codul introdus este invalid sau dacă nu sunt îndeplinite condițiile promoției. Ei încurajează clienții să-și verifice codul. Având cupoanele publice vizibile pe panglica de sus, ajută la corectarea greșelii.

Iată cum îl afișează pe rezoluția mobilă:

Indicați clar dacă clientul poate adăuga mai multe cupon de reducere sau poate combina promoții

Dacă permiteți adăugarea unui singur cupon la comandă, odată ce un client adaugă un cod de cupon valid, faceți ca codul de cupon să dispară sau să îl ascundeți. Înlocuiți-l adăugând un buton „schimbați-mi codul de cupon”, deoarece clienții ar putea dori să schimbe codul de cupon cu altul. Amintiți-vă că aveți opțiunea de a elimina și codul cuponului. Ar trebui să precizați clar undeva pe pagină că clienții pot adăuga un singur cod de cupon per comandă.

Dacă clienții pot adăuga mai multe coduri de cupon, odată ce au adăugat un cod de cupon, îl puteți afișa ca „adăugat la comandă” și puteți lăsa câmpul codului de cupon să se reîncarce și să fie gol din nou, astfel încât clienții să poată aplica un alt cod de cupon.

Dacă codurile de reducere și promoțiile coșului nu pot fi combinate, ar trebui să le menționați în mod clar în reclamele promoționale, T&C și pe pagina de finalizare a comenzii, mai ales ca mesaj de eroare dacă cineva încearcă să adauge un cupon pe lângă articolele deja disponibile.

Exemple de UI:‍

Summer Salt adaugă cuponul adăugat sub câmpul de cod de cupon și golește câmpul de cod de cupon odată ce un cupon este aplicat la comandă, sugerând utilizatorilor să aplice mai mult de un cupon per comandă.

Pretty Little Thing permite clienților să aplice un singur cod de cupon per comandă. Ei fac să dispară câmpul cuponului după ce cuponul este aplicat comenzii și îl înlocuiesc cu un buton „modificare cod”.

Ajutați utilizatorii să găsească reduceri pentru o experiență ridicată a clienților

Lângă câmpul de cod de cupon, ar trebui să afișați un link către cockpit-ul clienților, unde aceștia pot vedea toate reducerile disponibile sau pur și simplu o listă de cupoane și promoții ale coșului din care să aleagă. Acest lucru le face mult mai ușor pentru clienți să folosească ofertele dvs. și le pot crește dimensiunea coșului de cumpărături, dacă văd că s-ar putea califica pentru o reducere dacă adaugă doar câteva articole în coșul de cumpărături.

Exemple de interfață de utilizare:

Shein trimite către pagina „Cuponele mele” care colectează cupoanele disponibile lângă câmpul codului de cupon la finalizarea comenzii și menționează cupoanele disponibile public în câmpul codului de cupon.

Acesta este cabina de pilotaj pentru clienți care arată cupoanele disponibile și cupoanele expirate, care se deschide la clic pe linkul „cupoanele mele”.

În aplicația mobilă, aceștia afișează cupoanele ca „alertă de cupon”. Dacă faceți clic pe acea fereastră pop-up, puteți vedea toate cupoanele disponibile și puteți alege pe care să le utilizați.

Reflectați reducerea primită

Afișați orice reduceri sau restricții speciale aplicate articolelor din coșul de cumpărături, atât promoții la nivel de coș, cât și cupoane. Codurile de cupon trebuie validate și reflectate în cost înainte de a solicita informațiile de plată. Reducerile la nivel de coș ar trebui să fie afișate la nivel de produs sau de comandă, în funcție de ceea ce au fost aplicate. Este esențial ca utilizatorii să vadă economiile și să înțeleagă cum este calculat totalul. Cel mai bine este să afișați chiar și ce cod de cupon și ce promoție le-a oferit ce cantitate exactă de economii în totalul comenzii.

Restricțiile speciale privind articolele cu reducere ar trebui comunicate înainte ca clienții să plaseze comanda.

Exemple de interfață de utilizare:

Shein afișează reduceri la nivel de produs la nivel de produs în rezumatul coșului de cumpărături.

Shein le permite clienților să aplice coduri de reducere doar la casă. 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.

rezumat

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?

Incepe

{{ENDCTA}}