Én side, én hovedoppgave: Slik skaper dere tydelig handlingshierarki
Når alle elementer ber om oppmerksomhet, blir det vanskelig å velge. Et tydelig handlingshierarki gjør nettsiden enklere å forstå og bedre til å skape henvendelser.
Kategori: Webdesign
Mange bedriftssider har ikke for lite innhold, men for mange konkurrerende budskap. Menyen er omfattende, toppfeltet rommer flere knapper, forsiden presenterer alle tjenester samtidig, og hvert avsnitt avsluttes med en ny oppfordring. Resultatet er at brukeren må gjøre prioriteringsjobben bedriften selv burde ha gjort.
Et handlingshierarki bestemmer hva brukeren først skal forstå, deretter undersøke og til slutt gjøre. Hierarkiet binder sammen struktur, navigasjon, typografi, visuell identitet, tilgjengelighet og konvertering. Det gir også et konkret grunnlag for designbeslutninger: Hvis to elementer ser like viktige ut, skal de da virkelig være det?
Begynn med sidens viktigste oppgave
En side bør ha én tydelig hovedoppgave. Det betyr ikke at den bare kan inneholde én lenke eller knapp, men at én handling skal ha høyest prioritet.
På en tjenesteside kan hovedoppgaven være å be om en vurdering. På en produktside kan det være å kjøpe produktet. På en kontaktside kan det være å sende inn et skjema. Sekundære handlinger kan være å lese en kundehistorie, laste ned informasjon eller finne kontaktopplysninger.
Formuler oppgaven som en konkret setning før siden designes:
- Etter å ha lest siden skal en aktuell kunde kunne be om et tilbud.
- Etter å ha sammenlignet alternativene skal kjøperen kunne velge riktig produkt.
- Etter å ha forstått tjenesten skal brukeren kunne bestille et møte.
Hvis teamet ikke klarer å bli enige om én hovedoppgave, er det ofte et tegn på at siden prøver å dekke flere ulike behov. Da kan løsningen være å dele innholdet i flere sider eller lage tydeligere innganger for forskjellige målgrupper.
Bygg innholdet som en beslutningsrekke
En god side følger ikke nødvendigvis bedriftens foretrukne presentasjonsrekkefølge. Den følger spørsmålene en potensiell kunde må få besvart før det er naturlig å handle.
En nyttig grunnstruktur kan være:
- Avklaring: Hva tilbyr dere, og hvem passer det for?
- Relevans: Hvilket problem løser tilbudet?
- Vurdering: Hva inngår, og hvordan fungerer leveransen?
- Trygghet: Hvorfor bør kunden stole på bedriften og løsningen?
- Handling: Hva er neste steg, og hva skjer etterpå?
Denne rekkefølgen gjør det lettere å vurdere hva som skal stå øverst. En lang firmapresentasjon bør sjelden komme før brukeren har forstått tilbudet. Interne faguttrykk bør heller ikke være inngangen til en tjeneste hvis kundene beskriver behovet på en annen måte.
Strukturen må samtidig fungere for dem som skanner. Tydelige mellomtitler, korte avsnitt og beskrivende punktlister gjør at brukeren kan finne den delen som er relevant uten å lese alt fra start til slutt.
La navigasjonen støtte valget
Navigasjonen skal hjelpe brukeren videre, ikke vise hele virksomheten på én gang. En hovedmeny med mange likestilte valg flytter kompleksiteten fra bedriften til kunden.
Skill mellom det som hører hjemme i hovedmenyen, og det som kan ligge i undermenyer eller bunnområdet. De viktigste tjenestene, produktene og kontaktmulighetene bør være enkle å finne. Personalinformasjon, presseinnhold, dokumentarkiv og administrative sider trenger ikke alltid samme synlighet.
Menypunktene bør bruke ord brukeren forstår. «Tjenester» er tydeligere enn et internt navn på en avdeling. «Bestill service» er mer presist enn «Henvendelser» dersom det faktisk er oppgaven.
Handlingsknappen i toppområdet må også vurderes kritisk. En fast knapp som sier «Kontakt oss» kan fungere godt, men bare hvis kontakt er et relevant neste steg på de fleste sidene. Dersom ulike tjenester har svært forskjellige kjøpsprosesser, kan en generell knapp bli mindre nyttig enn en sidetilpasset handling.
Bruk typografi til å vise prioritet
Typografi handler ikke bare om valg av skrifttype. Størrelse, vekt, linjelengde, avstand og kontrast forteller leseren hva som hører sammen, og hva som er viktigst.
Lag et begrenset og konsekvent typografisk system. En hovedtittel, to eller tre nivåer av mellomtitler, brødtekst og enkelte støttestiler er ofte tilstrekkelig. Hvis hver innholdstype får sin egen størrelse, farge og vekt, blir hierarkiet vanskelig å tolke.
Store overskrifter løser heller ikke alt. En tittel kan dominere skjermen uten å forklare tilbudet. «Vi skaper muligheter» sier mindre enn «Regnskapstjenester for små entreprenørbedrifter». Den konkrete formuleringen gir både retning og relevans.
Brødteksten må være behagelig å lese på små og store skjermer. Unngå svært lange tekstlinjer, tett linjeavstand og lys grå tekst. Disse grepene kan se elegante ut i en designskisse, men gjør siden mer krevende i praktisk bruk.
Gjør den visuelle identiteten funksjonell
Nettsiden skal kjennes igjen som bedriftens, men identiteten må støtte innholdet. Farge, bilder, former og grafiske detaljer bør brukes konsekvent til å skape sammenheng og prioritet.
En profilfarge kan for eksempel være reservert for primære handlinger. Da lærer brukeren raskt at elementer i denne fargen kan aktiveres. Hvis samme farge brukes på dekorflater, overskrifter, ikoner og knapper, mister den noe av funksjonen som signal.
Bilder bør ha en oppgave utover å fylle plass. Fotografier av ansatte i reelle arbeidssituasjoner kan gjøre tjenesten mer konkret og troverdig. Et generelt stemningsbilde kan derimot skyve viktig informasjon nedover uten å hjelpe brukeren med valget.
Vær også forsiktig med store animasjoner og dekorative overganger. Bevegelse tiltrekker seg oppmerksomhet uansett om innholdet fortjener den. Bruk derfor bevegelse bare når den forklarer en sammenheng, gir respons på en handling eller hjelper brukeren å forstå hva som skjer.
Tilgjengelighet skjerper hierarkiet
Tilgjengelighet bør ikke behandles som en kontroll helt på slutten. Mange tilgjengelighetsgrep gjør designet tydeligere for alle.
God kontrast gjør tekst og knapper lettere å oppfatte. Synlig tastaturfokus viser hvor brukeren befinner seg. Beskrivende lenketekster forklarer hva som skjer ved aktivering. Riktig rekkefølge på overskrifter gjør innholdet enklere å navigere, både visuelt og med hjelpemidler.
Ikke la farge være det eneste som skiller primære og sekundære handlinger. Forskjeller i tekst, form, plassering eller visuell vekt gir et mer robust grensesnitt. Feilmeldinger i skjemaer må også forklare hva som er feil og hvordan det kan rettes, ikke bare markere feltet med rødt.
Vurder dessuten rekkefølgen når siden vises på mobil. Elementer som ligger side om side på stor skjerm, blir ofte stablet. Da kan en sekundær informasjonsboks plutselig komme før hovedinnholdet og bryte beslutningsrekken.
Utform handlingen som en tydelig avtale
En handlingsknapp bør beskrive hva brukeren får eller starter. «Send» og «Klikk her» gir lite informasjon. «Be om pristilbud», «Bestill en gjennomgang» eller «Se ledige modeller» setter en klar forventning.
Innholdet rundt knappen må redusere usikkerhet. Hvis brukeren skal fylle ut et skjema, bør siden fortelle hvilke opplysninger som trengs, om henvendelsen er uforpliktende, og hva som skjer etter innsending. Denne informasjonen er en del av brukeropplevelsen, ikke juridisk eller administrativt tilleggstoff.
Unngå å gjenta den samme sterke knappen etter hvert korte avsnitt. Det kan oppleves masete og gjøre siden visuelt urolig. Plasser heller hovedhandlingen der brukeren vanligvis har nok informasjon til å ta neste steg. På lange sider kan den gjentas på noen få naturlige beslutningspunkter.
Test om prioriteringen faktisk er synlig
Designteamet kjenner innholdet for godt til å vurdere førsteinntrykket alene. Gjennomfør derfor en enkel test med personer som ikke har deltatt i arbeidet.
- Vis siden i noen sekunder uten å forklare den.
- Skjul siden og spør hva bedriften tilbyr.
- Spør hvem tilbudet virker laget for.
- Spør hva personen ville gjort videre.
- La personen finne og gjennomføre hovedhandlingen på mobil og datamaskin.
Hvis svarene spriker, bør dere ikke automatisk legge til mer tekst. Problemet kan ligge i rekkefølgen, overskriftene, navigasjonen eller den visuelle vektingen. Se også etter elementer som trekker oppmerksomheten bort fra hovedoppgaven.
Følg deretter med på faktiske henvendelser. En høyere andel skjemainnsendinger er ikke nødvendigvis en forbedring hvis henvendelsene er irrelevante. Vurder både antall, kvalitet og hvor godt brukeren er forberedt når kontakten tas.
Lag noen faste regler for nye sider
Handlingshierarkiet bør ikke være avhengig av hvem som publiserer. Et kort sett med design- og innholdsregler gjør det lettere å bevare kvaliteten over tid:
- Hver side skal ha én definert hovedoppgave.
- Primærknappen skal ha samme grunnstil på tvers av nettstedet.
- Overskrifter skal beskrive innholdet, ikke bare skape stemning.
- Farge skal aldri være eneste signal om betydning eller status.
- Skjemaer skal forklare neste steg og vise forståelige feilmeldinger.
- Nye elementer skal testes på mobil, med tastatur og ved forstørret visning.
Et tydelig handlingshierarki betyr ikke at alle sider skal se like ut. Det betyr at brukeren slipper å gjette hva som er viktig. Når struktur, navigasjon, typografi, visuell identitet og tilgjengelighet peker i samme retning, blir konvertering en naturlig følge av et forståelig nettsted – ikke et lag med påtrengende knapper oppå et uklart design.
