Progettazione dell'interfaccia utente per utenti daltonici

Le persone daltoniche costituiscono una parte significativa della popolazione: circa 1 uomo su 12 e 1 donna su 200 per l'esattezza. Tuttavia, gli utenti daltonici sono un pubblico spesso trascurato nella progettazione dell'interfaccia utente.

Molti scambiano il daltonismo per vedere in bianco e nero e, sebbene questo sia un tipo, ci sono versioni meno rare e meno estreme.

La maggior parte delle persone è tricromatica, il che significa che percepisce il colore come una combinazione di tre colori: verde, rosso e blu. Diversi tipi di daltonismo o carenza di visione dei colori (CVD) derivano dall'incapacità di percepire chiaramente uno o più di questi colori. I tipi di CVD più comuni sono daltonismo rosso-verde, dove è difficile distinguere tra rosso e verde, e daltonismo rosso, dove i colori rossi appaiono opachi.

Riteniamo che tutti dovrebbero avere un accesso equo e paritario a Internet, quindi è essenziale che i designer dell'interfaccia utente progettino tenendo conto degli utenti daltonici. L'Americans with Disabilities Act (ADA) richiede anche che alcune organizzazioni soddisfino le linee guida WCAG 2.0 Livello AA.

Rendere il tuo sito web conforme ad ADA non è difficile, ma significa considerare l'accessibilità del colore. Al di fuori delle ramificazioni legali, la progettazione per gli utenti daltonici è vitale per l'esperienza utente che offri.

Perché progettare per daltonismo è importante

La teoria del colore gioca un ruolo importante nella progettazione dell'interfaccia utente perché il colore ha il potere di influenzare le decisioni di acquisto dell'utente, la risposta emotiva e l'esperienza complessiva dell'utente. Pensa a quanto sia importante per un'azienda scegliere i colori giusti del marchio. Ora immagina che oltre l'8% delle persone non possa leggere il tuo logo o sito web a causa dei colori che hai scelto. È un sacco di opportunità perse.

Dal momento che gli utenti daltonici non possono distinguere determinati colori, i designer non possono fare affidamento solo sul colore per la leggibilità o l'impatto emotivo di un design. Quando usi il colore, devi considerare come gli utenti interagiscono con esso e creare un design interattivo che attiri il pubblico di destinazione, inclusi i membri daltonici. È compito di un designer essere empatico nei confronti dei punti deboli degli utenti in modo che possano prevenirli e risolverli.

Al giorno d'oggi, ci sono strumenti come Visolve che possono regolare i display dei computer per determinati tipi di daltonismo, ma non tutti i daltonici usano questi strumenti, nemmeno tutti i daltonici sanno di essere daltonici.

È importante notare che il tuo sito Web non è l'unico posto in cui considerare l'accessibilità del colore. Anche i tuoi social media possono essere resi accessibili a non vedenti e ipovedenti.

Terminologia del colore da conoscere

Prima di entrare nelle migliori pratiche di progettazione dell'interfaccia utente per gli utenti daltonici, è bene rivedere i fondamenti del colore per coloro che non sono esperti di design. Ci sono quattro componenti principali da considerare quando si sceglie una combinazione di colori:

Tonalità: è sinonimo di "colore" ed è determinato dalla lunghezza d'onda spettrale di un colore.

Saturazione: detta anche croma, indica quanto è intenso o puro un colore, determinato dalla quantità di grigio presente. Meno grigio c'è, più luminoso appare un colore.

Luminosità: la luminosità dipende dalla quantità di bianco o nero aggiunto a un colore, creando rispettivamente tinte e sfumature.

Temperatura: indica quanto caldo o freddo percepisci un colore. Il monitor di un computer può influenzare la temperatura percepita di un colore.

Come progettare per utenti daltonici

Progettare per daltonismo non significa rendere il tuo prodotto meno attraente; significa semplicemente seguire alcune buone pratiche durante il processo di progettazione. L'implementazione di buoni principi di progettazione di UX e UI non farà che migliorare l'usabilità del tuo sito web a lungo termine.

Non definire solo con il colore

Quando progetti per utenti daltonici, non puoi fare affidamento esclusivamente sul colore per qualsiasi messaggio.

Ciò è un errore comune nella visualizzazione dei dati poiché grafici, grafici e mappe sono spesso codificati a colori. Sono comuni anche i moduli di prenotazione che mostrano gli slot disponibili per gli appuntamenti o i posti disponibili per i concerti tramite la codifica a colori. Altri esempi includono la segnalazione di campi modulo obbligatori o mancanti delineandoli a colori o indicando errori con il colore.

Dovresti evitare di trasmettere informazioni critiche in testo e immagini a colori o almeno fornire tali informazioni in altri modi accessibili.

Comprendere le scelte di contrasto e colore

Per gli utenti daltonici, il contrasto tra i colori è spesso più importante del colore stesso. Concentrarsi sul contrasto è vantaggioso per i designer poiché i diversi tipi di daltonismo rendono inefficiente semplicemente evitare un particolare colore. Per migliorare il rapporto di contrasto in una tavolozza adatta ai daltonici, schiarisci i colori chiari e scurisci quelli scuri.

Ecco alcuni altri modi per migliorare la visibilità del tuo design:

• Enfatizza la differenza tra il colore di primo piano e quello di sfondo
• Non scegliere le tonalità una accanto all'altra sulla ruota dei colori a meno che non vi sia una grande differenza di luminosità
• Evita di usare colori di luminosità simile, indipendentemente dalla tonalità o dalla saturazione
• Aumenta la saturazione delle tinte in uso

Con questo in mente, ci sono ancora combinazioni di colori che potrebbero essere più difficili per diversi tipi di utenti daltonici. La tua tavolozza adatta ai daltonici dovrebbe allontanarsi da queste combinazioni di colori quando il rapporto di contrasto non è significativo:

• Rosso e verde
• Verde e blu
• Verde e marrone
• Verde e grigio
• Verde e nero
• Blu e grigio
• Blu e viola
• Giallo e verde chiaro

Implementa modelli e trame

Un modo per aggiornare i tuoi progetti visivi per gli utenti daltonici senza fare affidamento solo sulla tavolozza dei colori è utilizzare motivi e trame. Funziona bene nei casi in cui il colore di solito aiuta a distinguere le informazioni, ad esempio in un grafico o un grafico. L'aggiunta di elementi di pattern o texture aiuterà gli elementi a distinguersi.

Usa simboli ed etichetta tutto

L'etichettatura chiara è una best practice per guidare qualsiasi utente attraverso il percorso del cliente, compresi quelli daltonici. Le etichette possono aiutare a distinguere le informazioni generalmente trasmesse con il colore. Questo vale per la visualizzazione dei dati, come i grafici, o per guidare gli utenti su una pagina web. Chiediti se un utente può trovare la propria strada senza i suggerimenti sui colori che hai fornito.

Dal punto di vista dell'e-commerce, dovresti anche etichettare i tuoi prodotti con informazioni chiare e descrittive. Non fare affidamento sulle foto dei prodotti per raccontare l'intera storia; etichettare il colore di un prodotto.

Ripensa ai tuoi pulsanti CTA

L'invito all'azione (CTA) è parte integrante del design interattivo. Se un utente non riesce a trovarlo o non lo capisce, non avanzerà nel percorso e non raggiungerai gli obiettivi. Devi attirare l'attenzione sul tuo CTA e molti designer si affidano al colore per farlo.

Un buon design dell'interfaccia utente implementa il colore ma utilizza anche una o più di queste altre tecniche straordinarie per i pulsanti CTA:

• Dimensione
• Posizionamento
• Contrasto intenso
• Bordi ponderati
• Caratteri pesati
• Icone simboliche
• Effetti al passaggio del mouse

Queste tecniche funzionano allo stesso modo su utenti daltonici e non daltonici e puoi usarle per altri elementi della pagina su cui vuoi attirare l'attenzione.

Sottolinea quei link

Se leggi qualche blog, incluso questo, noterai che i link sono evidenziati per avvisare gli utenti della loro presenza. Il modo più comune per enfatizzare un legame è con il colore. Per questo, usa il blu perché la maggior parte delle persone con una carenza di visione dei colori può vederlo.

È per gli utenti con acromatopsia o monocromia, sebbene forme più rare di daltonismo, l'enfasi del colore non sarà sufficiente. Per queste persone, i link colorati appaiono in grigio e sono indistinguibili da altri testi. Puoi risolverlo rapidamente sottolineando il tuo testo di ancoraggio.

Considera il minimalismo

Il minimalismo è tutt'altro che nuovo. L'estetica è di tendenza da decenni, facendosi strada attraverso l'architettura, l'arte, la decorazione d'interni e, naturalmente, il design.

E ora, il minimalismo ha un ruolo nell'accessibilità del colore perché meno colori ci sono, minori sono le possibilità di confusione. È anche stilisticamente accattivante e meno fastidioso, il che lo rende una scelta solida per tutto il pubblico.

Non è necessario aderire a un design minimalista per essere accessibile, ma è un percorso che funziona.

Usa un simulatore di daltonismo

Mentre la comunità del design lavora per un'esperienza utente accessibile, sono emersi molti ottimi strumenti per aiutare. I simulatori daltonici, ad esempio, consentono ai designer di vedere i loro progetti come farebbe un utente daltonico. Uno di questi simulatori, Oracle, è disponibile per Mac, Windows e Linux. Usa un simulatore daltonico per testare il tuo lavoro durante tutto il processo di progettazione e capire come gli utenti interagiscono con le tue scelte.

Al momento di decidere la tavolozza dei colori nelle fasi iniziali, suggeriamo di utilizzare uno strumento di selezione dei colori che valuti le tue scelte in base alle linee guida AA. Questo controllo del contrasto può dirti il ​​tuo rapporto di contrasto e questo generatore di colori accessibile suggerisce combinazioni di colori che funzionano meglio.

Rendi il tuo sito web accessibile

La progettazione per il daltonismo garantisce che il tuo sito Web offra un'esperienza utente che tutto il tuo pubblico può navigare e apprezzare. Per loro significa un marchio su cui possono fare affidamento; per te significa conversioni riuscite. A seconda delle dimensioni della tua azienda, può anche voler dire rispettare la legge. Indipendentemente da ciò, fa parte della costruzione di un ambiente online equo ed equo.

L'accessibilità del colore è solo un elemento della costruzione di un sito Web accogliente. Assicurati di controllare la nostra guida su come rendere i tuoi contenuti accessibili ai non udenti e alla comunità HOH.