Empty State, cosa sono e a cosa servono

Nel settore del design delle interfacce, con la parola “empty state” (letteralmente stato vuoto) si intendono tutte quelle schermate che, per un motivo o per un altro, non restituiscono risultati.

Project empty state by Murat Mutlu

Un esempio

Prova a pensare ad un e-commerce. Stai cercando un prodotto specifico e quindi utilizzi la barra di ricerca per scrivere il nome del prodotto che desideri. Ma purtroppo l’e-commerce potrebbe non avere nulla da mostrarti perché magari non tratta quel prodotto oppure perché hai scritto male il nome.
Cosa verrà mostrato? Ci auguriamo almeno una schermata che indicherà che non è stato possibile trovare ciò che cercate.
È una buona occasione, dopo una schermata “deludente”, per consigliare all’utente un’azione da compiere (ad esempio controllare l’ortografia, fare un’altra ricerca o sfogliare i prodotti per categoria).

Ecco cosa mostra Amazon.it:

Amazon ci dà qualche consiglio e se siamo loggati mostra gli ultimi articoli visualizzati.

Mediaworld.it invece non si preoccupa neanche di avvisarci che la ricerca non ha restituito nulla dopo aver applicato dei filtri (forse per vergogna):

E Mediaworld muto.

Basta qualche esempio per far capire l’importanza che hanno gli empty state in termini di esperienza utente.

Se pensiamo alle app per smartphone i casi in cui possano essere restituiti degli empty state aumentano. Pensa alla connessione assente o a un timeout causato da una connessione lenta.

Facebook e la sua tab delle richieste di amicizia quando non abbiamo connessione.

Zero Data State

Parliamo di stato zero data quando l’applicativo parte da uno stato, con appunto, zero dati all’interno. Questa è una buona occasion per mostrare un pulsante, una call to action che inviti l’utente a fare la prima mossa.

Esempio: Pensa ad una classica app per le note. È ovvio che dopo il primo avvio ancora l’app non abbia alcuna nota da mostrare, quindi indicherà che non c’è ancora nulla e magari ti inviterà ad inserire la tua prima nota.


Miglior Risultato

Alcune applicazioni quando non trovano risultati a seguito di una query di ricerca, cercano di mostrare comunque qualcosa che si avvicini il più possibile: il miglior risultato.

Pensa ad un qualsiasi ecommerce, piuttosto che non mostrare alcun prodotto potrebbe mostrare una lista di prodotti in un qualche modo collegati alla tua ricerca.

È comunque bene specificare che sono dei suggerimenti e non risultati di una corrispondenza esatta con le parole cercate.

Pensa a quale impatto lato business avrebbe un’accortezza del genere in un ecommerce da milioni di visite.

Strafalcione su Amazon che da bravo ecommerce mi suggerisce qualcosa che potrebbe interessarmi

Spesso ci imbattiamo in casi dove non vengono neanche minimamente pensati gli empty state, questo aspetto viene ignorato o sottovalutato e questo non fa altro che aumentare la delusione dell’utente lasciandolo spaesato. Senza dirgli cosa è successo e perché non viene mostrato nulla, dovrà essere lui a fare delle supposizioni con conseguente frustrazione e probabile chiusura della pagina o dell’app.

Empty State, un po’ d’ispirazione

Se stai cercando un po’ d’ispirazione per i tuoi empty state, fai un salto su EmptyStat.es, un sito completamente dedicato agli stati vuoti, oppure dai un’occhiata a questo articolo su Hongkiat.