Empty state

Cosa sono gli empty state

Gli empty state sono degli stati che comunicano all’utente l’assenza di dati o contenuti da visualizzare. Nello specifico, fanno riferimento a una rappresentazione visuale di un'interfaccia utente quando non ci sono contenuti da mostrare in una determinata area o componente.

Compaiono di solito all'inizio dell'interazione con un prodotto o una pagina, ma vengono impiegati anche quando i dati sono stati eliminati o sono temporaneamente non disponibili.

Aiutano infatti a gestire le situazioni in cui nella pagina non ci sono componenti con cui interagire, informando e guidando l’utente nelle azioni successive.

Anatomia

Elementi di illustrazione

In base al linguaggio visivo utilizzato, per caratterizzare l'empty state è possibile usare elementi iconografici, immagini o illustrazioni per enfatizzare il messaggio sottostante. Questi elementi sono decorativi, non interattivi e non richiedono un suggerimento o un testo alternativo.

Di norma, l’empty state si adatta alle dimensioni del contenitore in cui è inserito, come una modale o una sezione di pagina.

Gli elementi di illustrazione della stessa tipologia possono risultare graficamente diversi. Di seguito un esempio di dimensioni fisse predefinite:

• large: per contenitori di grandi dimensioni, come tabelle e stati vuoti per un'intera schermata;
• medium: per contenitori di medie dimensioni, come le finestre di dialogo;
• small: per contenitori di piccole dimensioni, come le carte;
• extra small: per contenitori molto piccoli, come tessere, schede e celle di tabella.

Se lo spazio è insufficiente, è possibile evitare di inserire l’illustrazione.

Titolo e testo descrittivo

Per garantire una buona leggibilità, il titolo di un empty state dovrebbe limitarsi a una sola riga, mentre per il testo descrittivo si consiglia un massimo di tre righe. Entrambi i blocchi di testo dovrebbero avere un limite di 65 caratteri per riga.

Il testo descrittivo è un elemento opzionale del pattern relativo all'empty state. Utile per descrivere meglio ciò che viene comunicato con il titolo, aiuta l'utente a capire cosa sta succedendo e quali azioni deve compiere per continuare il flusso.

Configurazioni

Esistono due tipologie di empty state:

• con CTA, quando l’utente deve compiere un’azione specifica, come valorizzare le righe di una tabella;
• senza CTA: quando l’utente non può compiere nessuna azione, come in caso di problemi tecnici.

Quando usare gli empty state

• Per il primo utilizzo o accesso alla pagina.
• Per fornire feedback durante le azioni di un utente, per esempio nel caso in cui non ci sono risultati di ricerca.
• Per gestire errori vuoti, come gli errori 404.

Casi d’uso

I principali casi d’uso in cui sono presenti gli empty state sono:

• Nuova ricerca: valido per avviare una ricerca o per interrogazioni con filtri. L’empty state invita a compilare i campi disponibili facendo attenzione a quelli obbligatori.
• Primo utilizzo o azione specifica: applicato quando la tabella è vuota perché deve essere compilata manualmente. L’empty state incoraggia l’utente a inserire i dati.
• Carica file: l’utente può trascinare un file sulla schermata o caricarlo tramite l’apposita CTA.
• Nessun risultato: si presenta quando una ricerca non restituisce risultati e la tabella resta vuota, senza dare la possibilità di aggiungere o modificare i contenuti.
• Pagina non trovata: corrisponde a errori come il 404. Informa che la pagina cercata non è disponibile o non esiste.

Buone pratiche di UX writing

Gli empty state svolgono un ruolo fondamentale nella comunicazione con l’utente nei momenti in cui una pagina, un modulo o una tabella non presentano contenuti.

Attraverso testi chiari e contestuali, è possibile trasformare un’assenza di dati in un’opportunità per guidare l’utente, fornire informazioni utili e incoraggiare all’azione.

Per questo, è importante bilanciare tono di voce, precisione e gerarchia visiva, in modo da non generare ambiguità né sovrapposizioni con elementi interattivi come le CTA.

Nello specifico, gli empty state devono:

• indicare nel titolo cosa manca nella pagina o qual è l’azione da compiere;
• fornire un corpo di testo informativo, in cui si specifica l'azione che deve/può compiere l'utente nel momento in cui accede alla pagina, evitando formule ambigue o che imitano i toni delle CTA;
• presentare CTA brevi, che facciano capire all’utente l'obiettivo a cui corrispondono;
• accompagnare il messaggio con un'icona o un'immagine coerente con il contenuto testuale.

Accessibilità