Hans og Gretes ultimative 6-trins-guide til brødkrummestier på mobiltelefonen

Hvis du arbejder med detaljerne i din UX og samtidigt vil optimere brugernes oplevelse, når de anvender smartphones, så er du helt sikkert også stødt på spørgsmålet: Hvad gør vi ved vores brødkrummestier? Selvfølgelig er det vigtigt at have styr på alle de store og afgørende spørgsmål i dit design. Men djævlen ligger også i detaljen. Så hvordan håndterer du dette navigationselement i et godt, responsivt design? Læs denne guide inden du beslutter dig.

Screen Shot 2015-11-27 at 18.00.31

Brødkrummestier er navngivet efter eventyret om Hans og Grete, hvor Hans dryssede brødkrummer ud for at kunne finde tilbage igennem den mørke skov. Du skal naturligvis mestre den niche-disciplin, som det er, at lave brødkrummestier på dit website.

Lad os først huske på, hvad en brødkrummesti er

Brødkrummestier er et navigationselement, der lever en stille tilværelse. Hvis du går efter et clean design, har du måske lyst til at fjerne det, måske endda også på desktop-visningen af dit site. Men hvis du laver en event-tracking på brugen af brødkrummestien eller ser nogle få tænke-højt-tests, finder du ud af, at der faktisk er adskillige brugere, som har god nytte af brødkrummestien. Herunder kan du se en arketypisk brødkrummesti, som jeg har skitseret den i en wireframe for illustrationens skyld:

Screen Shot 2015-11-27 at 13.02.36

Brødkrummestien har af natur to funktioner:

  1. Den fortæller, hvor brugeren er på sitet
  2. Den lader brugeren navigere til et andet sted i site-struktureren

Der er nogle best practice tips til den veldesignede brødkrummesti:

  • Den viser sitets hierarki – ikke brugerens navigationshistorik (jeg vil ikke behandle hvorfor her – det må du læse om andre steder)
  • Elementerne adskilles bedst af pile, ikke pipes (|) eller skråstreger (/). Pipes eller skråstreger leder brugeren til at tro, at stiens elementer er sidestillede og ikke hierarkiserede. Brugerne forstår bedst at stien signallerer et hierarki, når pile (→ eller > ) anvendes.
  • Hele hierarkiet vises fra forsiden og til det sted, hvor brugeren befinder sig. Der er links til de enkelte steder i hierarkiet.
  • Siden, som brugeren befinder sig på, er også en del af brødkrummestien, men den er ikke et link.

Problemet på mobil

Hvad er så problemet? På mobiltelefon-visningen bliver vi nødt til at prioritere skærmpladsen, og hvis man blot ombryder brødkrummestien, kommer den umiddelbart til at fylde uforholdsmæssigt meget. Så hvad gør man så? Der er ikke én rigtig løsning. Den rigtige løsning vil f.eks. afhænge af, hvor højt du prioriterer grafisk design, hvor dyb din navigationsstruktur er, og hvor godt din øvrige navigation virker. Jeg håber, at du kan du blive hjulpet af at overveje disse løsningsstrategier inden du lægger dig fast på dit design.

Løsningsstrategi #1: Den simpleste løsning

Screen Shot 2015-11-27 at 13.17.22

Den simpleste og mest ligetil løsning er simpelthen bare at ombryde brødkrummestien og lægge den samme sted som på desktopsitet.

Men eksemplet her er måske faktisk lidt for taknemmeligt – det vil ikke være unormalt, hvis stien kommer til at fylde 3 eller 4 linjer. Man kunne så prøve at lave teksten meget mindre og fjerne noget linjeafstand. Men her vil designet hurtigt forbryde sig mod formålet. Den lille font og de små afstande vil betyde, at brugerne får svært ved overhovedet at aflæse teksten, og vi vil ikke understøtte, at vi arbejder med et touch-interface, hvor der skal være plads til brugernes fingre.

Nogle vil argumentere for, at denne løsning er den bedste. Den er:

  • low-tech
  • ultra-konventionel (set i forhold til desktop-sitet)
  • vi ved, at brugerne gerne swiper nedad for at se hele siden – så måske er det ikke så slemt, at den fylder i toppen

Ikke desto mindre vil dette design garanteret ikke virke ideelt i alle tilfælde, da vi på trods af brugernes swipe-villighed ikke har lyst til at f.eks. en produktside ved første øjekast domineres af navigationselementer frem for indhold.

Løsningsstrategi #2: Den simple løsning – men vi flytter brødkrummen ned på siden

En variant af løsningsstrategi #1 ligger snublende nær: Hvis brødkrummen generer i toppen af siden – så læg den længere ned! Herved vil indholdet få relativt mere fokus ved første øjekast og alle fordelene ved en konventionel løsning bevares. Eneste minus – for der ér et minus – er at brødkrummestien nu ikke er placeret konventionelt. Dermed vil den være sværere for brugeren at finde, og placeringen langt nede fjerner desuden muligheden for at brugeren at-a-glance kan se, hvor han er landet, når han entrerer en ny side.

Man kan dog argumentere for, at brødkrummen netop især kommer i brug, når brugeren ikke kan finde, hvad han leder efter, eller når han vil et andet sted hen – og det vil han ofte først erfare, når han begynder at swipe nedad på siden. Så dermed er løsningen ikke så tosset endda.

Nyt forslag (20151127)

Løsningsstrategi #3: Den trunkerede / forkortede

Lad os så sige, at vi vil have fordelen af at have brødkrummestien i toppen af siden – den skal være let at finde, men den må ikke fylde for meget. Vi bliver nødt til at forkorte stien på en eller anden måde. Vi kan lade os inspirere af iOS-konventioner og lave en enkelt knap eller link, der bringer brugeren ét niveau op i hierarkiet. Vi kan også beholde så meget af brødkrummen som muligt indtil den kan være på én linje – f.eks. angivelsen af den side, som brugeren er på, og fjerne elementer af stien fra toppen af hierarkiet. Problemet med denne løsning er, at den på flere måder forbryder sig mod den oprindelige funktion: Brugeren kan ikke se, hvor han befinder sig i informationshierarkiet, og den lader kun delvist brugeren navigere til andre steder i dette hierarki. Den trunkerede udgave kan jeg slet ikke lide, fordi den ofte vil vise brugeren noget, som reelt er ulæseligt.

Screen Shot 2015-11-27 at 14.00.10

Løsningsstrategi #4: Den komprimerede/udfoldelige

En anden model, som søger at få presset brødkrummen ned på én linje, men samtidig vil bevare al information og alle navigationsmuligheder er en model som denne:

Screen Shot 2015-11-27 at 19.02.15

Ulempen ved denne løsningsstrategi er måske at dropdownmenuer tager relativt meget fokus og igen er “glancability” eller skimbarheden meget lav. For at aflæse positionen i navigationshierarkiet kræver funktionen aktiv brugerinteraktion, der går udover almindelig scroll, og det kan betragtes som et minus.

Løsningsstrategi #5: Den vandret swipe-bare

Screen Shot 2015-11-27 at 18.14.13

Men hov – på mobiltelefon kan brugeren jo swipe til højre og venstre – Kristian Schnedler har leveret en interaktiv prototype (screendumpet herover), som illustrerer, hvordan man kan forestille sig, at brugeren kan swipe til højre og venstre for at afsløre brødkrummestien i sin fulde længde. Modellen er i hvert fald opfindsom – jeg ville dog være bekymret for, at den kræver lidt større teknisk indsats end de andre modeller for at blive vellykket. Hertil må det alt andet lige være en udfordring at få de fleste brugere til at forstå, at man faktisk kan swipe for at se mere af linjen. Hvis ikke brugerne forstår det, er vi lige vidt.

Løsningsstrategi #6: Den radikale – fjern den helt

Den sidste strategi er tilsyneladende den, som faktisk er mest anvendt – på mobiltelefon-visningen falder brødkrummestien ofte helt væk. Det er naturligvis den nemmeste – men egentlig også lidt ærgerligt, når vi ved, at brugerne har sværere ved at finde rundt på mobil-tilpassede sites end på desktop-sites. Man kan argumentere for, at man skal lede brugerne rundt på sitet via f.eks. relaterede produkter, en god navigations-struktur i en top- eller burger-menu – men det er jo andre navigations-design-discipliner som brødkrummestien supplerer og ikke erstatter på desktopsitet.

Så inden du slår brødkrummestien helt ihjel på i dit mobiltilpasede layout, så giv en af de første 5 løsningsstrategier en overvejelse.

Hvis du selv støder på andre løsningsmodeller er du meget velkommen til at kommentere her – det kan også være at du har indhentet erfaringer fra tænke-højt-tests, som du vil dele her?

Dette blog-indlæg er blevet til på basis af en ‘UX challenge’ som jeg præsenterede i Facebook-gruppen UX Århus (kræver medlemsskab). Stor tak til Mikkel Michelsen, Kristian Schnedler, Heine Busch Thomsen og Michael Lajlev, som bidrog med gode ideer, wireframes, argumenter for og i mod løsningerne.

Kategorier: UX

Tagged as: , , ,