I eventyret om Hans og Grete taber to børn brødkrummer i skoven for at finde vej hjem.
I dag oplever du sikkert ikke mange oplevelser med at fare vild i skoven, men jeg vil vædde på, at du har følt dig frustrerende desorienteret på dårligt designede websteder. I webstedsdesign er brødkrummenavigation en måde at vise dine brugere, hvor de befinder sig, og hvordan de er kommet dertil (i lighed med Hansels brødkrummer). Det hjælper også brugerne med at finde sider på højere niveauer hurtigere, hvis de er landet på dit websted via en søgning eller et dybt link.
- Hvad er breadcrumb-navigation?
- Breadcrumb-navigation Tips og eksempler
- Brug kun breadcrumb-navigation, hvis det giver mening i forhold til dit websteds struktur.
- Gør ikke din brødkrummenavigation for stor.
- Inkluder den fulde navigationssti i din breadcrumb-navigation.
- Gå fra højeste niveau til laveste.
- Hold dine brødkrummetitler i overensstemmelse med dine sidetitler.
- Skab kreativitet med design.
- Hold det rent og overskueligt.
- Overvej hvilken type brødkrumme-navigation, der giver mest mening for dit websted.
- Kend dit publikum.
Breadcrumb-navigation er en måde, hvorpå brugerne kan visualisere deres placering på et websted. Det er en sekundær navigationslinje, der typisk vises som vandrette tekstlinks, der er adskilt af symbolet “større end” (>). Breadcrumb-navigation forbedrer findbarheden af dine landingssider og hjælper brugerne med at nå hurtigere frem til sider på højere niveauer, hvis de oprindeligt fandt dit websted via søgning eller et dybt link.
Jakob Nielsen, medstifter af Nielsen Norman Group, har anbefalet breadcrumb-navigation siden 1995, og han gør sig stærkt til talsmand for dem: “Det eneste, som brødkrummer gør, er at gøre det lettere for brugerne at bevæge sig rundt på webstedet, forudsat at dets indhold og overordnede struktur giver mening. Det er et tilstrækkeligt bidrag for noget, der kun fylder én linje i designet.”
Hvis din virksomheds websted er flerstrenget, kan du overveje at implementere breadcrumb-navigation for at gøre dit websted lettere at navigere. Men som med alle designelementer er der en rigtig og en forkert måde at gøre det på. Her undersøger vi ni tips og eksempler for at sikre, at du skaber den mest effektive breadcrumb-navigation for dine brugere.
Breadcrumb-navigation har en lineær struktur, så du vil kun bruge den, hvis det giver mening i forhold til dit websteds hierarki. Hvis du har sider på lavere niveauer, der er tilgængelige fra forskellige landingssider, vil brugen af breadcrumb-navigation kun forvirre læsere, der bliver ved med at få adgang til de samme sider fra forskellige udgangspunkter. Hvis dit websted er relativt enkelt og kun har få sider, har du sandsynligvis ikke brug for brødkrummenavigation.
Brødkrummenavigation er et sekundært værktøj i forhold til din primære navigationslinje, så den bør ikke være for stor eller fremtrædende på siden. På DHL’s websted er deres primære navigationslinje f.eks. stor og genkendelig med kolonner som “Express”, “Parcel & eCommerce”, “Logistics” osv. Deres breadcrumb-navigation er den mindre sektion nedenunder, hvor der står “DHL Global | > Logistics | > Freight Transportation”. Du ønsker ikke, at dine brugere forveksler din breadcrumb-navigation med den primære navigationslinje.
Jeg googlede “Elon University Non-Degree Students” for at nå frem til denne landingsside, men Elon er smart nok til at inkludere den fulde navigationssti, herunder “Home” og “Admissions”. Hvis du udelader visse niveauer, vil du forvirre brugerne, og brødkrummestien vil ikke føles lige så nyttig. Selv hvis brugerne ikke begyndte på hjemmesiden, vil du gerne give dem en nem måde at udforske dit websted fra begyndelsen.
Gå fra højeste niveau til laveste.
Det er vigtigt, at din breadcrumb-navigation læses fra venstre til højre, hvor det nærmeste link til venstre er din hjemmeside, og det nærmeste link til højre er brugerens aktuelle side. En undersøgelse fra Nielsen Norman Group viste, at brugerne bruger 80 % af deres tid på at se den venstre halvdel af en side og 20 % på at se den højre halvdel, hvilket er et godt argument for et design fra venstre til højre. Desuden vil det link, der er tættest på venstre side, blive vist som begyndelsen af kæden, så du ønsker, at det skal være din side på højeste niveau.
Hold dine brødkrummetitler i overensstemmelse med dine sidetitler.
For at undgå forvirring skal du forblive konsekvent med dine side- og brødkrummetitler, især hvis du er målrettet mod bestemte søgeord i disse titler. Du vil også gerne have en klar forbindelse mellem dine breadcrumb-titler og siden. Hvis brødkrummetitlen ikke har et link, skal du gøre det tydeligt. Nestle mærker effektivt sine breadcrumb-titler, så de matcher sidens titler. “Areas of impact & commitment” lyder f.eks. på samme måde i breadcrumb-navigationen som på siden.
Nestle gør også et godt stykke arbejde med at skelne links fra ikke-links med forskellige farver – links er blå, mens ikke-links forbliver grå.
Skab kreativitet med design.
Den traditionelle breadcrumb-navigation ser således ud: Forside > Om os > Om os > Karrieremuligheder. Du behøver dog ikke at følge den traditionelle vej, hvis du mener, at et andet design kunne appellere mere til din målgruppe eller se bedre ud på dit websted. For eksempel bruger Target breadcrumb-navigation på deres produktsider (for hvem ville ikke fare vild i den virtuelle skoafdeling?), men bruger “/”-symboler og enkel sort og grå tekst. I dette tilfælde giver den subtile designvariation mening for deres websteds æstetik.
Hold det rent og overskueligt.
Din breadcrumb-navigation er blot en hjælp for brugeren og bør ideelt set ikke bemærkes, medmindre brugeren leder efter den. Derfor skal du ikke fylde din breadcrumb-navigation med unødvendig tekst.
Eionet kunne f.eks. godt undvære deres “Du er her”-tekst. Selv om teksten er beregnet til at være nyttig, fylder den meget på siden. Med det rigtige design bør en brødkrumme-navigation være tydelig nok uden en indledning.
Der er et par forskellige typer brødkrummer, du kan bruge – stedbaserede, attributbaserede og historikbaserede. Placeringsbaserede brødkrummer viser brugeren, hvor han/hun befinder sig i webstedets hierarki. Attributbaserede brødkrummer viser brugerne, hvilken kategori deres side falder ind under. Endelig viser historiebaserede brødkrummer brugerne den specifikke vej, de tog for at nå frem til den aktuelle side.
Bed Bath & Beyond bruger attributbaseret brødkrumme-navigation til at vise brugerne, hvilken kategori deres produktside hører under, så brugerne kan klikke tilbage til “Køkken” eller “Små apparater” for at gennemse lignende varer. Denne type breadcrumb-navigation er mest effektiv for Bed Bath & Beyond-kunder. Når du opretter en breadcrumb-navigation, skal du overveje, hvad der er mest nyttigt for de besøgende på dit websted.
Kend dit publikum.
Bedste praksis inden for breadcrumb-navigation opfordrer webdesignere til at placere navigationen øverst på siden – men Apple, en af de mest værdifulde virksomheder nogensinde, trodser denne logik ved at placere deres breadcrumb-navigation nederst på deres websted. I sidste ende er det afgørende, at du kender dit publikum. Apples kunder er typisk teknisk kyndige og ville sandsynligvis finde navigationen, hvis de havde brug for den. Overvej dine kunders behov, og gennemfør A/B-test, hvis du er usikker.
I sidste ende er breadcrumb-navigation et effektivt værktøj til at gøre dit websted lettere at navigere på, men du skal følge bedste designpraksis for at sikre, at du udnytter værktøjets hjælpsomhed. Du kan få yderligere UX-rådgivning i “Den ultimative guide til UX-design”.
