Jo mer lys, desto bedre å lese? Ikke alltid!

Ofte tenker vi nok akkurat dette, at det blir enklere å lese med mer lys. I mange tilfeller så stemmer det også – når vi leser på papir. Når vi leser på skjerm vil ofte mye lys derimot by på en hel del utfordringer. Så hvordan kan vi legge til rette for en god leseopplevelse på skjerm i sterkt lys?

Illustrert ansikt med briller + sol og sky + mobil + tekst

Når jeg nå snakker om sterkt lys så tenker jeg på situasjoner hvor mobilen eller andre skjermbaserte duppeditter blir brukt utendørs. Har du prøvd å lese en artikkel på mobilen i parken? Sjekke busstidene for å komme deg hjem fra stranda? Jobbe litt på pc-en ute på verandaen? Eller kanskje prøvd å bruke et skjermbasert arbeidsverktøy ute? Jeg vil tippe at mange ganger har det gått helt fint. Mens andre ganger har det vært krevende, og vil være enda vanskeligere for en med nedsatt syn.

Flere faktorer spiller inn på denne situasjon og påvirker leseopplevelsen – leseren selv, omgivelsene, skjermens egenskaper, og hvordan teksten blir presentert. Den faktoren designeren kan kontrollere er hvordan teksten blir presentert. Nøkkelen ligger derfor i å sette typografien «robust» nok til å tåle variert synsevne, dynamisk bruk og forskjellig skjermteknologi.

Ikke glem konteksten

Når man sitter inne på et kontor og designer kan det være fort gjort å glemme konteksten sluttproduktet skal brukes i. Ofte er det ikke en bestemt kontekst som gjelder for bruk på mobile enheter heller og man må ta høyde for variasjoner. Et digitalt arbeidsverktøy for en skogsoperatør vil i aller høyeste grad blir brukt ute og bør bli designet og testet for den bruken. Dette kan potensielt påvirke mange (også ikke så åpenbare målgrupper) siden flere og flere arbeidsverktøy blir digitalisert og brukt dynamisk – som hvordan apper gjør jobben lettere for politiet (PDF).

Pass på å gjøre det «ekstra lesbart» i sterkt lys

Man kan nok komme frem til flere «fasitsvar» på hva som gir best lesbarhet. Minuset med slike «fasitsvar» er at typografien vil blir ganske låst og går utover identiteten og uttrykket til avsender. Derfor bør heller en generell forståelse med noen gode råd og tips om hva som er viktig bli satt i fokus. 

Ingen av de følgende tipsene vil være noe nytt og revolusjonerende. De bygger på allerede eksisterende retningslinjer for blant annet universell utforming i kombinasjon med annen innsikt om lesbarhet. De fokuserer på å forsterke det vi vet har effekt på lesbarheten og rett og slett gjøre det «ekstra lesbart». I situasjoner med sterkt lys er det kontrasten og skriftstørrelsen som blir mest påvirket, disse er også mest kritisk for lesbarhet generelt. Andre faktorer som skrifttype, avstander/luft og skriftens vekt (normal, fet, osv.) påvirker også lesbarheten, men i mindre grad.

Enda bedre kontrast

Kontrasten er den faktoren som blir mest påvirket av sollys. Jo sterkere lys, desto mer blir den redusert. Når omgivelsene blir tatt med i betraktning kan det være greit å skille mellom relativ og effektiv kontrast. Den relative kontrasten er den vi er vant til å forholde oss til fra WCAG og som vi bruker for å sjekke kontrastnivået når vi designer. Mens den effektive kontrasten er den som faktisk er tilgjengelig for leseren – altså resultatet av tekstens egenskaper, skjermen teksten blir vist på og lysforholdene rundt. Illustrasjonen under viser forskjellen på den relative og effektive kontrasten. Dette er basert på skjermegenskapene til en iPhone 11 Pro og dagslys uten direkte sol (ca 10 000 lux). 

Illustrert relativ og effektiv kontrast. Kontrast 21:1 blir 1,63:1, 4,54:1 blir 1,44
Eksempel på relativ og effektiv kontrast simulert på en iPhone 11 Pro i dagslys uten direkte sol.

«Vent nå litt. Dette ble plutselig veldig teknisk» tenkte du kanskje nå, men la meg prøve å gjøre det enklere. Lux er en måleenhet for belysningsstyrke og figuren under gir et litt bedre bilde av hvordan lyset i forskjellige omgivelser varierer.

Skala over lux verdier i forskjellig lys. Fra helt mørkt, til lyspære, til overskyet sol og opp til fullt sollys
Oversikt over lux verdier i forskjellige situasjoner. 0 lux når det er helt mørkt, 350–500 lux i innendørs kontorlandskap, 10 000–25 000 lux i dagsslys uten direkte sollys, mens direkte sollys kan komme opp mot 100 000 lux.
  • Bruk minimum kontrastnivå 16:1 på brødtekst, kontrastnivået kan være noe lavere ved større skriftstørrelse eller på ikke-tekstlig innhold.
  • Bruk positiv polaritet på teksten, altså mørk tekst på lysere bakgrunn.
  • Ta hensyn til fargeblinde når det gjelder valg av farge, men utover dette har ikke fargen i seg selv noe effekt på lesbarhet utendørs.

Større skriftstørrelse

Direkte og indirekte sollys skaper refleksjoner i skjermen, som kan gjøre det vanskeligere å skille detaljer. For å motvirke det kan det være effektivt å bruke en større skriftstørrelse. Det er sjeldent man hører klager på at det er for stor skrift (innenfor rimelighetens grenser naturligvis). Klagene kommer heller når teksten er for liten. Fordelen på skjerm er jo at å bruke litt mer plass ikke koster noen ting. Så sett gjerne skriftstørrelsen litt større – ekstra god lesbarhet er det ingen som klager på, uansett synsevne!

Men en skriftstørrelse gir ikke nødvendigvis et generelt svar på hvor store bokstavene faktisk er – det avhenger også på skriften du har valgt. Bokstavene kan være designet med forskjellige høyder både for store (versalhøyde) og små (x-høyde) bokstaver. I figuren under er tre fonter valgt og satt i samme størrelse, hvor alle varierer i høyde. Vi er mest vant til å lese små bokstaver og bør derfor vurdere x-høyden når vi velger skrift og setter skriftstørrelse. Om man vil treffe «the sweet spot» så kan man regne ut riktig skriftstørrelse basert på skriftens faktiske høyde og leseavstand.

Bildet kan inneholde: tekst, linje, skrift, symbol, parallell.
Eksempel på hvordan tre ulike fonter satt i samme størrelse varierer i versalhøyde og x-høyde. Fontene som er brukt er Times New Roman, Helvetica Neue og Futura.
  • Bruk skriftstørrelse 18–20 px for brødtekst og vurder skriftens x-høyde
  • Pass på at man kan skalere teksten uten å miste funksjon. Men ikke stol blindt på det – mange fortsetter uten å skalere. 
  • Gå heller opp en størrelse, enn ned. Det er sjeldent noen klager på «ekstra god» lesbarhet.

Andre typografiske grep som kan øke lesbarheten

Teksten er et resultat av mange typografiske grep og selv om kontrast og skriftstørrelse er de viktigste å fokusere på, så er det også andre ting som kan bidra til økt lesbarhet:

  • Skrifttype: Velg en godt etablert font, med eller uten seriffer. En skrift med åpne bokstaver, generøs x-høyde, varierende og entydige former kan forbedre lesbarheten.
  • Avstander: Øk linjeavstanden til 1,33–1,5 * skriftstørrelsen. Noen opplever også økt lesbarhet ved å øke tracking/letter spacing 0–0,12 * skriftstørrelsen.
  • Skriftens vekt: Vanlig, medium/halvfet eller fet er foretrukket.

Du kommer langt med litt sunn fornuft

Som jeg skrev innledningsvis så har det ikke kommet frem noe revolusjonerende i løpet av disse avsnittene og du kommer langt med en generell forståelse av lesbarhet. Å designe for lesbarhet er en balanse av mange typografiske variabler som avhenger av hverandre. Tenk på brukerne du designer for og fokuser på regler for god lesbarhet. Uten å glemme at sluttproduktet blir brukt utenfor kontorets fire vegger. Og husk – det skader ingen å gjøre det «ekstra lesbart». 

Av Ida Marie Solås
Publisert 16. sep. 2020 10:59 - Sist endret 16. sep. 2020 10:59
Tegneblokk med håndtegning av et brukergrensesnitt

UX-bloggen

En blogg for deg som er interessert i gode brukeropplevelser, tips og triks, nyttige UX-verktøy og erfaringer fra prosjekter vi i Gruppe for Brukeropplevelse arbeider med.