Stati vuoti: l'aspetto più trascurato dell'esperienza utente

Sebbene siano importanti per l'esperienza dell'utente, gli stati vuoti vengono spesso trascurati. Conoscere cosa sono e come usarli e applicare le migliori pratiche di UX può produrre vantaggi sostanziali.

Che cos'è uno stato vuoto?

I designer UX hanno molte opportunità per creare esperienze piacevoli e significative. Una di queste opportunità che viene spesso ignorata è lo "stato vuoto" o schermo vuoto. Gli stati vuoti sono momenti nell'esperienza di un utente con un prodotto in cui non c'è nulla da visualizzare.

Ecco alcuni esempi di comuni situazioni di stato vuoto:

• Una nuova schermata di Dropbox in cui non sono stati creati file o cartelle.
• La schermata risultante dopo aver completato tutte le attività in un gestore di elenchi di cose da fare.
• Ottenere una schermata di errore in Slack quando un comando non è supportato.
• Avvio di un nuovo account di social network e non ci sono connessioni.
• Cercando qualcosa in Gmail e senza ottenere risultati.

Questi momenti intermedi offrono opportunità per migliorare l'esperienza dell'utente e di conseguenza amplificare le opportunità di business. Per i designer UX, cogliere ogni opportunità per migliorare l'esperienza dell'utente e aggiungere più valore al business è una buona cosa.

Un utile stato vuoto consentirà all'utente di sapere cosa sta succedendo, perché sta accadendo e cosa fare al riguardo. Ecco due esempi di buoni progetti UX con stato vuoto:

Ecco alcuni esempi di progetti di stato vuoti con opportunità perse:

Tipi di stati vuoti

Ecco quattro tipi di stati vuoti che si incontrano frequentemente:

• Primo utilizzo : si verifica con un nuovo prodotto o servizio quando non c'è ancora nulla da mostrare, ad esempio un nuovo account Evernote o Dropbox.
• Utente cancellato : si verifica quando gli utenti completano azioni come cancellare la posta in arrivo o l'elenco delle attività e il risultato è una schermata vuota.
• Errori : si verificano quando qualcosa va storto o quando si verificano problemi come un telefono cellulare che va offline a causa di problemi di rete.
• Nessun risultato/Nessun dato : si verifica quando non c'è nulla da mostrare. Ciò può verificarsi se qualcuno esegue una ricerca e la query è vuota o non sono disponibili dati da mostrare (ad esempio, quando si filtra per un intervallo di date privo di dati).

Poiché il design a stato vuoto riceve maggiore attenzione, i designer di UX scoprono che ci sono risultati benefici nell'utilizzarli, sia dal punto di vista aziendale che dall'esperienza dell'utente.

Gli utenti provano molte app ma decidono quali vogliono "smettere di utilizzare" entro i primi 3-7 giorni. Per le app "decenti", la maggior parte degli utenti trattenuti per 7 giorni rimane molto più a lungo. La chiave del successo è coinvolgere gli utenti durante quel periodo critico di 3-7 giorni. – Ankit Jain

I vantaggi dell'utilizzo di stati vuoti ben progettati

La progettazione di schermate di stato vuote ben congegnate e utili può aiutare a promuovere il coinvolgimento del prodotto, deliziare gli utenti e ridurre il tasso di abbandono. Ciò riduce le possibilità di perdere utenti a causa dei prodotti della concorrenza, lasciandoli così frustrati o persi.

Nel suo libro What Customers Really Want , Scott McKain espone sei principi guida per un'ottima esperienza del cliente.

Scrive che i clienti vogliono:

1. Un'esperienza avvincente
2. Un focus personale
3. Lealtà reciproca
4. Differenziazione
5. Coordinazione
6. Innovazione

Se applicati al design dello stato vuoto, questi principi possono essere di grande beneficio per un'azienda, ad esempio un aumento della soddisfazione del prodotto e la riduzione dei tassi di abbandono.

Ecco tre aree aggiuntive che possono anche beneficiare di un buon design a stato vuoto:

• Onboarding degli utenti : offre l'opportunità di creare fiducia e un uso continuato del prodotto oltre a un'esperienza utente elevata.
• Costruzione del marchio – Genera consapevolezza e promuove l'azienda al fine di costruire una maggiore brand equity.
• Personalizzazione : può essere giocosa, divertente, seria o dinamica in vari stati di utilizzo; crea un senso di un tocco personale.

I vantaggi di stati vuoti ben progettati non possono essere sottovalutati. Non solo contribuiscono a un'esperienza cliente avvincente, ma poiché le finestre di opportunità per mantenere i clienti felici e coinvolti diventano sempre più brevi, sono semplicemente un buon affare.

Shunned: gli schermi dimenticati di UX Design

Dal momento che ci sono apparenti risultati positivi per stati vuoti ben progettati, perché in primo luogo vengono ignorati?

Innanzitutto, ci sono pochissime situazioni di stato vuoto che si verificano rispetto al numero totale di schermate in un'app, un prodotto o un sito Web, quindi vengono spesso trascurate perché non sono viste come una priorità e i designer tendono a concentrare i loro sforzi su le parti più visibili di un disegno.

In secondo luogo, con solo una stima del 2-5% degli utenti che vede uno stato vuoto, non è sempre un uso economico o pratico del tempo di un designer.

Infine, gli stati vuoti non sono sempre stati ben compresi in termini di dove si verificano e cosa ne fanno, quindi sono passati in secondo piano a favore degli schermi e delle pagine più popolari.

Cosa succede quando gli stati vuoti vengono ignorati?

Schermi vuoti senza guida possono creare confusione, incertezza e delusione. Ciò può comportare tassi di abbandono più elevati e una minore soddisfazione generale per il prodotto.

Fortunatamente, le cose stanno iniziando a cambiare poiché i vantaggi e le opportunità della progettazione di schermate a stato vuoto di buona qualità diventano una parte più importante e prioritaria del processo di progettazione dell'esperienza utente.

Come riempire uno schermo vuoto con uno scopo

Ecco alcune best practice per l'esperienza utente per assicurarsi che gli schermi vuoti siano progettati per essere utili, utili e informativi.

Empatia. L'aggiunta di sorpresa e gioia , emozione e personalità sono tutti modi in cui i designer UX hanno creato esperienze migliori anche negli angoli più bui di un prodotto. Per gli schermi vuoti, i messaggi empatici aggiungono varietà e creano un'esperienza più coinvolgente e personalizzata.

Immagini. Esiste un principio di progettazione chiamato effetto biofilia. Questo è uno stato di ridotto stress e una migliore concentrazione che risulta dalle vedute della natura. L'aggiunta di alcune immagini sceniche (ad esempio lo sfondo di una schermata di errore di stato vuota) può comportare un'esperienza utente più piacevole.

Guida utile. A seconda del tipo di prodotto, gli stati vuoti possono essere utilizzati per guidare l'utente. Un buon esempio di questo è un'applicazione di gestione dei progetti. Con un nuovo account, non ci sono ancora progetti in gioco, offrendo una potenziale grande opportunità per aiutare l'utente a iniziare rapidamente, riducendo così la possibilità di abbandono. Ecco un esempio:

Contenuto iniziale. Ci sono molti schermi che rimangono vuoti abbastanza a lungo da permettere all'utente di sentirsi frustrato e andarsene. Per alcuni prodotti, fornire un buon contenuto iniziale li aiuta a visualizzare cosa sta succedendo e cosa possono fare dopo.

Ecco un esempio di una schermata di stato vuota con contenuto iniziale:

Fornire un passaggio d'azione. Con alcuni prodotti, non è necessario fornire indicazioni o riempire lo schermo con contenuti perché non avrebbe alcun senso. In questi casi, i progettisti potrebbero semplicemente fornire una fase di azione.

Tuttavia, è meglio ridurre al minimo le azioni. La legge di Hick afferma che "il tempo necessario per prendere una decisione aumenta con il numero e la complessità delle scelte". Pertanto, è probabile che gli utenti agiscano più rapidamente quando gli inviti all'azione vengono mantenuti su uno o due al massimo. Ecco un ottimo esempio:

Un altro buon esempio è Instagram. Quando le persone sono nuove sulla piattaforma, non stanno ancora seguendo nessuno (e nessuno li sta seguendo). Sarebbe facile concentrarsi su tutte le fantastiche funzionalità di Instagram, ma una buona schermata di stato vuota, ad esempio, potrebbe dare loro la possibilità di "aggiungere persone da seguire".

Best practice per la UX di stato vuoto - Dal campo

Toptal ha talenti freelance globali di alto livello in tutte le aree del design. Ecco cosa hanno detto un paio di designer di Toptal UX sulle loro esperienze nella progettazione di schermi di stato vuoti.

Designer Toptal: Tamara Olson

Disciplina di progettazione: UX Design

Quali sono alcuni buoni progetti di stato vuoto su cui hai lavorato o che hai visto?

I buoni e moderni progetti di stato vuoto che ho osservato sono in genere due parti di istruzioni, una parte di piacere. Se un'interfaccia utente è vuota, è compito del designer dell'esperienza utente aiutare gli utenti a capire cosa andrà a finire nello spazio quando sarà popolato. Se è compito dell'utente compilarlo, il messaggio dovrebbe includere istruzioni su come. (Ad esempio, una tabella "Classi" vuota in un prodotto edtech potrebbe includere una copia che informa gli insegnanti su come creare la loro prima classe.)

Vedo anche che molte app utilizzano il generoso patrimonio immobiliare degli stati vuoti come un'opportunità per iniettare un po' di gioia e personalità giocosa del marchio. Potresti dire che è la versione dell'app Web della pagina 404 di un sito Web.

Hai mai trascurato gli stati vuoti e, se sì, perché?

Certo, è una trappola facile. Quando siamo visionari, immaginiamo app e prodotti quando sono in pieno volo, popolati di contenuti e utenti. Quando ho lavorato in Google, un vicepresidente del prodotto ha commentato che i prodotti sono come i voli degli aeroplani; la maggior parte dei problemi si verificano durante i decolli e gli atterraggi.

Quando un utente accede per la prima volta al tuo prodotto, gli stati vuoti sono inevitabili e non vogliamo che arrivino a vicoli ciechi prima ancora di iniziare. Incoraggerei i designer junior a progettare una serie separata di design lineari che mostrino il flusso di onboarding dell'utente.

Hai riscontrato il successo dei clienti con l'utilizzo di stati vuoti? Se sì, in che modo?

Di recente ho lavorato con National Novel Writing Month sulla riprogettazione della loro piattaforma, che consente agli utenti di impostare e tenere traccia degli obiettivi sui loro progressi nella scrittura. Il nostro team di prodotto ha avuto una palla assoluta con gli stati vuoti; è stato un modo meraviglioso per presentare e stuzzicare la funzionalità e la personalità della piattaforma e ispirare gli utenti a iniziare a registrare i propri progressi.

Qual è l'uso di maggior successo di uno stato vuoto che hai sperimentato?

Come "zero inboxer", sono costantemente deliziato dall'illustrazione della posta in arrivo vuota dell'app Gmail: una persona sotto l'ombrello, che legge un libro sotto il sole, con la didascalia "Hai finito!" Tecnicamente infrange la regola che ho menzionato sugli stati vuoti che necessitano di un invito all'azione, eppure non è così, perché l'invito all'azione subliminale è "Togli la tua email e vai a goderti la vita". Lo amo.

Designer Toptal: Michael Clingerman

Disciplina di progettazione: progettazione di prodotti SaaS

Se hai progettato per stati vuoti, quali tipi vedi più frequentemente?

Gli stati vuoti con cui ho più familiarità sono 404/stati di errore e stati cancellati dall'utente.

Hai riscontrato il successo dei clienti con l'utilizzo di stati vuoti? Se sì, in che modo?

Sì. Ho visto casi in cui schermi di stato vuoti sono diventati parte di una strategia di comunicazione e contenuto coinvolgente e deliziosa. Ci sono altri casi in cui i clienti li hanno utilizzati per costruire la propria personalità di marca.

Qual è l'uso di maggior successo di uno stato vuoto che hai sperimentato?

Ho sempre amato l'uso da parte di Dropbox di stili illustrativi semplici e monocromatici per stabilire personalità, tono e carattere del marchio aziendale.

Conclusione

È facile trascurare gli stati vuoti (o gli schermi vuoti) nella progettazione dell'esperienza utente perché si verificano raramente e non sono sempre ben compresi. Tuttavia, i vantaggi della loro inclusione sono sottovalutati perché migliorano l'esperienza dell'utente e aiutano a creare un prodotto più coerente.

• • •

Ulteriori letture sul blog di Toptal Design

• Procedure consigliate per la progettazione dell'interfaccia utente ed errori comuni
• Mobile UX Design: best practice, vincoli e collaborazione con gli sviluppatori
• Principi euristici per interfacce mobili
• Influenza con il design: una guida al colore e alle emozioni
• I principi del design e la loro importanza