Fra førsteside til forespørsel: Design nettsiden rundt kundens neste beslutning

Kategori: Webdesign og UX

Mange bedriftsnettsider er bygget som en presentasjon av virksomheten. De viser organisasjonen, tjenestene, historien og de siste nyhetene. Problemet er at kunden sjelden besøker nettsiden for å studere bedriften. Kunden prøver å løse en oppgave, vurdere et alternativ eller redusere usikkerhet før en beslutning.

Et mer nyttig utgangspunkt for webdesign er derfor å spørre: Hva må den besøkende forstå, finne og gjøre som neste steg?

Når nettsiden planlegges rundt slike beslutninger, blir det lettere å prioritere innhold, forenkle navigasjonen og plassere handlingsknapper på riktige steder. Resultatet er ikke bare et ryddigere design. Nettsiden blir også mer tilgjengelig, mer troverdig og bedre egnet til å skape henvendelser.

Start med kundens oppgave, ikke menyen

En vanlig feil i nettsideprosjekter er å starte med et organisasjonskart og gjøre avdelinger eller interne fagområder om til menypunkter. Det kan virke logisk for ansatte, men være vanskelig å forstå for kunder som bruker andre ord og kategorier.

Start i stedet med de viktigste oppgavene nettsiden skal støtte. For en bedriftsnettside kan det for eksempel være å:

• forstå hva virksomheten leverer
• finne en relevant tjeneste
• vurdere om leverandøren har riktig kompetanse
• se eksempler fra lignende kunder
• forstå prisnivå, prosess eller leveringstid
• bestille et møte eller sende en forespørsel

Prioriter tre til fem hovedoppgaver. Hvis alt blir definert som like viktig, vil grensesnittet raskt fylles med konkurrerende budskap, knapper og innganger.

Lag et enkelt beslutningskart

Et beslutningskart trenger ikke være avansert. Skriv ned hva kunden typisk lurer på i de ulike fasene:

1. Orientering: Er dette relevant for min virksomhet?
2. Vurdering: Kan denne leverandøren løse behovet vårt?
3. Trygghet: Har de erfaring, kapasitet og en forståelig arbeidsform?
4. Handling: Hva skjer hvis jeg tar kontakt?

Kartet gir en praktisk ramme for både sidestruktur og innhold. En tjenesteside bør for eksempel ikke stoppe etter en generell beskrivelse. Den bør også svare på hvem tjenesten passer for, hvilke problemer den løser, hvordan samarbeidet foregår og hva kunden kan gjøre videre.

Gi hver side én tydelig hovedoppgave

En side kan inneholde mye informasjon, men den bør ha én dominerende funksjon. Forsiden skal ofte hjelpe brukeren med å velge riktig retning. En tjenesteside skal forklare og kvalifisere. En kundehistorie skal dokumentere erfaring. En kontaktside skal gjøre det enkelt og trygt å starte en dialog.

Når formålet er uklart, blir designet gjerne fragmentert. Den samme siden kan inneholde nyheter, kampanjebokser, lenker til alle tjenester, flere skjemaer og ulike handlingsknapper. Brukeren må da selv avgjøre hva som er viktig.

Definer derfor følgende for hver sentrale side:

• Hvem er siden primært laget for?
• Hvilket spørsmål skal den besvare?
• Hva skal brukeren sitte igjen med?
• Hva er det naturlige neste steget?

Denne avklaringen gjør det enklere å fjerne elementer som ikke støtter sidens oppgave.

Navigasjonen skal forklare, ikke imponere

Gode menypunkter bruker ord kundene kjenner igjen. «Tjenester», «Bransjer», «Kundehistorier» og «Kontakt» er ofte mer forståelige enn kreative navn som krever tolkning. Originalitet kan være verdifullt i den visuelle identiteten, men sjelden i grunnleggende navigasjon.

Hold hovedmenyen konsistent gjennom hele nettstedet. Gjentakende navigasjon på samme sted og i samme rekkefølge gjør nettstedet mer forutsigbart, noe som er viktig både for generell brukervennlighet og tilgjengelighet. W3C fremhever også tydelig struktur, beskrivende overskrifter og konsekvent navigasjon som sentrale prinsipper.

På større nettsteder bør hovedmenyen suppleres med andre veier til innholdet. Det kan være søk, brødsmulesti, relevante lenker i teksten eller en lokal undermeny. Målet er ikke å tilby flest mulig valg, men å gjøre det mulig å finne frem uten å måtte starte på forsiden hver gang.

Test menyen uten design

Skriv menypunktene og undersidene i et enkelt tekstdokument. Be en person som ikke kjenner prosjektet, peke ut hvor vedkommende ville gått for å finne prisinformasjon, en bestemt tjeneste eller kontaktpersonen for et fagområde.

Hvis testen krever forklaringer, er problemet sannsynligvis strukturen eller ordvalget – ikke farger, ikoner eller animasjoner.

Bruk typografi til å vise hva som er viktig

Typografi handler om mer enn valg av skrifttype. På en bedriftsnettside er typografiens viktigste oppgave å etablere et tydelig visuelt hierarki.

Brukeren bør raskt kunne skille mellom:

• sidens hovedtema
• viktige deltemaer
• forklarende brødtekst
• lenker og handlinger
• supplerende informasjon

Forskjellene må være tydelige nok. Hvis overskrifter, ingresser og brødtekst har nesten samme størrelse og vekt, blir siden tung å skanne. Det samme gjelder dersom halvparten av teksten er fet eller alle elementer bruker ulike skrifttyper.

Velg helst et begrenset typografisk system med faste nivåer. Sørg for god linjeavstand, korte nok tekstlinjer og luft mellom innholdsgruppene. På mobil må teksten være lesbar uten at brukeren må zoome, og overskriftene må kunne brytes uten å ødelegge layouten.

La identiteten støtte forståelsen

Visuell identitet skal gjøre virksomheten gjenkjennelig, men den må også fungere i et digitalt grensesnitt. Profilmanualer som hovedsakelig er utviklet for presentasjoner og trykksaker, tar ikke alltid høyde for kontrast, interaktive tilstander eller små skjermer.

En praktisk digital designprofil bør derfor definere:

• farger for tekst, bakgrunn, lenker og knapper
• hvordan lenker ser ut før og etter aktivering
• fokusmarkering for tastaturnavigasjon
• knappevarianter og når de skal brukes
• typografiske nivåer på store og små skjermer
• stil for foto, illustrasjoner og ikoner

Profilfargen trenger ikke brukes på alle flater. Ofte blir identiteten tydeligere når fargen brukes konsekvent på utvalgte elementer, mens innholdet får rolige bakgrunner og god plass.

Tilgjengelighet må inn før designet godkjennes

Universell utforming er ikke en kontroll som bør utsettes til nettstedet er ferdig utviklet. Mange problemer oppstår allerede i designfasen: for svak kontrast, utydelige skjemafelt, små klikkflater, manglende fokusmarkering og informasjon som bare formidles gjennom farge.

I Norge gjelder krav til universell utforming for mange nettløsninger som tilbyr informasjon eller tjenester til allmennheten. Kravene varierer blant annet mellom privat og offentlig sektor. For private virksomheters nettløsninger viser forskriften til WCAG 2.0 på nivå A og AA, med enkelte unntak. Virksomheten bør avklare nøyaktig hvilke krav som gjelder for den aktuelle løsningen.

Tilgjengelig design er samtidig praktisk UX-arbeid. Tydelige overskrifter hjelper brukeren med å skanne. God kontrast gjør teksten lettere å lese i sollys. Synlig tastaturfokus viser hvor brukeren befinner seg. Klare feilmeldinger gjør skjemaer enklere å fullføre. W3Cs designråd fremhever blant annet tilstrekkelig kontrast, tydelige interaktive elementer, merkede skjemafelt og design som fungerer på ulike skjermstørrelser.

Plasser handlingen der beslutningen tas

Konvertering handler ikke om å fylle siden med «Kontakt oss»-knapper. En handling fungerer best når den kommer etter informasjonen brukeren trenger for å føle seg klar.

På en kort tjenesteside kan én tydelig knapp være nok. På en lengre side kan handlingen gjentas etter sentrale avsnitt, men teksten bør passe til situasjonen. «Be om en vurdering», «Snakk med en rådgiver» eller «Beskriv behovet» sier mer enn «Send» eller «Les mer».

Reduser også usikkerheten rundt selve handlingen. Fortell hva som skjer etter innsending, hvor mye informasjon skjemaet krever og om henvendelsen er uforpliktende. Et kort skjema er ikke automatisk best; det viktige er at hvert felt har en tydelig hensikt.

En praktisk gjennomgang på 20 minutter

Velg én viktig side og vurder den uten å diskutere personlig smak:

1. Kan en ny besøkende forstå tilbudet fra sidens første skjermbilde?
2. Er hovedoverskriften konkret nok til å fungere uten resten av teksten?
3. Er det lett å se hvilke elementer som er lenker og knapper?
4. Kan innholdet skannes gjennom beskrivende mellomtitler?
5. Har tekst og interaktive elementer tilstrekkelig kontrast?
6. Fungerer siden med tastatur og på en smal mobilskjerm?
7. Kommer den viktigste handlingen etter relevant beslutningsinformasjon?
8. Forstår brukeren hva som skjer etter at handlingen er utført?

Noter problemer som hindrer forståelse eller fremdrift før dere diskuterer estetiske justeringer. Det gir en mer presis prioritering enn å starte med om noen liker fargen, skrifttypen eller størrelsen på et bilde.

Godt webdesign gjør neste steg tydelig

En effektiv bedriftsnettside trenger ikke å være visuelt forsiktig eller lik konkurrentenes. Den kan ha en sterk identitet og samtidig være enkel å bruke. Nøkkelen er at struktur, navigasjon, typografi og visuelle virkemidler trekker i samme retning.

Når hver side hjelper kunden med én konkret beslutning, blir det også enklere å evaluere designet. Spørsmålet er ikke bare om nettsiden ser profesjonell ut, men om den gjør det lett å forstå tilbudet, finne relevant informasjon og gå videre med trygghet.