Vi tilbringer mer og mer av livene våre online, og mange av oss er avhengige av visuelle markører på nettet. Webdesignere gjør oss til lags ved å bruke farge som eneste måte å formidle informasjon til brukeren. Når vi fyller ut skjemaer feil, merkes det med rødt. Når vennene våre logger seg på for å chatte, oppstår det grønne sirkler ved navnet deres.
Dette kan virke som en god tilnærming for å beholde et minimalistisk design med få visuelle markører, men i praksis er det helt feil: Siden blir mindre brukervennlig for de fleste brukerne, og absolutt ubrukelige for de som er fargeblinde. Dette kan få direkte konsekvenser for bedriften din, siden 1 av 12 menn, og 1 av 200 kvinner har en eller annen form for fargeblindhet, noe som utgjør 4% av verdens befolkning.
La oss med en gang gjøre det klart at ingen kommer til nettstedene våre som ufør. De kan ha funksjonsnedsettelser, men vi gjør dem uføre ved å sette hindre i veien for dem. Om vi ikke liker å bortvise potensielle kunder, burde vi passe på at det vi tilbyr passer med evnene til brukerne våre, ikke motsatt. La oss se på noen måter vi kan passe på at vi legger til rette for brukerne våre.
Ikke bare kommuniser med farge
Det å bruke farge til å kommunisere med er ikke en dårlig idé i seg selv. For noen kunder er det å tolke farger den raskeste måten å oppfatte visuell informasjon. Andre brukere, derimot, blir ekskludert av denne tilnærmingen. Så tommelfingerregelen er at du bør ha andre visuelle markører enn farge.
Heldigvis finnes det mange andre måter å skille visuelt mellom komponenter på nettet. Vurder å få designet ditt til å fungere ved å variere:
- Mønster
- Fyll
- Størrelser
- Kanter
- Ikoner
- Mellomrom
I disse eksemplene er alle de visuelle komponentene betegnet som universelt utformede, uansett om du legger til farge eller ikke. For farge er ikke det eneste som skiller.
Her har vi samlet noen eksempler på firmaer som får dette til.
Eksempel: Trello
Administrasjonsverktøyet Trello er svært avhengig av farger. For å komme rundt dette har de lagt til en innstilling som heter "Fargeblindvennlig modus". Da legges unike mønster til prosjektfargene, slik at hver del blir fremhevet om du har fargeblindhet eller ikke.
Et Trello-brett med fargeblindvennlig modus skrudd av.
Et Trello-brett med fargeblindvennlig modus skrudd på.
Eksempel: Spotify
Musikkappen Spotify bruker klikkbare ikoner, men legger til en grønnfarge på ikoner som som er aktivert. For bedre å kunne skille mellom aktivert og deaktivert, har Spotify lagt til en grønn prikk under aktiverte ikoner.
Spotify bruker visuell kommunikasjon på en universelt utformet måte, slik at det ikke er behov for å trykke på behovet for å sjekke om det er aktivert.
Eksempel: Slack
Som eksempel på hvordan man viser en brukers status, kan man bruke Slack, den populære kommunikasjonsappen. Når noen er online blir dette markert med en helt grønn sirkel ved navnet deres, mens de som er offline har bare har omrisset av en sirkel. Siden sirkelformene er ulike, er vi ikke bare avhengige av fargene.
I Slack-appen har brukere som er online en grønn sirkel ved navnet sitt, og offline-brukere har et omriss av en sirkel.
Bruk gråskala-testen
Når designerne våre, i Siteimprove, er i tvil om de skal bruke farger, prøver vi å bruke en teknikk kalt gråskala-test. Fremgangsmåten er svært enkel: Fjern alle fargene fra designet eller rammeverket, slik at alt ses i gråskala. Kan du fortsatt forstå hva designet prøver å kommunisere? Vil en utenforstående også kunne gjøre det?
Eksempel på et rammeverk som fungerer uten farger.
Noen designere har gjort det til en vane å lage den første skissen i svart-hvitt. Ved å gjøre det lar de seg ikke distrahere av fargevalg, og fokuserer heller på grunnstrukturen. Som en hyggelig bonus slipper de også hodepinen det er å prøve å ta fargeblindhet i betraktningen mot slutten av designprosessen.
Legger vi et gråskala-filter på de tre casene vi har sett på, er det tydelig at de fortsatt fungerer, og ikke avhenger av spesifikke farger.
Spotify bruker prikker under knapper for å vise at de er aktivert. Trello bruker mønster til å skille mellom prosjektfarger. Slack bruker en hel sirkel for å vise at en bruker er online, mot et omriss av en sirkel for de som er offline.
Vårt nyeste verktøy: The Accessibility Explorer
Dersom du ikke selv er fargeblind, er det vanskelig å kunne oppdage slike feil i designet. Vi i Siteimprove mener at det burde være lettere å gjøre digitale produktet universelt utformede, og derfor oppgraderer vi Accessibility-produktet vårt med Accessibility Explorer.
Siteimproves Accessibility siderapport med forskjellige filtreringsalternativer: Total fargeblindhet. Rødgrønn fargeblindhet. Blå-gul fargeblindhet.
Med Accessibility Explorer kan du oppleve nettstedet ditt i ulike fargespekter, ut fra ulike typer fargeblindhet. Det er også mulig å vise en nettside i gråskala, som er slik mennesker med en mer alvorlig form for fargeblindhet ser verden. Dette nye verktøyet kommer til å gjøre det lettere for deg å teste nettstedet, og å identifisere problemer som påvirker mange av brukerne dine.
Siteimproves Accessibility siderapport med rødgrønn fargeblindhetsfilter.
Når du unngår bare å være avhengig av farge, gjør du nettstedet mer brukervennlig for alle. Brukerne dine kan velge mellom flere metoder for raskt å interagere med innholdet ditt. Det gjør at produktet ditt fungerer bra for folk med ulik kulturell bakgrunn, der farger har ulik betydning. Det er også bra for folk som arbeider i sollys, eller folk som har aktivert nattmodus, som ofte får farger til å bli mindre gjenkjennelige.
Vi tror at bra design er noe som skjer når du ser det fra mange ulike perspektiv, og bra design vet du at alle har nytte av.