Hvad er responsiv navi­ga­tion? Dynamiske menuer til mobil browsing

Responsiv navi­ga­tion er et vigtigt aspekt af mo­bi­l­op­ti­me­ring. Hvis mo­bil­navi­ga­tio­nen ikke guider brugerne pro­blem­frit fra punkt A til punkt B, vil de sand­syn­lig­vis forlade siden hurtigt, hvilket re­sul­te­rer i tabt trafik og, endnu vigtigere, tabt indtægt. For­skel­li­ge koncepter som slidedown-menuer eller navi­ga­tions­b­jæl­ker i bunden kan hjælpe med at forbedre navi­ga­tions­op­le­vel­sen på hjem­mesi­den.

Hvad ken­de­teg­ner en god responsiv navi­ga­tion?

Et godt navi­ga­tions­sy­stem er rygraden i enhver hjem­mesi­de – det hjælper brugerne med at finde de op­lys­nin­ger, der er relevante for dem. Navi­ga­tions­e­le­men­ter skal fungere pro­blem­frit, have en klar og selv­for­kla­ren­de struktur og være intuitive at bruge. De største ud­for­drin­ger ved responsiv navi­ga­tion ligger i den be­græn­se­de skærm­plads og touch-baseret in­ter­ak­tion på mobile enheder. Der findes dog flere re­spon­si­ve løsninger, der sikrer en ren og bru­ger­ven­lig navi­ga­tions­op­le­vel­se på hjem­mesi­den.

Ker­nei­de­en bag re­spon­sivt webdesign er, at en sides indhold og layout dynamisk tilpasser sig enhedens be­tin­gel­ser og skærm­stør­rel­se.

I de fleste tilfælde er det bedst at følge “mobile first“-tilgangen. Denne de­sign­stra­te­gi pri­o­ri­te­rer mo­bi­l­op­ti­me­ring af webpro­jek­ter– hvor design, bru­ger­ven­lig­hed og ydeevne på mo­bil­ver­sio­nen kommer først, før den tilpasses til sta­tio­næ­re og bærbare computere. Det er ofte mere kom­pli­ce­ret og tids­kræ­ven­de at ef­ter­mon­te­re et ek­si­ste­ren­de navi­ga­tions­sy­stem til mobil brug. Derfor bør du, inden du begynder at planlægge og opbygge din re­spon­si­ve navi­ga­tion, besvare et par vigtige spørgsmål – især ved­rø­ren­de pla­ce­rin­gen og den over­ord­ne­de struktur af navi­ga­tio­nen.

Hvor skal navi­ga­tio­nen placeres?

Al­min­de­li­ge tilgange til placering af navi­ga­tion omfatter navi­ga­tion i sidefoden og placering af menuen øverst på siden. Med navi­ga­tion i sidefoden ser brugerne kun et link til navi­ga­tio­nen i be­gyn­del­sen af mo­bilsi­den, som fører dem direkte til sidefoden, hvor de enkelte me­nu­punk­ter er placeret.

Fodnote-baseret navi­ga­tion er dog ikke særlig bru­ger­ven­lig: brugere forventer, at vigtige navi­ga­tions­e­le­men­ter er let til­gæn­ge­li­ge, og derfor bliver fodnote-navi­ga­tion mindre og mindre al­min­de­lig. I dag placeres mo­bil­navi­ga­tion oftere øverst på siden. Denne klassiske tilgang til re­spon­sivt design er velkendt for de fleste brugere.

Hvordan er navi­ga­tio­nen opbygget?

Der er for­skel­li­ge mu­lig­he­der, når det kommer til at struk­tu­re­re din navi­ga­tion. To af de mest populære mu­lig­he­der er li­ste­navi­ga­tion og re­spon­si­ve grids.

Lister kan vises som både en en­kelt­ni­veau- og en fler­ni­veau-navi­ga­tion. Der er to klare fordele ved dette format: For det første kan we­b­ud­vik­le­re im­ple­men­te­re lister relativt enkelt, og for det andet imø­de­kom­mer det brugerens vaner.

En gitter-navi­ga­tion er ideel til korte navi­ga­tions­e­le­men­ter og er især populær inden for e-handel. Ele­men­ter­ne vises side om side i et git­ter­lay­out, hvor antallet af kolonner afhænger af skærm­stør­rel­sen. Hvis du plan­læg­ger et gitter med to kolonner, skal du sørge for, at antallet af elementer er lige, så du undgår et asym­me­trisk layout.

Hvilke koncepter for mobil navi­ga­tion findes der?

Nu kommer vi til det centrale spørgsmål: Hvordan skal det mobile navi­ga­tions­me­nu åbnes? Konceptet bestemmes af den måde, navi­ga­tio­nen præ­sen­te­res for brugeren på. Vis­nings­mu­lig­he­der­ne er mange: Navi­ga­tio­nen kan vises direkte på siden eller åbnes ved at trykke på et link. Navi­ga­tio­nen kan enten flytte indholdet nedad eller ligge oven over det. Her har vi samlet nogle eksempler.

Navi­ga­tion via drop-down menu

En af de klassiske re­spon­si­ve navi­ga­tions­ty­per er dropdown-menuen. Den ligner meget tra­di­tio­nel desktop-navi­ga­tion, hvilket gør den velkendt for brugerne og et ofte valgt navi­ga­tions­kon­cept. Menuen aktiveres ved at trykke på en knap eller et ikon og vises over indholdet uden at dække det helt.

Slidedown-navi­ga­tion

En anden populær type navi­ga­tion er slidedown-menuen, også kendt som harmonika- eller udvidelig boks­navi­ga­tion. Når brugerne trykker på me­nuk­nap­pen, glider navi­ga­tio­nen ud – i mod­sæt­ning til dropdown-menuer dækker den ikke indholdet, men skubber det i stedet nedad. Selvom denne metode er lidt mere kompleks at im­ple­men­te­re, anses den for at være meget skalerbar og plads­be­spa­ren­de. Takket være dens evne til at inkludere un­der­me­nu­punk­ter tilbyder den en elegant løsning til både enkle og mere komplekse menuer.

Nederste navi­ga­tions­b­jæl­ke

Den nederste navi­ga­tions­b­jæl­ke er en stadig mere populær løsning til mobilapps og websteder, hvor menuen vises nederst på skærmen. Denne navi­ga­tions­stil er særligt bru­ger­ven­lig, da den er let at nå på smartp­ho­nes. Den fungerer godt til projekter med få vigtige navi­ga­tions­e­le­men­ter og giver en klar, or­ga­ni­se­ret struktur, der hjælper brugerne med hurtigt at skifte mellem de vigtigste sektioner på webstedet.

Navi­ga­tion uden for lærredet

I denne tilgang placeres den re­spon­si­ve navi­ga­tion som standard uden for det synlige område på skærmen. Menuen er ikke in­te­gre­ret i ho­ved­lay­ou­tet, hvilket gør off-canvas-navi­ga­tion til en plads­be­spa­ren­de løsning, der ikke optager plads i vis­nings­om­rå­det. Først når der trykkes på me­nu­i­ko­net, glider navi­ga­tio­nen ind i billedet og skubber hele layoutet til side. Denne metode er særligt velegnet til store navi­ga­tions­hie­rar­ki­er med flere un­der­me­nu­er.