Tror du att breadcrumbs inte är bra för användarupplevelsen? Tänk om!

Webbdesigners och experter på användarupplevelser har länge debatterat breadcrumbs-länkar. Finns det något som kan göra att de hittar en gemensam väg där båda blir glada?

Vad är breadcrumbs?

Breadcrumbs (eller länkstigar) är ett sekundärt navigeringsschema som visar var användaren befinner sig på en webbplats eller webbapplikation. Termen har hämtats från sagan om Hans och Greta, där de strör brödsmulor längs stigen så att de kan hitta hem igen. Precis som i sagan hjälper breadcrumbs användare att hitta tillbaka till sin ursprungliga landningspunkt.

Är breadcrumbs bra eller dåligt för användarvänligheten?

”Länkstigar är inte bra för användarvänligheten!” påstår personer som jobbar med webbdesign och webbutveckling, som dessutom intar en väldigt protektionistisk roll när det kommer till ämnet. Många vägrar att ändra åsikt och lyssna på motargumenten.

Jag kan hålla med om att situationen är lite komplicerad, eftersom 1; webbutvecklare och designers inte ens vill diskutera ämnet och 2; de kanske har en helt annan uppfattning kring vad användarupplevelse är än vad jag har.

Jag föredrar Peter Morvilles teori om användarupplevelser – The user experience honeycomb. Den bortser inte från det viktiga i att kunna hitta och navigera på en sajt. Människor kan inte använda det som de inte kan hitta. Så enkelt är det. De delar av ett gränssnitt som inte bjuder in till konsekvent klickande har en negativ effekt på användarnas förtroende.

Men på något sätt har bilden av användarupplevelse förvrängts och misstolkats. Det har gått så långt att det finns delar som helt enkelt exkluderas, trots att de är väldigt viktiga för användarna. Det för mig osökt in på ämnet länkstigar, eller breadcrumbs-länkar.

Experter på användarvänlighet och användarupplevelse har i många år förespråkat användningen av dem. Det som följer i denna artikel är mitt bidrag till den debatten.

Tre typer av breadcrumbs

Breadcrumbs eller navigering genom länkstigar är en rad olika kontextuella länkar som fungerar som navigeringshjälp på webbsidor. Det finns tre olika typer av breadcrumbs.

Breadcrumbs baserade på plats

Dessa breadcrumbs är en ordagrann representation av webbsidans struktur. De hjälper en besökare att förstå och navigera på din webbsida. En länkstig som är baserad på plats ska därför börja med en länk till webbsidans startsida och sluta med den sida som man i nuläget befinner sig på. Den sista delen i den länkstigen ska inte vara klickbar.

Fördelarna med att använda en platsbaserad breadcrumb är att den uppmuntrar besökarna att fortsätta surfa på sidan, vilket leder till en minskning av studsande trafik. Dessa platsbaserade länkstigar kan med fördel användas inom exempelvis e-handeln. Användaren kan via sökresultatet landa på en produktsida tillhörande något som inte är exakt det hen letar efter. Användaren kanske fortfarande vill titta och jämföra liknande produkter med varandra. Med hjälp av dessa länkstigar kan användaren ta sig uppåt i webbplatsens hierarki för att visa fler produktalternativ.

På så sätt är denna typ av länkstigar bra för användarvänlighet, spårbarhet och åtkomst. Användarnas upplevelse förbättras och därmed sajtens trovärdighet.

Breadcrumbs baserade på vägval

Denna typ av breadcrumbs talar om för användaren vilka steg de har tagit för att nå en viss sida. Det här är alltså länkstigar som skapas dynamiskt, helt och hållet baserat på användarens aktioner. Som de flesta redan vet så tycker inte experter på användarupplevelse om dessa länkstigar och avråder från dem på grund av en rad olika anledningar:

1. De duplicerar enbart funktionaliteten som tillbaka-knappen har i webbläsaren.
2. De kan förvirra användare som surfar till fel sektion av en webbsida.
3. Denna typ av länkstig hjälper inte användare som direkt har hamnat djupt ner i en webbplats hierarki via Google, till exempel en produktsida.
4. De kan göra så att det blir ett duplicerat resultat i sökmotorerna. Genom att ha detta duplicerade innehåll i sökmotorerna så kommer färre sidor från din webbsida att kunna rankas.

Nedan kan du se ett exempel på breadcrumbs baserat på vägval. Den visar tydligt hur användaren är vilse inne på webbsidan (notera att detta enbart är ett visuellt exempel):

Om oss > Press & Media > Nyheter > Anställa > A-Z Index > Forskningscenter > Forskning > Hälsa

Breadcrumbs baserade på attribut

Den här typen av breadcrumbs är vanliga inom e-handel. Här handlar det om klassificeringar, där länkstigar visar attributen av en viss produkt på en webbsida. Enligt Software Usability Research Laboratory på Wichita State University så är dessa länkstigar metabeskrivningar, där det finns många olika stigar att ta för att hitta rätt som besökare.

Dessa länkstigar kan också orsaka problem då det finns en risk att det skapar duplicerad information, vilket är något som förvirrar sökmotorer. För att du ska undvika dessa problem så rekommenderar jag att du tar hjälp av någon som är kunnig inom SEO och kan ge dig olika alternativa lösningar.

För att underlätta för användarna är det fördelaktigt att lägga stor vikt vid formateringen av den här typen av breadcrumbs. Det är viktigt att det tydligt framkommer vad som är klickbart och inte. Den platsbaserade delen av länkstigen kan exempelvis ha olika färger beroende på om användaren besökt sidan eller inte. De individuella elementen kan i sin tur separeras med hjälp av symboler så som >.

Den del av länkstigen som är baserad på attribut behöver nödvändigtvis inte vara klickbar, men kan tas bort från sidan genom att trycka på X.

Fördelar med länkstigar

Enligt mitt eget tycke så är det de platsbaserade länkstigarna som ska användas, alternativt i kombination med attributbaserade breadcrumbs som i exemplet ovan. Jag, som en person som värnar om användarens upplevelse, tycker att det är den här navigationen som bör implementeras. Här är några anledningar till varför:

1. Länkstigar stödjer navigation på webbplatsen

Den huvudsakliga anledningen till webbplatsens navigation är att hjälpa användaren att slutföra en uppgift. Med platsbaserade länkstigar får användaren en rak väg att vandra och du kan därmed erbjuda användaren ett lättare avslut. Det blir också lättare för användaren att ta tydliga steg i webbsidans hierarki, vilket i sin tur gör att användaren inte behöver gå lika många steg för att ta sig till målet.

2. Länkstigar stödjer användarvänlighet på webbplatsen

Enligt Shari Thurow finns det två fundamentala aspekter att ta hänsyn till när det gäller användarvänligheten på en webbplats:

• Resultat (avslut): Kan användare lyckas med det de vill på din webbplats?
• Effektivitet (snabbt): Hur snabbt kan användare lyckas med det?

Genom att underlätta för användare att komma till avslut, så gör dessa platsbaserade breadcrumbs att användarvänligheten ökar.

Några webbdesigners och utvecklare använder sig av klickstigar och data som enligt dem visar att användare inte använder sig av länkstigar. Det som dock ska sägas är att bara för att en användare inte klickar på en del i länkstigen så behöver inte det betyda att ingen använder sig av dem.

Det utförs många tester på användarvänlighet, där webbsidors strukturer och system bedöms utifrån effektivitet. Det är dock viktigt att förstå att alla inte hittar en webbsida via startsidan, utan kommer in via en undersida. Faktum är att ju bättre SEO en undersida har, desto mer trafik går direkt till undersidan och mindre till den faktiska startsidan (om det nu inte är en direkt fråga om den sidan).

Under dessa tester tillfrågas ofta deltagarna vilken sida eller vilket innehåll som de visar i sin webbläsare. I de flesta fall identifierar dessa testpersoner huvudsidan och de platsbaserade länkstigarna. Via dem kan de beskriva var de befinner sig. Även om ögonrörelseforskning visar att användarna kanske inte fokuserar på länkstigarna som ett navigationsstöd, så ses dessa stigar oftast i periferin, speciellt om de finns i närheten av huvudsidans sidhuvud.

Kom alltid ihåg att en siffra utan kontext enbart är en siffra. Det finns bättre möjligheter att sätta analytisk data i rätt perspektiv genom användartester och studier. Det kan absolut vara så att innehåll är kung, men då är kontexten definitivt drottningen.

3. Länkstigar stödjer enkelheten i att hitta innehåll

Platsbaserade länkstigar uppmuntrar inte enbart till vidare sökning på webbplatsen – de förenklar också för användarna vid användning av sökmotorer. Sedan en tid tillbaka har sökmotorer visat dessa breadcrumbs i sökresultaten. Det har utökat antalet alternativ för de som använder sökmotorerna. Med andra ord hjälper dessa länkstigar både sökare och sökmotorer att förstå din webbsidas struktur.

För mer noggranna detaljer kring hur dessa länkstigar visas i söklistorna kolla in Rich snippets – Breadcrumbs.

4. Länkstigar möjliggör informationsspårning

När det gäller spårning av information så består den av text och/eller visuell signaler som:

• Ger tydlig navigation (vart kan jag ta mig?)
• Möjliggör snabb orientering (var är jag?)
• Kommunicerar värde på innehåll (ska jag klicka på den här länken?)

Om navigationen är tydlig och konsekvent kommer länkstigar som baserats på plats att ge användarna en kraftfull möjlighet till informationsspårning. Det gör att de kan hitta mer innehåll på din webbplats innan de har besökt den.

Bilden ovan visar på många sådana informationsspårningar i sökresultatets lista. Det här är därmed något som går att se innan din webbsida har blivit besökt. Vad händer då efter att de har kommit in på din sajt? Oavsett om de landar på en sida som passar deras syfte eller inte så kommer den platsbaserade länkstigen att erbjuda dem vägar att ta för att ta sig högre upp i hierarkin för att hitta fler alternativ. Det är dessutom möjligt för webdesigners och utvecklare att matcha hyperlänkens text till sidans rubrik, vilket ger extra spårningsmöjligheter.

Är du intresserad av mer information om informationsspårning? Läs om Peter Pirolli and information foraging theory.

5. Länkstigar kommunicerar innehållsbeskrivning

Som jag sa innan så ska platsbaserade länkstigar inledas med en länk till huvudsidan på din webbplats och sluta med den man befinner sig på. Dessa steg i länkstigen bör bli mer och mer specifika ju längre ned i hierarkin man kommer.

Alla ord i webbplatsens hierarki, inklusive rubriker, kommunicerar till både användare och sökmotorer vad din webbplats handlar om och vilket innehåll som finns där. Det betyder att länkstigar ger dig en extra möjlighet att kommunicera både beskrivning och kontext till människor såväl som sökmotorer. Sökmotorer använder bland annat länkstigens text för att bedöma hur relevant ditt innehåll är.

Vill du veta mer om beskrivningar? Läs Keywords, Aboutness & SEO.

Göra och inte göra med breadcrumbs

Detta ska du göra:

• Börja breadcrumbs med en länk till startsidan. Avsluta länkstigen med den aktuella sidan.
• Använd en enkel skiljare mellan de olika lagren i hierarkin. /, > eller liknande är bra och förväntas av formatet.
• Se till att hela länkstigen består av delar som ser ut som länkar och klickbara. Se också till att dessa breadcrumbs ser klickbara ut i den mobilanpassade versionen av webbplatsen.
• Länkstigar bör placeras ovan webbplatsens h1-format. Det uppmuntrar till användning.

Detta ska du inte göra:

• Använd inte länkstigstext för din webbplats HTML-titeltag. Bra titlar ska skrivas av människor inte av mjukvara.
• Använd inte breadcrumbs-strukturen till din URL-struktur. URL:er ska vara enkla att skriva och komma ihåg.
• Gör inte texten på länkstigen så liten att användare har svårt att läsa den. Det är omkring 30 procent som tittar på länkstigen, och om de tycker att ditt innehåll är för svårt att läsa så kommer de heller inte titta på övrigt innehåll på sidan.
• Se också till att länkstigen inte dominerar sidan. Den ska inte utformas på ett sätt som distraherar användaren från att läsa exempelvis rubriken på innehållet eller navigera globalt och lokalt.
• Använd inte breadcrumbs som inte stödjer global och lokal navigering. Det är inte meningen att länkstigen ska vara det primära sättet att navigera på en webbplats, utan de ska fungera som ett komplement till den övriga navigeringen.