Design for tre lesedybder: Slik hjelper nettsiden kunden fra oversikt til handling
Kategori: Webdesign. En praktisk metode for å strukturere bedriftsnettstedet for besøkende som skanner, vurderer og kvalitetssikrer før de tar kontakt.
En potensiell kunde leser sjelden en bedriftsside fra toppen og ned. Først skanner hun overskrifter og visuelle holdepunkter. Deretter undersøker hun om tilbudet passer. Til slutt leter hun etter detaljer som reduserer risikoen ved å ta kontakt eller be om et tilbud.
Godt webdesign bør støtte alle disse lesemønstrene. Hvis nettsiden bare fungerer for den grundige leseren, mister den dem som trenger rask oversikt. Hvis den bare består av korte salgsbudskap, mangler beslutningstakeren grunnlaget for å gå videre.
En nyttig metode er derfor å designe for tre lesedybder: skanne, vurdere og kvalitetssikre. Metoden kan brukes på forsiden, tjenestesider og andre sider som skal føre besøkende mot en konkret handling.
Lesedybde 1: Gi oversikt uten å kreve innsats
Den første oppgaven er å gjøre siden forståelig på noen få blikk. Besøkende må kunne oppfatte hva bedriften tilbyr, hvem tilbudet passer for og hvor de kan gå videre.
Dette handler ikke om å presse all informasjon øverst på siden. Det handler om tydelig prioritering. En god start på en tjenesteside kan bestå av:
- En presis overskrift som beskriver tjenesten eller resultatet
- En kort forklaring på hvem tjenesten er relevant for
- Én tydelig primærhandling
- Et relevant bilde eller annet visuelt element som støtter innholdet
Overskriften «Vi skaper verdi gjennom gode løsninger» gir lite hjelp. «Regnskapstjenester for små og mellomstore entreprenører» gjør det enklere å avgjøre om siden er relevant. Konkret språk er også en del av designet, fordi ordene styrer både forståelsen og den visuelle prioriteringen.
Lag en synlig informasjonsryggrad
Resten av siden bør kunne forstås ved å lese mellomtitlene alene. De kan for eksempel følge spørsmålene kunden faktisk har:
- Hva får vi hjelp med?
- Hvem passer tjenesten for?
- Hvordan foregår samarbeidet?
- Hva kan vi forvente?
- Hva er neste steg?
Mellomtitler som «Vår kompetanse» og «Vår tilnærming» er ikke nødvendigvis feil, men de krever mer tolkning. Kundens spørsmål gir ofte en tydeligere struktur enn bedriftens interne begreper.
Lesedybde 2: Gjør det enkelt å vurdere tilbudet
Når den første relevansen er etablert, begynner sammenligningen. Besøkende vurderer om dere forstår behovet, om leveransen virker riktig, og om bedriften fremstår som et trygt valg.
På dette nivået bør designet hjelpe brukeren med å finne sammenhengende svar. Del innholdet i tydelige seksjoner, men unngå å splitte hvert poeng i egne kort. For mange bokser kan gjøre siden visuelt urolig og skjule hvilke opplysninger som hører sammen.
En tjenesteside kan ha denne rekkefølgen:
- Problemet eller behovet tjenesten løser
- Hva leveransen omfatter
- Hvordan prosessen foregår
- Erfaring, arbeidsprøver eller relevante kundehistorier
- Vanlige avklaringer og neste steg
Rekkefølgen bør følge kundens beslutning, ikke organisasjonskartet. Det er sjelden nødvendig å presentere hele bedriftens historie før kunden har forstått selve tilbudet.
Bruk navigasjonen til å støtte oppgaven
Hovedmenyen skal hjelpe brukeren å velge retning. Den bør ikke forsøke å representere alle interne avdelinger, faguttrykk og innholdstyper.
Bruk navn som kundene kjenner igjen. Hvis tjenestene krever forklaring, kan de samles under et tydelig menypunkt og presenteres med korte beskrivelser. Det gjør valget enklere enn en lang liste med navn som ligner på hverandre.
Den lokale navigasjonen på siden er også viktig. På lange sider kan en enkel innholdsoversikt gjøre det lettere å hoppe til prosess, priser, eksempler eller kontaktinformasjon. Samtidig må siden fortsatt gi mening når den leses i vanlig rekkefølge.
Lesedybde 3: Fjern usikkerhet før handling
Den grundige leseren ser etter tegn på at leverandøren kan håndtere oppgaven. Denne personen kan være innkjøper, fagansvarlig, daglig leder eller en medarbeider som skal anbefale løsningen internt.
På dette nivået trengs konkret informasjon. Det kan være avgrensninger, arbeidsmetode, ansvar, levering, oppfølging eller hva som må være på plass hos kunden. Hvilke detaljer som er viktige, varierer mellom bransjer, men prinsippet er det samme: Svar på spørsmålene som ellers må avklares før noen tør å gå videre.
Tillit skapes bedre med etterprøvbare beskrivelser enn med generelle påstander. Vis hva bedriften gjør, hvordan den arbeider og hvilken erfaring som er relevant. Kundecaser bør forklare utgangspunkt, oppgave og løsning, ikke bare vise en logo.
Plasser handlingen der beslutningen tas
En kontaktknapp øverst på siden er nyttig for den som allerede har bestemt seg. Andre trenger en handlingsmulighet etter at de har lest om leveransen, prosessen eller et relevant eksempel.
Gjenta derfor primærhandlingen på naturlige beslutningspunkter. Teksten på knappen bør beskrive neste steg, for eksempel «Be om en vurdering» eller «Avtal en innledende samtale». «Les mer» er lite presist når handlingen egentlig er å kontakte bedriften.
Ikke legg inn flere konkurrerende hovedhandlinger i samme seksjon. Hvis brukeren både kan bestille, laste ned, abonnere, ringe og åpne et skjema, blir det vanskeligere å forstå hva dere anbefaler.
Typografi som viser hva som er viktig
Typografi skal ikke bare se riktig ut. Den skal gjøre innholdet lett å skanne og behagelig å lese. Det krever tydelige forskjeller mellom overskrifter, mellomtitler, brødtekst og handlingspunkter.
Bruk et begrenset antall tekststiler og la samme nivå se likt ut på tvers av nettstedet. En mellomtittel skal ikke ligne på brødtekst, og en lenke skal ikke være avhengig av farge alene for å bli oppfattet.
Unngå svært brede tekstfelt. Lange linjer gjør det vanskeligere å finne starten på neste linje. Luft mellom avsnitt og seksjoner bør vise hvilke elementer som hører sammen. Mer luft er ikke alltid bedre; avstanden må uttrykke struktur.
Kontroller også mobilvisningen manuelt. En overskrift som fungerer på stor skjerm, kan bli dominerende og oppta nesten hele mobilskjermen. Et godt typografisk hierarki må fungere uten at brukeren må zoome eller orientere seg gjennom store tekstblokker.
La den visuelle identiteten forsterke budskapet
Farger, bilder, former og typografi skal gjøre bedriften gjenkjennelig, men også støtte innholdets funksjon. En sterk profil hjelper lite dersom knapper er vanskelige å finne, teksten er tung å lese eller alle seksjoner konkurrerer om oppmerksomheten.
Velg noen få tydelige roller for fargene: bakgrunn, tekst, fremheving og handling. Profilfargen trenger ikke brukes på alle flater. Når den reserveres til viktige elementer, får den større funksjonell verdi.
Bilder bør vise relevante miljøer, mennesker, produkter eller arbeidssituasjoner. Et troverdig bilde fra virksomheten forteller ofte mer enn et generisk motiv. Samtidig må motivet ha en oppgave: forklare tjenesten, synliggjøre menneskene eller gi konkret innblikk i leveransen.
Tilgjengelighet må bygges inn i hierarkiet
Tilgjengelighet er ikke et eget lag som legges på til slutt. Den samme strukturen som hjelper en travel leder å skanne siden, hjelper også personer som bruker tastatur, skjermleser eller forstørring.
Noen grunnleggende kontroller bør inngå i designarbeidet:
- Overskriftsnivåene følger en logisk rekkefølge
- Tekst og betjeningselementer har tilstrekkelig kontrast
- Lenker og knapper har forståelige navn
- Fokusmarkering er synlig ved tastaturnavigasjon
- Innholdet gir mening uten at farge er eneste forklaring
- Teksten kan forstørres uten at innhold eller funksjoner forsvinner
- Skjemaer har tydelige feltnavn og forståelige feilmeldinger
Vær særlig oppmerksom på designelementer som ser ryddige ut, men skjuler informasjon. Svak grå tekst, plassholdertekst som eneste feltnavn og interaktive kort uten tydelig fokus er vanlige eksempler.
En praktisk gjennomgang av en viktig side
Velg én side som har betydning for salg eller henvendelser. Gå gjennom den i tre runder med ulike spørsmål.
Runde 1: Skann
- Forstår du tilbudet ved å lese overskriftene?
- Er den viktigste handlingen lett å finne?
- Er det tydelig hvem siden er laget for?
Runde 2: Vurder
- Forklarer siden hva leveransen omfatter?
- Kommer informasjonen i en naturlig beslutningsrekkefølge?
- Er navigasjon og innhold organisert med kundens ord?
Runde 3: Kvalitetssikre
- Finnes detaljene som reduserer usikkerhet?
- Er erfaring og arbeidsmåte beskrevet konkret?
- Fungerer siden med tastatur, forstørret tekst og på mobil?
- Er neste steg tydelig uten å virke påtrengende?
Noter problemer før dere diskuterer visuelle løsninger. Da unngår dere at arbeidet starter med farger, fonter og komponenter når det egentlige problemet er uklar struktur eller manglende innhold.
God konvertering begynner med forståelse
Konverteringsarbeid blir fort redusert til knappetekster, skjemaer og plassering av kontaktpunkter. Disse elementene er viktige, men de kan ikke kompensere for et tilbud som er vanskelig å forstå.
Design for tre lesedybder gir en mer robust tilnærming. Den raske leseren får oversikt. Den vurderende leseren kan sammenligne tilbudet. Den grundige leseren får nok informasjon til å redusere risiko og anbefale neste steg.
Resultatet er ikke nødvendigvis en kortere side. Det er en side der hvert nivå har en tydelig oppgave, og der struktur, navigasjon, typografi, visuell identitet og tilgjengelighet trekker i samme retning.
