Als mensen je website of app gebruiken, moeten ze weten wat ze kunnen doen en hoe ze daar komen. Goede navigatie helpt gebruikers hierbij. Met de komst van smartphones en andere kleine apparaten, is een goede navigatie een steeds grotere uitdaging geworden - met name door de beperkte beschikbare ruimte. In de loop van de tijd zijn er verschillende oplossingen ontworpen om deze uitdaging aan te gaan. Elke oplossing heeft zo zijn voor- en nadelen. Voordat we de navigatiemethodes induiken, is het belangrijk om te begrijpen waar de uitdaging vandaan komt.
Door de beperkte ruimte op kleine apparaten is het noodzaak om keuzes te maken in je design. Die keuze is simpel. Content is per definitie altijd belangrijker dan je navigatie. Je content is hetgeen je wilt vertellen. Navigatie is ‘slechts’ het middel om ergens anders in de app of website te komen. In de praktijk is de navigatie vaak ver te zoeken. Het is verstopt, of wordt op een vreemde of onhandige manier getoond. Hoe maak je dan een goede keuze?
In dit artikel licht ik de meestgebruikte navigatiemethodes toe en beoordeel ze op een 3-tal aspecten: de vindbaarheid, de mate van acceptatie (conventie), en de toegankelijkheid.
Priority+ (navigation bar)
De priority+ navigatie gaat ervan uit dat er een prioritering wordt aangebracht in de hoofdnavigatie. Omdat op een mobiel scherm de breedte beperkt is, passen niet alle menu-items op de horizontale balk. Door te swipen of het menu uit te klappen ziet men alle menu-items in meestal een fullscreen weergave.
Wanneer gebruiken?
Deze methode wordt vaak gebruikt bij content-heavy platforms zoals blogs en kranten. Hier zijn een aantal menu-items duidelijk belangrijker dan andere. Alle overige menu-items worden verstopt achter een ‘more’ of ‘all’ knop.
Voorbeelden
NOS.nl, nu.nl, ad.nl, vi.nl
- Vindbaarheid = 4/5
- Acceptatie = 4/5
- Toegankelijkheid = 3/5
*Belangrijkste uitdaging: hoe maak je duidelijk dat er naast de zichtbare menu-items, nog een heleboel andere menu-items zijn? Je gebruiker kan deze zomaar over het hoofd zien.
Tab bar
De tabbar of bottom-navigation heeft veel terrein gewonnen bij de opkomst van apps. De menu-items - vaak vormgegeven met icoon en label - staan onderaan in je scherm en zijn snel en makkelijk te bedienen.
Wanneer gebruiken?
De tabbar wordt vooral veel gebruikt in apps met maar een beperkt aantal top-level navigatie-items. Over het algemeen biedt een mobiel device ruimte voor 3 tot max 5 menu-items. Het is een geaccepteerde en duidelijke manier van navigeren en zeer gebruiksvriendelijk door de bereikbaarheid voor je vingers. De tabbar bevindt zich namelijk binnen de ‘safe’ zone van je duim. Ook is met kleur of achtergrond duidelijk aan te geven welk item actief is.
Voorbeelden
Spotify, Airbnb, Instagram, Nos app
- Vindbaarheid = 4/5
- Acceptatie = 5/5
- Toegankelijkheid = 4/5
*Belangrijkste uitdaging: het beperkt aantal opties. Kun je de top-level navigatie beperken tot max 5 items? Dan is de tabbar in veel gevallen een goede optie.
Hamburger / Off canvas
De populairste navigatiemethode voor responsive websites is het hamburgermenu. Vaak links boven in de website verstopt. Met een tap op de hamburger komt een off-canvas menu tevoorschijn. Hoewel dit de meest gebruikte methode is, is dit - met name door de slechte vindbaarheid en toegankelijkheid - een methode die vooral bruikbaar is als secundaire navigatie. Zeker niet als primaire navigatie.
Wanneer gebruiken?
Gebruik een hamburgermenu alleen als secundaire navigatie. Zorg dat je door middel van navigatie in de content, of in combinatie met een van de andere navigatiemethodes, de gebruiker door de website of app begeleidt. Plaats enkel secundaire menu-items of andere functionaliteit achter het hamburgermenu.
Voorbeelden
exitable.nl, amsterdam.nl, knvb.nl
- Vindbaarheid = 3/5
- Acceptatie = 5/5
- Toegankelijkheid = 1/5
*Belangrijkste uitdaging is om de gebruiker ook zonder dit menu de primaire menu-items te laten bereiken. Door de combinatie met een andere navigatiemethode, of goede content met links naar de belangrijkste pagina’s bijvoorbeeld.
Navigation hub
De navigation hub is een groot overzicht dat fungeert als een soort keuzemenu. Je vraagt de gebruiker om eerst een keuze te maken, vaak nog voordat je inhoud presenteert. Dit kan zijn in een lijst, als blokken of als cards.
Wanneer gebruiken
Een navigation hub wordt vaak gebruikt bij taakgerichte apps. Op het moment dat een gebruiker zo’n hub opent, ga je er als designer vanuit dat hij of zij één van die verschillende taken wilt uitvoeren. Denk hierbij bijvoorbeeld aan het receptenoverzicht van de Appie app. Of het browsen door locaties en activiteiten in de Airbnb app. Je ziet dat er altijd een tweede navigatie wordt gebruikt om de top-level navigatie-items te benadrukken.
Voorbeelden
Ryanair, Airbnb, Appie
- Vindbaarheid = 4/5
- Acceptatie = 3/5
- Toegankelijkheid = 4/5
*Belangrijkste uitdaging: de navigation hub combineren met een navigatie die er altijd staat. De navigation hub is namelijk alleen op één enkele pagina, of na een bepaalde actie, zichtbaar.
Conclusie
Elke methode heeft zo zijn voor- en nadelen. Welke navigatie het ‘beste’ is hangt sterk af van het type product, de doelgroep en de actie die je de bezoeker wilt laten uitvoeren. In veel gevallen is een slimme combinatie tussen twee navigatiemethodes dé manier om bezoekers een fijne navigatie-ervaring te bezorgen.
Struggle je na het lezen van mijn blog nog steeds met het bepalen van een goede navigatie op jouw website? Kom 'ns een kop koffie doen.