L'elenco di controllo della progettazione UX

Durante il processo di progettazione, alcuni difetti del tuo prodotto passeranno inosservati. Quelle piccole (o talvolta grandi) cose possono fare molto per danneggiare l'esperienza che l'utente ha durante l'utilizzo del software. Abbiamo messo insieme un elenco di punti da verificare prima che il progetto venga firmato.

Tieni presente che non tutti questi punti si applicano a tutti i prodotti, ma in generale questi sono i più rilevanti.

Design interattivo

01 – Le azioni ripetitive o le attività frequenti si sentono senza sforzo

Perché è importante: le azioni ripetitive per lo stesso output (ad esempio, la compilazione di moduli diversi con le stesse informazioni) è un'attività faticosa che non aiuta l'utente a raggiungere i propri obiettivi più velocemente o meglio. È probabile che l'utente cerchi anche di trovare un modo per aggirarlo: ad esempio, cercando concorrenti che possano aiutarli a farlo più velocemente/meglio.

Come testarlo: dovresti iniziare analizzando tutti i flussi del tuo prodotto e osservando il comportamento dell'utente. Vuoi assicurarti che, se sono presenti azioni ripetitive, ci sia un modo per facilitarle: un'opzione per utilizzare le informazioni immesse in precedenza.

02 – Gli utenti possono facilmente recuperare dagli errori

Perché è importante: spesso, gli utenti eseguono azioni non intenzionali o azioni che non hanno portato ai risultati desiderati e consentire loro di tornare indietro e riprovare significa che non saranno frustrati e si riprenderanno facilmente e continueranno a muoversi nel flusso.

Come testarlo: in primo luogo, assicurati che il tuo sistema di navigazione consenta di tornare indietro e che le azioni possano essere annullate. Quindi, durante l'esecuzione dei test di usabilità, creare scenari in cui l'utente molto probabilmente eseguirà l'azione sbagliata e verifica se può recuperare facilmente.

03 – Gli utenti sono adeguatamente supportati in base al loro livello di competenza

Perché è importante: è importante assicurarsi che gli utenti inesperti del tuo prodotto abbiano un'esperienza di apprendimento fluida. Tuttavia, una volta che avranno già acquisito familiarità con il prodotto, ciò dovrebbe lasciare il posto a strumenti che li aiutino a muoversi più velocemente attraverso i flussi. Entrambi gli scenari migliorano l'usabilità e la conservazione. Ad esempio, scorciatoie per utenti esperti, suggerimenti per utenti inesperti, ecc.

Come testarlo: in primo luogo, controlla se disponi di strumenti per entrambi i segmenti di pubblico. Quindi, conduci test di usabilità con utenti inesperti ed esperti per vedere se questi strumenti vengono utilizzati correttamente.

04 – L'accesso alla guida non impedisce l'avanzamento dell'utente

Perché è importante: gli utenti chiedono aiuto ogni volta che sono bloccati in una determinata parte del tuo prodotto. È importante che l'aiuto, online o offline, sia aggiuntivo e consenta all'utente di riprendere il lavoro da dove si era interrotto.

Come testarlo: crea scenari di test in cui gli utenti chiederanno aiuto e vedranno se i loro flussi di lavoro e i loro progressi sono interrotti.

Progettazione visiva

05 – Non più di tre colori primari

Perché è importante: questa non è una regola fissa e talvolta, per casi specifici, possono essere utilizzati più di tre colori primari. Tuttavia, tieni presente che combinare tre colori è già difficile, quindi nella maggior parte dei casi dovresti evitarne di più.

Come testarlo: assicurati che la tavolozza dei colori utilizzata durante la progettazione del prodotto non contenga più di tre colori primari.

06 – Il colore da solo non viene utilizzato per trasmettere gerarchia, contenuto o funzionalità

Perché è importante: avere un prodotto accessibile non è un vantaggio, è un must. Le persone con disabilità visive, come il daltonismo, si affidano esclusivamente al colore per trasmettere gerarchia, contenuto o funzionalità. Ciò significa che non saranno in grado di utilizzare il tuo prodotto e saranno un gruppo demografico escluso.

Come testarlo: colorfilter.wickline.org ti consentirà di inserire un filtro colorato nella parte superiore della tua pagina web e testarlo per diversi tipi di daltonismo. Puoi anche catturare lo schermo del tuo prodotto e convertirlo in scala di grigi su un editor di immagini e vedere se riesci a distinguere facilmente i colori.

07 – La gerarchia visiva indirizza l'utente all'azione richiesta

Perché è importante: gli utenti si affidano alla gerarchia del prodotto e agli indizi per sapere cosa fare e dove andare: è essenziale capirlo e guidarli adeguatamente utilizzando quella gerarchia.

Come testarlo: capisci come funzionano i flussi all'interno del tuo prodotto e se le sue azioni chiave sono incentivate dalla gerarchia visiva.

08 – Gli elementi in cima alla gerarchia visiva sono i più importanti

Perché è importante: la gerarchia visiva consente agli utenti di scansionare rapidamente le informazioni, dando priorità ai contenuti in base alle loro esigenze immediate. Gli elementi in cima alla gerarchia visiva devono essere i più importanti per l'azienda e più rilevanti per gli utenti.

Come testarlo: cattura lo schermo del tuo prodotto digitale, quindi gaussiano sfocando lo screenshot in un raggio di circa 5px. Osservando il risultato, visualizzerai immediatamente la gerarchia e noterai quali elementi spiccano. Sono quelli più importanti per l'azienda e l'utente?

09 – L'azione primaria è visivamente distinta dalle azioni secondarie

Perché è importante: avere azioni primarie e secondarie distinte significa che l'utente non sarà confuso quando interagisce con il tuo prodotto e sarà meno incline a commettere errori. Ad esempio, "Invia" e "Annulla" devono essere chiaramente distinti.

Come testarlo: quando si esegue il test di usabilità, osservare gli errori comuni che non derivano dall'intento dell'utente ma da azioni primarie e secondarie scarsamente distinte. Inoltre, durante la revisione del design, assicurati che colore, dimensioni, posizionamento e altri elementi differenziano le azioni.

10 – Gli elementi interattivi non sono astratti

Perché è importante: quando si utilizza un nuovo prodotto, gli utenti hanno una serie di aspettative basate sull'esperienza precedente nell'utilizzo di altri prodotti digitali, ad esempio come dovrebbero essere i pulsanti e come dovrebbero funzionare. Soddisfare queste aspettative significa non creare attriti inutili.

Come testarlo: in primo luogo, rivedi il tuo prodotto cercando aree in cui non vengono utilizzati modelli comuni. Ad esempio, link che non sembrano link.

11 – L'invio del modulo è confermato in modo visivamente distinto

Perché è importante: è essenziale fornire all'utente la conferma se un'azione è stata eseguita correttamente o meno. Ad esempio, dopo aver inviato un modulo, un chiaro messaggio di conferma sotto forma di un banner colorato significherà che l'utente può passare all'attività successiva.

Come testarlo: controlla tutte le aree del tuo prodotto in cui l'utente inserisce le informazioni. Dopo che l'input dell'utente è stato completato, attiva una conferma relativa all'esito positivo o negativo dell'azione. Assicurati che il feedback sia chiarissimo sullo stato finale.

12 – I messaggi di avviso sono coerenti

Che cos'è: i messaggi di avviso hanno lo stesso stile visivo e vengono visualizzati nella stessa posizione nello stesso modo.

Perché è importante: avere messaggi di avviso coerenti significa che l'utente capirà sempre ciò che merita immediatamente attenzione. Non essere coerenti con gli avvisi significherebbe un carico mentale aggiuntivo ogni volta che viene visualizzato un nuovo avviso.

Come testarlo: assicurati che i messaggi di avviso abbiano lo stesso stile visivo e che il loro posizionamento sia simile o identico.

13 – I messaggi di avviso sono visivamente distinti

Perché è importante: assicurandosi che i messaggi di avviso siano chiaramente differenziati dagli altri elementi dello schermo, l'utente può effettivamente notarli e/o agire di conseguenza.

Come testarlo: dopo aver verificato tu stesso la differenziazione visiva, osserva come gli utenti reagiscono ai messaggi di avviso nei test di usabilità.

Informazione architettura

14 – La navigazione è coerente

Perché è importante: il modo in cui gli utenti si orientano e quindi navigano attraverso il tuo prodotto influenza direttamente se possono completare i loro obiettivi indipendentemente dalla loro pagina corrente.

Come testarlo: controlla la documentazione dell'architettura dell'informazione e assicurati che la navigazione sia raggiungibile in ogni pagina e che non cambi o scompaia. Prima di immergerti nel design visivo, prova l'ordinamento delle carte o il test degli alberi per assicurarti che i percorsi dell'architettura dell'informazione siano il più intuitivi possibile.

15 – Spazio per la crescita

Perché è importante: non è possibile riprogettare il sistema informativo e di navigazione di un prodotto ogni volta che emergono nuove funzionalità o contenuti. I menu di navigazione e il layout generale devono supportare più categorie/argomenti senza interruzioni. Progettare con margini di crescita significa che i principali sforzi di progettazione e sviluppo si adattano facilmente all'intera interfaccia.

Come testarlo: chiedi a tutte le parti interessate come il contenuto potrebbe crescere nel tempo nel prodotto. Supporterai più contenuti statici? L'architettura dovrà supportare i video?

Tipografia

16 – Non vengono utilizzate più di due distinte famiglie tipo

Perché è importante: questa non è una regola fissa: a volte è possibile realizzarne più di due. Ma in generale, abbinare più di due non è un lavoro facile. Per l'usabilità e per scopi visivi, attenersi a due semplifica la gerarchia tipografica, migliorando la comprensione.

Come testarlo: assicurati che il tuo progetto non mescoli più di due famiglie di tipi. Sarebbe utile se ti assicurassi anche che le famiglie che hai scelto siano abbinate correttamente (ulteriori informazioni qui).

17 – I caratteri utilizzati per il contenuto del testo hanno una dimensione di almeno 12px

Perché è importante: ancora una volta, non è una regola fissa – potresti, in teoria, utilizzare dimensioni più piccole per scopi particolari – ma in generale, la leggibilità è notevolmente ridotta per dimensioni inferiori a 12 pixel.

Come testarlo: controlla tutti i tuoi contenuti e assicurati che i caratteri utilizzati per essi abbiano una dimensione di almeno 12 pixel.

18 – Riserva le parole maiuscole per etichette, intestazioni o acronimi

Perché è importante: è noto che limitare l'uso di parole maiuscole facilita la comprensione: è visivamente meno pesante e più facile da digerire per l'utente. Dovrebbe essere usato specificamente per enfasi o casi molto ristretti, ad esempio gli acronimi.

Come testarlo: esegui un controllo approfondito del contenuto e assicurati che le parole maiuscole siano limitate solo a intestazioni, etichette o acronimi.

19 – Per separare il contenuto dai controlli vengono utilizzati stili o famiglie di caratteri diversi

Perché è importante: devono esserci indicatori chiari su cosa sia il contenuto e cosa siano i controlli, ovvero con cosa l'utente può interagire. Tali indicatori possono essere dimensioni, colore, posizionamento, carattere, ecc. Il carattere è importante: l'utilizzo di stili o famiglie diverse significa che l'utente non sarà confuso e identificherà facilmente ciò con cui può interagire.

Come testarlo: identifica tutti i controlli nel tuo prodotto e assicurati che si distinguano dal contenuto. Quando si eseguono test di usabilità, prestare attenzione se gli utenti hanno difficoltà a interagire con i controlli.

20 – Dimensione/peso del carattere differenzia tra i tipi di contenuto

Perché è importante: ha un forte impatto sulla leggibilità e sulla comprensione. Fare una chiara distinzione tra titoli, sottotitoli e paragrafi riduce il sovraccarico mentale nel digerire quel contenuto. Ha anche vantaggi visivi: sembra e si sente meglio.

Come testarlo: quando esamini il contenuto all'interno del tuo prodotto, assicurati che i titoli, i sottotitoli e i paragrafi utilizzino dimensioni e pesi dei caratteri diversi.

Interfaccia utente

21 – Vicinanza e allineamento

Perché è importante: l'utente ha la tendenza a raggruppare, funzionalmente o contestualmente, gli elementi che sono vicini l'uno all'altro. Una barra di navigazione ne è un buon esempio. Seguendo questo schema e raggruppando gli elementi che sono collegati, l'utente comprende immediatamente la tua interfaccia.

Come testarlo: cerca elementi con funzionalità simili e controlla se (quando possibile) sono raggruppati insieme.

22 – Indicatore di avanzamento per flussi di lavoro multifase

Perché è importante: soprattutto per i flussi di lavoro in più fasi, l'utente può facilmente sentirsi sopraffatto o chiedersi quanto tempo manca alla fine. Un indicatore di avanzamento li aiuta a localizzare se stessi, ma soprattutto crea un senso di realizzazione e riduce i tassi di abbandono.

Come testarlo: controlla tutti i flussi all'interno del tuo prodotto in cui ci sono diversi passaggi per ottenere qualcosa, quindi assicurati che i progressi siano indicati attraverso un indicatore.

23 – Gli elementi in primo piano (come contenuto e controlli) sono facilmente distinguibili dallo sfondo

Perché è importante: importante per le persone con disabilità visive. Migliora anche la curva di apprendimento e la comprensione dell'utente. Una chiara distinzione facilita la navigazione, porta più attenzione ai pulsanti e aumenta l'usabilità in generale.

Come testarlo: cattura lo schermo del tuo prodotto e sfoca la gaussiana in un raggio compreso tra 3px e 5px. Quando guardi il risultato, puoi facilmente dire cosa c'è in primo piano e cosa c'è sullo sfondo?

Congratulazioni per aver passato la lista! Tuttavia, questa non è la fine.

Il tuo prodotto ora è più solido e potresti essere migliorato in diverse aree - forse ora è più accessibile, ad esempio - ma ricorda sempre di continuare a testare, raccogliere feedback dagli utenti e continuare a ripetere.