Googles designprinsipper —
og hva de lærer oss om god webdesign

Hvorfor lære av bilskjermdesign?

Når noen bruker en app i bilen, har de ikke råd til å stirre på skjermen. De kjører 100 km/t. De har brøkdelen av et sekund på å oppfatte informasjon, finne knappen de leter etter, og returnere blikket til veien.

Det er nettopp derfor Googles designkrav for bilskjermer er så interessante: de er designet under ekstrempresset. Lesbarhet er ikke valgfritt. Riktig kontrast er ikke en estetisk preferanse. Klare, forutsigbare mønstre er et sikkerhetskrav.

Nettstedet ditt møter ikke like dramatiske krav — men prinsippene er de samme. En bruker som skanner en mobilskjerm på bussen, en potensiell kunde som blar raskt gjennom siden din, en eldre bruker med dårligere syn: alle tjener på design som er laget for å forstås raskt og uten friksjon.

1. Innholdet må kunne leses på ett blikk

Google setter konkrete minimumskrav til skriftstørrelse på bilskjermer: 32dp for primærtekst (informasjon brukeren må ta en beslutning basert på) og 24dp for sekundærtekst (støttende informasjon). Bakgrunnen er enkel: jo mer du anstrenger deg for å lese, jo lenger tid bruker du på skjermen — og jo høyere er risikoen.

"Klart og tydelig tekst reduserer både blikktid og beslutningstid."

— Google for Cars, Visual Principles

For nettsider gjelder akkurat det samme. Mange designmaler bruker 13–14px brødtekst for å få plass til mer innhold. Det ser ryddig ut på designerens store Mac-skjerm — men på en telefon, i dårlig lys, er det en feil. Google anbefaler minimum 16px for brødtekst på nett, og ideelt 18px for god lesekomfort.

Begrens tekstlengden

Googles guide setter et hardkrav: tekststrenger på bilskjerm kan ikke overskride 120 tegn. Årsaken er ikke teknisk — det handler om kognisjon. Lang tekst krever mer tid og konsentrasjon å prosessere.

For nettsider betyr dette at overskrifter bør være korte og direkte, knappetekster bør si nøyaktig hva som skjer, og avsnitt bør brytes opp i håndterlige biter. En bruker som leser nettsiden din skanner — de leser ikke alt. Skriv for scannere, ikke for lesere.

Bilskjermer må fungere under langt tøffere forhold enn en vanlig nettside — men prinsippene er universelle. Foto: Unsplash

2. Kontrast er ikke estetikk — det er funksjon

Google krever et kontrastforhold på minimum 4.5:1 mellom tekst og bakgrunn på bilskjermer. Dette er ikke en anbefaling — det er et krav. Årsaken: lys varierer dramatisk i en bil, fra sterkt sollys til mørk tunnel, og designet må fungere i begge ytterpunkter.

WCAG (Web Content Accessibility Guidelines) setter samme krav til nettsider. Det er et krav som gagner langt flere enn folk med nedsatt syn: grå tekst på lysegrå bakgrunn er vanskelig å lese for alle, i alt fra sollys til et mørkt soverom.

Dagsmodus og nattmodus

Google spesifiserer at bilskjermer om natten alltid må bruke mørk bakgrunn med lys tekst — aldri omvendt. Lys bakgrunn om natten forårsaker lysfollelse og synsettervirkninger som tar sekunder å gjenopprette.

For nettsider er leksjonen tydelig: mørk modus er ikke bare en trendy funksjon. Det er en reell forbedring for brukere som besøker siden din om kvelden. Har ikke nettsiden din mørk modus, bør du i det minste sørge for at kontrasten er god nok til at den ikke er smertefull å bruke i mørket.

3. Knapper må være lette å treffe

Googles minimum for berøringsmål på bilskjerm er 76 × 76dp — omtrent 20mm × 20mm på en vanlig skjerm. Begrunnelsen er tredelt: fingre er upresise, kjøretøy vibrerer, og hendene kan ha hansker.

Fingre er upresise verktøy — spesielt på mobil. Berøringspunkter må være store nok til at de er lette å treffe. Foto: Unsplash

For nettsider er dette direkte overførbart. Apple anbefaler minimum 44 × 44pt for touch targets på iOS. Google anbefaler 48 × 48dp på Android. Mange nettsider — særlig eldre — har knapper og lenker som er mye for små til å trykke komfortabelt på mobil.

Unngå overlappende berøringspunkter

Google setter krav om minst 23dp mellomrom mellom berøringsmål. Overlappende eller for tett plasserte knapper fører til feilklikk — noe som er irriterende på en nettside og potensielt farlig i en bil.

På nettsider ser vi dette ofte i navigasjonsmenyer, ikoner i footeren og knapper plassert side om side. Test alltid nettstedet ditt med en finger på mobil, og spør deg selv: kan jeg treffe dette uten å zoome inn?

• Minimum 48px høyde på alle klikkbare elementer på mobil
• God avstand mellom lenker — spesielt i lister og navigasjon
• Test alltid på ekte mobil — ikke bare i nettleserens simulatormodus

4. Konsistens reduserer kognitiv belastning

Googles guide er klar: ikoner, terminologi og interaksjonsmønstre må ha et én-til-én-forhold til funksjonene de representerer. Et ikon som betyr én ting på ett sted kan ikke bety noe annet på et annet sted. Det høres selvsagt ut — men det er en av de vanligste feilene i nettstedsdesign.

"Kjente grensesnitt reduserer kognitiv innsats og beslutningstid."

— Google for Cars, Visual Principles

For nettsider betyr konsistens at knapper alltid ser like ut, at navigasjonen er på samme sted på alle sider, at farger brukes med samme mening overalt (f.eks. alltid lilla = handling, alltid grå = deaktivert), og at tekst og terminologi er gjennomgående.

Inkonsistens skaper friksjon. Brukeren din bruker mental kapasitet på å forstå grensesnittet ditt — kapasitet som burde gå til å forstå produktet ditt.

5. Brukeren må alltid forstå hva som er mulig

I bilen viser Google-grensesnittet tydelig hvilke funksjoner som er tilgjengelige under kjøring og hvilke som er deaktivert. En søkeboks skjules f.eks. når bilen er i bevegelse — ikke bare gryes ut, men fjernes helt — for å forhindre distraksjoner.

For nettsider handler dette om tydelig systemtilstand: brukeren skal aldri lure på hva som skjer. Er et skjema under sending? Vis en spinner. Er en knapp deaktivert fordi et felt mangler? Gjør det tydelig hvorfor. Har en handling lyktes? Bekreft det eksplisitt.

God UX-design handler om å gjøre systemtilstanden tydelig — brukeren skal aldri lure på hva som skjer. Foto: Unsplash

Hva dette betyr for nettstedet ditt

Google designet disse prinsippene for å beskytte menneskeliv. Det er den ytterste konsekvensen av dårlig design. For nettsider er konsekvensene mildere — men de er reelle: en bruker som ikke forstår navigasjonen, forlater siden. En knapp som er for liten å trykke på, mister kunden. Grå tekst på lys bakgrunn sender folk videre til konkurrenten.

De fire prinsippene — lesbarhet, riktige berøringspunkter, konsistens og tydelig systemtilstand — er ikke avansert UX-teori. De er grunnleggende krav til et nettsted som fungerer. Og de er overraskende ofte ignorert.