culoarea joacă un rol esențial în proiectarea UI. Când este făcut corect, îmbunătățește experiența utilizatorului, influențează deciziile de cumpărare și reflectă vocea mărcilor.deci, cum proiectați interfețe eficiente, accesibile și plăcute din punct de vedere estetic pentru utilizatorii orbi?în timp ce știința din spatele daltonism este destul de complex, esența este că oamenii daltoniști au dificultăți în a vedea culoarea în mod clar sau diferențierea între unele culori., Având în vedere acest lucru, în acest articol, vom împărtăși câteva sfaturi despre cum puteți îmbunătăți accesibilitatea site-ului dvs. și experiența pe care o oferă pentru persoanele daltoniste.

orbirea culorilor într-o lume digitală

conform studiilor, aproximativ 1 din 12 bărbați (și 1 din 200 de femei) sunt orbi. Deși oamenii orbi pot vedea lucrurile la fel de clar ca toți ceilalți, ei nu sunt capabili să discearnă pe deplin lumina roșie, verde sau albastră. Există diferite tipuri de orbire de culoare; deuteranopia și orbirea de culoare protanopia sunt cele mai frecvente.,persoanele cu orbire de culoare Roșu-verde (deuteranopia) au dificultăți în a distinge între roșu și verde. În mod similar, pentru persoanele cu orbire de culoare roșie (protanopie), toate culorile roșii arată plictisitoare.

ce înseamnă acest lucru din punct de vedere al designului este că bazându-se doar pe culoare pentru lizibilitate și accesibilitate ar face site-ul dvs. dificil de utilizat pentru cineva care este daltonist.

puteți utiliza simulatorul de orbire a culorii Coblis pentru a vedea cum arată site-ul dvs. pentru utilizatorii orbi.,

7 moduri în care puteți îmbunătăți accesibilitatea culorilor pentru utilizatorii daltoniști

elementele de Design și tehnicile care îmbunătățesc accesibilitatea culorilor pentru utilizatorii daltoniști sunt în general considerate a fi bune practici de proiectare. În timp ce s-ar putea crede că aspectul estetic al site-ului dvs. ar putea suferi dacă proiectați pentru accesibilitate, cu siguranță nu este cazul.

aici, vom arunca o privire la unele dintre modurile în care puteți proiecta un UI mai accesibil, ținând cont de utilizatorii orbi de culoare.

#1: utilizați modele și texturi

diferențele de culoare sunt incredibil de importante cu vizualizarea datelor, de ex.,, grafice și diagrame plăcintă. Alegerea culorilor care au un raport de contrast scăzut poate face ca graficul dvs. să fie dificil de interpretat pentru utilizatorii orbi.

Iată ce ar trebui să faceți în schimb:

  • utilizați modele și texturi pentru a facilita diferențierea diferitelor segmente de către utilizatori.
  • Adăugați etichete text în segmente pentru a le face și mai ușor de înțeles.

Să aruncăm o privire la modul în care o persoană daltonistă cu tritanopie ar putea vedea un grafic cu bare Albastru-Verde față de modul în care ar vedea același grafic cu modele și texturi.,

Aici e ceea ce ar arăta dacă ai etichetat fiecare segment în loc de a folosi modele:

#2: Utilizați Culori și Simboluri

Tu nu ar trebui să se bazeze exclusiv pe culoare pentru a comunica erori sau transmite informații prin intermediul UI.

Să aruncăm o privire la formularul de înscriere Facebook, de exemplu., Dacă forma s-a bazat pe culoare numai pentru a permite utilizatorilor știu că au făcut o greșeală pe un anumit domeniu, s-ar putea arata ceva de genul asta pentru un roșu-orb (protanopie) utilizator:

Aici este o privire la Facebook e semneze formularul cu simboluri și mesaje de eroare atașat:

Folosind pictograme și simboluri în forme pentru a permite utilizatorului știu că au făcut o eroare îmbunătățește accesibilitatea și îi ajută să corecteze greșeala lor mai repede.

#3: utilizarea etichetelor text

adăugarea etichetelor text la filtrele de culoare și specimene îmbunătățește accesibilitatea pentru utilizatorii daltoniști., În funcție de tipul de daltonism, utilizatorii ar putea găsi dificil să se diferențieze între diferite culori (sau nuanțe) fără un fel de text descriptiv.

de exemplu, fără eticheta de text descriptivă de pe Amazon, utilizatorii de culoare orb nu ar putea să spună o cămașă roșie în afară de una portocalie sau verde.

adăugarea de etichete text la filtrele de culoare îmbunătățește accesibilitatea și pentru persoanele cu vedere normală. De exemplu, albul, albul deschis și griul deschis sunt adesea dificil de diferențiat pe monitoare.,

#4: sublinierea legăturilor

o mulțime de timp folosim culoarea fontului sau greutatea fontului pentru a indica legăturile. Deși poate fi posibil ca cineva cu deuteranomalie, protanopie sau tritanopie să distingă textul ancoră de textul obișnuit, cu siguranță nu este ideal datorită raportului de contrast scăzut.

cineva cu monocromație nu ar fi capabil să facă diferența între text și textul ancoră și ar trebui să treacă peste text pentru a vedea dacă cursorul se schimbă într-un pointer.

Din acest motiv, este o idee bună să adăugați o subliniere la linkurile text., Acest lucru face ușor să spuneți imediat textul obișnuit și să ancorați textul în afară. Iată un exemplu de la Engadget site-ul:

#5: Combinatii de Culori, pentru a Evita

Anumite combinații de culori nu sunt ideale pentru utilizatorii de culoare orb, fie pentru că au scăzut raporturi de contrast sau pentru că acestea sunt dificil să se diferențieze între ele.,

Aici este o listă de combinații de culori pe care ar trebui să evite utilizarea în modele de interfață de câte ori este posibil:

  • verde-rosu
  • verde-albastru
  • verde-maro
  • verde-negru
  • verde-gri
  • albastru-gri
  • lumina verde-galben
  • albastru-violet

Uite ce verde-roșu și albastru-violet combinatii de culori ar arata ca un user cu protanopie:

#6: Primară Butoane Standout

de Multe ori, designerii se bazează pe culoare pentru a face primare butoane iasă în evidență., Problema cu aceasta este că culoarea pe care o utilizați poate fi dificil pentru utilizatorii de culoare orb să perceapă.

Iată ce ar trebui să faceți în schimb:

  • măriți dimensiunea butonului principal.
  • Încercați diferite combinații de plasare.
  • crește contrastul dintre butoanele primare și secundare.
  • utilizați margini, pictograme sau greutatea fontului pentru a diferenția butoanele primare și secundare.

de exemplu, reforma folosește dimensiunea și culoarea pentru a accentua butonul principal.,

și Firebox prezintă butonul lor principal în colțul din dreapta jos și butonul secundar în colțul din stânga sus.

#7: Marca Necesare Câmpuri de Formular

Culoare orb utilizatori ar putea avea dificultăți de diferențiere între obligatorii și opționale câmpuri dacă utilizați numai culoarea pentru a indica campurile de pe forme.

În schimb, s-ar putea:

  • marcați câmpurile obligatorii cu un asterisc (*).
  • câmpuri de etichetă cu cuvântul necesar sau opțional.
  • eliminați câmpurile opționale din formulare.,

concluzie

proiectarea UI pentru utilizatorii daltoniști vă va ajuta să îmbunătățiți accesibilitatea site-ului dvs. și pentru utilizatorii cu viziune normală. Deși nu există o soluție unică în ceea ce privește accesibilitatea web, iată câteva sfaturi de care trebuie să țineți cont:

  • utilizați modele și texturi pentru a arăta contrastul în grafice și diagrame.
  • utilizați culori și simboluri pentru a transmite mesaje de eroare.
  • Adăugați etichete text la filtre de culoare și mostre.
  • subliniați legăturile pentru a diferenția între textul obișnuit și textul ancoră.,
  • evitați să folosiți combinații de culori slabe, cum ar fi verde-roșu și albastru-violet.
  • utilizați dimensiunea, plasarea sau greutățile fontului pentru a face ca butoanele primare să iasă în evidență.
  • marcați câmpurile de formular necesare cu un simbol (cum ar fi un asterisc) sau etichetați-le.