Come progettare pagine vuote di stato per siti Web e app mobili

Le pagine di stato vuote sono elementi di design meno conosciuti con un ruolo significativo nell'esperienza utente. Nella sua forma più semplice, gli stati vuoti sono layout di pagina visti quando un utente visita per la prima volta una pagina in cui non è disponibile alcun contenuto.

Questo può includere applicazioni mobili, social network o anche categorie di blog vuote. Lo scopo è di consegnare una pagina vuota sembra una pagina non vuota. I visitatori dovrebbero riconoscere la mancanza di contenuti come mezzo di contenuti imminenti.

Mi piacerebbe capire come funzionano le pagine di stato vuote e perché sono così importanti. I progettisti di interfacce dovrebbero considerare questi punti e provare ad applicarli agli stati vuoti ogni volta che lo ritengono opportuno. Ma per iniziare esaminiamo come funziona uno stato vuoto e come fornisce valore all'interfaccia.

Il valore degli stati vuoti

La bellezza di un grande design a stato vuoto è nella semplicità. Spiegano le pagine vuote cosa dovrebbe essere sulla pagina una volta che c'è del contenuto. Può essere passivo come una casella di posta vuota, oppure potrebbe essere attivamente in attesa per l'utente come un feed Twitter vuoto.

Le pagine vuote sono noiose, noiose e persino confuse. Stati vuoti fornire una guida per aiutare gli utenti a capire cosa stanno guardando. Anche se è una pagina vuota, il contesto extra aiuta.

Anche gli stati vuoti danno un senso “freschezza” con nuovi account che non hanno dati esistenti.

Questo test fatto da Redditor Bambo_Ocha ha controllato 20 app diverse per progetti di stato vuoti. Vari stili di progettazione si sono verificati con pulsanti CTA, dati di esempio e anche brevi tutorial.

Le app che prosperano su una base utente dovrebbero progettare stati vuoti incoraggiare l'attività dell'utente. Questa attività potrebbe essere la pubblicazione di contenuti, l'aggiunta di amici, il caricamento di foto o qualunque sia l'app per cui è stata creata. Lo schermo sottostante di Tookapic è un ottimo esempio.

Ma le pagine di stato vuote hanno ancora valore anche quando non è necessaria alcuna azione. Questi disegni sono fatti principalmente per fornire informazioni.

Le informazioni statiche sono altrettanto preziose e non è intrinsecamente male avere uno stato vuoto. Ad esempio, questo design di pagina non mostra alcuna metrica corrente da un dashboard dell'app di tracciamento. L'utente potrebbe voler aggiungere alcune metriche, ma non è male lasciare il trattino vuoto.

Disegni statici simili possono funzionare in modo ottimale per archivi di blog vuoti o cartelle di messaggi vuoti. È perfettamente accettabile non avere messaggi da mostrare. Ma la pagina non dovrebbe essere completamente vuota senza alcun contesto.

Elementi vitali della pagina

L'elemento più importante in una pagina di stato vuota è contesto. Questo può avvenire sotto forma di grafica, testo o entrambi. Vuoi informare gli utenti perché la pagina è vuota e quale tipo di dati potrebbe essere lì (email, tweet, profili di amici, ecc.).

E mentre il testo è il mezzo di comunicazione principale sul web, non puoi trascurare il valore della grafica e delle icone.

DigitalOcean ha una brillante dashboard con grafica a stati vuoti che illustra chiaramente il loro punto. La loro azienda utilizza il branding creativo e la tipografia pulita, quindi non sorprende che le loro pagine di stato vuote siano così illustrative.

Un altro aspetto cruciale del design a stati vuoti è il pulsante di chiamata all'azione. Questo è in genere progettato come un pulsante anche se i collegamenti ipertestuali funzionano bene.

L'obiettivo è aiutare gli utenti ad agire e a chiarire il loro stato vuoto. Indipendentemente dal fatto che ciò richieda l'aggiunta di dati o l'adozione di azioni sul sito, i CTA guidano gli utenti sul passaggio successivo necessario a chiarire lo stato vuoto.

Dropbox ha un design eccezionale con due pulsanti CTA. Ogni volta che un utente Dropbox non ha cartelle, possono creare una nuova cartella o aggiungere una cartella di esempio alla pagina.

Incoraggiare l'attività dell'utente

I pulsanti di invito all'azione sono gli elementi attivi, ma ricorda che la copia della pagina spiega cosa sta facendo l'utente. Nessuno fa clic sui pulsanti senza sapere perché.

Il modo migliore per incoraggiare l'attività è quello di scrivere un'ottima copia sulla tua pagina di stato vuota. Guida gli utenti attraverso un flusso di contenuti che incoraggia l'attività dell'utente sull'intera applicazione.

Questo stato vuoto di ModSpot è un brillante esempio di design di qualità e contenuti incoraggianti.

Le icone sono utilizzate per dimostrare ciò che l'utente dovrebbe aggiungere al sito. Una freccia punta al pulsante che gli utenti devono cliccare insieme ad un comportamento incoraggiante del testo. Questo è un brillante design di stato vuoto con tutti gli elementi che ti aspetteresti.

Allo stesso modo lo stato vuoto di Gumroad offre due opzioni che mirano a diverse azioni potenziali. Gli utenti possono aggiungere un prodotto digitale o un prodotto fisico per iniziare a vendere.

Altri link nella pagina portano ad aiutare le guide e i dettagli di contatto. Tutto è incredibilmente snello e si lega bene.

Applicazioni Web e mobili

Le pagine di stato vuote per tutti i supporti dovrebbero seguire trend di progettazione simili. Ma ci sono alcune piccole differenze con l'esperienza utente su un desktop rispetto a uno smartphone.

Siti web su schermi più grandi avere più spazio per pulsanti extra. Le pagine Web possono anche avere elementi di navigazione più grandi che può attirare altre persone sul sito.

Questo può essere risolto in uno stile simile a quello fatto da Nusii nella pagina delle loro proposte. Dove non ci sono proposte l'utente è guidato al “aggiungere proposte” pulsante nella barra di navigazione in alto.

Le app mobili potrebbero avere problemi simili, ma gli schermi sono molto più piccoli. Questo lo rende molto più facile attirare gli utenti direttamente nell'azione.

Trovo che sia meglio mantenere le app mobili più semplici con meno opzioni. Usa le immagini come piacere per gli occhi per incoraggiare l'azione e puntare a un flusso di utenti molto specifico.

Esempi di design di stato vuoto

Forse il modo migliore per imparare a progettare stati vuoti è studiare alcuni esempi. La brillante web gallery emptystat.es consente di curare pagine di stato vuote da vari siti Web verso applicazioni mobili.

Ho scelto personalmente alcuni esempi che meritano la vostra attenzione per illustrare al meglio il design a stati vuoti. Se avete altri suggerimenti sentitevi liberi di farcelo sapere.

IP mobili digitali di DigitalOcean