Più dello stesso
Se non hai mai sentito parlare di uno schema dell'interfaccia utente, ecco una rapida spiegazione: come per la maggior parte delle cose, specialmente durante lo sviluppo del software, un ampio insieme di elementi può spesso essere raggruppato insieme, poiché formano uno schema riconoscibile. Un esempio per il software potrebbe essere la definizione di pattern architetturali o relativi a uno specifico linguaggio di programmazione.
Tuttavia, ci sono anche modelli comuni durante la progettazione dell'interfaccia utente. Basta dare una rapida occhiata ad alcune app sul dispositivo su cui stai leggendo questo articolo, alcune cose si ripetono alla fine:
- viste modali con un'azione di salvataggio, annullamento e/o eliminazione
- sezioni di elementi contenenti testo, ad esempio elenchi con un'azione di scorrimento per ogni elemento dell'elenco
Quindi, pensando a un ulteriore passo avanti, ci sono risorse a cui puoi attingere durante la progettazione di un'interfaccia utente? Forse una collezione di modelli che altri designer hanno già riconosciuto e formalizzato? Beh, non farei questa domanda se non avessi già la risposta! È ora del secondo capitolo!
Capitolo due (quello annunciato)
Alla ricerca di una definizione formale, il team di Carbon Design di IBM ne ha una fantastica: i modelli sono soluzioni di best practice per il modo in cui un utente raggiunge un obiettivo. Mostrano combinazioni riutilizzabili di componenti e modelli che indirizzano obiettivi utente comuni con sequenze e flussi.
Diamo un'occhiata ad alcuni esempi. Le seguenti voci sono prese dal sito Carbon Design di IBM e dalla pagina del modello dell'interfaccia utente dei materiali di Google. Non sono riuscito a trovare un sito per Fluent Design di Microsoft, ma ho comunque collegato la loro pagina iniziale nell'addendum.
Ricerca
La ricerca di contenuti è uno degli elementi costitutivi essenziali per la maggior parte delle app, quindi è una scelta perfetta per definire un modello di interfaccia utente per esso. Indipendentemente dal suo utilizzo finale (una ricerca globale o una ricerca specifica su una pagina di contenuto), l'interfaccia utente di ricerca ha da offrire
- un input di testo
- un segnaposto testuale se non è ancora disponibile alcun input
- un'icona che indica chiaramente lo scopo dell'inserimento del testo, ad esempio utilizzando una lente di ingrandimento, oltre a fungere da trigger per una nuova ricerca
In alcuni casi, un'etichetta di suggerimento può aiutare a distinguere tra diversi tipi di contenuto o fornire assistenza su input non validi. Più condizioni deve gestire una ricerca, meglio una ricerca può adattarsi a questo requisito aggiungendo menu di filtri espliciti.
Dialogo
Uno dei modelli di interfaccia utente molto importanti. Le finestre di dialogo consentono a un'app di mostrare un'informazione senza perdere il contesto generale di un sito. Ciò si ottiene non coprendo l'intera finestra ma solo una parte più piccola. Le finestre di dialogo interrompono il flusso di lavoro corrente dell'utente e dovrebbero quindi essere considerate necessarie solo quando un'interruzione nel flusso di lavoro è effettivamente valida. Dovrebbero gestire solo piccoli compiti e avere un chiaro focus su cosa realizzare. Ad esempio, annullare le modifiche non salvate o eseguire un'azione importante.
Stati vuoti
Anche se all'inizio potrebbe sembrare strano, gli stati vuoti sono molto comuni nelle app. È importante comunicare all'utente che non sono disponibili dati e, idealmente, spiegare perché è così. A seconda del contesto, un suggerimento su come risolvere lo stato vuoto può aiutare molto a creare una buona UX. Ad esempio, un utente ha cercato qualcosa ma non è riuscito a trovare nulla. Questo potrebbe essere un caso d'uso in cui suggerire una query di ricerca diversa potrebbe aiutare l'utente a svolgere l'attività. In ogni caso, ogni vista che rappresenta uno stato vuoto deve essere contestuale. Un esempio negativo potrebbe essere qualcosa come "Questo non ha funzionato. Riprovare più tardi".
Non trattare gli stati vuoti come un ripensamento nel processo di progettazione dell'interfaccia utente. Se implementati correttamente, consentono agli utenti di procedere senza problemi con il flusso di lavoro. Gli stati vuoti che bloccano l'intero flusso di lavoro sono in realtà lo scenario peggiore, a parte gli arresti anomali dell'app.
solo un inizio
Questa è stata una rapida occhiata ad alcuni modelli dell'interfaccia utente che ho scelto dal Carbon Design di IBM e dalla pagina dei modelli dell'interfaccia utente del materiale. L'applicazione di modelli dell'interfaccia utente anche alla tua app può aiutare notevolmente a ridurre l'attrito tra il flusso di lavoro di un utente e l'interfaccia utente per svolgere l'attività. La progettazione dell'interfaccia utente può essere piuttosto impegnativa, quindi stare sulle spalle dei giganti imparando dagli studi UX esistenti aiuta molto a migliorare la percezione degli utenti del comportamento della tua app.
