Empty states e suggerimenti UX

1) Perché sono necessari stati vuoti

• spiega perché è vuoto
• Mostra cosa fare dopo,
• offre un primo passo sicuro,
• riduce l'ansia e risparmia tempo.

2) Tipologia di stati empty

1. Primo avvio (first-time) - L'utente non ha ancora fatto nulla.
2. Nessun dato (zero data) - Le entità non sono state create o l'elenco è vuoto.
3. Filtri/ricerche - Le condizioni sono state eliminate.
4. Errore/indisponibilità temporanea - rete/server, ma i dati sono in linea di principio.
5. Nessun permesso/restrizione. Accesso negato, richiesta CUS/ruolo/limite.
6. Manutenzione - lavoro programmato, attesa.

3) Struttura della carta empty

Icone/grafica (non sovraccaricare; Contrasto (AA).
Il titolo è «Qui è ancora vuoto».
Motivo/contesto: «Non hai ancora aggiunto» .../« Il filtro non ha trovato alcun riscontro ».
1-2 azioni (CTA) - Primario (script principale), secondario (alternativa).
Link di aiuto (opzionale).
Livello pagina - Mantenere la navigazione e i filtri abituali, senza che la schermata si blocchi.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Tonalità e testo (copiating UX)

Chiaro e gentile. Evitare «Errore 0x»....

Il motivo è l'azione. Il filtro VIP ha escluso tutte le registrazioni. Reimpostare il filtro?"

Senza colpa. Non accusare l'utente di essere vuoto.
Un pensiero è una frase.
Localizzazione: evitare metafore culturali; piazzare + 20-30% della lunghezza del testo.

5) Grafica e visualizzazione

Neutrali, discreti; In un argomento dark, aumentare la luminosità delle illustrazioni.
Non usare le illustrazioni come unico supporto di significato.
Scala fissa; non rompere la griglia e la linea base.

6) CTA e alternative

Il CTA primario è il passo successivo principale (creazione/deposito/sottoscrizione).
Secondario - Visualizza demo, Importa, Reimposta filtri.
Il limite di scelta è fino a 2 CTA; Il resto è in «Ancora».
In caso di rischi/pagamenti, un testo trasparente sulle conseguenze e le cancellazioni.

7) Stati vuoti per script

7. 1 Primo avvio

Chequlist di 3-5 passaggi: Aggiungi metodo di pagamento, Seleziona provider.
Pulsante Ignora + collegamento a hyde.

7. 2 Nessun dato

Spiegazione breve del perché è vuoto + CTA Crea/Importa.
Suggerimento: «È possibile caricare CSV».

7. 3 Filtri/ricerca

Mostrate quali filtri sono attivi e il pulsante Reimposta.
Suggerire corrispondenze o richieste alternative.

7. 4 Errore/indisponibilità

"Abbiamo affrontato un problema. Provare più tardi + Ripeti/Stato del sistema.