– UI Design med Farge Blinde Brukere i Tankene

Farge spiller en viktig rolle i UI design. Når gjort riktig, det gir en bedre brukeropplevelse, påvirker kjøpsbeslutninger, og reflekterer merker stemme.

Så, hvordan kan du designe effektive, tilgjengelige, og estetisk tiltalende grensesnitt for farge blinde brukere?

Mens vitenskapen bak fargeblindhet er ganske komplekst, det handler om at fargen blind folk har vanskeligheter med å se fargen tydelig eller å skille mellom noen farger., Med dette i tankene, i denne artikkelen, vi vil dele noen tips om hvordan du kan forbedre nettstedets tilgjengelighet og opplevelsen det gir for fargen blind folk.

fargeblindhet i en Digital Verden

Ifølge studier, ca 1 av 12 menn og 1 i hver 200 kvinner) er fargen blind. Selv om fargen blind folk kan se ting bare så klart som alle andre, de er ikke i stand til fullt ut å skjelne rødt, grønt eller blått lys. Det er forskjellige typer av fargeblindhet; deuteranopia og protanopia fargeblindhet er de mest vanlige.,

Folk med rød-grønn fargeblindhet (deuteranopia) har problemer med å skille mellom rødt og grønt. På samme måte, til folk med røde fargeblindhet (protanopia), alle røde farger ser kjedelig.

Hva betyr dette fra et design-synspunkt er at ved å stole på fargen alene for lesbarhet og affordance ville gjøre ditt nettsted vanskelig å bruke for noen som er fargen blind.

Du kan bruke Coblis fargeblindhet Simulator for å se hva nettstedet ditt ser ut som å farge blinde brukere.,

7 Måter Du Kan Forbedre Fargen Tilgjengelighet for Farge Blinde Brukere

Design elementer og teknikker som forbedrer farge tilgjengelighet for farge blinde brukere er generelt ansett for å være god design praksis. Mens du kanskje tror at nettstedet ditt er estetisk appell kan lide dersom du design for tilgjengelighet, for det er absolutt ikke tilfelle.

Her, vil vi ta en titt på noen av måtene du kan utforme et mer tilgjengelig UI for å holde fargen blind-brukere i tankene.

#1: Bruk Mønstre og Teksturer

Farge forskjellene er utrolig viktig med visualisering av data f.eks.,, grafer og kakediagrammer. Ved å velge farger som har en lav kontrast ratio kan lage din figur vanskelig å tolke for farge blinde brukere.

Her er hva du bør gjøre i stedet:

• Bruk mønstre og teksturer for å gjøre det enkelt for brukere å skille mellom ulike segmenter.
• Legg til tekst etiketter til segmenter for å gjøre dem enda lettere å forstå.

La oss ta en titt på hvordan en farge blind person med tritanopia kan se en blå-grønn stolpediagrammet versus hvordan de vil se den samme grafen med mønstre og teksturer.,

Her er hvordan det vil se ut hvis du har merket hvert segment i stedet for å bruke mønstre:

#2: Bruk av Farger og Symboler

Du bør ikke stole kun på farge for å kommunisere feil eller formidle informasjon gjennom din UI.

La oss ta en titt på Facebook er påmeldingsskjemaet for eksempel., Hvis skjemaet lettelse opp på color alene for å la brukerne få vite at de hadde gjort en feil på et bestemt felt, det kan se ut noe som dette for en rød-blind (protanopia) bruker:

Her er en titt på Facebook er påmeldingsskjemaet med symboler og feilmeldinger som er festet:

ved Hjelp av ikoner og symboler i skjema for å la brukeren vite at de har gjort en feil forbedrer tilgjengelighet og hjelper dem med å korrigere sine feil raskere.

#3: Bruk av Tekst Etiketter

Legge til tekst etiketter farge filtre og fargekart, forbedrer tilgjengelighet for farge blinde brukere., Avhengig av type fargeblindhet, brukere kan finne det vanskelig å skille mellom forskjellige farger (eller nyanser) uten noen form for beskrivende tekst.

For eksempel, uten beskrivende tekst etikett på Amazon, farge blinde brukere ikke ville være i stand til å fortelle en rød skjorte bortsett fra en oransje eller grønn.

Legge til tekst etiketter farge filtre forbedrer tilgjengelighet for personer med normalt syn, så vel. For eksempel, hvitt, off-white og lys grå er ofte vanskelig å skille mellom på skjermer.,

#4: strek under Lenker

mye av tiden vi bruker font farge eller font i vekt for å betegne lenker. Mens det kan være mulig for noen med deuteranomaly, protanopi, eller tritanopia å skille anker tekst fra vanlig tekst, det er absolutt ikke ideelt på grunn av lav kontrast.

Noen med monochromacy ikke ville være i stand til å skille mellom tekst og anker tekst i det hele tatt, og de ville ha å holde musepekeren over teksten for å se om det deres markøren endres til en peker.

på grunn av dette, er det en god idé å legge en understreking av tekst linker., Dette gjør det enkelt å umiddelbart fortelle vanlig tekst og anker tekst fra hverandre. Her er et eksempel fra Engadget-webområde:

#5: Farge Kombinasjoner for å Unngå

Visse fargekombinasjoner er ikke ideelt for farge blinde brukere, enten fordi de har lav kontrast forhold eller fordi de er vanskelig å skille mellom.,

Her er en liste over fargekombinasjoner som du bør unngå å bruke i din grensesnitt design der det er mulig:

• grønn-rød
• grønn-blå
• grønn-brun
• grønn-svart
• grønn-grå
• blå-grå
• lys grønn-gul
• blå-lilla

Her er det grønn-røde og blå-lilla farge kombinasjoner ville se ut som en bruker med protanopia:

#6: Gjør Primær-Knappene Standout

Mange ganger, designere stole på fargen for å gjøre primær-knappene for å skille seg ut., Problemet med denne er at den fargen du bruker, kan være vanskelig for farge blinde brukere til å oppfatte.

Her er hva du bør gjøre i stedet:

• Øke størrelsen på den primære knappen.
• Prøve ut ulike plassering kombinasjoner.
• Øke kontrasten mellom primær-og sekundærknappen.
• Bruk grenser, ikoner, eller font vekt på å skille mellom primær-og sekundærknappen.

For eksempel, Reformasjonen bruker størrelse og farge for å understreke den primære knappen.,

Og Brennkammer presenterer sine primære knappen i nederste høyre hjørne og sekundær-knappen øverst i venstre hjørne.

#7: Mark Nødvendige Feltene

Farge blinde brukere kan ha problemer med å skille mellom obligatoriske og valgfrie felter hvis du bruker color alene for å betegne feltene som kreves på skjema.

i Stedet, kan du:

• Merk obligatoriske felt med en stjerne (*).
• Etikett felt med ordet Obligatorisk eller Valgfri.
• Fjerne valgfrie felt fra skjemaer.,

Konklusjon

Designe BRUKERGRENSESNITT for farge blinde brukere vil hjelpe deg å forbedre tilgjengeligheten for brukere med normalt syn, så vel. Selv om det ikke er en one-size-fits-all-løsning når det kommer til web accessibility, her er et par tips som du bør huske på:

• Bruk mønstre og teksturer for å vise kontrast i grafer og diagrammer.
• Bruk farger og symboler for å formidle feilmeldinger.
• Legg til tekst etiketter farge filtre og fargekart.
• Understreke lenker til å skille mellom vanlig tekst og ankertekst.,
• Unngå å bruke dårlig farge kombinasjoner, for eksempel grønn-rød og blå-lilla.
• Bruk størrelse, plassering, eller font vekter for å gjøre primær-knappene for å skille seg ut.
• Merk nødvendige feltene med et symbol (for eksempel en stjerne) eller merke dem.