Fifback UX in stati vuoti

1) Quali sono gli stati vuoti e perché sono necessari

Uno stato vuoto è una schermata/widget in cui il contenuto principale è temporaneamente mancante, prima della prima azione, dopo la pulizia, con il risultato zero, se il download è sbagliato, se non si dispone di diritti/accesso.

• Spiegare «perché non c'è niente».
• Mostra il valore di una sezione
• suggerire un passo successivo chiaro (o più a scegliere);
• ridurre l'ansia e prevenire la cura.

Buon stato vuoto = contesto + benefici + azione.

2) Tipologia di stati vuoti

1. Zero primario (first-time empty) - L'utente non ha ancora creato o configurato nulla.
2. Ricerca/filtro zero - La query non ha dato risultati.
3. Vuoto temporaneo: i dati vengono caricati o la coda viene eseguita.
4. Limitazione/diritto: nessun accesso, livello di verifica insufficiente.
5. Cancellato dall'utente: Cestino/Cronologia cancellato.
6. Problema tecnico: rete/servizio guasto, retrai.

3) Principi di progettazione

Contesto: si tratta della causa specifica del vuoto.
Il valore è un'azione: prima perché questa sezione, poi cosa fare.
Un CTA principale è secondario (learn more/FAQ), se necessario.
Breve e particolare: 1-2 frasi + pulsante chiaro.
Supporto visivo: l'icona/immagine supporta il significato, non distrae.
Evitare l'impasse, c'è sempre un modo per andare avanti.
Coerenza del tono: amichevole e sereno; nessun scherzo nelle fasi critiche (pagamenti, sicurezza).
A11y e localizzazione: letta dallo screener, correttamente inclina, tiene conto della lunghezza delle righe.

4) Wireframe di stato vuoto (modello)

Titolo (opzionale, 1 riga) - Affermazione del valore o del motivo.
Testo (1-2 frasi) - «perché vuoto» + «cosa dopo».
Il CTA primario è l'azione principale.
Secondary 100/link - aiuto/regole/documentazione.
Visivo (facoltativo) - leggero 24-96 px, da non sovraccaricare.

5) Pattern script

5. 1 Onboording/primo zero

L'obiettivo è portare al primo successo.
Testo: Per visualizzare i suggerimenti personali, compilare il profilo e selezionare gli interessi.
CTA: Riempi profilo/Seleziona interessi.
Consiglio: aggiungi un micro-indicatore di sforzo/tempo: «Ci vorrà un minuto».

5. 2 Ricerca/filtri = risultato zero

L'obiettivo è aiutare a correggere la richiesta.

Testo: "Niente trovato per "live blackjack". Provare con blackjack o rimuovere il filtro Provider: X

CTA: Reimposta filtri secondario: Apri directory.

5. 3 Pagamenti/portafogli vuoti

Obiettivo: stimolare l'aggiunta di un metodo/primo rifornimento.
Il testo è: «Salva il metodo di pagamento - i supplementi e le conclusioni saranno più veloci».
CTA: Aggiungi metodo di pagamento secondario: Regole e commissioni.

5. 4 Verifica/accesso

Scopo: spiegare in modo trasparente il vincolo e il modo di rimuovere.

Testo: "Questa sezione è disponibile dopo la conferma dell'identità. Di solito ci vogliono fino a 2 minuti "

CTA: «Convalida» secondario: «Perché è necessario?»

5. 5 Dati nel percorso/vuoto temporale

L'obiettivo è ridurre l'ansia.

"Raccogliamo i tuoi dati. Di solito ci vogliono fino a 30 secondi. Se lasciate la pagina, vi avviseremo quando sarà tutto pronto"

CTA: «Capisco» secondario: «Cosa succederà?»

5. 6 Dopo la pulizia/rimozione

Obiettivo: confermare l'azione e suggerire il passo successivo.

Testo: "Cronologia cancellata. Le nuove operazioni verranno visualizzate dopo la prossima aggiunta

CTA: «Ricarica il conto».

5. 7 Errore/Retrai

Obiettivo: un percorso di recupero chiaro.

Testo: "Impossibile caricare i dati. Controllare la rete o riprovare

CTA: «Ripeti» secondario: «Stato del sistema».

6) Microtestamento: modelli finiti

• Ci saranno i giochi preferiti quando aggiungi il primo. [Aggiungi ai preferiti] '

• "Su richiesta "{query}" non è stato trovato nulla. Aggiornare la query o reimpostare i filtri. [Reimposta filtri] '

• "Non hai ancora i metodi salvati. Aggiungere una carta o portafogli per accelerare i pagamenti. [Aggiungi metodo] '

• La funzione non è disponibile senza la conferma dell'età. Ci vorranno 3 minuti. [Conferma età] [Perché è necessario?] '

• "Le statistiche delle ultime 24 ore... Di solito è fino a 30 secondi. Mostreremo la notifica quando è tutto pronto"

• Strumenti non disponibili. Stiamo già sistemando. Provare più tardi o verificare lo stato. [Ripeti] [Stato del sistema] '

7) Linguaggio visivo e illustrazioni

Usa leggeri grafici monocromi/bicolore per evitare di discutere con il CTA.
Dimensioni e indentazioni sono come la carta dei contenuti (coerenza visiva).
Non rappresentare scene comiche in scenari stressanti (pagamento/sicurezza).

8) Localizzazione e disponibilità

Posiziona la riserva sulla lunghezza delle righe (DE/TR più lunga).
Tradurre formati numerici, valuta, date localmente.
Per gli screener: rolle = «status», aria-live = «polite/assistenziale» per l'altoparlante.
Non inserire il significato solo nell'immagine, doppiare il testo.
Controlla la lettura su 320 px e il contrasto WCAG.

9) Metriche ed esperimenti

• CTR per CTA principale di stato vuoto
• conversione al «primo successo»
• Tempo fino alla prima azione;
• frequenza di ritorno allo schermo senza progressi
• Percentuale di risultati di ricerca zero
• richiami di supporto nel copione.

• Titolo condiviso vs specifico;
• Il verbo CTA dell'azione vs è neutro;
• Aggiunta di una valutazione del tempo
• la presenza di un CTA secondario (FAQ) e l'ordine dei pulsanti
• immagine vs icona vs senza visualizzazione.

10) Anti-pattern

«Qui è vuoto» senza una spiegazione o un passo.
Battute in fasi critiche (pagamento, sicurezza).
Un CTA «Scopri di più» senza alcun collegamento al contesto.
«Deve essere aggiunto». Scrivi attivamente: «Aggiungi»...
Paragrafi lunghi: 1-2 frasi al massimo.
Playsholder invece di etichetta nelle forme - peggiora A11y e comprensione.
Vincoli nascosti («istantaneamente», anche se è possibile ritardare).

11) Foglio di assegno prima del lancio

• Capisco perché è vuoto?
• C'è valore di partizione in un'unica frase?
• C'è un CTA principale e, se necessario, secondario?
• Il testo è breve (≤ 140 caratteri) e specifico?
• È stata aggiunta una valutazione del tempo/sforzo, se necessario?
• La tonalità corrisponde allo script (calma/supporto)?
• Localizzazione e A11y verificate (attributi aria, contrasto)?
• L'immagine non domina CTA?

12) Esempi di prima/dopo

Catalogo giochi (primo zero)

Fino alle: «Non c'è ancora niente»

Dopo: "Raccogli il nastro. Scegli 3 generi preferiti - iniziamo a raccomandare. [Seleziona generi] '

Ricerca zero

Fino a: «Niente trovato»

Dopo: "Per "high-limit roulette" non ci sono risultati. Rimuovere il filtro «High-limit» oppure provare «roulette». [Reimposta filtri] '

Pagamenti

Fino a: «Nessun metodo di pagamento»

Dopo: "Salvate la carta o il portafoglio - le ricariche e le conclusioni saranno più veloci. [Aggiungi metodo] [Commissione e scadenze] '

Verifica

Fino a: «Nessun accesso»

Dopo: "La sezione è disponibile dopo la conferma dell'identità. Ci vogliono 3 minuti. [Convalida] [Perché è importante] '

13) Incorporazione nel sistema di progettazione

• «title» (riga opzionale)
• «body» (testo breve 1-2 frasi)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• «icon/illustration» (opzionale)

Memorizzare i testi nei file i18n accanto al componente, supportare chiavi e descrizioni, collegare tone-map (tonalità e vocabolario per situazioni).

14) Costruzione rapida (copia e usa)

• Titolo: Inizia dal primo passo
• Il testo è: «Ci saranno raccomandazioni non appena sceglierai gli interessi».
• CTA: Scegli interessi
• Secondario: «Come funziona?»

• Il testo "Per "{query}" non è stato trovato. Reimpostare i filtri o aggiornare la query
• CTA: Reimposta filtri
• Secondario: Directory

• Testo: "La funzione è disponibile dopo la conferma dell'età. Di solito è fino a 2 minuti
• CTA: «Conferma età»
• Secondario, «A cosa serve?»

• "Raccogliamo i dati di 24 ore. Di solito è fino a 30 secondi. Lo diremo quando è tutto pronto"
• CTA: «Ok»

Scorciatoie totali

Contesto + valore + azione in una sola pila.
Uno dei principali CTA senza competizione sul peso visivo.
Breve e particolare: 1-2 frasi.
La soluzione è sempre l'impasse, non ci sono schermi senza uscita.
La localizzazione e l'A11y sono a livello di componente.