Design degli stati vuoti: guida il passo successivo quando mancano i contenuti

1. Individua perché lo spazio è vuoto

Considera lo stato vuoto come un'informazione sul prodotto, non come un'occasione decorativa. Chiediti cosa è accaduto subito prima della comparsa della schermata, cosa sa il sistema e se la persona può cambiare la situazione. NN/g descrive gli stati vuoti come opportunità per comunicare lo stato, favorire l'apprendimento e offrire accesso alle attività principali. Per coglierle, bisogna prima identificare correttamente lo stato.

In particolare, non mostrare «Nessun elemento» mentre una richiesta è ancora in corso. Mantieni visibile un indicatore di caricamento o uno scheletro finché il risultato non è noto. Se la richiesta fallisce, spiega l'errore e come recuperare. Se riesce ma restituisce zero elementi, comunica che non esistono contenuti corrispondenti. Questa distinzione evita che un ritardo temporaneo o un problema di sistema venga scambiato per un risultato reale.

2. Scrivi testi coerenti con la causa

Usa un titolo per nominare lo stato e un testo di supporto per spiegarne il significato o indicare come procedere. Il titolo deve essere facile da scorrere. Aggiungi una frase solo se risponde a una domanda reale. Le indicazioni di Apple sulla scrittura raccomandano passaggi successivi chiari nelle schermate vuote, etichette orientate all'azione e messaggi di errore diretti che spieghino come risolvere il problema. Evita battute che oscurano il significato, titoli vaghi come «Qui non c'è niente» o testi che attribuiscono la colpa alla persona.

Per esempio, una schermata ipotetica di elementi salvati al primo utilizzo potrebbe dire «Qui troverai le guide salvate», seguito da «Salva una guida per ritrovarla in seguito», con un pulsante «Esplora le guide». Una checklist completata potrebbe dire «Hai finito tutto» e offrire «Vedi le attività completate». Gli esempi descrivono realtà diverse: uno insegna come popolare una funzionalità; l'altro conferma un risultato positivo.

Per una ricerca riuscita senza corrispondenze, un messaggio ipotetico potrebbe essere «Nessun progetto corrisponde a “orchidea”» e suggerire «Prova un termine più generico o rimuovi i filtri». Conserva la query e rendi reversibili le modifiche ai filtri quando possibile. Per un errore di rete, scrivi «Impossibile caricare i progetti» con «Riprova». Evita di affermare che non esistono progetti quando il sistema non è riuscito a verificarlo.

• Nomina l'oggetto o i criteri pertinenti, così il messaggio ha senso anche fuori contesto.
• Usa un verbo sul pulsante, per esempio «Crea progetto», «Rimuovi filtri» o «Riprova».
• Metti le istruzioni vicino ai contenuti interessati e usa il testo oltre al colore o alle immagini.
• Evita «Ops», toni accusatori e codici tecnici, a meno che servano a risolvere il problema.

3. Rendi utile il passo successivo, senza imporlo

Offri un'azione quando una persona può ragionevolmente cambiare la situazione o proseguire l'attività. Al primo utilizzo spesso serve un'azione per creare o aggiungere; in assenza di risultati può essere utile rimuovere un vincolo; dopo un errore, riprovare. Una casella di posta svuotata o un allenamento concluso potrebbero non richiedere alcuna azione. Non forzare un pulsante in ogni stato solo per far sembrare interattivo il pannello.

Il recupero deve essere proporzionato. Un aggiornamento fallito di solito richiede una spiegazione in linea e un pulsante per riprovare, non un avviso bloccante. Apple raccomanda di adeguare il feedback all'importanza dell'informazione e di riservare gli avvisi alle situazioni critiche su cui si può agire. Nella ricerca, conserva il lavoro della persona e offri modifiche sensate anziché cambiare silenziosamente la query. Material Design suggerisce anche contenuti iniziali, brevi spiegazioni o risultati migliori chiaramente etichettati quando sono davvero utili.

Usa un'illustrazione solo se aggiunge contesto, calore o riconoscibilità. Non dovrebbe competere con il messaggio né far sembrare interattiva un'immagine decorativa. Per un risultato di filtro compatto può bastare una semplice icona; uno spazio di lavoro al primo utilizzo potrebbe beneficiare di un piccolo esempio dei contenuti che ospiterà. Se includi contenuti iniziali, rendili facili da riconoscere e rimuovere.

• Scegli un'azione principale che affronti direttamente la causa.
• Aggiungi un percorso di aiuto secondario solo se risponde a una probabile domanda successiva.
• Usa un messaggio di completamento discreto quando il risultato vuoto è una buona notizia.
• Assicurati che l'azione sia comprensibile anche per chi usa la tastiera o un lettore di schermo.

4. Esamina l'intero stato, non solo l'illustrazione

Esamina lo stato nel contenitore reale: una vista di primo utilizzo a tutto schermo, una piccola barra laterale e una tabella filtrata hanno esigenze diverse di spazio e gerarchia. Tieni il messaggio vicino all'area che descrive. Assicurati che resti leggibile quando il testo si ingrandisce o va a capo e che l'azione principale sia facile da trovare senza affidarsi al colore. Verifica anche le transizioni: da caricamento a vuoto, da caricamento a errore, da nuovo tentativo a successo e da modifica del filtro al ritorno dei risultati.

Una revisione pratica della raccolta parte da un evento e dal recupero atteso. Per ogni modello, registra stato, titolo, spiegazione facoltativa, azione principale, percorso secondario e cosa accade dopo la selezione. Confronta gli screenshot per trovare strutture e gerarchie visive utili, poi verifica il comportamento del prodotto nel contesto: un'immagine statica non può dirti se un errore è recuperabile o se un risultato è davvero vuoto. Esplora la raccolta UI di ScreenKits per riferimenti visivi e tutte le categorie per trovare modelli affini.

• Una persona riesce a capire se i contenuti mancano, sono ancora in caricamento o non sono disponibili per un errore?
• Il messaggio riflette la query, i filtri, l'account o l'attività completata correnti?
• L'azione conserva gli input utili e porta a un risultato visibile?
• Lo stato funziona in spazi piccoli, con testi localizzati più lunghi e con le tecnologie assistive?
• È possibile recuperare da un errore o trovare un modo per modificare una ricerca senza risultati?