Padroneggiare la Coerenza dell’Interfaccia Utente: Come Creare un’Esperienza Utente Senza Soluzioni di Continuità
Ti è mai capitato di provare frustrazione nel navigare su un sito web o un'app senza capire come funziona? Certamente sì.
La causa della tua frustrazione è molto probabilmente un'interfaccia mal progettata che non ti permette di navigarla in modo intuitivo. Invece, devi fermarti e analizzare ogni elemento per capire come funziona e a cosa serve.
Uno degli errori più comuni che portano a un cattivo design del prodotto è l'incoerenza nell'interfaccia utente (UI).
Vuoi di più da The CPO Club?
Iscriviti gratuitamente per completare la lettura di questo articolo:
Have an account? Log In
Oltre ad essere uno degli errori più diffusi, è anche uno di quelli più facili da correggere o evitare del tutto. Quindi, vediamo di capire cos’è l’incoerenza della UI e come puoi assicurarti che i tuoi utenti non debbano mai affrontarla.
Comprendere la Coerenza della UI
Come suggerisce il nome, la coerenza della UI riguarda l’avere elementi dell’interfaccia utente identici, un design atomico e un’esperienza utente complessiva uniforme per lo stesso tipo di azione o entità nel tuo prodotto.
Se hai pulsanti primari in più punti dell’interfaccia, dovrebbero tutti avere lo stesso aspetto (UI) e comportarsi allo stesso modo (UX). Ad esempio, se accedi al tuo account Dropbox e navighi tra le diverse sezioni, noterai che tutti i pulsanti di azione primaria sono identici.
Se guardi più da vicino, non sono solo i pulsanti di azione primaria ad essere coerenti nell’aspetto su Dropbox, ma praticamente tutti gli elementi.
Ci sono diverse ragioni importanti per cui i team di progettazione prestano molta attenzione alla coerenza dell’interfaccia utente. In particolare:
- Ha un aspetto pulito e gradevole alla vista. La diversità non è la cosa migliore da avere nelle interfacce utente. Avere troppi tipi diversi di visuali per gli elementi rende l’interfaccia pesante e ostacola la leggibilità.
- Risulta professionale. Un’interfaccia pulita trasmette professionalità e competenza. Gli utenti tendono a fidarsi di più dei marchi se i loro siti web o prodotti sono ben progettati.
- Migliora l’esperienza utente. Se vedi un pulsante nero da qualche parte su Dropbox e lo identifichi come azione primaria, ogni volta che vedi un pulsante identico saprai che si tratta sempre di un’azione primaria. Quindi, non dovrai chiederti ogni volta cosa dovrebbe fare quel pulsante.
Infine, c’è anche il fattore dello sviluppo dell’interfaccia. Se hai elementi della UI coerenti ovunque nel tuo prodotto, il team frontend non dovrà sviluppare ogni nuovo elemento da zero. Invece, creeranno un solo elemento e lo riutilizzeranno nelle nuove schermate da sviluppare. In questo modo, si riduce drasticamente il tempo necessario per creare nuove interfacce e funzionalità.
Nonostante la sua importanza e l’impatto sull’esperienza utente, spesso la coerenza del design manca. Anche i grandi prodotti tech ne sono colpevoli. Il menu delle impostazioni di Android è il mio esempio preferito.
Guarda i diversi elementi in questo elenco e dimmi quali sono cliccabili (pulsanti) e quali sono solo testo informativo. Probabilmente non puoi saperlo a meno che tu non apra lo stesso menu sul tuo telefono e inizi a toccare tutto.
Anche se ci hai preso (sono “Dati Account Google” e “Foto e video”), hai dovuto comunque fare uno sforzo cognitivo per capirlo.
Non è così che dovrebbe funzionare la UX. Dopotutto, la famosa citazione del guru della UX Steve Krug dice:
Non farmi pensare.
A proposito, ti consiglio vivamente di leggere il suo libro insieme alla “bibbia” della UX di Don Norman - La caffettiera del masochista.
Il concetto generale è che i tuoi utenti saranno in grado di riconoscere automaticamente gli elementi della tua UI senza dover pensare a cosa sono e potranno navigare nell'app quasi "in automatico".
Fondamenti del Design UI
Prima di andare avanti e capire come mantenere coerente il tuo design, rivediamo i principi di base che in primo luogo rendono possibile una UI facile da usare e coerente.
Chiarezza e Semplicità
Sono finiti i tempi dei siti web con gif lampeggianti e tutti i colori dell’arcobaleno presenti nella UI (millennials, ve li ricordate?)
Più persone hanno iniziato a utilizzare internet, più i designer di UI e UX hanno prestato attenzione al modo in cui percepiscono e interagiscono con le interfacce utente.
Quello che si è scoperto presto è che avere troppi colori ed elementi visivi ostruisce gli utenti nell'eseguire i compiti desiderati. Invece, l'unica cosa che ottengono navigando tra queste interfacce è l'affaticamento visivo.
Quindi, naturalmente, ci siamo spostati verso il minimalismo e la semplicità. La coerenza della UI, infatti, è un altro modo per rendere la tua interfaccia più semplice.
Gerarchia visiva
Quando hai molti elementi sullo schermo, diventa difficile capire la relazione tra di essi. Ad esempio, come fai a sapere se un determinato testo è un'intestazione di articolo o solo parte del testo?
Aiuti i tuoi utenti a comprendere queste relazioni grazie alla gerarchia visiva. Posizionando gli elementi in alto, rendendoli più grandi, colorati, in grassetto e utilizzando altri accorgimenti, puoi aiutare gli utenti a individuare facilmente quali sono più importanti degli altri elementi sullo schermo. Così, gli utenti guarderanno intuitivamente prima quell’elemento, prima di passare al secondo.
Esiste un meme famoso che dimostra l’efficacia della gerarchia visiva.
Hai sorriso leggendo il testo qui, vero? Esatto, proprio come ogni altro essere umano, anche la tua visione segue automaticamente la gerarchia visiva.
Feedback
Ogni volta che il tuo utente esegue un'azione sul tuo prodotto, si aspetta di capire se quell’azione sia avvenuta oppure no.
Se clicchi sul pulsante elimina e non succede nulla, potresti rimanere confuso. L'eliminazione è avvenuta, oppure si è verificato un errore? Per aiutare gli utenti in questi casi, devi fornire loro un feedback visivo (o audio, persino tattile) che illustri l’esito dell'azione.
Se il tuo sistema ha elaborato correttamente la richiesta di eliminazione, informali che l’elemento è stato eliminato. Se invece si verifica un errore, comunicalo nuovamente. In questo modo, sapranno che il loro elemento non è stato cancellato e dovranno riprovare o contattare l'assistenza.
Best practice per ottenere coerenza della UI
A prima vista, la coerenza della UI sembra molto semplice, e ogni designer dovrebbe riuscire a ottenerla. Ed è così, sempre che tu sia l’unica persona a lavorare sul prodotto e il prodotto stesso sia piccolo e semplice.
Nel momento in cui inizi a lavorare come parte di un team più ampio (dove ogni designer ha il proprio stile individuale) e su un prodotto composto da decine di pagine e funzionalità, mantenere gli elementi coerenti diventa una vera sfida.
Semplicemente non puoi ricordare fisicamente ogni elemento dell'intero prodotto e replicarlo nella nuova funzionalità su cui stai lavorando.
Fortunatamente, esistono molti processi e framework che permettono di ridurre il rischio di introdurre incoerenza nel design. Ecco i tre che sono considerati standard nel settore.
Manuali di stile: Si tratta di un documento che definisce gli standard di design per il tuo prodotto e rappresenta l’identità del tuo brand. Include la tipografia (cioè i font, la loro dimensione, collocazione, ecc.) per diverse tipologie di testo (ad esempio titoli, corpo del testo, commenti, ecc.), l’iconografia, la palette dei colori e altri elementi fondamentali del design.
Con un manuale di stile, ti assicuri che l’intero team di design lavori secondo gli stessi standard globali e mantenga i contenuti, i colori e le icone coerenti in tutto il prodotto.
Apple è probabilmente il miglior esempio di applicazione del proprio manuale di stile ovunque, anche da parte delle aziende che sviluppano app per i suoi prodotti.
L’esempio qui sopra è il manuale di stile per il pulsante che puoi inserire nel tuo sito web per far scaricare agli utenti la tua app dall’App Store. Come puoi vedere, Apple è molto chiara su come questo pulsante deve essere utilizzato.
Librerie di pattern: Questo è un altro documento di riferimento che si concentra sui dettagli di basso livello del tuo standard di design, a differenza di quello precedente che fornisce una panoramica degli elementi essenziali. Le librerie di pattern design sono un risultato comune quando il tuo team si basa sul design atomico.
Il concetto di design atomico prevede la definizione chiara di piccoli elementi di UI che, combinandosi, danno vita a elementi più complessi. Le categorie comuni di elementi e le loro combinazioni in questo framework includono:
- Atomi (da cui il nome): Elementi basici come moduli, pulsanti, icone e altri. Questi sono elementi che non puoi scomporre ulteriormente.
- Molecole: Combinazioni di atomi che servono a uno scopo specifico. Esempi sono la paginazione per le tue liste, i breadcrumb per la navigazione, ecc.
- Organismi: Elementi di interfaccia più complessi composti da molteplici atomi e molecole che rappresentano entità. Questi sono card, barre di ricerca e altri.
- Template: Combinazioni di organismi riutilizzabili che puoi aggiungere alle tue pagine. Possono essere liste di risultati di ricerca, sezioni di descrizione prodotto, ecc.
- Pagina: Il risultato finale del tuo design e il luogo in cui l’utente interagisce con esso. Come suggerisce il nome, queste sono le diverse pagine del tuo prodotto, come la tua homepage.
Una pattern library è una raccolta di molecole e organismi standardizzati che puoi utilizzare nel tuo design. Raggiungi la coerenza riutilizzando sempre gli stessi elementi in diverse parti del tuo prodotto, poiché gli utenti riconosceranno istantaneamente l’elemento appena aprono una pagina specifica.
Sistema di design: Questa è la combinazione complessiva di guide di stile di alto livello, caratteri tipografici, schemi di colori e descrizioni di piccoli elementi UI, oltre a una raccolta di componenti UI pronti all’uso, utilizzabili sia nella progettazione che nello sviluppo del prodotto.
Quasi tutte le grandi aziende tech sviluppano il proprio sistema di design per garantire la coerenza visiva. Google ha Material, Shopify ha Polaris e Apple ha Human Interface. Esistono anche sistemi open-source separati che puoi integrare facilmente nel tuo prodotto e utilizzare gratuitamente. Il mio preferito tra questi è ant.design.
Come altri sistemi di design, viene fornito sia con una libreria di design che puoi utilizzare in Figma o altri strumenti popolari, sia con una libreria di componenti precodificata nei principali framework (ad esempio, react), che gli sviluppatori possono usare nel loro codice.
Strumenti per mantenere la coerenza della UI
Per mantenere il tuo design coerente in tutti i team e le parti del tuo prodotto, sarà necessario documentare le linee guida e assicurarsi che l’intero team collabori su di esse.
Per documentare e applicare i tuoi standard di design nella progettazione quotidiana di funzionalità e schermate, puoi sfruttare le funzionalità specializzate di molti software di design moderni.
Figma, ad esempio, ti consente di creare componenti scalabili, che puoi conservare nel file del sistema di design e mettere a disposizione di tutti in azienda.
Supporta anche i Kit UI, una libreria predefinita di linee guida e regole di design che puoi scaricare dalla libreria di Figma e utilizzare nei tuoi prodotti. Ecco un kit per il Material Design di Google.
Questo particolare kit ti offre una vasta gamma di elementi per progettare un’app Android conforme agli standard di design di Google.
Passiamo ora alla collaborazione. Senza una collaborazione reale nel tuo team di design, rischi di avere elementi che non seguono le linee guida e compromettono la coerenza visiva. Per fortuna, ci sono anche strumenti di progettazione UX/UI pensati per favorire la collaborazione, anche.
Zeplin, per esempio, aiuta designer e sviluppatori a collaborare in modo più efficace creando versioni del design pensate per gli sviluppatori, nelle quali il team tecnico trova le specifiche CSS esatte degli elementi, nonché può facilmente scaricare immagini, icone e altre risorse dal progetto. Integra inoltre altri strumenti per lo sviluppo UI per trasferire agevolmente i tuoi design da dove li hai creati a Zeplin.
Test e iterazioni per la coerenza della UI
Proprio come i requisiti del tuo prodotto o la tua strategia, anche le linee guida di design non sono documenti statici. Ti troverai sempre ad apportare modifiche e mantenerle aggiornate.
Alcuni dei motivi più comuni per modificare le linee guida includono:
- Aggiunta di nuovi elementi assenti nella libreria.
- Adozione di nuove tendenze di design e best practice.
- Individuazione di problemi e "bug di design" da correggere.
Infine, è una buona pratica far revisionare occasionalmente il progetto al tuo team di design e apportare piccoli miglioramenti.
Oltre a migliorare l’aspetto generale e la qualità del tuo design, questa attività permette anche di eseguire quello che viene chiamato “test di coerenza dell’interfaccia utente”, durante il quale il team di design identifica attivamente eventuali incoerenze nel sistema di design e le corregge.
Puoi anche eseguire un test simile sui design già pronti. C’è sempre la possibilità che alcune funzionalità contengano elementi non presenti nell’UI Kit o che non appaiano come dovrebbero.
Oltre ai test interni, ti suggerisco anche di coinvolgere attivamente gli utenti nel processo di test. Ci sono due modi per farlo.
- Chiedi un feedback sul design, comprendi i bisogni degli utenti e modifica attivamente il design in base ai loro commenti.
- Esegui test di usabilità per valutare il livello di coerenza dell’interfaccia.
Per quanto riguarda quest’ultimo punto, immagina di aver utilizzato il pulsante di azione principale in 10 punti diversi all’interno del tuo prodotto. Sei sicuro che, in tutti e 10 i casi, gli utenti lo riconoscano come azione principale?
Non puoi esserne certo a meno che tu non esegua test di usabilità moderati o non moderati con prototipi realizzati con il tuo strumento UX e osservi il modo in cui gli utenti interagiscono con esso.
Sulla base di questi test e dei feedback degli utenti, puoi quindi prendere decisioni progettuali basate sui dati.
Non farmi pensare
La coerenza è uno degli elementi fondamentali di un ottimo design dell’interfaccia utente. Mantenendo tutto semplice e visivamente coerente, ti assicuri che gli utenti non si perdano nell’interfaccia. Invece, comprendono intuitivamente lo scopo di ogni elemento sullo schermo e portano a termine facilmente le loro attività.
Non dimenticare di iscriverti alla nostra newsletter per altre risorse e guide sulla gestione di prodotto, oltre a podcast, interviste e altri approfondimenti da leader ed esperti del settore.
