Dieci design originali di empty state per il primo utilizzo, le ricerche senza risultati, le inbox svuotate, gli errori e i permessi mancanti, con codice modificabile e un generatore di messaggi accessibili.
Un empty state è ciò che mostra una schermata quando non c'è ancora nulla da elencare: un account nuovo, una ricerca senza corrispondenze, una inbox svuotata o un caricamento fallito. Ognuno richiede una spiegazione chiara e un modo per andare avanti. I dieci design qui sotto coprono tutti i casi comuni con HTML e CSS modificabili, più un generatore che scrive markup accessibile.
I cinque tipi di stato vuoto e cosa dovrebbe offrire ciascuno
Le schermate vuote sono la prima cosa che incontrano i nuovi utenti e il punto in cui si arriva dopo una ricerca andata male, eppure spesso sono un riquadro grigio con scritto Nessun dato. Questi esempi trattano ogni tipo di vuoto in modo diverso, perché il messaggio giusto dopo un errore di battitura non è quello giusto il primo giorno. Ogni snippet è autonomo e usa forme semplici invece di illustrazioni stock.
È la schermata o il pannello mostrato quando una lista, una tabella, una dashboard o una ricerca non ha nulla da visualizzare. Quelli buoni spiegano il perché e indicano l'azione successiva; quelli scarsi mostrano spazio vuoto o un semplice Nessun dato.
Usa un vero titolo e del testo, non solo un'immagine. Marca le immagini decorative con alt vuoto. Se il messaggio di vuoto appare dopo un filtro o una ricerca senza ricaricare la pagina, inseriscilo in un elemento con role="status", che ha implicitamente un'impostazione live di tipo polite, e non spostarci il focus.
Può aiutare al primo utilizzo, per esempio un progetto demo che l'utente può aprire ed eliminare. Etichettalo chiaramente come esempio, così nessuno lo scambia per i propri dati.
Ripeti il termine, di' che nulla corrisponde e suggerisci soluzioni: controllare l'ortografia, rimuovere un filtro o sfogliare una categoria. Un pulsante Azzera filtri con un solo clic è l'azione singola più utile.
Un empty state significa che davvero non c'è nulla da mostrare. Un errore significa che i dati potrebbero esserci ma non è stato possibile caricarli. Indica di quale si tratta, perché dire a qualcuno che non ha ordini quando in realtà il server ha avuto un problema è allarmante.
Un contorno tratteggiato suggerisce dove apparirà l'elemento. Il pulsante sta dentro l'area vuota, così nessuno deve cercarlo.
Offrire crea o importa rispetta chi ha già i propri dati altrove.
Una breve lista con il primo passo evidenziato trasforma una dashboard vuota in un piano.
Una riga di esempio chiaramente segnalata mostra come sarà la schermata una volta piena.
Ripeti il termine, suggerisci soluzioni e lascia sempre un modo per tornare a tutti gli elementi.
Mostrare i filtri attivi come chip rimovibili indica subito la causa.
Alcune schermate vuote sono una buona notizia. Basta una conferma tranquilla; nessun pulsante necessario.
Descrivi il problema con onestà, di' che i dati sono al sicuro se lo sono, e offri un nuovo tentativo.
Di' alle persone a chi chiedere, e dai loro un pulsante che faccia la richiesta.
Mantenere le intestazioni delle colonne mostra cosa apparirà, e una singola riga le attraversa tutte con il messaggio.
Le fatture che invii appariranno qui, con il loro stato e la data di scadenza.
Crea una fattura
Generatore di empty state
Scrivi titolo, frase e pulsante, scegli il tipo e copia HTML e CSS accessibili. Output iniziale:
Spiegazione
Etichetta del pulsante
Primo utilizzo
Nessun risultato
Errore
Anteprima del tuo empty state
Copia HTML
Copia CSS
Inizia gratis · Nessuna carta di credito richiesta