Design UI pentru utilizatorii nevăzători

Persoanele daltoniste reprezintă o parte semnificativă a populației – aproximativ 1 din 12 bărbați și 1 din 200 de femei pentru a fi exact. Cu toate acestea, utilizatorii daltonici sunt un public adesea trecut cu vederea în designul UI.

Mulți greșesc daltonismul pentru a vedea în alb și negru și, deși acesta este un singur tip, există versiuni mai puțin rare și mai puțin extreme.

Majoritatea oamenilor sunt tricromatici, ceea ce înseamnă că percep culoarea ca o combinație de trei culori: verde, roșu și albastru. Diferite tipuri de daltonism sau deficiență de vedere a culorilor (CVD) provin din incapacitatea de a percepe clar una sau mai multe dintre aceste culori. Cele mai frecvente tipuri de BCV sunt daltonismul roșu-verde, unde este greu de făcut distincția între roșu și verde, și daltonismul roșu, unde culorile roșii par terne.

Credem că toată lumea ar trebui să aibă acces echitabil și egal la internet, așa că este esențial ca designerii de UI să proiecteze ținând cont de utilizatorii daltonieri. Actul Americans with Disabilities Act (ADA) cere chiar ca anumite organizații să respecte regulile WCAG 2.0 Level AA.

A face site-ul dvs. compatibil ADA nu este dificil, dar înseamnă să luați în considerare accesibilitatea culorilor. În afara ramificațiilor legale, proiectarea pentru utilizatorii daltonici este vitală pentru experiența utilizatorului pe care o oferiți.

De ce contează proiectarea pentru daltonism

Teoria culorii joacă un rol important în designul UI, deoarece culoarea are puterea de a influența deciziile de cumpărare ale utilizatorului, răspunsul emoțional și experiența generală a utilizatorului. Gândiți-vă cât de importantă este alegerea culorilor potrivite de brand pentru o afacere. Acum imaginați-vă că peste 8% dintre oameni nu vă pot citi logo-ul sau site-ul web din cauza culorilor pe care le-ați ales. Este o mulțime de ocazie pierdută.

Deoarece utilizatorii daltonişti nu pot deosebi anumite culori, designerii nu se pot baza doar pe culoare pentru lizibilitatea sau impactul emoţional al unui design. Când utilizați culoarea, trebuie să luați în considerare modul în care utilizatorii interacționează cu aceasta și să creați un design interactiv care să atragă publicul țintă – inclusiv membrii daltonieri. Este datoria unui designer să fie empatic cu punctele dureroase ale utilizatorilor, astfel încât să le poată preveni și rezolva.

În zilele noastre, există instrumente precum Visolve care pot ajusta afișajele computerelor pentru anumite tipuri de daltonism, dar nu toate persoanele daltoniste folosesc aceste instrumente – nici măcar toți daltonicii nu știu că sunt daltonici.

Este important să rețineți că site-ul dvs. web nu este singurul loc în care să luați în considerare accesibilitatea culorilor. Chiar și rețelele dvs. de socializare pot fi accesibile celor nevăzători și cu deficiențe de vedere.

Terminologia culorilor de cunoscut

Înainte de a intra în cele mai bune practici de proiectare a interfeței de utilizare pentru utilizatorii daltonieri, este bine să revizuim elementele fundamentale ale culorii pentru cei care nu sunt experți în design. Există patru componente principale de luat în considerare atunci când alegeți o schemă de culori:

Nuanță: Acesta este un sinonim pentru „culoare” și este determinat de lungimea de undă spectrală a unei culori.

Saturație: Denumită și croma, așa este cât de intensă sau pură este o culoare, determinată de cantitatea de gri prezentă. Cu cât este mai puțin gri, cu atât apare o culoare mai strălucitoare.

Luminozitate: Luminozitatea depinde de cantitatea de alb sau negru adăugată unei culori, creând nuanțe și, respectiv, nuanțe.

Temperatura: Acesta este cât de cald sau rece percepeți că este o culoare. Un monitor de computer poate afecta temperatura percepută a unei culori.

Cum să proiectați pentru utilizatorii nevăzători

Proiectarea pentru daltonism nu înseamnă să vă faceți produsul mai puțin atractiv; înseamnă doar respectarea anumitor bune practici în timpul procesului de proiectare. Implementarea unor principii bune de design UX și UI nu va face decât să îmbunătățească utilizarea site-ului dvs. pe termen lung.

Nu definiți doar cu culoarea

Când proiectați pentru utilizatori nevăzători, nu vă puteți baza exclusiv pe culoare pentru orice mesaj.

Procedând astfel, este o greșeală comună în vizualizarea datelor, deoarece graficele, diagramele și hărțile sunt frecvent codificate cu culori. Formularele de rezervare care arată sloturile disponibile pentru întâlniri sau locurile disponibile pentru concerte prin codificarea culorilor sunt, de asemenea, comune. Alte exemple includ semnificarea câmpurilor de formular obligatorii sau pierdute prin conturarea lor în culoare sau indicarea erorilor cu culoare.

Ar trebui să vă îndepărtați de a transmite informații critice în text și imagini colorate sau cel puțin să furnizați acele informații în alte moduri accesibile.

Înțelegeți opțiunile de contrast și culoare

Pentru utilizatorii daltonici, contrastul dintre culori este adesea mai important decât culoarea în sine. Concentrarea pe contrast este benefică pentru designeri, deoarece diferitele tipuri de daltonism fac ca evitarea unei anumite culori să fie ineficientă. Pentru a îmbunătăți raportul de contrast într-o paletă prietenoasă cu daltonism, luminați culorile deschise și întunecați-le pe cele întunecate.

Iată câteva alte moduri de a îmbunătăți vizibilitatea designului dvs.:

• Subliniați diferența dintre culoarea primului plan și cea a fundalului
• Nu alegeți nuanțe una lângă alta pe roata de culori decât dacă există o diferență mare de luminozitate
• Evitați utilizarea culorilor cu o luminozitate similară, indiferent de nuanță sau saturație
• Creșteți saturația nuanțelor în utilizare

Având în vedere acest lucru, există încă combinații de culori care pot fi mai dificile pentru diferite tipuri de utilizatori nevăzători. Paleta dvs. prietenoasă cu daltonii ar trebui să se îndepărteze de aceste combinații de culori atunci când raportul de contrast nu este semnificativ:

• Roșu și verde
• Verde și albastru
• Verde și maro
• Verde și gri
• Verde și negru
• Albastru și gri
• Albastru și violet
• Galben și verde deschis

Implementați modele și texturi

O modalitate de a vă actualiza design-urile vizuale pentru utilizatorii daltonişti fără a vă baza doar pe paleta de culori este să utilizaţi modele şi texturi. Acest lucru funcționează bine în cazurile în care culoarea ajută de obicei la distingerea informațiilor, cum ar fi într-un grafic sau diagramă. Adăugarea de elemente de model sau textură va ajuta elementele să se deosebească.

Folosiți simboluri și etichetați totul

Etichetarea clară este cea mai bună practică pentru direcționarea oricărui utilizator prin călătoria clientului, inclusiv a celor care sunt daltonieri. Etichetele pot ajuta la distingerea informațiilor transmise de obicei prin culoare. Acest lucru este valabil pentru vizualizarea datelor, cum ar fi grafice, sau pentru ghidarea utilizatorilor pe o pagină web. Întrebați-vă dacă un utilizator își poate găsi drumul fără indicațiile de culoare pe care le-ați furnizat.

Din punct de vedere al comerțului electronic, ar trebui să vă etichetați produsele cu informații clare și descriptive. Nu vă bazați pe fotografiile produselor pentru a spune întreaga poveste; etichetați culoarea unui produs.

Regândește-ți butoanele CTA

Îndemnul la acțiune (CTA) este o parte integrantă a designului interactiv. Dacă un utilizator nu îl găsește sau nu îl înțelege, nu va progresa în călătorie, iar tu nu vei îndeplini obiectivele. Trebuie să atragi atenția asupra CTA, iar mulți designeri se bazează pe culoare pentru a face acest lucru.

Designul bun al interfeței de utilizare implementează culoarea, dar utilizează una sau mai multe dintre aceste alte tehnici remarcabile și pentru butoanele CTA:

• mărimea
• Plasarea
• Contrast puternic
• Borduri ponderate
• Fonturi ponderate
• Icoane simbolice
• Efecte de hover

Aceste tehnici funcționează atât pentru utilizatorii daltonici, cât și pentru utilizatorii non-orbi și le puteți utiliza pentru alte elemente ale paginii asupra cărora doriți să atrageți atenția.

Subliniați acele legături

Dacă citiți orice blog, inclusiv acesta, veți observa că linkurile sunt evidențiate pentru a anunța utilizatorii despre prezența lor. Cel mai comun mod de a sublinia o legătură este cu culoarea. Pentru aceasta, folosește albastru pentru că majoritatea persoanelor cu deficiență de vedere a culorilor îl pot vedea.

Este pentru utilizatorii cu acromatopsie sau monocromație, deși forme mai rare de daltonism, accentul de culoare nu va fi suficient. Pentru acești oameni, linkurile colorate apar gri și nu se pot distinge de alt text. Puteți rezolva rapid acest lucru subliniind textul de ancorare.

Luați în considerare minimalismul

Minimalismul este departe de a fi nou. Estetica este în tendințe de zeci de ani, făcându-și drum prin arhitectură, artă, decorațiuni interioare și, desigur, design.

Și acum, minimalismul are un rol în accesibilitatea culorilor, deoarece cu cât sunt mai puține culori, cu atât există mai puține șanse de confuzie. Este, de asemenea, atrăgător din punct de vedere stilistic și mai puțin distrage atenția, ceea ce îl face o alegere solidă pentru toate publicurile.

Nu ești obligat să adere la un design minimalist pentru a fi accesibil, dar este un traseu care funcționează.

Utilizați un simulator de daltonism

Pe măsură ce comunitatea de design lucrează pentru o experiență accesibilă a utilizatorului, au apărut multe instrumente grozave pentru a ajuta. Simulatoarele daltoniste, de exemplu, le permit designerilor să-și vadă desenele așa cum le-ar face un utilizator daltonist. Un astfel de simulator, Oracle, este disponibil pentru Mac, Windows și Linux. Utilizați un simulator daltonic pentru a vă testa munca pe tot parcursul procesului de proiectare și pentru a înțelege cum interacționează utilizatorii cu alegerile dvs.

Când vă decideți asupra paletei de culori în etapele inițiale, vă sugerăm să utilizați un instrument de selectare a culorilor care vă evaluează alegerile în conformitate cu ghidurile AA. Acest verificator de contrast vă poate spune raportul de contrast, iar acest generator de culori accesibil sugerează combinații de culori care funcționează mai bine.

Faceți site-ul dvs. accesibil

Proiectarea pentru daltonism asigură că site-ul dvs. oferă o experiență de utilizator pe care întregul dvs. public poate naviga și se bucură. Pentru ei, înseamnă un brand pe care se pot baza; pentru tine, înseamnă conversii de succes. În funcție de dimensiunea companiei dvs., aceasta poate însemna și respectarea legii. Indiferent, face parte din construirea unui mediu online corect și egal.

Accesibilitatea culorilor este doar un element al construirii unui site web primitor. Asigurați-vă că consultați ghidul nostru pentru a vă face conținutul accesibil comunității surzilor și HOH.