Grupp 4 – Campus
Vad är det?
Breadcrumbs betyder brödsmulor på svenska och är precis som det låter – en typ av vägledning för att användaren ska kunna lokalisera sig på hemsidan och vet vad som är nästa steg eller vad föregående har varit (Gube, 2009). Namnet “breadcrumbs” härstammar från den tyska folksagan om Hans och Greta eftersom att dem lade brödsmulor i sina fotspår för att sedan kunna hitta tillbaka samma väg som de kom.
Breadcrumbs ger användaren en känsla av kontroll och det gör att användaren kan förstå var hen befinner sig på hemsidan. Det gör att användaren kan förstå navigationen och detta är något som ger ökad förståelse och genererar därför till en bättre användarupplevelse. Breadcrumbs är ofta klickbara länkar placerade horisontellt på hemsidan (oftast till vänster) som gör att användaren kan lokalisera sig genom att klicka på dessa länkarna för att gå tillbaka.
När används det?
Breadcrumbs används fördelaktigt när en hemsida består av flera typer av meny-nivåer, hierarkisk ordning, eller ger användaren många olika alternativ. Funktionen förenklar för användaren att navigera sig korrekt på webbplatsen samt blir tilldelad en större kontroll över vart man befinner sig på webbplatsen. Breadcrumbs kan även försvåra användandet för användaren, detta sker då man har Breadcrumbs på webbplatser som inte innefattas av ett stort menysystem. Breadcrumbs är i detta fall överflödig och blir enbart ytterligare information att ta in för användaren. Ett annat exempel där Breadcrumbs försvårar upplevelsen är vid användning av en mindre plattform såsom en mobiltelefon, i detta fall tar Breadcrumbs:en upp för stor plats då skärmen rymmer mindre information och resulterar då i att det blir ett irritationsmoment för användaren.
Det är viktigt att tänka på:
- Breadcrumbs bör inte vara synliga när användaren befinner sig i toppen av hemsidans hierarki, detta kan skapa förvirring.
- Breadcrumbs kan förstärkas med olika varianter på texten, exempelvis att den sidan användaren befinner sig på är markerad med fetstil text och föregående i kursiv.
- Olika färger och symboler kan användas för att förstärka förståelsen. Symboler som “/” eller “>” förkommer ofta och är en bra typ av förstärkning. Färger är även något som underlättar för användaren.
- Breadcrumbs ska även fokusera på var användaren ÄR, som HUR användaren kom dit. – INTE var användaren KAN befinna sig näst.
Att anpassa breadcrumbs till olika skärmstorlekar kan göras genom att lägga breadcrumbs:en vertikalt istället för horisontellt, samt ändra rubrikernas storlek för att inte störa användarens vy.
Hur används det?
En sida med breadcrumbs används främst när sidor har mycket innehåll, d.v.s mycket länkar, sökningar, filtering o.s.v. Då underlättar det för användaren att den stegvis ska kunna ta sig tillbaka, antingen ett eller flera steg via breadcrumbs.
Det funkar så att när du navigerar dig genom menyn så visar breadcrumbs det antal steg du har tagit. Då kan du se hur du har rört dig på hemsidan samt att du kan ta dig tillbaka så många steg som du önskar (Tidwell 2010). Breadcrumbs är till för att visa vägen du har tagit samt hjälpa dig att kunna ta dig tillbaka så långt som du önskar. Breadcrumbs är ett sätt att visa hierarkin, det visas oftast med symboler och pilar så som; >. Detta underlättar för användaren att förstå vilken ordning det ligger i.
Bra exempel
Migrationsverket.se har ett bra grundläggande exempel på vad Breadcrumbs är. Inom den röda rektangeln kan man se tre sidor som användaren har navigerat sig igenom. Det som står först “Privatpersoner” är de första menyalternativet användaren klickat på, därefter andra menyvalen “Besöka Sverige” och slutligen den aktiva sidan “Turistbesök” där den är markerad i en annan färg för att tydliggöra för användaren vart den befinner sig.
Lomma Kommuns hemsida är även ett bra exempel på en hemsida med bra och tydliga bread crumbs. Lika så som med migrationsverket kan användaren enkelt se var hen befinner sig på sida samt föregående steg. När användaren går in på “Omsorg och hjälp”, och sedan går till “trygg och säker” och väljer “Räddningstjänst”. Användaren kan enkelt se med hjälp av pilar och fetstilt text föregående länk, samt markering av olika färger beroende av underval.
Dåliga exempel
Visitlondon.com är ett bra exempel på en dålig webbsida där breadcrumbs:en stjälper mer än vad dem hjälper användaren. Hemsidans globala meny ska fungera oavsett var användaren befinner sig och för att den ska göra detta används alltså breadcrumbs. Visitlondon.com ger användaren en vägledning av information genom breadcrumbs på sidorna “Things to do”, “Accommodation” och “Traveller information”. Se bild nedan.
Men om användaren sedan går till en av kategorierna i “Tickets and offers”, försvinner breadcrumbs:en. I “Tickets and offer” fungerar inte breadcrumbs:en som det är tänkt som i de andra länkarna. Om användaren klickar på“Tickets and offers” och sedan går till “Warner Bros, Harry potter” finns det breadcrumbs utsatta men dessa går inte att klicka på det är inte heller “rätt väg” som visas. Användaren kan inte gå tillbaka till huvudmenyn som visas på startsidan, utan här visas en helt ny layout av sidan.
Ett annat problem är när användaren går till “Things to do”. Breadcrumbsen fungerar men har inte samma namn som rubrikerna. Se bild nedan när användaren befinner sig på “Things to do”
När användaren sedan gå in på “Day trips” tillkommer då breadcrumb:en “Sightseeing”.
Detta är något förvirrande. För att förtydliga var användaren är skulle dessutom färgerna på texten bytas ut så att där du befinner dig är rödmarkerat och grått är det användare redan har passerat.
Ett annat problem är att hemsidans “hemknapp” (symbolen med huset) inte fungerar på alla sidor. Den fungerar på kategorierna “Things to do”, “Accommodation” och “traveller information” – men inte på “tickets and offers”. Om användare trycker på “hemknappen” när hen befinner sig i denna kategori, kommer hen till en ny sida och inte tillbaka till hemsidans ingångssida. Detta är något som är både frustrerande och göra så att sidan känns oseriös.
Hemsidans länkning: https://www.visitlondon.com
Ett annat exempel på den dålig sida är Linneuniversitetes sida
Lnu.se är en hemsida som tillhör Linneuniversitet i Kalmar och Växjö. Hemsidan innehåller mycket information med mycket länkar som användaren kan navigera sig runt på. Man kan bland annat kolla upp kurser och program, samt utlandsstudier. Fastän sidan innehåller mycket information och mycket länkar använder sig dem inte av breadcrumbs. Detta gör det problematiskt för användaren att förstå vilken väg den har tagit inne på hemsidan, samt att kunna gå tillbaka ett steg eller flera.
Ett exempel på detta var när vi klickade på Utbildning + Master och magisterprogram. Då syns det ingen breadcrumbs som skulle kunna underlätta för användaren att förstå vilken väg den har tagit för att ha kommit till denna sida, samt att det inte kan ta sig tillbaka något steg. Det blir förvirrande för användaren att förstå hur den rört sig på sidan samt i vilken hierarkisk ordning det är meningen att sidan ska ha.
Vi testade igen med att klicka på “möt linneuniversitet” sedan “organisation” och tillsist “universitetsstyrelsen”. Återigen är detta många steg som sidan tar utan att visa en tydlighet med hjälp av breadcrumbs, på hur du har gjort och att du som användare kan ta dig tillbaka. Det dem har valt att göra är istället att visa i sidomenyn med hjälp av vit och grå färg samt + och – tecken för att visa vilket hierarkisk ordning det ligger i. Dock anser vi att detta är ganska otydligt då det är svårt som användare att ta sig stegvis tillbaka samt att det är lätt att missförstå hur dem menar med detta upplägg. Att använda sig av breadcrumbs vore relevant för denna sida.
Eget exempel
I axure programmet gjorde vi en egen hemsida där vi använder oss av breadcrumbs.
Källor och länktips
Designing Interfaces av Jenifer Tidwell (senaste upplagan).
– EXEMPEL FRÅN ANDRA GRUPPER –
Grupp 1 campus
Dåligt exempel: weswim.se
På weswim.se är det so far so good med hjälpande breadcrumbs. Problemen börjar när vi klickar oss in på en produkt. Då ändrar sig menyn och blir annorlunda, vilket är väldigt vanligt så länge det är hjälpsamt. I detta fall skapar det mer förvirring på grund av att när vi väl vill klicka oss tillbaka så hamnar vi inte på den plats med produkter som vi var på innan, utan vi hamnar på första sidan alltså en annan produktsida orelaterad till där vi är, det känns dumt eftersom då kan vi lika gärna klicka på hemknappen för att komma dit. Detta är ett dåligt sätt att använda breadcrumbs på.
På bilden nedan kan vi se var vi hamnar om man klickar på knappen PRODUKTER som finns på bilden ovan. I tillägg så borde bilden ovan har ytterligare en oklickbar knapp för att vi sa vilken sida vi är på.
Grupp 2 campus
Bra exempel: Nelly.com
På nelly.com ser vi ett bra exempel på bredcrumbs. Här kan man välja olika kategorier för vad man vill shoppa och sedan visar breadcrumbs vilken väg man gått inom de olika kategorierna. På så vis är det lätt att gå tillbaka till en av kategorierna och även lätt att se var man hitta den specifika produkten.
Grupp 3 campus
Dåligt exempel: https://www.teamsportia.se/produkt/8848-altitude-paradiso-w-bib/
Bra:
- Visar var man befinner sig i förhållande till sidans kontext.
- Följer konventionen av hur breadcrumbs kan se ut.
Dåligt:
- Låg kontrast mellan bakgrund och text. För passiv indikation på att det är en alternativ möjlighet för rörelse på sidan.
- Ingen indikator som visar på att de är interaktiva när man hovrar.
Grupp 5 campus
Dåligt Exempel: asos.com
Detta är ett exempel på dåliga breadcrumbs då det inte visar oss var vi befinner oss överhuvudtaget i strukturen då man är inne på en produkt som inte har någon kategori de ligger under. Man vet inte vart man befinner sig mer än på själva produkten. Användaren kan inte se vart denna produkt tillhör eller hur användaren har tagit sig dit. Detta är dock inte regelbundet på sidan och utan framförallt på denna produkt.
Interface Patterns – Designmönster för användargränssnitt | På svenska 