Gli stati del design
Chi progetta un’interfaccia non si preoccupa solo di disporre gli elementi in maniera coerente e ordinata, ma si preoccupa anche di cosa succede quando un utente ci interagisce. Si preoccupa di cosa succede quando si sta caricando la schermata, quando un utente clicca, quando accede per la prima volta, quando commette un errore, quando esce.
Scott Hurff, nel suo libro Designing Products People Love, elenca cinque stati:
- Ideal State
- Empty State
- Error State
- Partial State
- Loading State
Ideal State
Questo è lo stato “ideale”, quello che gli utenti vedranno più spesso ed è quello che contiene tutte le informazioni. Quando si progetta un’interfaccia conviene partire da qui.
Empty State
È lo stato “vuoto”, dove la schermata non contiene elementi. Ci sono tre versioni di empty state: (1) quando accediamo la prima volta; (2) quando cancelliamo volontariamente tutte le informazioni presenti; (3) quando non c’è nulla da mostrare, come ad esempio un risultato di ricerca senza contenuti.
Quando accediamo per la prima volta a un servizio o prodotto digitale la maggior parte delle schermate sono vuote ed è necessario mostrare all’utente cosa può fare e come aggiungere contenuti. Alcuni servizi mostrano esempi di stati ideali, altri guidano passo passo l’utente alla creazione del suo primo contenuto.
Il secondo tipo di stato vuoto è il caso in cui l’utente rimuove volontariamente i dati presenti. L’utente potrebbe aver completato tutte le attività (magari da un elenco di cose da fare), letto tutte le notifiche, archiviato tutte le sue e-mail. In questo caso bisogna progettare una schermata coerente con il tipo di azione compiuta dall’utente.
Il terzo tipo di stato vuoto è quello che appare dopo una ricerca che non ha prodotto risultati. Una possibile soluzione per questo stato è quella di mostrare contenuti simili a quelli digitati, come fa ad esempio Amazon che non mostra mai pagine vuote.
La schermata di una cartella documenti vuota di Paper di Dropbox
La schermata di Todoist dopo aver completato tutte le cose da fare
(Il sito emptytat.es raccoglie molti esempi di “stati vuoti”)
Error State
Gli errori in una schermata possono apparire per varie ragioni. L’utente compie un’azione errata, non è possibile scaricare dei contenuti dal server, la connessione non funziona. Quando si progetta un stato di errore bisogna sempre evitare di eliminare quanto fatto dall’utente, come quando si compila un form con un dato sbagliato e la pagina si ricarica senza più contenuti. Gli errori non dovrebbero mai spaventare o incolpare l’utente, dovrebbero spiegare cosa fare, essere brevi, chiari, diretti e senza gergo tecnico. Insomma evitare l’approccio della famigerata schermata blu di Microsoft.
Partial State
Lo stato parziale è un stato in cui la schermata non è vuota, ma ha ancora pochi elementi ed è lontana dall’essere “ideale”. In questo stato è utile spiegare all’utente come arrivare allo stato ideale, mostrando i passaggi che mancano o le attività da svolgere.
Loading State
Lo stato della schermata in fase di caricamento. Alcuni servizi e prodotti digitali richiedono tempo per caricare tutte le risorse e una schermata bianca (o nera) trasmette un messaggio sbagliato, dando la sensazione che qualcosa è andato storto. La percezione del caricamento è importante. Per molto tempo i designer hanno usato barre di caricamento o spinner che danno la sensazione che il sito sia lento. Agli spinner è preferibile l’utilizzo degli “skeleton screen”, schermate che mostrano la struttura della pagina, con box grigi o colorati che mano mano di riempiono del contenuto reale, come fanno ad esempio Facebook e Pinterest.
La pagina di Facebook quando carica i contenuti
Per approfondire
|
