Suggerimenti per la progettazione per gli utenti Colorblind

Si stima che circa l'8% dei maschi e lo 0,5% delle femmine nascano daltonici. Potrebbe sembrare un numero basso, ma se stai progettando per un vasto pubblico, avere un sito che è inutilizzabile per otto persone su cento è decisamente meno desiderabile.

Fortunatamente, puoi facilmente assicurarti che il tuo sito sia "daltonico", tenendo sempre a mente le informazioni di seguito. Daremo un'occhiata a ciò che il daltonismo significa davvero e come è possibile modificare i tuoi progetti basandoti su alcuni semplici principi.

Vorrei iniziare dicendo che anche se non sono affatto un opthamologist, la maggior parte degli uomini della mia famiglia sono daltonici e gli esempi forniti di seguito sono stati gestiti da uomini daltonici innocenti. Se sei una persona daltonica, la tua descrizione degli esempi di seguito potrebbe essere leggermente o addirittura considerevolmente diversa dal momento che nessun doppio set di occhi daltonici sarà esattamente lo stesso.

La scienza

Una discussione sul daltonismo può diventare davvero scientifica molto velocemente. Termini come la protanopia e la tricromia anomala sono sufficienti per far sì che anche le persone molto intelligenti siano legate e confuse.

Fortunatamente, come designer non è necessario diventare un esperto di daltonismo. Invece, è possibile fare generalizzazioni ampiamente applicabili su ciò che gli utenti daltonici fanno e non hanno difficoltà a percepire. Questo non solo ti risparmia una lezione di scienze, ma ti aiuta a garantire che tu stia progettando in modo che quasi tutti gli utenti daltonici possano utilizzare efficacemente il tuo sito piuttosto che un singolo tipo.

Tienilo a mente mentre leggi le informazioni di seguito. Ogni affermazione fatta non sarà vera per tutti gli utenti daltonici, ma almeno alcuni di essi si applicheranno a una grande maggioranza di essi.

Se sei interessato alla scienza, dai un'occhiata alla spiegazione di Wikipedia poiché è molto più avanzato e appropriato in questo articolo.

Busting the Myth

Prima di tutto, puoi scommettere con sicurezza che nessuno lo sai letteralmente daltonico. Il titolo è infatti (nella maggior parte dei casi) un termine improprio completo. Una piccola percentuale di umani nasce con una visione veramente monocromatica.

Termini molto più precisi includono "alterati dal colore? o? colore carente? Invece di vedere il mondo in bianco e nero, le persone daltoniche di solito riescono a percepire e comprendere quasi tutti i colori dello spettro. Una delle domande più sciocche e fastidiose che puoi fare alle persone daltoniche è se possono o no? giallo, verde o di qualsiasi altro colore.

Il vero problema è che per gli utenti colorblind è abbastanza difficile distinguere tra due colori simili. Questo è davvero difficile da capire quando consideri che i colori che non ti sembrano minimamente simili potrebbero sembrare molto simili a quelli di un daltonista, e viceversa.

È tutto sulle sfumature

Per semplificare la comprensione, pensa a tutte le sfumature di tutti i colori che hai mai visto. Ad esempio, quando pensi al colore? Verde? pensa a quanti campioni di colori completamente diversi potrebbero corrispondere alla tua definizione di verde. Luminoso, scuro, silenzioso, acquerello, neon; ancora e ancora. Questo include le più piccole variazioni in cui un verde potrebbe contenere solo un po 'più luce rossa o blu rispetto a un altro verde.

Ora immagina di aver contato tutte queste diverse sfumature di verde che i tuoi occhi sono in grado di percepire e hanno eguagliato, diciamo 1 milione (numero completamente arbitrario). Ora date lo stesso compito a una persona daltonica e potrebbero arrivare a 500.000 o meno.

Quindi, vedi, non è che le persone daltoniche (nella maggior parte dei casi) sono incapaci o percepiscono? Verde ,? invece si limitano a distinguere meno tonalità di verde di te. Quindi, se vedi tre sfumature di verde simili, un utente daltonico potrebbe vedere solo una sfumatura di verde

Per renderlo ancora più complicato, sfumature simili provenienti da colori diversi spesso corrono insieme e rendono difficile determinare con precisione quale colore sia effettivamente.

Esempi

È sempre un po 'più facile da capire con alcuni esempi solidi di fronte a te. Considera i seguenti quattro campioni.

Guarda prima i due campioni in basso. Considerare principalmente la luminosità dei campioni, ancor più del colore di base. Gli utenti Colorblind dovrebbero essere facilmente in grado di distinguere tra questi due campioni; proprio come puoi Indipendentemente dal fatto che una persona daltonica identifichi correttamente i colori è una storia completamente diversa, ma per lo meno, è facile dire che sono colori diversi.

Ora, i primi due campioni sono una storia diversa. L'esempio precedente potrebbe farvi pensare che gli utenti daltonici possano facilmente distinguere tra marrone e verde, ma si sbaglia. Di nuovo, confrontando solo la relativa luminosità / oscurità dei due campioni, è probabile che si possa vedere come questi due campioni potrebbero sembrare più simili. Considerate ora che, per molti individui daltonici, i primi due campioni saranno identici.

Per viaggiare ancora più in basso nella tana del coniglio, ripetiamo il marrone scuro e aggiungiamo una sfumatura di rosso scuro.

Di nuovo vediamo due tonalità che sono colori diversi, ma anche in questo caso la luminosità relativa dei campioni è così simile che un utente daltonico avrà difficoltà a distinguere tra loro.

Un gruppo di occhi normali dovrebbe vedere cinque diversi campioni di colore nella disposizione sopra (uno è ripetuto). Un set di occhi daltonici probabilmente vedrà tre o meno!

Combinazioni di colori dolorose

Mescolare sfumature simili come negli esempi sopra e gli utenti colorblind che non si accorgeranno saranno moderatamente infastiditi. Ma se vuoi davvero rendere il tuo sito completamente inutilizzabile, inizia a sovrapporre sfumature di colori con valori di luminosità simili ma potenzialmente in grado di scontrarsi seriamente.

Rosso e blu, viola e rosso, rosa e blu e quasi ogni combinazione di questi sono un ottimo esempio. Come esempio di cosa non fare, considera l'immagine qui sotto.

Considerando che potresti vedere solo un brutto testo, molti utenti daltonici vedranno colori così vibranti che i loro occhi inizieranno a lacrimare (più sono lontani e più diventa peggio). È difficile da spiegare correttamente quando non riesci a vederlo, ma in pratica quello che succede è che è evidente che i colori sono molto diversi ma in realtà sono abbastanza simili da rendere molto difficili da distinguere i bordi in cui i due colori si incontrano. Ciò provoca un'esperienza del tutto spiacevole per molti utenti daltonici durante la visualizzazione di un'immagine come quella sopra.

E allora? In che modo questo influenza i miei disegni?

Questa informazione è buona, ma come si applica praticamente al design? La risposta è che ci sono alcune aree chiave in cui dovresti prestare attenzione a come gli utenti daltonici potrebbero sperimentare il tuo sito in modo diverso.

Uno degli errori più comuni che vedo è in effetti link hover. Innumerevoli progettisti applicano semplicemente un cambiamento di colore come effetto al passaggio del mouse e lo chiamano un giorno perché possono percepirlo perfettamente.

In caso di dubbio, ricorda che gli utenti daltonici possono percepire i cambiamenti di luminosità, per la maggior parte, proprio come puoi. Un blu davvero scuro e un blu molto chiaro sarà un passaggio ovvio. Quindi, se cambi i colori su un passaggio del mouse, assicurati che i due colori siano molto diversi nella loro luminosità relativa. È possibile passare da un marrone scuro a un verde brillante, ma non da un marrone scuro a un verde scuro.

Inoltre, è sempre meglio aggiungere qualcos'altro visivamente oltre ai cambiamenti di colore. Quando l'utente si posiziona su un collegamento, aggiungi un tratto, un'ombra esterna o qualsiasi altra cosa tu possa pensare per ottenere una maggiore differenza visiva che non si basa semplicemente su un cambiamento di colore.

infografica

Un'altra area chiave in cui le differenze di colore sono importanti è la visualizzazione dei dati. Scegliere i colori sbagliati per un grafico può renderlo letteralmente illeggibile per un utente daltonico.

Anche se i tuoi colori sono molto diversi, spesso è una buona idea aggiungere un piccolo motivo o una texture a parti diverse di un grafico per facilitare la differenziazione visiva.

Nell'esempio sopra, anche se i colori sono ancora abbastanza simili che un utente daltonico potrebbe non essere in grado di vedere la differenza, le strisce rappresentano un riferimento visivo rapido e semplice per tutti gli utenti.

Giochi

Come potete immaginare, le possibilità per gli utenti daltonici di essere tralasciate sono infinite, ma un ultimo posto in cui voglio discutere dove questo può essere particolarmente frustrante per loro è con i giochi.

Immagina di provare a giocare al gioco iPhone sotto come utente daltonico. Abbinare i colori per completare il puzzle potrebbe essere abbastanza difficile!

Molti giochi per iPhone hanno compensato questo problema grazie a una modalità colorblind opzionale, ma per semplificare la tua scelta, aggiungi l'aggiunta di simboli oltre al colore per rendere più semplice la riproduzione a tutti. A titolo illustrativo, prendi in considerazione un mazzo di carte da gioco. C'è molto di più di cartellini rossi e carte nere. Chiunque giochi, daltonico o no, sa che i diamanti e i cuori sono i cartellini rossi mentre i mazzi e le picche sono le carte nere. Anche quando vedi questi simboli in una fotografia in bianco e nero, puoi distinguere con sicurezza tra le carte rosse e quelle nere. Questo è esattamente il modo in cui i tuoi giochi dovrebbero essere sviluppati.

Conclusione

In chiusura, ricorda che in realtà è davvero facile rendere il tuo sito accessibile agli utenti daltonici. Devi solo fare uno sforzo cosciente dove influisce su come funziona il sito o quando la percezione del colore potrebbe compromettere la leggibilità del testo. Chi se ne frega Se hai uno sfondo marrone che gli utenti daltonici pensano sia verde? Il più delle volte, di sicuro non lo faranno.

Assicurati che quando è importante, ad esempio con collegamenti, grafici e giochi, cerchi i modi per aggiungere contrasto. Usa colori a contrasto molto contrastanti, implementa pattern, applica simboli e usa trucchi con tratti, ombre e simili per assicurarti che ci sia una differenza visiva significativa in tutti i posti giusti. Spesso può essere utile utilizzare un simulatore di daltonismo per decidere come i colori della pagina influenzano l'esperienza complessiva.

Lascia un commento qui sotto e facci sapere se prendi in considerazione gli utenti daltonici durante la progettazione di un sito e come rispondi alle loro esigenze.