Nel mio ruolo di UX/UI Designer in YITH (ci conosci? siamo la prima azienda indipendente al mondo nello sviluppo di plugin per WooCommerce) in tutto il 2020 mi sono occupata di ridisegnare le interfacce dei plugin per renderli più usabili e migliorare in generale la user experience dei nostri clienti.

Tra le diverse cose che ho analizzato e riprogettato una delle più interessanti riguarda senz’altro gli “empty state” (“stato vuoto”, in italiano), ovvero le schermate che sono di norma popolate da dati e che in specifici momenti dell’user flow appaiono vuoti.

Una schermata “empty states” che tutti più o meno conosciamo è, ad esempio, quella che vediamo quando in un e-commerce apriamo una pagina carrello in cui non abbiamo ancora aggiunto alcun prodotto.

Questo è l’empty state della pagina carrello di Zalando che, all’utente che accede al carrello vuoto, mostra un’icona, il testo “non hai nessun articolo nel carrello” e due call to action, una che reindirizza l’utente alla pagina di login e una che lo reindirizza alla pagina dei prodotti:

 

 

La maggior parte dei nostri plugin ha sezioni che contengono informazioni (perlopiù inserite in tabelle) che non sono presenti all’installazione del plugin e che saranno disponibili solo dopo un certo lasso di tempo.

Per esempio, nel caso del plugin Recover Abandoned Cart, abbiamo una tab che conterrà una lista dei “carrelli recuperati”. Ma la pagina, non appena installato il plugin, si presenta cosi:

 

In pratica dato che la tabella è vuota e non contiene ancora nessuna informazione, l’utente si ritrova l’intestazione della tabella ripetuta due volte (perché su WordPress le tabelle hanno intestazione in alto e ripetuta di nuovo in basso) e nessun contenuto al centro.

Va da sé che occorre una soluzione più corretta perché una visualizzazione del genere confonde l’utente.

Il primo tentativo è stato di aggiungere una dicitura nella tabella (“Nessun carrello recuperato”) per far capire all’utente che in quello spazio vuoto verranno mostrati i carrelli recuperati grazie alle e-mail promozionali inviate attraverso il plugin:

 

 

Ma mostrare una tabella vuota non è comunque un granché, visivamente.

Il passo successivo è stato quello di eliminare del tutto la tabella quando ancora non sono presenti informazioni da mostrare e di spostare il messaggio sotto il titolo, in questo modo:

 

 

 

Diciamo che, a livello di esposizione degli elementi, a questo punto è okay.

Una pagina empty state dovrebbe, infatti, mostrare sempre:

  • Un titolo che fornisce un feedback chiaro e immediato all’utente;
  • Un testo che fornisca maggiori informazioni e lo rassicuri.

Ma quel messaggio “Non hai recuperato nessun carrello” sembra avere una valenza negativa un po’ fastidiosa.

Il nostro obiettivo è di rassicurare l’utente e farlo sentire a suo agio per smussare l’inevitabile “delusione” che proverà al ritrovarsi in questa pagina ancora vuota.

Perché è importante progettare una versione “empty state” positiva delle pagine per offrire una migliore user experience?

In una schermata empty space positiva, l’utente:

  • Capisce immediatamente che contenuti dovrebbe trovare in quella pagina e perché al momento ne è priva;
  • Viene rassicurato del fatto che non c’è nessun errore di visualizzazione;
  • Viene spinto a monitorare la pagina perché sa che, presto o tardi, questa conterrà le informazioni che desidera;
  • Viene spinto a compiere azioni attraverso specifiche call to action, favorendo l’interazione tra l’utente e l’interfaccia (questo nel caso di sezioni vuote che l’utente deve popolare in prima persona, come creare una nuova email, creare un task, aggiungere una nota, creare una playlist, ecc.)

A questo punto mettiamo in pratica un po’ di buon UX Writing, la disciplina che ci insegna come creare micro testi capaci di colpire l’attenzione e di migliorare la user experience di un utente che interagisce con una interfaccia.

L’UX Writing è quella cosa meravigliosa e magica capace – tra le altre cose – di trasformare un’interfaccia noiosa e prevedibile in un’esperienza piacevole:

Mi sono quindi spulciata un po’ il sito Emptystat.es in cerca di ispirazione e ho capito alcune linee guide che potevano sembrarmi utili:

  • Il testo deve essere amichevole e informale. Un tocco di simpatia può rendere l’interfaccia più gradevole;
  • Per una buona leggibilità il testo deve essere breve e non superare di troppo la dimensione dell’icona o dell’illustrazione inserita per rappresentare il contenuto;
  • Il contenuto testuale deve essere coerente con lo scopo della pagina: questo non è il posto adatto a inserire pubblicità, immagini o banner che non sono inerenti al contenuto che l’utente si aspetta di trovare.
  • Se è utile inserire una call to action è bene farlo, ma in ogni caso non vanno inserite più di due call to action.

 

Alla fine ho disegnato la nuova schermata del plugin in questo modo:

Come ho migliorato la user experience di questa schermata?

  • Ho aggiunto un’icona per creare un punto focale nel layout e rappresentare visivamente il contenuto che verrà mostrato nella pagina;
  • Ho aggiunto un testo informale e positivo che rassicura l’utente “Non ci sono ancora carrelli recuperati, okay, Ma non ti preoccupare, crea una campagna di email marketing e presto grandi cose appariranno in questa pagina!”
  • Ho aggiunto una call to action che guida l’utente al processo per configurare l’invio di una e-mail con lo scopo di recuperare i carrelli abbandonati.

Confrontando la prima schermata con la tabella vuota e quest’ultima versione è facile intuire quale offre un feedback migliore all’utente che installa e utilizza il plugin, non credi? ;)