Migliori pratiche di coupon, sconti e promozioni UI e UX

"Gli acquirenti adorano le offerte, sotto forma di vendite a livello di sito, articoli in saldo o coupon. Tuttavia, affinché gli utenti abbiano successo nell'utilizzo delle promozioni, un sito Web deve fare bene due cose: deve comunicare queste varie promozioni in modo efficace in tutto il sito e deve anche facilitare agli utenti la comunicazione delle offerte". Kim Salazar, Senior User Experience Specialist presso Nielsen Norman Group

Questo post raccoglie le migliori pratiche e ispirazioni per la progettazione dell'interfaccia utente e dell'esperienza per la promozione di codici coupon e promozioni applicate automaticamente sul tuo sito Web o piattaforma mobile. Copriremo l'intero percorso del cliente, dai messaggi promozionali e le riduzioni di prezzo sul sito Web attraverso la convalida e l'applicazione di coupon e promozioni al momento del pagamento e, infine, il riscatto. Abbiamo scritto questo post sulla base dell'interfaccia utente e dell'esperienza utente dei nostri clienti, l'interfaccia utente delle piattaforme di e-commerce DTC con le migliori prestazioni in termini di entrate e vari studi sull'esperienza utente.

Nota: tutti gli screenshot desktop sono stati realizzati su Mac, Chrome e tutti gli screenshot mobili sono stati realizzati utilizzando la risoluzione iPhone X su Chrome.

Ci auguriamo che questa guida ti aiuti a riprogettare la tua piattaforma per includere coupon e promozioni a livello di carrello o per migliorare l'esperienza di couponing dei clienti esistente. Se hai domande o desideri saperne di più su Voucherify, il nostro motore di promozione, non esitare a contattarci.

Buoni e promozioni UI Kit

Ottieni un time-to-market più rapido con coupon e componenti promozionali pronti dal nostro kit di coupon e promozioni disponibile su Figma. Per saperne di più.

Sommario:

Consigli generali su UI e UX promozionali:

• Indica chiaramente il periodo di promozione.
• Applica automaticamente coupon pubblicamente disponibili.
• Offri una pagina di compilazione delle vendite.
• Abilita il filtro nella tua categoria di vendita.
• Offri una cabina di pilotaggio al cliente.
• Elenca gli articoli scontati nella sezione Saldi e nelle categorie appropriate.
• Comunicare promozioni a livello di sito a livello globale.
• Sii chiaro in anticipo sulle restrizioni promozionali.

Buone pratiche per la UX del coupon su una pagina specifica:

1. ‍ Pagina iniziale:

• Tipi di promozioni pubblicizzate in home page.
• Link alle pagine di vendita.

2. ‍ Pagine di categoria.
3. ‍ Pop-up.
4. ‍ Barra multifunzione superiore della pagina.
5. ‍ Piè di pagina.
6. ‍ Pagina del prodotto:

• Lascia il vecchio cartellino del prezzo.
• Indica chiaramente le regole delle promozioni in bundle.

7. ‍ Carrello:

• Includi i campi del codice coupon come parte fondamentale sia del carrello degli acquisti che delle pagine di pagamento.
• Per le promozioni con spesa minima, fai i conti per gli utenti e aiutali a raggiungere l'obiettivo di spesa.
• Ricorda agli utenti le offerte speciali disponibili per le quali possono qualificarsi nel carrello.
• Indica eventuali condizioni o restrizioni speciali.

8. Pagina di pagamento:

• Includi un campo codice coupon.
• Visualizza un messaggio di successo se il codice è stato applicato correttamente.
• Visualizza un messaggio di errore in caso di codice coupon non valido.
• Indica se il cliente può aggiungere più di un buono sconto.
• Aiuta gli utenti a trovare i loro sconti.
• Rispecchia gli sconti ricevuti.
  

Le basi dei codici coupon UI e UX

Tratteremo qui alcuni suggerimenti generali che si applicano alla maggior parte dei coupon di sconto e del design, dei posizionamenti e delle promozioni delle promozioni. Successivamente, passeremo ai posizionamenti specifici di coupon e promozioni del carrello sul sito Web, evidenziando la migliore soluzione di design dal punto di vista dell'esperienza del cliente. Ricorda che non è mai abbastanza lanciare una campagna di coupon, devi anche occuparti della progettazione del coupon, del posizionamento, della convalida e del processo di riscatto per rendere la tua campagna un successo strepitoso.

Indica chiaramente il periodo di promozione

Dovresti informare i clienti sulla durata del coupon o della promozione a livello di carrello per evitare che clienti insoddisfatti vengano a sapere alla cassa che l'offerta non è più valida. Aiuta anche a creare un senso di urgenza e a spingere leggermente gli acquirenti a completare i loro ordini. In caso contrario, l'esperienza utente non funziona e i clienti abbandonano il tuo sito.

Puoi farlo menzionando il periodo di tempo (date o ore) della promozione o aggiungendo un timer per il conto alla rovescia. La migliore pratica consiste nell'aggiungere sempre l'intervallo di tempo della promozione su ogni banner e pubblicità, non solo nei termini e nelle condizioni, per garantire ai clienti la data di scadenza della promozione.

Esempi di interfaccia utente:

Pomelo Fashion utilizza un conto alla rovescia per visualizzare chiaramente quando le loro offerte scadono.

Shein informa i clienti accanto al banner promozionale o alla categoria sulla durata dell'offerta con un conto alla rovescia. Mostrano anche il numero di pezzi rimasti, per indurre un senso di urgenza.

Inoltre informano i clienti sulla durata dell'offerta sulla pagina del prodotto per migliorare ulteriormente l'esperienza promozionale.

E hanno incluso il timer anche nel carrello.

Ecco come appare il display sulla loro app mobile:

Pretty Little Thing ha un conto alla rovescia della promozione sul banner della pagina principale, disponibile anche nella risoluzione mobile:

Applica automaticamente coupon disponibili pubblicamente per offrire la migliore esperienza possibile

Se sul sito viene offerto un codice sconto o coupon, è possibile semplificare il processo di riscatto consentendo agli utenti di applicarlo automaticamente al carrello facendo clic sul codice sconto o, almeno, di copiarlo automaticamente quando si fa clic su di esso, in modo che non devono ricordare il codice. Ciò aumenterà l'utilizzo della promozione rendendo più facile per gli utenti applicarla ai propri carrelli. Puoi anche applicare automaticamente codici sconto univoci inviati tramite vari canali (e-mail, SMS e altro) se il cliente clicca sul link che ha ricevuto. Scopri come correggere l'UX di convalida del coupon seguendo questo post.

Se l'offerta è disponibile pubblicamente, valuta sempre attentamente se potrebbe trattarsi solo di uno sconto applicato automaticamente a livello di carrello anziché di un codice coupon pubblico. Semplifica il processo di pagamento per i clienti e può portare a un aumento dei tassi di conversione della promozione.

Un'altra buona pratica UX è rendere possibile la copia del codice coupon (posizionarlo sul sito Web o sull'app mobile come testo, non incorporato in un'immagine).

Esempi di interfaccia utente:

Vanity Planet applica automaticamente codici promozionali pubblici sugli ordini idonei nel carrello. Dopo essere andato alla cassa, il totale dell'ordine viene ricalcolato per riflettere il codice sconto.

Aggiungono anche un prodotto gratuito all'ordine, se l'ordine si qualifica per esso, applicando nuovamente automaticamente il codice sconto:

Qui puoi vedere lo stesso flusso, su risoluzione mobile:

Cliccando sul pulsante “Mostra riepilogo ordine” viene visualizzato il contenuto del carrello comprensivo delle informazioni sulle promozioni e dei codici coupon applicati all'ordine.

Offri una pagina di compilazione delle vendite

La raccolta di tutte le promozioni a livello di carrello e i buoni sconto disponibili pubblicamente in un'unica pagina è un ottimo modo per rendere più facile per i clienti trovarli. In questo modo puoi visualizzare le promozioni anche a clienti nuovi o non registrati, invece di utilizzare solo i cockpit dei clienti per mostrare tutte le promozioni. Spesso le aziende visualizzano tutti i banner promozionali semplicemente sulla home page, il che può oscurare diversi elementi della pagina e interrompere l'esperienza del cliente.

Esempi di interfaccia utente:

Victoria's Secret presenta tutte le offerte disponibili in un'interfaccia utente chiara su un unico sito. Nota come l'architettura delle informazioni sul sito utilizza le dimensioni per enfatizzare o sminuire le offerte selezionate.

Abilita il filtro nella tua categoria di vendita per una migliore UX

Se offri una categoria di vendita che raccoglie tutti gli articoli a cui è applicabile una determinata promozione del carrello o un codice sconto, dovresti consentire agli utenti di navigare e filtrare quella categoria. Alcuni visitatori vorranno solo vedere i prodotti in vendita e nient'altro, quindi categorie di vendita separate dovrebbero consentire loro di visualizzare tutte le offerte e navigare facilmente in questa sezione. Le opzioni di navigazione filtrate dovrebbero consentire agli acquirenti di ordinare e filtrare all'interno delle sezioni di vendita per restringere la selezione in modo efficace. Senza filtri, gli acquisti di vendita possono essere un duro lavoro e possono comportare l'abbandono dei clienti dal tuo sito.

Esempi di interfaccia utente:

Pomelo Fashion offre filtri per categoria di vendita per tipo e dimensione del prodotto.

Fashion Nova offre la categoria di vendita filtrando per fascia di prezzo o scomparti:

Offri una cabina di pilotaggio al cliente

La visualizzazione di tutte le promozioni del carrello e dei codici sconto a cui un determinato cliente può accedere in una cabina clienti dedicata aiuta i clienti a capire quali promozioni sono disponibili specificamente per loro. Consente inoltre di visualizzare coupon di sconto personali e unici, carte regalo, saldo punti fedeltà o altri premi, al contrario di una pagina di vendita che mostra solo le promozioni disponibili al pubblico, non quelle personalizzate.

Esempi di interfaccia utente:

H&M offre un cockpit per i clienti, in cui i clienti possono trovare il saldo dei punti fedeltà, promozioni e sconti disponibili, buoni unici e un programma di riferimento.

Cabina clienti su risoluzione mobile:

Elenca gli articoli scontati nella sezione Saldi e nelle categorie appropriate

Non limitare la visualizzazione degli articoli in vendita ad una sezione dedicata alle Vendite del sito. Per una migliore reperibilità, è meglio elencare gli articoli scontati sia nella pagina della categoria appropriata che nella sezione Saldi. Alcuni utenti accedono direttamente alle sezioni Vendite quando sono motivati ​​a trovare un affare, ma altri non cercano specificamente le sezioni Vendite. Gli utenti che cercano un particolare articolo generalmente navigano in base alla categoria. I siti che mostrano articoli in saldo insieme ad articoli a prezzo pieno aiutano gli utenti a scoprire sconti all'interno della loro area di interesse.

Esempi di interfaccia utente:

Pretty Little Thing elenca gli articoli in vendita sotto gli articoli in vendita e le categorie di prodotti in modo che possano essere trovati in entrambi.

Comunicare a livello globale promozioni a livello di sito per evitare pubblicità negativa

Se il sito offre la spedizione gratuita o altri sconti o coupon a livello di sito, mostra queste offerte in ogni pagina del sito. Promemoria di sconto coerenti possono aiutare gli utenti a trovare gli articoli nel loro budget e incoraggiarli ad acquistare. Ancora una volta, ritraggono il tuo marchio come uno che offre vantaggi agli acquirenti. Mostrando promozioni a livello di sito solo in aree selezionate, rischi che non tutti gli utenti le scoprano. Inoltre, se i coupon non vengono pubblicizzati su tutte le pagine, le persone possono presumere che siano stati nascosti intenzionalmente per impedirne l'uso che alla fine si riflette negativamente sul marchio.

Possibili posizioni di sconto includono:

• Annunci promozionali nello spazio degli eroi sulla home page.
• Banner nella parte superiore di ogni pagina con i dettagli della promozione del carrello o il codice coupon, anche nella pagina del carrello o nella pagina di pagamento in cui inserire il codice coupon.
• Richiami promozionali all'interno della pagina di elenco dei prodotti o nella guida a destra.
• Banner in fondo alla pagina, dentro o vicino al piè di pagina.

Esempi di interfaccia utente:

‍Pomelo Fashion comunica il coupon a livello di sito nel banner della home page, nella barra multifunzione della prima pagina e nelle pagine delle categorie.

PrettyLittleThing ricorda ai clienti i buoni sconto a livello di sito anche sulle pagine dei prodotti: un'ottima mossa dal punto di vista dell'esperienza utente.

Ecco come lo presentano nel layout mobile:

Pretty Little Thing pubblicizza la promozione a livello di carrello sul banner della pagina principale e sul nastro della pagina superiore:

Offrono una pagina di vendita che mostra tutti gli articoli scontati:

Mostrano anche lo sconto sulla pagina del prodotto:

Sii chiaro in anticipo sulle restrizioni sulle promozioni

A volte, le promozioni del carrello o i buoni sconto potrebbero essere soggetti a qualificazioni o restrizioni. In tal caso, assicurati che l'offerta indichi chiaramente quali restrizioni si applicano. Collegarsi a informazioni più dettagliate su queste condizioni, se necessario, ma non richiedere agli utenti di scavare attraverso i caratteri piccoli per comprendere le restrizioni di base. Niente è più frustrante che aspettarsi di ricevere un affare, solo per scoprire alla cassa che non sei idoneo. Tieni presente che il design del tuo coupon non dovrebbe solo essere accattivante, ma soprattutto funzionale.

Esempi di interfaccia utente:

Pretty Little Thing afferma direttamente sul banner della loro pagina principale che la promozione esclude gli articoli in saldo e gli articoli di bellezza.

Chewy fornisce un collegamento a ulteriori informazioni sui dettagli della loro promozione (pulsante "Ulteriori informazioni") che è pubblicizzato sulla barra multifunzione "risparmia il 35% sul tuo primo Autoship".

Questo è il pop-up che viene visualizzato dopo aver cliccato sulla CTA della promozione:

Nella risoluzione mobile, la barra multifunzione non contiene il pulsante ma è cliccabile. Dopo aver fatto clic, viene visualizzato lo stesso pop-up con i termini e le condizioni della promozione:

Buone pratiche per la UX dei coupon su pagine specifiche:

Pagina iniziale:

Tipi di promozioni pubblicizzate nella home page:

Non dovresti pubblicizzare tutte le promozioni sulla home page poiché i clienti potrebbero essere sopraffatti dal numero di offerte (e ottenere la cosiddetta cecità del banner). Solo le promozioni o i coupon del carrello disponibili pubblicamente devono essere pubblicizzati lì. La migliore pratica UX è lasciare gli sconti specifici del prodotto o della categoria per le pagine di categoria o prodotto.

Esempi di interfaccia utente:

Happy Socks ha mostrato sulla barra multifunzione della prima pagina e sul banner principale della home page i saldi estivi del 30% applicati automaticamente, che erano il loro più grande sconto pubblico in quel momento.

Link alle pagine di vendita

Se è in corso un'applicazione automatica o una promozione coupon a livello di sito, invece di elencare tutti i prodotti e le condizioni idonei nella home page, potresti semplicemente fornire un teaser che condurrà alla pagina di vendita in cui i clienti possono leggere tutti i termini e le condizioni di la promozione e sfoglia i prodotti e le offerte idonei.

Esempi di interfaccia utente:

Chubbies Shorts mostra un banner promozionale sulla pagina principale, che collega alla pagina della collezione di vendita.

Pagine di categoria:

Pop-up

I pop-up possono essere utilizzati per pubblicizzare sconti sui coupon e promozioni a livello di carrello disponibili nel negozio, ma presentano vari aspetti negativi dell'esperienza utente. Se sono l'unico metodo per pubblicizzare una promozione, gli utenti possono chiuderli e dimenticare le esatte condizioni di sconto o il codice voucher richiesto. Pertanto, i pop-up dovrebbero essere utilizzati con altri mezzi di comunicazione come banner, e-mail, SMS. Un altro problema dei pop-up è che sono invadenti. Coprono i contenuti che gli utenti volevano effettivamente navigare e possono essere visti come fastidiosi.

D'altra parte, i pop-up sono un ottimo sostituto o aggiunta alle e-mail quando si assegna uno sconto al cliente per un'azione che ha appena eseguito. Ad esempio, se il cliente si è iscritto alla newsletter, potresti visualizzare lo sconto guadagnato su un pop-up. In questo modo, il cliente lo otterrà più facilmente e prima che se dovesse controllare la propria casella di posta. Anche in questo caso, pop-up ed e-mail potrebbero coesistere, per rendere disponibile lo sconto se un cliente desidera tornare in seguito.

Una buona alternativa ai pop-up sull'app mobile sono le notifiche push.

Esempi di interfaccia utente:

Tula utilizza i pop-up per comunicare una promozione a livello di carrello, ma è possibile accedere al pop-up anche quando l'utente fa clic su un banner fisso con uno sconto del 15%. Ciò consente di tornare alla promozione in un secondo momento.

Nastro in cima alla pagina:

Analogamente al posizionamento della home page, la barra multifunzione deve essere riservata al carrello pubblico o a tutto il sito o alle promozioni con coupon di sconto. È un ottimo posto per aggiungere un codice coupon pubblico e renderlo visibile in tutte le pagine, incluso il checkout, per rendere il codice facilmente accessibile quando gli utenti controllano il carrello o completano il checkout.

Esempi di interfaccia utente:

Chubbies Shorts usa il nastro per pubblicizzare grandi promozioni di carrelli pubblicamente disponibili.

Piè di pagina:

Il footer è uno dei posti meno letti sul sito web. Inserire buoni sconto o offerte a livello di carrello non è l'idea migliore in quanto gli sconti probabilmente mancheranno alla maggior parte dei clienti. D'altra parte, il piè di pagina è un ottimo posto per aggiungere termini e condizioni della promozione. Se non hai bisogno di una pagina separata per i T&C della promozione poiché i T&C sono molto brevi, puoi inserirli nel piè di pagina.

Esempi di interfaccia utente:

ThredUp utilizza il footer per visualizzare i Termini e condizioni delle promozioni del carrello.

Pagina del prodotto:

Lascia il vecchio cartellino del prezzo

Assicurati che i tuoi clienti sappiano qual era il prezzo prima di tagliarlo. Le persone prendono decisioni di acquisto in base a quanto apprezzano l'affare, non quanto apprezzano il prodotto. Quando possibile, offri ai tuoi clienti un prezzo di riferimento che faccia sembrare buono il tuo affare in confronto.

Esempi di interfaccia utente:

Shein cancella il vecchio prezzo, inserisce il nuovo prezzo e aggiunge persino un tag che indica il livello dello sconto in percentuale.

Sul cellulare, mostrano la percentuale di sconto e il valore in dollari dello sconto.

Indica chiaramente le regole delle promozioni in bundle

Per gli sconti sui pacchetti, rendi le offerte facili da visualizzare e segui i passaggi nelle pagine dei prodotti per assicurarti che gli utenti si qualifichino se lo desiderano. Se il sito offre uno sconto per l'acquisto di più articoli dello stesso prodotto, gli utenti dovrebbero poter scoprire facilmente l'offerta e raggiungere il requisito minimo.

Esempi di interfaccia utente:

Chubbies Shorts mostra la vendita "Compra 2, ottieni uno sconto" direttamente accanto al cartellino del prezzo del prodotto nella pagina della categoria.

Visualizzano anche lo sconto nel carrello.

Quando fai clic sullo sconto, viene selezionato e aggiunto all'ordine, diminuendo il prezzo di $ 10.

Carrello della spesa:

Includi i campi del codice coupon come parte fondamentale sia del carrello degli acquisti che delle pagine di pagamento

Gli utenti che hanno un codice coupon vogliono inserirlo il prima possibile. Dovresti fornire un posto chiaro per i codici coupon nel carrello, prima del primo passaggio del processo di pagamento. Questo approccio dell'interfaccia utente consente alle persone di verificare se è valido prima di inserire qualsiasi informazione personale e consente inoltre di aggiornare il totale in modo appropriato all'inizio del processo.

Quando si tratta del posizionamento del codice coupon, si consiglia vivamente di rendere i codici promozionali una parte fondamentale del processo di pagamento anziché un elemento della barra laterale. Quando le promozioni sono posizionate nella guida giusta, tendono a essere confuse con gli annunci e ignorate a causa della cecità dei banner.

D'altra parte, se il tuo cliente non ha un codice coupon e vede un campo coupon, potrebbe pensare di perdere un possibile affare e abbandonare, perché inizierà a cercare uno sconto. Se non tutti i tuoi coupon sono disponibili pubblicamente, la soluzione migliore è non fornire un campo di testo aperto visibile. Dovresti piuttosto fornire un collegamento di testo per esporre un campo di testo. È meno probabile che questo design attiri gli utenti e li invii in una ricerca di coupon poiché molti acquirenti non lo noteranno. Il compromesso, ovviamente, è che è meno trovabile per chi ha un codice coupon.

La casella del codice coupon , che sia automaticamente espansa o nascosta sotto un collegamento, dovrebbe essere un campo di testo. Se i tuoi codici coupon hanno un numero fisso di caratteri o un determinato schema, potresti anche aggiungere una convalida automatica che richiederebbe all'utente se aggiunge caratteri insufficienti, troppi o di tipo errato (numerico, alfabetico, segni speciali) per aiutare individuano l'errore prima. Il campo dovrebbe essere sufficientemente lungo da contenere i codici coupon utilizzati sul sito, per garantire che gli utenti li inseriscano correttamente. La lunghezza migliore dei codici coupon è di 8-12 caratteri. Se offri suggerimenti sui codici coupon, puoi anche visualizzarli in un elenco a discesa.

Quando si tratta di come formulare la copia attorno ai coupon offerti , la psicologia del marketing della contabilità mentale suggerisce che se i tuoi prodotti tendono a rientrare maggiormente nella categoria delle necessità, dovresti dire ai tuoi clienti che hanno "guadagnato" coupon (immagina un pop-up messaggio che dice "Ciao! Hai appena guadagnato un buono sconto di $ 10! "), perché l'atto di guadagnare lo fa sembrare una fonte di reddito più seria. Al contrario, se i tuoi prodotti sono più frivoli, dovresti provare a lanciare i tuoi coupon come una sorpresa o come se fossero stati dati loro per fortuna (immagina un messaggio che dice "Hai appena vinto un coupon di $ 10 di sconto!"). Puoi leggere di più sulla contabilità mentale nel nostro post sul blog.

I codici coupon stessi dovrebbero essere facili da ricordare e scrivere nella casella del coupon (a meno che tu non li offra come menu a discesa o pulsante di opzione tra cui scegliere). Ciò significa fare in modo che le combinazioni abbiano un significato per i clienti, evitando lettere e numeri simili come O e 0 e mantenendo la lunghezza sotto i 12 caratteri. Leggi di più sulla fluidità cognitiva nel nostro post sul blog.

Esempi di interfaccia utente:

Birchbox ha una casella del codice coupon molto visibile nella vista del carrello. Offrono anche un collegamento per aprire una casella di codice coupon nella visualizzazione del pagamento, per coloro che se lo sono perso nella visualizzazione del carrello. È un ottimo modo per mantenere l'opzione per aggiungere un codice coupon in entrambi i passaggi, nascondendo la casella del codice coupon nel modulo di pagamento che aiuta a ridurre l'abbandono.

Sulla risoluzione mobile, la casella del coupon è nascosta e deve essere ampliata facendo clic su di essa:

Ancora una volta, c'è un collegamento alla casella del codice promozionale nella pagina di pagamento:

Per le promozioni con spesa minima, fai i conti per gli utenti e aiutali a raggiungere l'obiettivo di spesa

Alcuni siti offrono promozioni come la spedizione gratuita per acquisti superiori a un determinato importo in dollari. Queste offerte invogliano gli utenti a spendere tempo e denaro extra per qualificarsi.

Per le promozioni con spesa minima, i siti dovrebbero indicare agli utenti esattamente quanto devono spendere in più per qualificarsi per l'offerta. Un'ottima idea per l'interfaccia utente è contare direttamente nel carrello degli acquisti quanto gli utenti devono spendere di più per qualificarsi per lo sconto, che si tratti di spedizione gratuita, % o sconto sul dollaro.

Se desideri assicurarti che i clienti siano motivati ​​​​a spendere di più per ottenere la spedizione gratuita ma non stai limitando i loro acquisti per raggiungere un livello di spesa "appena sufficiente", ponendo un tetto massimo di prezzo e ancorando al valore richiesto per raggiungere la spedizione gratuita, puoi giocare con la tua interfaccia utente per visualizzare l'avanzamento verso la spedizione gratuita procedendo più velocemente all'inizio della spesa e più lentamente verso il raggiungimento dell'"obiettivo" del volume dell'ordine. Questo secondo l'idea della "velocità obiettivo", basata sulla ricerca. Puoi leggere di più a riguardo in questo post del blog.

I siti potrebbero andare ancora oltre, suggerendo articoli rilevanti nel carrello degli acquisti che consentirebbero agli acquirenti di raggiungere l'obiettivo di spesa minima e risparmiare loro lo sforzo di fare i conti da soli.

Esempi di interfaccia utente:

Tula utilizza l'interfaccia utente per mostrare nel carrello quanto manca per qualificarsi per la spedizione gratuita.

Ricorda agli utenti le offerte speciali disponibili per le quali possono qualificarsi nel carrello

L'ultima possibilità di attirare l'attenzione degli utenti e aiutarli a scoprire promozioni disponibili a livello di carrello e coupon è sulla pagina del carrello. Lì possono ancora apportare facilmente modifiche all'ordine, quindi assicurati di includere tutte le offerte speciali a cui gli utenti possono beneficiare, come la spedizione gratuita o gli sconti.

Le offerte devono essere chiaramente visibili per attirare l'attenzione degli utenti. Per attirare l'attenzione dell'utente, utilizzare il posizionamento e il peso visivo appropriati.

Ecco alcune delle migliori pratiche di UX:

• Per le offerte a livello di prodotto, presentare la messaggistica vicino al prodotto stesso.
• Per le offerte a livello di sito, presenta l'offerta in uno spazio prioritario direttamente sopra l'opzione per procedere al pagamento.
• Se lo sconto si applica alla spedizione, il posizionamento con sconti a livello di sito o accanto a un totale di spedizione potrebbe essere appropriato.
  

Non offrire troppi coupon e promozioni a livello di carrello ai clienti, soprattutto al momento del pagamento. Il sovraccarico di scelte può portare all'abbandono. Leggi di più sul valore della varietà e sull'eccesso di scelta nel nostro post sul blog.

Esempi di interfaccia utente:

Chubbies Shorts mostra tutti gli sconti e i premi disponibili direttamente nel carrello.

Indica eventuali condizioni o restrizioni speciali

Se la promozione del carrello o i coupon hanno condizioni o restrizioni speciali, menzionalo nella pagina dei saldi, nei termini e condizioni e nel carrello, prima che i clienti completino l'acquisto.

Esempi di interfaccia utente:

Shein menziona le condizioni speciali della loro promozione nel carrello, ad esempio il numero massimo di prodotti promozionali che un cliente può acquistare e che gli articoli in saldo non possono essere restituiti.

Pagina di pagamento:

Includi un campo codice coupon

Come accennato in precedenza, è meglio includere il campo del codice coupon su entrambe, la pagina del carrello e la pagina di pagamento se qualcuno ha dimenticato di applicarlo nella pagina di visualizzazione del carrello.

Visualizza un messaggio di successo se il codice è stato applicato correttamente

Mostra un messaggio di successo e l'importo dello sconto per confermare che il codice coupon è stato applicato correttamente. Posiziona il messaggio vicino al campo del codice coupon per assicurarti che gli utenti lo vedano e associalo al codice coupon inserito. Avere quel messaggio mostrato in cima o in fondo alla pagina potrebbe creare confusione. Assicurati che il messaggio di successo non sia l'unica fonte di informazioni che il coupon è stato applicato correttamente. Visualizza lo sconto aggiunto nei totali dell'ordine, nel carrello e nella pagina di pagamento, specificando preferibilmente quale codice coupon ha applicato quale sconto (soprattutto se i clienti possono aggiungere più di un codice sconto all'ordine).

Esempi di interfaccia utente:

Pretty Little Thing mostra un segno di spunta e l'importo del risparmio applicato all'ordine dopo aver inserito un codice valido. Visualizzano anche l'importo dello sconto calcolato nei totali dell'ordine, specificando quale codice sconto ha applicato lo sconto.

Inoltre visualizzano nella vista mobile il codice coupon applicato e il relativo sconto:

{{CTA}}

Costruisci il tuo frontend con i componenti pronti inclusi nel nostro UI Kit

Inizia a costruire

{{ENDCTA}}

Visualizza un messaggio di errore per codici coupon non validi

Se il codice non è valido o le condizioni della promozione non sono soddisfatte, dovresti visualizzare un messaggio di errore pertinente che indichi il tipo di problema con il codice coupon. Non visualizzare lo stesso messaggio di errore in ogni caso in quanto non indicherà all'utente cosa non va e come risolvere il problema.

Visualizza il messaggio di errore proprio accanto alla casella del codice coupon, non nella parte superiore o inferiore della pagina poiché l'utente potrebbe non notare il messaggio di errore. Assicurati che il messaggio di errore sia visibile, ad esempio utilizzando il rosso o un altro colore contrastante.

Tipi di messaggi di errore da visualizzare:

• Il codice coupon non è valido.
• Il codice coupon è stato già utilizzato e non può essere riscattato più volte.
• L'importo dell'ordine è insufficiente o eccessivo per applicare il coupon (in tal caso, restituire le informazioni su quanto manca per beneficiare del coupon o quanto in eccesso c'è nel carrello).
• Il contenuto dell'ordine non soddisfa i termini della promozione (in tal caso, indica quali articoli devono essere rimossi o aggiunti per qualificarsi).
• Il coupon è scaduto.
• Altri motivi: se riesci a immaginare altri casi, crea un messaggio specifico per loro. Avere un messaggio predefinito per tutti gli altri casi a cui non avresti potuto pensare.

Esempi di interfaccia utente:

Summer Salt visualizza un messaggio di errore se il codice inserito non è valido o se le condizioni della promozione non sono soddisfatte. Incoraggiano i clienti a ricontrollare il loro codice. Avere i coupon pubblici visibili sulla barra multifunzione in alto aiuta a correggere l'errore.

Ecco come lo visualizzano sulla risoluzione mobile:

Metti in chiaro se il cliente può aggiungere più di un buono sconto o combinare promozioni

Se consenti l'aggiunta di un solo coupon all'ordine, una volta che un cliente aggiunge un codice coupon valido, fai in modo che il codice coupon scompaia o nascondilo. Sostituiscilo aggiungendo un pulsante "cambia il mio codice coupon" poiché i clienti potrebbero voler cambiare il codice coupon con un altro. Ricorda di avere un'opzione per rimuovere anche il codice coupon. Dovresti indicare chiaramente da qualche parte nella pagina che i clienti possono aggiungere un solo codice coupon per ordine.

Se i clienti possono aggiungere più codici coupon, una volta aggiunto un codice coupon, è possibile visualizzarlo come "aggiunto all'ordine" e lasciare che il campo del codice coupon si ricarichi e sia nuovamente vuoto, in modo che i clienti possano applicare un altro codice coupon.

Se i codici sconto e le promozioni del carrello non possono essere combinati, dovresti indicarlo chiaramente negli annunci promozionali, nei T&C e nella pagina di pagamento, soprattutto come messaggio di errore se qualcuno tenta di aggiungere un coupon in aggiunta agli articoli già in vendita.

Esempi di interfaccia utente:‍

Summer Salt aggiunge il coupon aggiunto sotto il campo del codice coupon e svuota il campo del codice coupon una volta applicato un coupon all'ordine, suggerendo agli utenti di applicare più di un coupon per ordine.

Pretty Little Thing consente ai clienti di applicare un solo codice coupon per ordine. Fanno scomparire il campo del coupon dopo che il coupon è stato applicato all'ordine e lo sostituiscono con un pulsante "cambia codice".

Aiuta gli utenti a trovare sconti per un'esperienza cliente elevata

Accanto al campo del codice coupon, dovresti visualizzare un collegamento alla cabina del cliente dove possono vedere tutti gli sconti disponibili o semplicemente un elenco di coupon e promozioni del carrello tra cui scegliere. Ciò rende molto più facile per i clienti utilizzare le tue offerte e può aumentare le dimensioni del carrello della spesa, se vedono che potrebbero beneficiare di uno sconto se aggiungono semplicemente alcuni articoli in più al carrello della spesa.

Esempi di interfaccia utente:

Shein si collega alla pagina "I miei coupon" che raccoglie i coupon disponibili accanto al campo del codice coupon al momento del pagamento e menziona i coupon disponibili pubblicamente sotto il campo del codice coupon.

Questo è il cockpit del cliente che mostra i coupon disponibili e i coupon scaduti che viene aperto facendo clic sul collegamento "I miei coupon".

Sull'app mobile, visualizzano i coupon come "avviso coupon". Se fai clic su quel pop-up, puoi vedere tutti i coupon disponibili e scegliere quale utilizzare.

Rifletti lo sconto ricevuto

Mostra eventuali sconti o restrizioni speciali applicati agli articoli nel carrello, sia promozioni a livello di carrello che coupon. I codici coupon devono essere convalidati e riportati nel costo prima di richiedere le informazioni di pagamento. Gli sconti a livello di carrello devono essere visualizzati a livello di prodotto o ordine, a seconda di cosa sono stati applicati. È essenziale che gli utenti possano vedere i risparmi e capire come viene calcolato il totale. La cosa migliore è anche mostrare quale codice coupon e quale promozione ha dato loro l'importo esatto di risparmio nel totale dell'ordine.

Le restrizioni speciali sugli articoli scontati devono essere comunicate prima che i clienti effettuino l'ordine.

Esempi di interfaccia utente:

Shein mostra gli sconti a livello di prodotto a livello di prodotto nel riepilogo del carrello.

Shein consente ai clienti di applicare codici sconto solo alla cassa. 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.

Sommario

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?

Iniziare

{{ENDCTA}}