Share
Gli stati vuoti sono spesso un ripensamento per la maggior parte dei progettisti.
La home page e il carrello di pagamento, ad esempio, potrebbero essere la funzione più prioritaria nel tuo backlog, ma per quanto riguarda gli stati vuoti di queste funzionalità? Come dovrebbero essere affrontati?
Il seguente articolo non è completo, o un "deve fare" con qualsiasi mezzo. Invece, delinea tre tipi comuni di stato vuoto:
Vedremo un buon esempio di ciascuno, discuteremo sul perché funziona e su come potresti implementare idee simili, o approfondirli basandoti sulla tua situazione unica.
La seguente schermata proviene dall'app BBCNews. È un esempio di una schermata in cui l'utente sta utilizzando l'app per la prima volta e necessita di alcune indicazioni per "iniziare".
È efficace su un paio di livelli:
Offre una spiegazione chiara. Questo stato vuoto spiega cosa fa la funzione corrente e ti dà un pulsante, che indica come iniziare. In questo caso, l'utente deve aggiungere argomenti per creare il proprio feed di notizie personale.
Fornisce un link per popolare questa funzionalità. Il pulsante, che porta l'utente alla pagina in cui è possibile popolare lo schermo, è una funzionalità utile. Salva l'utente che deve navigare verso casa e cercare di trovare lo schermo con altri mezzi.
Quindi, come potresti implementare qualcosa di simile?
Fornire una sequenza di imbarco. Se l'utente utilizza la tua app Web per la prima volta, potresti prendere in considerazione una procedura dettagliata per aiutarli a raggiungere la velocità. Tuttavia, tieni presente che ciò potrebbe frustrare l'esperto e l'utente intermedio. Considera di mostrarlo solo una volta e poi di divulgare le informazioni nella tua sezione di aiuto.
La seguente pagina è la lista dei desideri dello store Apple iTunes. È un esempio di una pagina in cui l'utente non ha nulla o ha cancellato tutto dalla loro lista.
Ciò che rende efficace questa pagina vuota?
Qualcosa è meglio di niente. Questa lista dei desideri non sta semplicemente emettendo nulla. Fornisce all'utente la possibilità di aggiungere un elemento all'elenco. L'icona è grande e audace, ma sottile. Il tuo stato vuoto dovrebbe catturare l'attenzione degli utenti - non hai nulla qui! - ma anche essere indicativo di vuoto, ad es. usando i colori tenui ecc.
Diretto e dritto al punto. Si è tentati di inserire del testo fluff nel tuo stato vuoto ... forse una citazione di qualcuno. Tuttavia, la maggior parte delle volte l'opzione migliore è quella di essere diretti e diretti al punto come mostrato nell'esempio sopra "Non hai aggiunto nulla alla tua lista dei desideri".
Questa pagina della lista dei desideri avrebbe potuto essere migliorata, quindi cosa dovremmo imparare da essa?
Fornire un esempio. Puoi anche pensare di aggiungere un esempio di come potrebbe apparire uno stato pieno. Questo è probabilmente più rilevante per il desktop rispetto alle interfacce mobili in quanto hai un po 'più di spazio sullo schermo con cui lavorare.
La seguente pagina di errore fa parte del browser Google Chrome. È un esempio di una situazione in cui l'utente sta ottenendo qualcosa di diverso dal loro stato desiderato. In questo caso non sono in grado di connettersi a Internet.
Questo grafico è diventato familiare a milioni di persone, ma ciò che lo fa funzionare?
È appropriato per la situazione. Funziona perché l'icona è sottile e appropriata alla gravità del problema. È comune andare per una croce o una "X" e va bene; è un buon modo per attirare l'attenzione di qualcuno, ma qui vuoi solo informare l'utente che qualcosa non va. Non hai bisogno di urlare su di esso con un'icona o un messaggio in cima.
Offre più informazioni. Non dovresti mai lasciare i tuoi utenti insicuri su cosa fare dopo. In questo caso, Chrome ha fornito a Di Più pulsante per aiutare a risolvere il problema. Nella maggior parte dei casi, l'utente probabilmente saprà di aver bisogno di accendere il proprio wifi, resettare il proprio modem o chiamare il proprio provider internet, ma questo aggiunge valore a quegli utenti che necessitano di maggiori informazioni.
Che ne dici di applicare questo te stesso?
Considera quanto sono critici i tuoi messaggi di errore. Quanto è grave l'errore? Se è fondamentale per l'utente, dovrai attirare la loro attenzione con colori forti e una gerarchia chiara. Prendi in considerazione il linguaggio utilizzato ed entra in empatia con la posizione dell'utente. Un'icona divertente che rende la luce di una situazione frustrante potrebbe peggiorare le cose!
Questo articolo ti ha dato un buon quadro di partenza da considerare quando guardi gli stati vuoti. Considerare quale tipo di stato vuoto si sta progettando e i modi più appropriati per impaginare la pagina in base alla situazione degli utenti e ai loro obiettivi.
Alcune buone regole pratiche includono:
Accentsconagua