Breadcrumb Navigation Bedste praksis og eksempler

Breadcrumb navigation er ofte overset i design og udviklingsprocessen. Nogle mennesker kan se det som unødvendigt, mens andre måske føler, at det er for stort af et besvær for hvad det er værd. Fakta af sagen er, breadcrumb navigation vil i høj grad øge brugervenligheden af ​​et websted.

Breadcrumbs giver brugerne en alternativ metode til navigation, så de kan se, hvor de står i hierarkiet på et websted og vil reducere antallet af trin, der er nødvendige for at navigere til et højere niveau inden for en hjemmeside.

Skitseret her er de forskellige typer af breadcrumb navigation, der bruges i dag, hvorfor de er vigtige, og hvordan de bedst skal implementeres online. Også inkluderet her til din reference er over 30 eksempler på, hvordan brødkrummer bliver brugt online i dag.

Husk, at mens det er sandsynligt, at breadcrumb-navigation ikke vil skabe eller ødelægge et websted, vil det give en ekstra fordel for dine brugere ved at øge den samlede brugbarhed og funktionalitet på dit websted.

Breadcrumb Typer

Sti

Banebaserede brødkrummer angiver de trin eller sti, en bruger har taget for at nå frem til den aktuelle side på et websted. Endvidere vil brugerne se links til sider, de tidligere har besøgt for at nå den aktuelle side. Ud af de tre typer af breadcrumb navigation er path-baseret breadcrumb navigation mindst populær online. Årsag er, at banebaseret breadcrumb navigation giver den samme funktionalitet til “Frem” og “Tilbage” knapper på en browser. For de fleste hjemmesider Placeringsbaseret og attributbaseret breadcrumb navigation giver bedre funktionalitet.

Beliggenhed

Placeringsbaserede brødkrummer indikerer til brugeren, hvor den aktuelle side står i hierarkiet på hjemmesiden. Denne type breadcrumb navigation er mest set på hjemmesider med mere end to niveauer af dybde eller indhold. Ved at flytte videre til en hjemmeside får brugerne links til sider eller kategorier, der fungerer som en “forælder” eller et niveau op fra den side, de aktuelt ser. For eksempel kan en bruger være på “Tale” side, dog “Hvad vi gør” side er en forælder til “Tale” side mens “Hjem” side er en forælder til “Hvad vi gør” side.

Clearleft Ltd

Egenskab

Attributbaserede brødkrummer angiver brugeren de attributter eller kategorier, der tilskrives den aktuelle side på en hjemmeside. Ofte set på e-handelswebsteder, kan produkter ikke kun falde ind under en kategori, men også under visse attributter. For eksempel kan et køretøj kategoriseres som en SUV og derefter have egenskaberne for at være farven sort og frigivet i 2010.

Cars.com

Hvorfor brug brødkrummer?

• Stor brugervenlighed

  Breadcrumbs giver en ekstra måde, hvormed brugerne nemt kan navigere på en hjemmeside. Hvis en bruger lander på en intern side på din hjemmeside fra en anden kilde, vil breadcrumbs give brugeren mulighed for at se præcis, hvor de ligger inden for sit hierarki. Brugeren får også mulighed for at flytte op til et højere niveau på hjemmesiden til enhver tid uden besvær.

• Let at Backtrack

  Primære navigationer er ikke designet til at blive fulgt baglæns, hvor brødkrummer er. Siden backtracking er ekstremt populær online giver en lille ekstra hjælp kan gå langt.

• Eliminer yderligere klik

  Breadcrumbs tillader brugere at hoppe fra et niveau af et websted til det næste uden at skulle bruge “frem” eller “baglæns” knapper på browseren. Derudover eliminerer brødkrummer behovet for, at brugerne hele tiden går til hovednavigationen.

• Viser brugere hierarki

  Den primære navigation af et websted afspejler ikke hierarkiet på hver side på webstedet. At give brugere brødkrummer vil give dem mulighed for at se hierarkiet for en side på et websted.

• Visuelt tiltalende

  Ikke kun brødkrummer giver brugerne ekstra brugervenlighed, de gør det uden at optage meget plads eller plads på siden. Brødsmuler er nemme at implementere i det visuelle design af dit website og giver en stor fordel for brugerne.

• Giver ekstra hjælp

  Det er helt muligt, at nogle brugere måske ikke forstår, hvordan en primærnavigering på hjemmesiden fungerer, og i nogle tilfælde kan brugerne ikke engang vide, hvad de leder efter. At give brugere brødkrummer vil give dem mulighed for at se den samlede udvikling og struktur på en hjemmeside, så de kan navigere hjemmesiden bedre.

• Lavere afvisningsprocenter

  Brødkrummer vil typisk give en mere detaljeret navigation end den primære navigation. Derved får brugerne flere muligheder for at navigere på en hjemmeside. At give dem mulighed for nemt at spore et par niveauer på hjemmesiden vil sænke din afvisningsprocent.

• Bygger interesse

  Når en bruger lander på en intern side af en hjemmeside odds, er de allerede på en side af interesse. Brødsmuler kan give links til yderligere sider og oplysninger, som brugeren også er interesseret i, uden at de starter fra firkantede.

Breadcrumb Best Practices

• Brug brødsmuler øverst på en side

  Den mest almindelige og instinktive placering for brødkrummer er øverst på en side. Dette giver brugerne mulighed for at finde breadcrumbs på en ukompliceret måde og gøre brug af dem i overensstemmelse hermed.

• Brug brødkrummer konsekvent

  Hvis du beslutter at bruge brødkrummer, skal du sørge for at bruge dem på hele din hjemmeside. At give brugere brødkrummer på nogle sider og ikke andre vil kun forvirre og frustrere dem. (Et primært eksempel på dette er Amazon, da de fjerner brødkrummer fra de enkelte produktsider.)

• Brødsmuler skal nedbrydes yndefuldt

  Breadcrumbs skal altid starte med hjemmesiden og nedbrydes til den aktuelle side. Dermed skal dine brødkrummer gå fra det højeste niveau til det laveste niveau et trin ad gangen.

• Styler brødkrummer passende

  Du vil have, at dine brødkrummer ses, men du vil ikke have, at de er omdrejningspunktet. Du vil også gøre det klart, at dine brødkrummer ikke er en del af indholdet til en side, kun ekstra støtte til det. Find et godt medium, hvor dine brødkrummer er mærkbare, men ikke overbærende.

• Kategoriser sider klart

  Hvis du har sider, der falder i to eller flere kategorier, kan du ikke bruge brødkrummer på din hjemmeside. At forsøge at placere en side under to eller flere kategorier vil sandsynligvis kun producere uklare breadcrumbs og puslespil brugeren. Sørg for, at dit websted har et organiseret hierarki og vises i overensstemmelse hermed gennem dine brødkrummer.

• Klart adskille hvert niveau

  Sørg for, at brugerne er i stand til at skelne forskellen mellem hver breadcrumb-niveau. Den mest almindelige separator mellem niveauer er karakteren 'større end' (>). Andre gode separatorer omfatter rigtige dobbeltvinkelsætninger (»), skråstreger (/) og pile (→). Hvis du bruger et almindeligt tekst tegn, skal du kun bruge en. (»Er mere tiltalende og effektiv end >>)

• Enkelt ud af den aktuelle side

  Brug en anden stil på det sidste punkt på en breadcrumb liste for at konstatere, at det er den aktuelle side, der ses. Du kan opnå dette ved at gøre varen dristig, ændre sin farve, eller at understrege det.

• Lav ikke den aktuelle side a Link

  Der er ikke behov for at gøre det sidste element i en breadcrumb-liste et link, fordi det er den aktuelle side, der ses. Oprettelse af et link her vil kun forvirre brugere, især når de klikker på det og ikke bliver taget til en ny side.

• Brug ikke brødsmuler som en sideoverskrift

  Brug af det sidste element i en breadcrumb liste som overskriften på en aktuel side er ineffektiv. Hvis du vælger at bruge brødkrummer gør det med tilføjelsen af ​​en sideoverskrift også.

• Brødsmuler erstatter ikke primær navigation

  Brødsmuler må kun bruges som støtte til primærnavigationen, og den skal aldrig erstattes primært. Du bør altid give brugerne en primær navigation, hvorfra de kan navigere på et websted, før de bruger breadcrumb navigation.

Store eksempler på brødkrummer

Vitra Direct

Trek Cykler

Illy

SiteInspire

Mia og Maggie

Intridea

Design af mennesker

Roxy

Blik

SitePoint

Mål

Walmart

1-800-Flowers

Bedste køb

Amazon.com

Barns & Noble

Lands End

Æble

Google

Jage

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

OMRÅDE 17

Wufoo

Girl Scouts of Middle Tennessee

The Glasgow Collective

Førstefødte

Bell Canada

Grooveshark

Devlounge

Om forfatteren - Shay Howe er en professionel web- og brugergrænseflade designer, der i dag lever i Chicago, IL. Han skriver om webdesign i sin egen blog over på lørdag og vil gerne høre fra dig på Twitter. Du er velkommen til at fortælle ham hallo!