Test navigasjonen før dere designer resten av nettsiden

Kategori: Webdesign og UX

Mange nettsideprosjekter starter med farger, fonter og forslag til forside. Det gir noe konkret å diskutere, men kan også skjule et mer grunnleggende problem: Kundene finner ikke frem.

For en norsk bedriftsnettside bør struktur og navigasjon testes før det visuelle designet er ferdig. Da kan dere oppdage uklare menypunkter, overlappende tjenester og manglende handlingsveier uten å måtte bygge om ferdige sidemaler. Målet er ikke å lage færrest mulig sider, men å gjøre veien til riktig informasjon forståelig.

Start med oppgavene, ikke organisasjonskartet

Bedrifter strukturerer ofte nettsiden etter interne avdelinger, produktområder eller ansvarsfordeling. Kundene kjenner sjelden denne logikken. De kommer med en oppgave: forstå et tilbud, sammenligne alternativer, sjekke om leverandøren passer eller kontakte riktig person.

Lag derfor en kort liste over de viktigste oppgavene nettsiden skal støtte. En rådgivningsbedrift kan for eksempel prioritere at brukeren skal kunne:

• forstå hvilke problemer bedriften løser
• finne riktig tjeneste for sin situasjon
• vurdere erfaring og kompetanse
• få svar på praktiske spørsmål
• ta kontakt med relevant fagperson

Denne listen er et bedre utgangspunkt for strukturen enn en komplett oversikt over alt virksomheten gjør. Hver hovedside bør støtte minst én viktig brukeroppgave og ha en tydelig rolle i kundereisen.

Lag et strukturutkast uten visuelt design

Før dere tegner ferdige sider, kan strukturen beskrives med sidetitler og nivåer. Ta med hovedmeny, undersider og sentrale handlingssider. Det er nok til å vurdere om innholdet henger sammen.

Hold de viktigste kategoriene tydelig adskilt. Hvis både «Tjenester», «Løsninger» og «Hva vi tilbyr» finnes i samme meny, må brukeren gjette forskjellen. Slike begreper kan virke presise internt, men blir ofte utydelige når de står ved siden av hverandre.

Se også etter innhold som mangler en naturlig plass. Hvis viktige sider stadig må legges under «Om oss» eller «Annet», er det et tegn på at strukturen ikke gjenspeiler brukernes behov.

Gi hvert menypunkt en tydelig forventning

Et godt menypunkt forteller hva brukeren finner etter et klikk. «Tjenester» kan fungere når målgruppen kjenner kategorien, men mer konkrete navn er ofte bedre. «Regnskap for bedrifter» sier mer enn «Våre løsninger», og «Bestill befaring» er tydeligere enn «Kom i gang».

Unngå å bruke kreative formuleringer i navigasjonen bare for å skille merkevaren ut. Identiteten kan komme til uttrykk gjennom språk, bilder, typografi og detaljer i grensesnittet. Selve veivisningen bør være forutsigbar.

Test med realistiske spørsmål

En enkel test kan gjennomføres med en tekstbasert meny, en klikkbar skisse eller papirlapper. Dere trenger ikke en ferdig nettside. Finn noen personer som ligner målgruppen og gi dem konkrete oppgaver uten å forklare strukturen først.

Bruk oppgaver som beskriver et behov, ikke navnet på siden dere ønsker at de skal finne. I stedet for «Finn kontaktsiden» kan dere spørre: «Du vil snakke med noen om et prosjekt i Bergen. Hvor ville du gått?»

En praktisk testrunde kan gjennomføres slik:

1. Velg fem til åtte viktige oppgaver nettsiden skal støtte.
2. Vis deltakeren menyen eller en enkel struktur uten forklaring.
3. Be personen peke ut hvor han eller hun ville startet.
4. Spør hva deltakeren forventer å finne bak valget.
5. Noter nøling, feilvalg og ord som blir misforstått.
6. Juster strukturen og test den på nytt med andre personer.

Ikke vurder testen bare etter om deltakeren til slutt fant frem. En bruker som må prøve tre menypunkter, gå tilbake og lese alt på nytt, har møtt en reell hindring. Det samme gjelder dersom riktig valg blir tatt av ren gjetning.

Bruk typografi til å bekrefte hvor brukeren er

Når strukturen fungerer, skal typografien gjøre den synlig. Sidetittel, mellomtitler, brødtekst og handlingsknapper må ha tydelige og konsekvente roller. Brukeren skal raskt kunne se hva siden handler om, hvilke deler den består av og hva som kan gjøres videre.

Unngå mange tekststiler som bare skiller seg med små variasjoner i størrelse eller farge. Det gjør hierarkiet vanskeligere å lese og mer krevende å vedlikeholde. Definer heller et begrenset sett med nivåer som brukes likt på tvers av sidetyper.

Lesbarhet handler også om linjelengde, linjeavstand og kontrast. En profilfont kan passe godt i overskrifter, men være slitsom i lange avsnitt eller små knapper. Visuell identitet bør ikke gjøre viktig informasjon vanskeligere å lese.

La identiteten støtte orienteringen

En tydelig visuell identitet er mer enn logo og profilfarger. Den bør hjelpe brukeren med å forstå hva som hører sammen. Farge, bildebruk, flater og komponenter kan markere forskjellen mellom informasjon, eksempler, kundehistorier og handlinger.

Vær samtidig forsiktig med å gi samme farge mange betydninger. Hvis profilfargen brukes på både knapper, dekor, overskrifter og ikke-klikkbare elementer, blir det vanskeligere å se hva som faktisk er interaktivt.

Lag faste regler for de viktigste grensesnittelementene:

• Lenker bør kunne gjenkjennes uten at brukeren må prøve seg frem.
• Primære knapper bør brukes til sidens viktigste handling.
• Sekundære handlinger bør være synlige uten å konkurrere unødvendig.
• Aktivt menypunkt bør skille seg tydelig fra de øvrige.
• Feilmeldinger og bekreftelser bør ha konsekvent form og plassering.

Tilgjengelighet gjør navigasjonen mer robust

En struktur kan se ryddig ut med mus og stor skjerm, men likevel være vanskelig å bruke med tastatur, skjermleser eller forstørret tekst. Tilgjengelighet må derfor vurderes som en del av navigasjonsdesignet, ikke som en kontroll helt til slutt.

Test om alle menypunkter og knapper kan nås med tastatur, og om det er lett å se hvilket element som har fokus. Sørg for at undermenyer kan åpnes og lukkes på en forståelig måte. På mobil må trykkflater ha nok plass, og menyen bør ikke dekke viktig innhold uten en tydelig vei tilbake.

Menypunkter, lenker og knapper bør også ha navn som gir mening når de leses isolert. Mange lenker med teksten «Les mer» gjør det vanskelig å forstå forskjellen mellom valgene. «Les om bedriftsforsikring» eller «Se våre rådgivningstjenester» gir bedre retning.

Koble navigasjonen til konvertering

God navigasjon handler ikke bare om å finne informasjon. Den skal føre brukeren videre når et spørsmål er besvart. Derfor bør hver sentrale sidetype ha en definert neste handling.

På en tjenesteside kan neste steg være å se relevante referanser, lese om arbeidsprosessen eller be om en vurdering. På en kundehistorie kan det være å utforske den aktuelle tjenesten. På en kontaktside bør brukeren forstå hva som skjer etter innsending, og hvilke opplysninger bedriften trenger.

Unngå å plassere den samme generelle kontaktknappen overalt uten å ta hensyn til konteksten. En konkret handling som «Be om pristilbud på renhold» gir en tydeligere forventning enn «Kontakt oss». Samtidig må teksten samsvare med det som faktisk skjer etter klikket.

Avslutt med en fast beslutningsrunde

Etter testingen bør prosjektgruppen ta stilling til funnene samlet. Ikke løs hvert problem med et nytt menypunkt. Noen ganger bør sider slås sammen, innhold få et tydeligere navn eller mindre viktig stoff flyttes ut av hovedmenyen.

Før det visuelle designet låses, bør dere kunne svare ja på disse spørsmålene:

• Er hovedoppgavene til målgruppen dekket av strukturen?
• Forstår brukerne menypunktene uten intern forklaring?
• Er viktige sider tilgjengelige gjennom logiske veier?
• Har hver sidetype en tydelig neste handling?
• Fungerer navigasjonen med tastatur og på liten skjerm?
• Støtter typografi og visuell identitet orienteringen?

Det er langt enklere å endre et strukturutkast enn å bygge om en ferdig nettside. Ved å teste navigasjonen tidlig får dere et bedre grunnlag for både design, innhold og konvertering. Resultatet er ikke bare en ryddigere meny, men en nettside som hjelper kundene videre uten at de må forstå hvordan bedriften er organisert.