De navigatie van een site is een essentieel criterium voor het succes ervan. Hiervoor zijn de navigatiemenu's er om gebruikers effectief te begeleiden. Ze moeten duidelijk zijn om hun bezoek zo soepel en aangenaam mogelijk te laten verlopen.
De rol van navigatiemenu's :
- Productinhoud en functies structureren en prioriteren
- Markeer essentiële functies
- Vereenvoudig de gebruikersreis
In het tijdperk van " mobile first ", waarin mobiele UX een cruciale rol speelt, ontdekken we samen de verschillende soorten mobiele navigatiemenu's die het meest gebruikt worden.
#1 De Tabber of Tab Bar – een geweldige klassieker
De tabbalk, een menu dat doorgaans in het onderste deel van de applicatie wordt geplaatst, is verreweg het meest verspreid. Dankzij het klassieke ontwerp kan de gebruiker met één hand navigeren, wat een van de redenen is voor zijn populariteit.
Voordelen : Het toont duidelijk het instappunt en de belangrijkste kenmerken.
Nadelen : Gezien het grote aantal functies lijkt dit model minder geschikt.
bron: https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction
#2 Rasternavigatie en carrousel
De rasternavigatie brengt de belangrijkste toegangspunten op de startpagina samen. Het ontwerp staat gebruikers echter niet toe om de inhoud bij de eerste poging te zien, wat hun keuzes moeilijker maakt. Steeds minder applicaties gebruiken dit type menu als hun hoofdnavigatie, het is niettemin interessant voor het ontwerp van de inhoudsopgave van secundaire pagina's of toegangspunten voor tools.
Voordelen : Dit type navigatie is eenvoudig maar niet complex om te implementeren. De effectiviteit ervan kan worden geoptimaliseerd door het duidelijker en intuïtiever te maken.
Nadelen : De kleurkeuze is cruciaal. Een te complex ontwerp kan de ogen van de gebruiker vermoeien.
bron: https://dribbble.com/shots/14723386–54-Bonsai-Gardening-99-Days-in-the-Lab
#3 De lade (“Lade”), “Flyout” of verborgen menu
Het lademenu is een goed alternatief voor de tabbalk die het aantal functies beperkt. Het probleem wordt opgelost door de interactieve elementen verticaal te herschikken en een deel van de huidige pagina te verbergen.
Voordelen : Het maakt ruimte vrij en stelt gebruikers in staat zich te concentreren op de huidige pagina.
Nadelen : Het is niet geschikt voor gebruikers die snel van de ene categorie naar de andere willen overschakelen (bijvoorbeeld in een webwinkel).
bron: https://dribbble.com/shots/3661919-Navigation-Drawer-Concept
bron: https://dribbble.com/shots/4731003-Airbnb-Menu-transition-Mobile
#4 Het roermenu (“Rudder”) of gebogen tabbalk
("Opvouwbare tabbladbalk")
Halverwege tussen de tabbalk en de zwevende knop is de naam van dit menu geïnspireerd op het roer van het schip met aan weerszijden andere bedieningsknoppen. Het is geplaatst en gestructureerd zoals de klassieke tabbalk, maar maakt in opgevouwen toestand ruimte vrij voor andere functies.
Voordelen : Net als de tabbalk markeert het het toegangspunt tot de belangrijkste functies. Bovendien kunnen er andere functies aan worden toegevoegd die specifiek zijn voor de actieve pagina.
Nadelen : Dezelfde als bij het lademenu. Het is niet geschikt voor gebruikers die snel van de ene categorie naar de andere willen navigeren.
bron: https://dubaimonsters.com/blog/create-a-functional-mobile-navigation-menu/
#5 De zwevende actieknop (FAB)
Een zwevende actieknop (FAB) is een ronde knop die de hoofdactie in de gebruikersinterface van uw app activeert.
De naam werd voor het eerst gebruikt door Google in Material Design.
In tegenstelling tot het roermenu zijn de locatie en structuur vrij,
die meer functies mogelijk maakt.
Voordelen : Het maakt de integratie van een groter aantal functies mogelijk.
Nadelen : Het is niet geschikt voor gebruikers die direct tussen categorieën willen wisselen. Bovendien kan de iconografie, zonder bijschriften, voor sommige gebruikers moeilijk te begrijpen zijn.
bron: https://dribbble.com/shots/3908815-Floating-button
#6 Gecombineerde navigatie
Om de grenzen van bepaalde soorten menu's te verleggen, aarzelen ontwerpers niet om verschillende navigatiemodi te combineren voor een betere efficiëntie. Hier zijn enkele voorbeelden:
Tabber + Roer
bron: https://dribbble.com/shots/13986315-Floating-Button-File-Upload
Tabber + zwevende actieknoppen
bron: https://dribbble.com/shots/5722292-Tabbar-Animation/attachments/11019477?mode=media
Rooster + Roer
Bron: Alex Permyakov – https://freefrontend.com/css-menu/
"Dat is niet mijn naam!"
Minispel: Deze "hamburger"-menu's, die vaak ten onrechte "hamburgermaaltijden" worden genoemd, heten eigenlijk anders. Kun je de oorsprong van hun namen achterhalen?
Klik om terug te keren
Bento-menu
Klik om terug te keren
Het hamburgermenu
Klik om terug te keren
Het kebabmenu
Klik om terug te keren
Het gehaktballenmenu
Klik om terug te keren
Het "Doner"-menu
Klik om terug te keren
Het "Veggie Burger" menu
Klik om terug te keren
Klik om terug te keren
Klik om terug te keren
Klik om terug te keren
Klik om terug te keren
Klik om terug te keren
Conclusie
Ontwerpers zijn zich steeds meer bewust van het belang van het ontwerp van navigatiemenu's om de gebruikerservaring te verbeteren.
Of het nu op Android of iOS is, het Hamburger-menu wordt geleidelijk vervangen door het Tab Bar-menu, dat sinds de hoogtijdagen in 2008 een comeback maakt.
Om ze efficiënt en innovatief te maken, benutten ontwerpers alle technische mogelijkheden door grotere en duidelijkere pictogrammen te gebruiken.
Elke dag worden er nieuwe ideeën geboren, gericht op vereenvoudigde navigatie en betere ergonomie.
En jij, wat staat er vandaag op het menu?
Sandra LE UI-UX-ontwerper @UX-Republic
