De globale navigationselementer er den røde tråd i brugeroplevelsen af dit website. Specielt på store informationswebsites er det vigtigt at brugerne kan navigere rundt og finde det de søger. Men hvordan sikrer du at navigationselementerne reelt hjælper brugeren? Med 5 enkle principper for brugervenligt navigationsdesign kommer du nærmere den gode brugeroplevelse.
Globalt navigationsdesign og brugervenlighed
I den virkelige verden kender vi alle fornemmelsen af forvirring og irritation, når navigationen udfordrer: kortet viser forkerte vejnavne, butikkerne har flyttet sig siden sidst og vejnavne og numre står ikke på husene. På mange måder er det præcis de samme udfordringer vi som brugere af et informationswebsite står overfor: hvis ikke navigationsdesignet er i orden, bliver vi forvirrede og usikre, vi laver fejl, farer vild og bliver irriterede. Vi bliver tvunget til at skifte fokus fra at bruge websitet til noget, til at forstå hvordan websitet fungerer, og resultatet er en forringet brugeroplevelse.
Vil du gerne forbedre brugeroplevelsen på et informationswebsite, kan navigationsdesignet derfor være et centralt element. Særligt de globale navigationselementer, såsom globalmenuen (den overordnede struktur-baserede menu der vises på alle sider af websitet) og utility-menuen (den lille "værktøjskasse" der ofte er placeret øverst på websitet), er vigtige dele af navigationen. Denne artikel handler om hvordan du ved hjælp af 5 enkle principper kan lave gode globale navigationselementer på store informationswebsites.
5 principper der gør dit navigationsdesign brugervenligt
Baggrunden for de fem principper er et speciale på IT-Universitetet om brugervenligheden af global- og utility-menuer på universitetswebsites. Specialet omfatter blandt andet brugertests af fire danske uddannelsesinstitutioners websites og en gennemgang af nyere forskningsresultater indenfor webnavigation.
De fem principper
- Imødekom brugernes forventninger
- Vælg funktionalitet fremfor fancy design
- Gør menuerne brede frem for dybe
- Gør informationsarkitekturen logisk og tydelig
- Lav forståelige navne der adskiller sig klart fra hinanden
1. Imødekom brugernes forventninger
I den virkelige verden har vi en række forventninger til hvordan tingene fungerer. Sådan er det også med websites: når et element er placeret eller udformet anderledes end det plejer, bliver vi forvirrede.
Det er helt centralt at imødekomme brugernes forventninger, når det gælder udformning og placering af de globale navigationselementer. Imødekommes brugernes forventninger ikke, resulterer det meget hurtigt i irritation og forvirring.
Når det gælder navigationselementer på store informationswebsites, viser undersøgelsen at selv unge og habile webbrugere, er overraskende konservative. Årsagen til dette er at navigationselementer hovedsageligt bliver set som værktøj der skal fungere, helt uden brugeren behøver at tænke over det.
Men hvad er brugernes forventninger? I udgangspunktet er der en række konventioner indenfor webdesign som flere undersøgelser peger på også stemmer overens med mange brugeres forventninger. F.eks. at søgefeltet bør være øverst til højre. Hvis du gerne vil vide om netop dit website imødekommer brugernes forventninger, er den bedste metode dog at brugerteste websitet. F.eks. kan det hurtigt afdækkes om et menupunkts navn giver anledning til misforståelser, eller om en menu er placeret et sted brugeren slet ikke kigger.
Husk!
- Imødekom brugernes forventninger, ellers bliver de irriterede og forvirrede og kan ikke bruge websitet ordentligt.
- Kend din målgruppe og deres behov - hvordan kan du ellers vide om du imødekommer dem?
- Eksperimentér ikke meget med form, placering, navngivning og indhold - navigationselementer skal ikke udfordre, men fungere: selv unge brugere er meget konservative, når det gælder navigationselementer.
2. Vælg funktionalitet fremfor fancy design
Spændende designeffekter, fonte, ikoner og billeder er ikke altid en fordel i navigationsdesign: ofte forstyrrer det navigationsprocessen.
Lækkert design bliver i højere og højere grad set som en vigtig del af brugeroplevelsen. Navigationsdesign er ingen undtagelse, men det kan påvirke brugeroplevelsen negativt, hvis designelementerne forstyrrer eller forvirrer i navigationsprocessen. Lækkert design i sammenhæng med navigation, er dermed ikke det samme som "fede effekter", men snarere skabelsen af et tydeligt hierarki og klarhed over hvad der hører sammen. Undersøgelsen viser blandt andet at design der ikke understøtter forståelsen af menupunkternes relation, forringer navigationsprocessen markant. Det kan f.eks. være når menupunkter der ikke er relateret, står alt for tæt, eller når undermenupunkter er for små og placeret ulogisk for brugeren. Effekter uden relation til navigationsprocessen, f.eks. irrelevante billeder eller elementer der bevæger sig, er også meget forstyrrende for de fleste brugere.
Husk!
- Brugere er konservative: navigation skal virke, og er det tilmed pænt, er det alene en bonus.
- Designelementer og -effekter (billeder, grafikelementer, fade-effekter) der ikke direkte understøtter navigationsprocessen, bør helt undgås.
- Følg gængse designprincipper (chunking, afstande, størrelser, forskellighed, lighed osv.), for at brugeren hurtigt kan skabe overblik og komme videre i navigationsprocessen.
3. Gør menuerne brede frem for dybe
Når mange af websitets emner er synligt tilgængeligt fra start, bliver det lettere for brugerne at finde det de søger.
En ?bred" menu har mange menupunkter på hvert niveau og dermed få niveauer, og en ?dyb" menu har få menupunkter på hvert niveau, men mange niveauer. Forskningen peger på at brugere kan overskue overraskende mange menupunkter på én gang, hvis de er sat overskueligt op, og dermed at de brede menuer ofte performer bedre. Brugeren kan simpelthen bedre danne sig et overblik over hvilke muligheder der er, og begår færre fejl i form af at trykke på et forkert menupunkt. Det er altså bedre at have 9 overordnede menupunkter end 5, hvis det resulterer i færre niveauer og mere tydelige kategorier.
Menuer hvor de underliggende menupunkter (links) fremgår med det samme, evt. ved hjælp af dropdown, giver ligesom den brede menu, også brugeren bedre vilkår for at vælge det rigtige menupunkt. En menu hvor der skal klikkes før undermenupunkterne kan ses, gør det simpelthen sværere for brugeren at vide om menupunktet reelt indeholder det han/hun forestiller sig, og der begås dermed flere fejl. En bred menu med udfoldede underniveauer eller drop-down, er således en bedre løsning end en dyb menu hvor hvert niveau skal klikkes frem.
Husk!
- Brugere kan (når design og struktur er god) overskue overraskende mange menupunkter på én gang.
- Undgå at lave unødigt mange niveauer - hver gang en bruger skal igennem et niveau, er der risiko for at brugeren vælger forkert.
- Gør linkene synlige (skjul dem ikke så de skal klikkes frem), så brugeren straks kan overskue hvad der er af muligheder - til gobalmenuer er en klassisk drop-down-funktion f.eks. en rigtig god løsning.
4. Gør informationsarkitekturen logisk og tydelig
Når emnerne er struktureret efter afsenderens egen logik, bliver det svært for brugerne at navigere.
Navigationselementerne præsenterer websitets indhold og struktur, så hvis ikke den del af websitet er gennemtænkt og brugerorienteret, vil nok så gode navigationselementer ikke kunne redde den samlede brugeroplevelse.
En fejl der ofte begås er at inddelingen af indholdet følger organisationens indre logik og ikke brugernes. Derudover er mange informationswebsites også kendetegnet ved at de vokser løbende, og at nye ændringer ikke indtænkes ordentligt i den oprindelige struktur.
Jævnfør princippet om at gøre menuerne brede frem for dybe, er det også vigtigt at gøre sig overvejelser om hvor mange kategorier indholdet skal inddeles i. I et forsøg på at lave så få menupunkter som muligt på øverste niveau, ses det ofte at kategorierne minder mere om rodekasser end om klart adskilte områder. Hvis det er svært at finde på et navn til et menupunkt, kan det tyde på at indholdet er for varieret, og det kan blive svært for brugerne at afkode hvad de kan finde der.
Husk!
- Godt navigationsdesign er kendetegnet ved en logisk og klar struktur på et website.
- Lav hellere flere meningsfulde kategorier end få rodekasser - et lavt antal menupunkter er ikke en kvalitet i sig selv!
- Tænk i indhold og emner (hvad søger brugeren?) - ikke organisation (hvem har ansvar for siderne?).
- Inddrag brugerne, f.eks. ved at lave kortsortering: hvad forventer brugerne hører sammen?
5. Vælg forståelige navne der adskiller sig klart fra hinanden
Når menupunkternes navne ikke adskiller sig ordentligt fra hinanden, eller bare ikke giver mening for brugeren, forringes navigationsprocessen.
I tæt relation med principperne om logisk og klar informationsarkitektur og brede menuer, er labelling (hvad menupunkterne kaldes) også et centralt og ofte overset emne. God labelling kræver i høj grad at informationsarkitekturen er logisk - hvis der laves 'rodekasser' kan navngivningen ikke fungere. Men selv med en god struktur, kan navngivningen være en udfordring.
Det ses somme tider at navngivningen bruges til at signalere bestemte værdier fra afsenderen, f.eks. når et menupunkt kaldes noget ud fra hvad emnet hedder i en intern strategi. Ønsket er at vise omverdenen at strategien lever og er integreret i organisationens arbejde, men det er brugerne som oftest ligeglade med!
Menupunkterne skal være letforståelige og klart adskille sig fra hinanden, så brugeren hurtigt kan danne sig et overblik over hvad websitet indeholder, og hvor de finder det de søger.
Husk!
- En god struktur og et gennemtænkt navigationsdesign fungerer først når menupunkterne også hedder noget brugerne forstår.
- Navngivning af menupunkterne hænger meget sammen med informationsarkitekturen - jo mere indholdet i et menupunkt minder om en rodekasse, jo mere uklart bliver menupunktets navn.
- Undersøg hvad brugerne kalder emnerne og brug ikke interne betegnelser - menupunkterne er brugernes værktøj, ikke afsenderens måde at profilere bestemte emner på.
- Kald menupunkterne noget der klart adskiller sig fra hinanden, så det er tydeligt at et bestemt emne ikke kan ligge i to forskellige kategorier.
Baggrund: et speciale om webnavigation på universitetswebsites
Baggrunden for de 5 principper er et speciale om webnavigation fra IT-Universitetet, marts 2013. Specialet blev til idet Københavns Universitet stod overfor at udvikle et nyt globalt navigationsområde til deres domæne, og manglede konkret viden om hvilke løsninger der fungerer bedst for brugerne. Den øvrige forskning indenfor webnavigationselementer viste sig ret begrænset, særligt indenfor horisontale globalmenuer og store komplekse informationswebsites. Ydermere manglede der også viden om brugernes præferencer, da fokus i høj grad tidligere har været på performance-metrikker i form af tid pr. opgave, fejlrater, lostness og lignende. Der var altså et aktuelt behov for at undersøge hvordan forskellige typer af global- og utility-menuer opleves af brugerne, og hvordan deres placering og udformning fungerer i praksis.
Specialet består således af en gennemgang af relevante forskningsresultater indenfor webnavigation, en forundersøgelse af hvilke menuløsninger 27 nordiske, engelske og amerikanske universiteter anvender, samt et eksperiment hvor 30 universitetsstuderende tester fire danske uddannelsesinstitutioners websites. De fire uddannelsesinstitutioner er Aarhus Universitet, Copenhagen Business School, Professionshøjskolen Metropol og Syddansk Universitet. I eksperimentet løser 30 studerende en række opgaver på hvert website, som kun kan løses ved at anvende de globale navigationselementer. De indsamlede data er tid pr. opgave, lostness, observationer, testdeltagernes vurderinger samt udtalelser undervejs i testen. Data behandles dermed både i en kvalitativ og en kvantitativ analyse for at sikre et bredt og nuanceret indblik i problemstillingen.
Specialet er udført af Kristine Vestergaard Christoffersen og Signe Johannessen Lehrmann i samarbejde med kommunikationsafdelingen på Københavns Universitet, og med Anker Helms Jørgensen som vejleder.
Læs mere om specialet ?Hvad gør globale navigationselementer brugervenlige? En undersøgelse af global- og utility-menuer i praksis' .