Free Press

I sagan Hans och Greta släpper två barn brödsmulor i skogen för att hitta hem.

Nuförtiden upplever du förmodligen inte alltför många upplevelser av att gå vilse i skogen, men jag är villig att slå vad om att du har känt dig frustrerande förvirrad på dåligt utformade webbplatser.

I webbdesign är brödsmulnavigeringen ett sätt att visa användarna var de befinner sig och hur de kom dit (i likhet med Hansels brödsmulor). Den hjälper också användarna att hitta sidor på högre nivåer snabbare om de hamnat på din webbplats via en sökning eller en djup länk.

Jakob Nielsen, medgrundare av Nielsen Norman Group, har rekommenderat breadcrumb navigation sedan 1995, och gör en stark poäng för dem: ”Allt som brödsmulor gör är att göra det lättare för användarna att röra sig på webbplatsen, förutsatt att dess innehåll och övergripande struktur är vettig. Det är ett tillräckligt bidrag för något som bara tar upp en rad i designen.”

Om ditt företags webbplats är flerskiktad kan du överväga att införa brödsmulnavigeringen för att göra din webbplats lättare att navigera. Men som alla designelement finns det ett rätt och ett fel sätt att göra det på. Här utforskar vi nio tips och exempel för att se till att du skapar den mest effektiva brödsmulnavigeringen för dina användare.

Brödsmulnavigeringstips och -exempel

Använd bara brödsmulnavigeringen om det är meningsfullt med webbplatsens struktur.

Brödsmulnavigeringen har en linjär struktur, så du vill bara använda den om det är meningsfullt med webbplatsens hierarki. Om du har sidor på lägre nivåer som är tillgängliga från olika landningssidor kommer brödsmulnavigeringen bara att förvirra läsare som fortsätter att komma åt samma sidor från olika utgångspunkter. Om din webbplats är relativt enkel, med bara några få sidor, behöver du förmodligen inte brödsmulnavigeringen.

Gör inte brödsmulnavigeringen för stor.

Brödsmulnavigeringen är ett sekundärt verktyg i förhållande till den primära navigeringsfältet, så den bör inte vara för stor eller framträdande på sidan. På DHL:s webbplats är deras primära navigeringsfält till exempel stort och välkänt, med kolumner som ”Express”, ”Paket & eCommerce”, ”Logistik” osv. Deras brödsmultronnavigering är det mindre avsnittet nedan som lyder ”DHL Global | > Logistics | > Freight Transportation”. Du vill inte att användarna ska ta fel på din breadcrumb-navigation som det primära navigeringsfältet.

Inkludera hela navigeringsvägen i din breadcrumb-navigation.

Jag googlade ”Elon University Non-Degree Students” för att komma till den här landningssidan, men Elon är smarta när det gäller att inkludera hela navigeringsvägen, inklusive ”Home” och ”Admissions”. Om du utelämnar vissa nivåer kommer du att förvirra användarna och brödsmultronvägen kommer inte att kännas lika hjälpsam. Även om användarna inte började på hemsidan vill du ge dem ett enkelt sätt att utforska din webbplats från början.

Progress från högsta nivå till lägsta.

Det är viktigt att din brödsmulnavigeringsnavigering läses från vänster till höger, där den närmaste länken till vänster är hemsidan och den närmaste länken till höger är användarens aktuella sida. Enligt en studie av Nielsen Norman Group spenderar användarna 80 % av sin tid med att titta på den vänstra halvan av en sida och 20 % med att titta på den högra halvan, vilket är ett starkt argument för design från vänster till höger. Dessutom kommer länken närmast till vänster att visas som början på kedjan, så du vill att det ska vara din sida på högsta nivå.

Håll dina brödsmultitlar i överensstämmelse med dina sidtitlar.

För att undvika förvirring vill du vara konsekvent med dina sid- och brödsmultitlar, särskilt om du riktar in dig på vissa nyckelord i dessa titlar. Du vill också tydligt koppla dina breadcrumb-titlar till sidan. Om brödsmultrontiteln inte har någon länk ska du göra det tydligt. Nestle märker effektivt sina brödsmultrontitlar så att de matchar sidans titlar. ”Areas of impact & commitment”, till exempel, läses på samma sätt i brödsmultronnavigationen som på sidan.

Nestle gör också ett bra jobb med att skilja länkar från icke-länkar med olika färger – länkarna är blå, medan icke-länkarna förblir grå.

Skapa kreativitet med designen.

Den traditionella brödsmultronnavigationen ser ut så här: Hem > Om oss > Karriär. Du behöver dock inte följa den traditionella vägen om du anser att en annan utformning skulle kunna tilltala din målgrupp mer eller se bättre ut på din webbplats. Till exempel använder Target brödsmulnavigeringen på sina produktsidor (för vem skulle inte gå vilse i den virtuella skoavdelningen?), men använder sig av ”/”-symboler och enkel svart och grå text. I det här fallet är den subtila designvariationen meningsfull för webbplatsens estetik.

Håll den ren och överskådlig.

Din brödsmulnavigeringsnavigering är helt enkelt ett hjälpmedel för användaren och bör helst inte märkas om inte användaren letar efter den. Av denna anledning vill du inte fylla din brödsmultronnavigering med onödig text.

Eionet skulle till exempel kunna klara sig utan sin ”Du är här”-text. Texten är visserligen tänkt att vara till hjälp, men den är förvirrande för sidan. Med rätt utformning bör en brödsmulninavigation vara tillräckligt märkbar utan en introduktion.

Observera vilken typ av brödsmulninavigation som är mest meningsfull för din webbplats.

Det finns några olika typer av brödsmulor som du kan använda – platsbaserad, attributbaserad och historikbaserad. Platsbaserade brödsmulor visar användaren var de befinner sig i webbplatsens hierarki. Attributbaserade brödsmulor visar användaren vilken kategori sidan tillhör. Slutligen visar historiebaserade brödsmulor användarna vilken specifik väg de tog för att komma till den aktuella sidan.

Bed Bath & Beyond använder attributbaserad brödsmulnavigeringsnavigering för att visa användarna vilken kategori deras produktsida tillhör, så att användarna kan klicka tillbaka till ”Kitchen” eller ”Small Appliances” för att titta på liknande produkter. Denna typ av breadcrumb navigation är mest effektiv för Bed Bath & Beyond-kunder. När du skapar en brödsmulnavigeringsnavigering bör du tänka på vad som är mest användbart för besökarna på din webbplats.

Känn din målgrupp.

Bästa praxis för brödsmulnavigeringsnavigering uppmanar webbdesigners att placera navigeringen högst upp på sidan – men Apple, ett av de mest värdefulla företagen genom tiderna, trotsar denna logik genom att placera sin brödsmulnavigeringsnavigering längst ned på sin webbplats. I slutändan är det viktigt att du känner din målgrupp. Apples kunder är vanligtvis tekniskt kunniga och skulle troligen hitta navigationen om de behövde den. Tänk på dina kunders behov och genomför A/B-tester om du är osäker.

I slutändan är brödsmulnavigeringen ett effektivt verktyg för att göra det lättare att navigera på din webbplats, men du vill följa de bästa designmetoderna för att se till att du utnyttjar verktygets användbarhet. Om du vill ha fler UX-råd kan du läsa ”The Ultimate Guide to UX Design” (Den ultimata guiden till UX-design).