Brødsmuler ... de bringer sammen foreninger med eventyret om Hansel og Gretel, der Hansel forlater brødkrummer for å hjelpe ham med å finne veien hjem igjen. Selv om foreningen med brødkrummer kanskje er sterkere i Grimms historier, endres det gradvis som breadcrumbs i navigasjonshjelp webdesignere skaper en bedre brukeropplevelse for besøkende.

Dette grafiske kontrollelementet tjener en veldig nyttig formål som navigasjonshjelp på et nettsted, forutsatt at det er utformet intelligent. Det kan være en gave for mindre erfarne besøkende som trenger å stole på en sti for å hjelpe dem å holde oversikt over hvor de er på kundens nettsted.

En spor av brødsmuler vil holde styr på og vise hver side som har blitt sett av besøkende, noen ganger i den rekkefølgen som ble sagt, andre ganger i forskjellige arrangementer.

Slik integrerer du brødkrummer i navigasjonen din på en meningsfull måte:

Tre hovedtyper av breadcrumb navigasjon

Det er tre hovedtyper av breadcrumbs du vanligvis møter på et gitt nettsted, med to er mer populære enn den siste.

Plassering breadcrumbs

En av de to mest populære typene du vil møte, plasserer brødkrummer fortelle brukerne hvor de er i forhold til nettstedets hierarki. Den enkle organisasjonen som orienterer brukerne på en klar måte innenfor nettstedet, gjør denne typen svært mye brukt.

Populær blant nettsteder som har mange innholdsnivåer og lag med navigering, plasserer brødkrummer brukere til å effektivt komme tilbake til tidligere, høyere nivåer av innhold med et enkelt klikk. Plasseringen er også statisk (de endres aldri), noe som gjør dem til en pålitelig måte å bidra til å omorientere brukere.

screen-shot-2016-10-10-at-2-36-17-pm

1-800 Blomster gir det klassiske eksempelet på funksjonell plassering breadcrumbs. Hver gang en shopper besøker siden Det er Min bursdags blomsteroppsummeringsside, ser han at han først måtte klikke på bursdagskategorien etter at han startet fra hjemmesiden. Selvfølgelig kan han klikke på hvert høyere nivå breadcrumb for å komme dit umiddelbart.

Egenskapen breadcrumbs

Egenskapen breadcrumbs er den andre store typen du møter. I motsetning til plassering av breadcrumbs, fungerer disse arbeidene som filtervalg fordi de ikke er statiske og stadig endrer basert på brukerens preferanser.

De vil ikke fortelle deg din plassering på nettstedet, men i stedet vise metadata om sidens innhold. Egenskapsbrødsmuler er derfor populære på e-handelsnettsteder hvor du kan tilpasse det du vil kjøpe, for eksempel på bilsider.

Som et resultat kan du ikke nødvendigvis bruke denne typen breadcrumb-tilnærming for å finne veien tilbake til sider du allerede har besøkt.

For å se hva jeg snakker om, sjekk ut Cars.com s brødsmuler. Når du søker etter biler etter merke og modell, merker du breadcrumbs nær øverst til venstre på skjermen, like under nettstedlogoen. År, merke og modell alle representerer tidligere søk på nettstedet, men de gir ikke en pålitelig sti for å se på gamle sider som du allerede har sett.

screen-shot-2016-10-10-at-2-47-29-pm

Legg merke til forskjellen mellom denne typen breadcrumb og stedet breadcrumbs, som tillater deg å se nøyaktig på sidene du nylig besøkte.

Path breadcrumbs

Path breadcrumbs er minst populære av de tre fordi helt ærlig, alt de gjør er å gjenskape hva en nettleser tilbake-knappen allerede gjør! Det hjelper ikke å forbedre UX i det hele tatt; det er ganske ganske overflødig.

Også kjent som en historisk sti, er veien brødkrummer egentlig ikke så nyttige siden de ikke gir ytterligere kontekst eller informasjon til besøkende som lander på en side som allerede er dypt inne i områdets hierarki. Et eksempel ville være en besøkende landing på en produktside fordi han fant et søkeresultat som han klikket på.

På grunn av disse UX-problemene som denne typen breadcrumb forårsaker, blir det stadig sjeldnere å finne den på nettsteder i dag.

Hvilken type er mest hensiktsmessig for hvilket nettsted?

Fordelingen av de tre hovedtyper av breadcrumbs byr på det åpenbare spørsmålet, som er mest egnet til hvilket formål?

La oss starte med den du sannsynligvis ikke burde bry deg med lenger: bane breadcrumbs. I det minste hjelper dette ikke UX; Det verste fallet er at brukerne faktisk blir forvirret av banebrytende smørbrød, siden de ikke viser det riktige hierarkiet av forskjellige nivåer på nettstedet.

Nå som vi har det ute av veien, la oss fokusere på bare plasseringen og attributtene breadcrumbs.

Plassering av breadcrumbs er mer hensiktsmessig for større områder som har svært dyp og innholdsnivå. Et utmerket eksempel på dette er eBay, som er en stor butikk på grunn av alle elementene som er til salgs eller auksjoner. Derfor er plassering av brødkrummer perfekt for denne innholdsdybden, da besøkende tydeligvis kan bruke den ekstra orienteringen.

screen-shot-2016-10-10-at-7-53-49-pm

La oss nå gjøre oppmerksom på å tildele brødkrummer.

Som det fremgår av eksemplet ovenfor med Cars.com, vil eCommerce-nettsteder som tilbyr kundene mange tilpassbare alternativer, ha stor nytte av å ha denne typen navigasjonshjelp. Nettsteder med ulike tilpasningsalternativer kan være overveldende for kunder. Det er derfor å gi dem disse filtene, gir mer mening enn stedet brødkrummer, siden kunder vil ønske å holde oversikt over de ulike endringene de har gjort i søkeresultatene og ordrene.

Beste praksis for brødsmuler

Generelt kan du ikke gå galt når du følger disse tipsene når du designer breadcrumb-navigasjon for kundens nettsteder.

  • Sørg for at det ikke finnes dupliserte elementer i sporet av breadcrumbs (les: sider som faller inn i flere kategorier eller innholdsnivåer), siden det faktisk kan forvirre brukere.
  • Bruk større end-tegn (>) for å bryte opp koblingene i brødsmulene, da dette er hva brukerne allerede forventer fra mange års kjennskap og konvensjoner.
  • Bruk søkeord som du faktisk vil rangere for i SEO når du bestemmer deg for navnene på dine forskjellige kategorier i dine brødkrummer, da dette hjelper SEO.

Breadcrumbs: god idé, men ikke alltid brukt riktig

Som med mange konsepter i design og UX, blir en god ide som kan være svært nyttig for brukerne, et problem hvis det ikke er implementert på riktig måte. Det er dette denne korte veiledningen er for å utstyre deg med kunnskapen for å gi deg mulighet til å lage brødkrummer for å optimalisere UX i stedet for å ikke påvirke eller ødelegge det.

Selv om det ikke er en absolutt nødvendighet for alle typer nettsteder, kan brødkrummer gi brukerne et ekstra lag med navigasjonshjelp når de enten står overfor mange lag av innhold eller mange alternativer de ønsker å filtrere. Uansett, bruken av bruksmuligheter kommer til slutt ned til hvordan designere implementerer dem på kundens nettsteder.

Ved å sørge for at du forstår formålet bak hver type breadcrumb-navigasjon, hjelper du deg med å gjøre det riktige valget for typen nettsted du designer. Og når du velger intelligent, vil du ha fornøyde brukere, glade kunder og gode henvisninger, så vær ekstra forsiktig neste gang du har å gjøre med breadcrumbs.