Wat is res­pon­sie­ve navigatie? Dy­na­mi­sche menu's voor mobiel browsen

Res­pon­sie­ve navigatie is een be­lang­rijk aspect van mobiele op­ti­ma­li­sa­tie. Als mobiele navigatie ge­brui­kers niet soepel van punt A naar punt B leidt, zullen ze de pagina waar­schijn­lijk snel verlaten, wat re­sul­teert in verloren verkeer en, nog be­lang­rij­ker, verloren inkomsten. Ver­schil­len­de concepten, zoals uit­klap­ba­re menu’s of na­vi­ga­tie­bal­ken onderaan, kunnen de navigatie-ervaring op de website helpen ver­be­te­ren.

Wat maakt een goede res­pon­sie­ve navigatie?

Een goed na­vi­ga­tie­sys­teem is de rug­gen­graat van elke website: het helpt ge­brui­kers de in­for­ma­tie te vinden die voor hen be­lang­rijk is. Navigatie-elementen moeten soepel werken, een dui­de­lij­ke en voor zichzelf sprekende structuur hebben en intuïtief te gebruiken zijn. De grootste uit­da­gin­gen van res­pon­sie­ve navigatie liggen in de beperkte scherm­ruim­te en de aan­raak­ge­ba­seer­de in­ter­ac­tie op mobiele apparaten. Toch zijn er ver­schil­len­de res­pon­sie­ve op­los­sin­gen die zorgen voor een over­zich­te­lij­ke en ge­bruiks­vrien­de­lij­ke navigatie-ervaring op websites.

Het kernidee achter res­pon­si­ve webdesign is dat de inhoud en lay-out van een pagina zich dynamisch aanpassen aan de om­stan­dig­he­den van het apparaat en de scherm­groot­te.

In de meeste gevallen kunt u het beste de ’mobile first’-be­na­de­ring volgen. Deze ont­werp­stra­te­gie geeft pri­o­ri­teit aan de mobiele op­ti­ma­li­sa­tie van web­pro­jec­ten, waarbijhet ontwerp, de bruik­baar­heid en de pres­ta­ties van de mobiele versie voorop staan, voordat deze wordt aangepast aan desktops en laptops. Het aanpassen van een bestaand na­vi­ga­tie­sys­teem van een website voor mobiel gebruik is vaak in­ge­wik­kel­der en tijd­ro­ven­der. Daarom moet u, voordat u begint met het plannen en bouwen van uw res­pon­sie­ve navigatie, een aantal be­lang­rij­ke vragen be­ant­woor­den, met name met be­trek­king tot de plaatsing en de algehele structuur van de navigatie.

Waar moet de navigatie worden geplaatst?

Veel­ge­bruik­te manieren om navigatie te plaatsen zijn navigatie in de voettekst en het menu bovenaan de pagina. Bij navigatie in de voettekst zien ge­brui­kers alleen een link naar de navigatie bovenaan de mobiele pagina, die hen direct naar de voettekst brengt waar de af­zon­der­lij­ke menu-items staan.

Navigatie via de voettekst is echter niet erg ge­bruiks­vrien­de­lijk: ge­brui­kers ver­wach­ten dat be­lang­rij­ke navigatie-elementen ge­mak­ke­lijk toe­gan­ke­lijk zijn, waardoor navigatie via de voettekst steeds minder vaak wordt gebruikt. Te­gen­woor­dig wordt mobiele navigatie vaker bovenaan de pagina geplaatst. Deze klassieke be­na­de­ring van res­pon­sief ontwerp is bekend bij de meeste ge­brui­kers.

Hoe is de navigatie opgebouwd?

Er zijn ver­schil­len­de mo­ge­lijk­he­den om uw navigatie te struc­tu­re­ren. Twee van de meest populaire opties zijn lijst­na­vi­ga­tie en res­pon­sie­ve rasters.

Lijsten kunnen zowel als navigatie met één niveau als met meerdere niveausworden weer­ge­ge­ven. Dit formaat heeft twee dui­de­lij­ke voordelen: ten eerste kunnen we­bont­wik­ke­laars lijsten relatief eenvoudig im­ple­men­te­ren en ten tweede sluit het aan bij de gewoonten van de gebruiker.

Een ras­ter­na­vi­ga­tie is ideaal voor korte navigatie-items en is vooral populair in e-commerce. Items worden naast elkaar weer­ge­ge­ven in een rasterlay-out, waarbij het aantal kolommen af­han­ke­lijk is van de scherm­groot­te. Als u een raster met twee kolommen plant, zorg er dan voor dat het aantal items even is om een asym­me­tri­sche lay-out te voorkomen.

Welke concepten voor mobiele navigatie zijn er be­schik­baar?

Nu komen we bij de centrale vraag: hoe moet het mobiele na­vi­ga­tie­me­nu worden geopend? Het concept wordt bepaald door de manier waarop de navigatie aan de gebruiker wordt ge­pre­sen­teerd. De weer­ga­ve­op­ties zijn divers: de navigatie kan direct op de pagina worden weer­ge­ge­ven of worden geopend door op een link te tikken. De navigatie kan de inhoud naar beneden ver­plaat­sen of erboven worden weer­ge­ge­ven. Hier hebben we enkele voor­beel­den verzameld.

Navigatie via drop­down­me­nu

Een van de klassieke res­pon­sie­ve na­vi­ga­ti­e­ty­pes is het drop­down­me­nu. Dit lijkt sterk op tra­di­ti­o­ne­le deskt­op­na­vi­ga­tie, waardoor het ge­brui­kers bekend voorkomt en een veel­ge­bruikt na­vi­ga­tie­con­cept is. Het menu wordt ge­ac­ti­veerd door op een knop of pictogram te drukken en ver­schijnt boven de inhoud zonder deze volledig te bedekken.

Schuif­na­vi­ga­tie

Een ander populair type navigatie is het slidedown-menu, ook wel bekend als accordeon- of uit­breid­ba­re box­na­vi­ga­tie. Wanneer ge­brui­kers op de menuknop tikken, schuift de navigatie open. In te­gen­stel­ling tot dropdown-menu’s wordt de inhoud niet bedekt, maar naar beneden geschoven. Hoewel deze aanpak iets complexer is om te im­ple­men­te­ren, wordt hij beschouwd als zeer schaal­baar en ruim­te­be­spa­rend. Dankzij de mo­ge­lijk­heid om sub­na­vi­ga­tie-items op te nemen, biedt het een elegante oplossing voor zowel een­vou­di­ge als com­plexe­re menu’s.

Onderste na­vi­ga­tie­balk

De na­vi­ga­tie­balk onderaan is een steeds po­pu­lair­der wordende oplossing voor mobiele apps en websites, waarbij het menu onderaan het scherm wordt weer­ge­ge­ven. Deze na­vi­ga­tie­stijl is bijzonder ge­bruiks­vrien­de­lijk, omdat hij ge­mak­ke­lijk te bereiken is op smartpho­nes. Hij werkt goed voor projecten met een paar be­lang­rij­ke navigatie-items en biedt een dui­de­lij­ke, ge­or­ga­ni­seer­de structuur die ge­brui­kers helpt snel te schakelen tussen de be­lang­rijk­ste on­der­de­len van de website.

Off-canvas navigatie

Bij deze aanpak wordt de res­pon­sie­ve navigatie standaard buiten het zichtbare gedeelte van het scherm geplaatst. Het menu is niet ge­ïn­te­greerd in de hoofdlay-out, waardoor off-canvas navigatie een ruim­te­be­spa­ren­de oplossing is die geen plaats inneemt in het weer­ga­ve­ge­bied. Pas wanneer op het me­nu­pic­to­gram wordt getikt, ver­schijnt de navigatie in beeld en wordt de volledige lay-out opzij geschoven. Deze methode is bijzonder geschikt voor grote na­vi­ga­tie­hi­ë­rar­chie­ën met meerdere submenu’s.