Lag et navigasjonskonsept som er lett å forstå for brukerne!
(Jeg skrev et blogginnlegg tidligere som omhandlet 7 regler for god menystruktur og navigasjon. Her er forklaringen på regel nr. 1: Lag et navigasjonskonsept som er lett å forstå for brukerne!)
Hovednavigasjonen skal raskt kunne si brukeren hva nettstedet handler om. Jeg trekke frem 3 ulike menyvarianter for å illustrere hvorfor dette er viktig:
- Triggerordnavigasjon (god praksis)
- Mystery Meat navigation (dårlig praksis)
- Generelle/generiske menyer (dårlig praksis)
Jeg vil gå igjennom disse variantene etter tur og beskrive hvordan dette påvirker brukernes forståelse av et nettsted. Men først vil jeg minne om at menynavigasjon er ikke det viktigste virkemidlet man har på et nettsted for å få brukerne til få finne frem. Innholdet er langt viktigere – hvordan man har strukturert innholdet, hvordan man skriver overskrifter, hvor lett det er å få oversikt mm.
Triggerordnavigasjon
Triggerord er ord som brukere ofte ser etter når de er på leting etter informasjon. For eksempel hvis man er ute etter programvare som man kan laste ned og teste (før man kjøper) ser du etter ord som “download” eller “last ned”. Alt annet er uinteressant. Hvis man ikke finner ordene man leter etter vil man raskt enten forlate nettstedet eller velge andre strategier enn menynavigasjon – som f.eks. søk eller skumme innholdet etter navigasjonsmuligheter (innholdsnavigasjon).
www.moelven.no bruker triggerord i hovednavigasjon med hell. Dette er en variant som jeg har vært med på å utvikle for Moelven hvor forsiden inneholder en kategori samt et utvalg av representative triggerord for innholdet man finner under hver kategori. Vi synes det funger utmerket. Dyplenkingen gjør at sentralt innhold er tilgjengelig uten å måtte vise flere nivåer for å forstå konseptet.
Et annet nettsted som bruker triggerord, men som ikke er like elegant er www.xxl.no. Her fyller triggerordene hele toppen av siden som gjør at man skyver selve innholdet (varene) unødvendig langt ned på siden.
“Mystery Meat Navigation” (MMN)
Den typiske MMN er designet slik at menypunktene ikke har tekstlig beskrivelse før man klikker eller tar musen over et ikon eller noe som du kanskje tror kan være hovednavigasjonen. Et eksempel på dette ser du her: The CSI Companies. Et annet eksempel er Petter Stordalens (hjemme)side Homeinvest. Homeinvest er et perfekt eksempel på Mystery Meat navigation, men det er dermed ikke sagt at sidene er dårlige. Det vil avhenge av hensikten med nettstedet. Hvis det ikke spiller noen rolle om brukeren må bruke tid på utforske nettstedet og det ikke er fokus på at brukeren må finne informasjon raskt (og smertefritt) kan MMN godt brukes. Det er imidlertid lite brukervennlig i de aller fleste tilfeller.
Nytt (14. apr)! Leste i dag om SVs velgerguide som også har mystery meat menyer – den bør sees. (Se forøvrig valgpanelet.no for vurdering av partienes valgkamp på nett).
Generelle / generiske menyer
Det er ofte vanskelig å lage kategorier for store nettsteder. Det kan ende i kategorier som på toppnivå er så generelle at det er vanskelig å forstå hva som skjuler seg bak menypunktene. Her har vi et eksempel fra regjeringen.no som har valgt å være veldig ryddige i forhold til å velge et navigasjonskonsept og så være konsistent gjennom hele løsningen. Det er bare så synd at det passer dårlig at alle departementene har lik struktur som er slik:
- Departementets forside
- Aktuelt
- Tema
- Dokumenter
- Om Departementet
- Lyd og bilde
Riktignok er det slik at det er lenker under hver kategori slik at man ser nivå 2 navigasjonen umiddelbart, men også den er veldig generell. Ta den generiske kategorien “Dokumenter” som inneholder følgende underpunkter:
- Statsbudsjettet
- Proposisjoner og meldinger
- Lover og regler
- Rundskriv
- Høringer
- NOU-er
- Rapporter og planer
- Veiledninger og brosjyrer
- Andre dokumenter
Det er ikke lett for “mannen i gata” å vite hva man skal klikke på her. Navigasjonen er laget av og for interne brukere (eller ekspertbrukere). “Andre dokumenter” er også et eksempel på hva som skjer når man går helt tom for navngiving
Oppsummert
Jeg har raskt gått igjennom 3 ulike typer navigasjonskonsepter. Triggerordsnavigasjon er bra fordi det gir rask oversikt ved ett blikk og det kontekstualiserer hovedmenypunktene slik at man skjønner fort hva man finner under hver kategori. Mystery meat navigasjon og Generelle / generiske termer er tilsvarende dårlig egnet for rask oversikt.
Synes du at dette illustrerer viktigheten av å lage et konsept som brukerne forstår eller har du en bedre ide? Har du noen (kreative) eksempler på navigasjon og menyer som ikke er lette å forstå? Jeg vil gjerne ha dine egne erfaringer på dette!
Har du noen visdomsord om disse multinivåmenyene, som på f.eks. http://www.ibm.com
Vel overstått påske, forresten!
Solkysthilsen fra Pål
Hei Pål og vel overstått til dere også
Jeg er veldig lite glad i multinivåmenyer som feller ut slik som på http://www.ibm.com. Dette nettstedet er et utmerket eksempel på at IBM ikke har klart å komme opp med ett godt navigasjonskonsept. Her er det flust av generelle menypunkter og veldig lite kontekst. Se f.eks. “Support & downloads” – her finner man både “use”, “install” og “plan”… ganske generelle greier.
I tillegg har man duplisert deler av denne navigasjonen i bunnen under “Get support” fanen.
Menyene bryter også en annen regel som jeg skal ta opp senere, nemlig at man bør ha menypunkter på samme logiske nivå. På ibm.com er det utrolig vanskelig å få et bilde av hvordan nettstedet er strukturert fordi de ikke har klart å velge kun ett navigasjonskonsept og finne ut hvilket nivå informasjonen hører hjemme.
Strykkarakter!
Kan du ikke droppe squashen i kveld, og skrive i detalj om fordeler og ulemper med IBM-navigasjonen? Jeg er intuitiv motstander, men mangler vokabularet til å argumenter mot.
Hei,
Takk for en bra post! Jeg har noen tanker ang. sammenligning av http://www.moelven.no og http://www.xxl.no
Jeg synes XXL har bedre løsning fordi de har bedre markering av valgte kategorier. Siden menystruktur/design på forsiden og andre sider er forskjellige det er veldig viktig at bruker fanger disse endringer med en gang. På XXL er det enklere å forstå hvor du står, enn på MORLVEN, synes jeg. Det er ikke nok å ha bold tekst på valgte punkter i menyen. XXL bruker hover-farge videre og markere vagte elementer med samme farge. MORLVEN bruker orange som hover-farge, men mister den når man klikker på linken.
Det var bare det.
Bra kommentar!
Ja, jeg kan være enig i at http://www.moelven.no har mindre tydelig markering av menypunkter som er valgt på undernivåene.
Jeg synes imidlertid at http://www.xxl.no bruker (unødvendig?) mye plass av toppen av siden for navigasjon. Jeg hadde heller sett at xxl hadde klart å finne et design på navigasjonen som ikke bygger så mye i høyden på toppen. Dette skyver alle varene/innholdet langt ned på siden.
Slik sett er Moelven bedre.
(Men jeg er ikke helt uhildet her siden jeg har vært med å lage http://www.moelven.no, men ikke xxl
)