E-commerce User Experience

Ben ritrovati dopo la pausa estiva!
Approfittiamo dell’occasione per rinfrescare alcuni concetti base di user experience utili quando si affronta la progettazione o il restyling di un e-commerce (ma validi anche per i siti web in generale).

Prima di scendere nei dettagli della progettazione delle singole pagine (home page, product listing page, scheda prodotto e carrello) partiamo da una considerazione-chiave (ben espressa nell’ultimo report di Nielsen & Norman su e-commerce):

Great content makes sales. Online shopping is purely an information experience.

Stando alle ultime ricerche sul comportamento degli utenti in questo campo, molti acquisti falliscono a causa di informazioni insufficienti o non chiare sui prodotti o sui servizi. Ciò dipende in larga misura dal fatto che quando acquistiamo on line ci troviamo a pagare un prodotto senza prima averlo visto (dal vivo), toccato, annusato (l’opposto di ciò che accade quando acquistiamo nei negozi fisici). La decisione di procedere all’acquisto dipende quindi dalle informazioni che riusciamo a reperire nel sito e non solo in relazione al prodotto stesso (e quindi immagini, prezzo, disponibilità, caratteristiche, review di altri utenti) ma anche riguardo alla modalità e ai tempi di consegna, alla politica dei resi e alla disponibilità negli store fisici più vicini. Vediamo quindi come in ogni singolo step del flusso di acquisto possiamo offrire tutte quelle “risposte” che il pubblico si aspetta in modo da presentare una esperienza soddisfacente e che si concluda con: “procedi all’acquisto”!

Home page

La Home ha il compito di introdurre il pubblico all’azienda, ai prodotti e al sito stesso. Come ci ricorda Steve Krug la home page “Ci dice che cosa il sito offre e soprattutto perché sceglierlo rispetto ai competitors”.
Una home page deve avere ritmo e respiro, sarà quindi un sapiente mix di informazioni e call to action in grado di mostrare fin da subito i prodotti e insieme trasmettere quali sono i valori e gli elementi distintivi rispetto ad altri e-commerce.

Dare respiro significa non presentare una pagina affollata di informazioni e caotica ma al contrario alternare sapientemente gli spazi bianchi alle immagini, al testo e alle call to action in modo che il visitatore possa apprezzare senza alcun sforzo gli elementi della pagina e possa comprendere al volo quali sono le aree con cui può interagire.
Se guardiamo agli e-commerce meglio progettati troviamo in prima posizione una hero image che incarna il tone of voice del brand e dei suoi prodotti, accompagnata da un payoff efficace e d’impatto. Seguono poi le cards con i prodotti di punta,  le categorie merceologiche principali e le promozioni del momento. In alcuni casi è utile inserire anche un “come funziona” per spiegare ad esempio quali step sono richiesti per completare un flusso di acquisto o la modalità di consegna a domicilio.

 

Infine le review di clienti che hanno già utilizzato l’e-commerce: come sappiamo l’esperienza di acquisto on line è un esperienza “solitaria” e leggere i pareri di altre persone ci aiuta a farci un’idea e può convincerci sulla bontà dell’offerta.

Se disponibili, inseriamo anche le recensioni dell’e-commerce pubblicate su mezzi di stampa. In ultimo ma assolutamente da non sottovalutare il footer, spazio prezioso perché lì possiamo richiamare le aree principali del sito e le informazioni sull’azienda, i social network, il customer care ecc…

Il ruolo della navbar

La navbar è la prima cosa a cui il pubblico pone attenzione perché permette in poche frazioni di secondo di farsi un’idea di ciò che il sito offre e come navigarlo.
La progettazione della navbar comporta un attento lavoro di organizzazione dei contenuti e una scelta minuziosa delle etichette, come nominiamo cioè le sezioni dell’ e-commerce, più queste saranno chiare, meno difficoltà avranno gli utenti a trovare ciò che cercano.
Per convenzione le navbar comprendono il logo, le sezioni del sito che corrispondono grosso modo alle categorie dei prodotti (uomo_bambino_donna; oppure vestiti_scarpe_borse ecc..) e i cosiddetti link di utility, di solito posizionati sulla destra che ci spiegano come navigare il sito: search, account, carrello, lingue.

 

 

 

 

Product listing page

La product listing page mostra i singoli prodotti di una singola categoria, di solito ci si accede direttamente dalla home page. Questa pagina gioca un ruolo sempre più determinante negli e-commerce perché, oltre ad offrire una panoramica dei prodotti stessi, permette di procedere direttamente all’acquisto già a questo livello di navigazione: dai test di usabilità emerge che molti utenti, ad esempio quelli abituali o coloro che conoscono già il prodotto, preferiscono aggiungere il contenuto al carrello già da questa pagina senza dover visitare un’ulteriore pagina che ne illustra i dettagli  (la scheda prodotto).

Alla luce di queste considerazioni la product listing page deve essere ben formattata e fornire quante più informazioni possibili; quindi:

• nella parte alta inseriremo i  filtri e ordina per necessari per favorire la trovabilità dei prodotti in base alle esigenze del visitatore;

• i prodotti saranno presentati in cards con più immagini dello prodotto stesso, il prezzo e il rating

 

 

 

Scheda prodotto

Come accennavamo all’inizio la caratteristica principale dell’esperienza di acquisto on line è che questa avviene senza che l’acquirente possa prima toccare, annusare, vedere dal vivo il prodotto. La product page è il luogo deputato a fornire tutte le informazioni di cui il pubblico può aver bisogno per decidere se aggiungere o meno il prodotto al carrello. Vediamo come strutturare la pagina.

• Nella parte alta inseriamo l’immagine del prodotto, il titolo, il prezzo e la call to action che può essere singola “aggiungi al carrello” o accompagnata da “acquista subito”.
• La CTA è l’elemento principe della pagina e dovrà essere visibile più di ogni altra cosa, con un colore diverso da tutti gli altri usati e posizionata a portata di mouse o di pollice. Per rendere l’interazione efficace è necessario che al tap o al click sulla CTA appaia un feedback ben evidente: del tipo “aggiunto al carrello” e accompagnato da una finestra di dialogo che segnali che il prodotto è nel carrello con possibilità di procedere immediatamente all’acquisto.

• Seguono le informazioni del prodotto che andranno ben dosate per permettere sia una lettura veloce (scan della pagina) sia una lettura approfondita, per questo l’ideale è ordinare i contenuti in tab o paragrafi con titoli chiari.
• In posizione ben visibile inseriamo i tempi e le modalità di consegna insieme alle politiche dei resi con la possibilità di contattare il customer care nel caso in cui il visitatore avesse dei dubbi. Questo tipo di contenuti è considerato critico perché, dai risultati di ricerche sul comportamento degli utenti che acquistano on line,  molti abbandonano e-commerce proprio perché hanno dubbi su quando riceveranno il prodotto e sulla modalità di restituzione del prodotto.

• Ecco i recenti trend relativi alle review: 1) presentare le foto del prodotto caricate da altri utenti per mostrare come il prodotto viene utilizzato effettivamente nella vita reale; 2) aggiungere dettagli relativi agli utenti che hanno lasciato commenti  (per permettere agli acquirenti di immedesimarsi) e 3) fornire la possibilità di filtrare e ordinare le review.

• Terminiamo la pagina con un’offerta di prodotti simili sullo stile di Amazon o YOOX (dello stesso stilista, chi ha visualizzato questo prodotto ha visualizzato anche).

 

 

Carrello

Il check out flow costituisce uno dei passaggi più delicati e critici della esperienza di acquisto on line.
Vediamo quali sono le best practices da seguire:

• Checkout first, login after. Converting sales becomes more important than collecting data. Queste sono le parole chiave in tema di progettazione del carrello e i numeri supportano queste tesi: il 37% degli utenti abbandonano e-commerce perché pensano sia richiesta una creazione di account; l’85% degli utenti procedono all’acquisto come utenti guest. Alla luce di questi numeri, è consigliabile valutare la possibilità di chiedere solo i dati necessari per l’acquisto e la consegna, rimandando a uno step finale, la richiesta di creare un account utile per i futuri acquisti.

• E’ ormai una convenzione eliminare la navbar quando l’utente accede al carrello per “costringerlo” a focalizzarsi sui passaggi richiesti, impedendogli di tornare indietro ad altre pagine del sito. Ebbene questa prassi sembra essere controproducente perché i visitatori amano passare più volte dal carrello alla lista dei prodotti perchè indecisi o perchè ne vogliono aggiungere degli altri. Per non creare un senso di frustrazione è bene quindi lasciare libertà di movimento agli utenti presentando una dove siano visibili le altre aree del sito con cui utente può voler interagire ancora. Una testa alternativa del check out dovrebbe quindi contenere almeno il logo (link alla HP); link a service information; spese spedizione, ecc…

Infine:

1. curiamo la formattazione dei campi per l’inserimento di testi e numeri; avendo cura nel mobile di far apparire le keyboard giusta
2. preferiamo le label chiare da inserire nei bottoni delle call to action che esprimano senza ombra di dubbio quale sia lo step successivo che utente visualizzerà: preferiamo quindi un «continue to billing» a un generico “continue”
3. mostriamo i messaggi di errore evidenziando il campo a cui si riferiscono
4. offriamo la “autofill” option soprattutto per il mobile
5. mettiamo in bella vista i loghi relativi al pagamento sicuro per tranquillizzare il pubblico sulla affidabilità delle transazioni, ricordiamoci che il 20% dei visitatori abbandona il carrello perché non appare loro sicuro.

Costanza Mosi
UX Designer
LinkedIn