Tenk på 👁 når du designer!

Evolusjonen har innrettet mennesket slik at øyet gjør én del, synssenteret i hjernen en annen, det førbevisste (pre-attentive processing 📺) enda litt til, og så til slutt er det du og din oppmerksomhet som må danne deg et mentalt bilde av hva du ser på, og hva det betyr.

Grovt overforenklet skjer følgende når du stirrer på en skjerm:

1. Først må stavene og tappene i øyet ditt klare å fange opp at det er noe å se på innenfor det lille feltet som er i fokus
2. Så må det skilles mellom de mange forskjellige tingene en ser.
3. Deretter må disse grupperes til forskjellige elementer.

Først da setter hjernen vår i gang og spør «Er det en sjekkboks? Eller bare en firkant?», og til slutt vurderer du «Er sjekkboksen aktiv? Kan den brukes? Kan jeg sette kryss i den?».

Og så må du jo mentalt koble hva å huke av i en firkant på en skjerm, faktisk gjør for deg.

Sjekk denne videoen for en overordnet forklaring på hvordan sansene våre gjør om inntrykk til opplevelse.

• Om visuell persepsjon hos Interaction Design Foundation
• Om sansing og persepsjon hos WSU

Det er altså mye arbeid som gjøres fra øyet ditt tar inn lys, til hjernen din viser bevisstheten din det som står foran deg. Det er ikke rett frem å legge merke til ting!

I visuell design er nøye uttenkte kontrastforhold ett av flere virkemidler 📺 vi har for å henlede brukernes oppmerksomhet dit vi vil.

Når vi lager ting på skjerm er vi opptatt av at folk skal finne ting kjapt og greit. Dette er spesielt viktig når vi lager selvbetjeningsløsninger. Ofte skal folk bruke dem til noe viktig, uten å gjøre feil, og uten at det tar for lang tid.

Når jeg designer, tenker jeg på hva som er viktigst å se først, og hva en kan se etter hvert. Her bruker jeg kontrast, visuelt hierarki, gruppering og mange andre grep for å gi brukerne noe de raskt finner frem i og får brukt.

Kontrast er kanskje den enkleste tingen å teste blant disse. Det er forsket mye på hvilke kontrastforhold som fungerer best for folk. Når jeg setter opp skjermskisser sjekker jeg løpende kontrastforholdene med verktøy som Stark. I tillegg vurderer jeg hvordan ting ser ut for forskjellige typer fargeblindhet med Sim Daltonism. Og så tester vi selvfølgelig med brukere i målgruppen vår. Ved å gjøre dette starten av, sparer vi oss for problemer senere.

Fornuftige kontrastforhold i skjermdesign hjelper brukerne med å oppfatte det viktigste først. WCAG-reglene stiller minstekrav til kontrastforhold i apper og nettsider. Disse reglene er underlagt lov og forskrift og alle som lager nettløsninger må rette seg etter dem. (Ta det opp med Stortinget om du ikke er enig.)

I dag gjelder WCAG 2.0-reglene. Der star det at:

• Tekst (og bilder av tekst) skal ha et kontrastforhold på minst 4,5:1 mot det som ligger rundt dem
• Stor tekst (og bilder som inneholder tekst i stor skriftstørrelse) skal ha et kontrastforhold på minst 3:1

Fra 1. februar gjelder WCAG 2.1-reglene. Der står det ikke-tekstlig innhold også skal ha et kontrastforhold på minst 3:1. Kravet heter 1.4.11 Kontrast for ikke-tekstlig innhold.

Kravene gjelder for blant annet:

• komponenter i et brukergrensesnitt, som lenker, skjemaelementer og knapper
• visuelle elementer som ikoner, hvis disse trengs for å forstå innholdet
• grafer, og elementer i grafer (som stolper i et stolpediagram), med mer

Sett deg godt inn i disse reglene — de blir viktige i tiden fremover!

Men! WCAG 2.0 og 2.1 beregner kontrast på en mangelfull måte. I WCAG 3, som er under utvikling jobbes det med en ny algoritme for å teste kontrastforhold kontrast, kalt APCA (Advanced Perception of Color Algorithm). Du kan teste det selv i Contrast.tools.

Det er mange år til WCAG 3 trår i kraft. Altså vil vi måtte forholde oss til den ikke helt korrekte beregningsmåten i WCAG 2-serien i lang tid fremover.

Nuvel, hva gjør vi når reglene som gjelder har svakheter? Da tester vi med begge! Slik gjør jeg:

1. Først sjekker jeg kontrastforhold i Stark (finnes bl.a. som en Figma plugin)
2. Så tar jeg en ekstra sjekk i APCA
3. Deretter fjerner jeg WCAG 2-godkjente forslag som feiler i APCA.

Det vi sitter igjen med, tester vi med brukerne så godt vi kan. En grundig test ville kreve en lab med eyetrackingutstyr, utført av eksperter. Sånt er relevant om du jobber med Human Factors Engineering og skal optimere av kognitivt krevende oppgaver i sikkerhetskritiske eller taktiske kontekster. Jovisst, vi kunne ha gjort dette i selvbetjening òg, men den investeringen bruker vi som regel heller på forenkling av selve systemet.

Hva mer kan vi gjøre? Bruke plate-på-flate trikset. Det gir oss både Closure og Figure-Ground på én gang. Iveren etter visuell minimalisme har ribbet de aller fleste nettsteder for persepsjonsgrepene de tidligere dro nytte av. Heldigvis er det kanskje en viss bedring å spore der ute, hvor bruk av bakgrunnsfarger og kanteffekter har gjort det litt lettere å finne frem, lese, og bruke skjermsaker.

Kravene i WCAG 2.1 er ikke vanskelige å følge. Men de er viktige å kunne i praksis. Sett deg inn i dem nå, og lag gjerne maler for deg selv i Figma som du tester med Stark og APCA, så du vet hvordan ting skal se ut fremover. Lykke til!