De hamburgernavigatie op de rooster gelegd

De hamburgernavigatie op de rooster gelegd - hamburgernavigatiemenu

Die drie liggende streepjes bovenaan je scherm op zowat elke website en app die je bezoekt, dat is de hamburgernavigatie. Achterliggend vinden we de navigatie terug. Als je je afvroeg waar deze streepjes voor stonden kaarten we al meteen het eerste probleem aan van het icoontje. Misschien is het eens tijd om het gebruik ervan kritisch in vraag te stellen?

De hamburgernavigatie werd zo snel ingeburgerd en toegepast door veel digital designers dat het misschien al te laat is om een stap terug te zetten en de manier waarop we navigeren te herdenken. Het hamburgericoon is bijvoorbeeld al standaard ingebouwd in elk groot front-end framework, elk WordPressthema en bijna in elke site die in de laatste twee jaar ontwikkeld werd. 
 

Maar wat is dan exact het probleem met de hamburgernavigatie?

De twee belangrijkste kenmerken van een intuïtief navigatiesysteem zijn dat de navigatie de gebruiker op elk moment duidelijk maakt waar hij zich bevindt en naar waar er nog gesurft kan worden.
Hamburgernavigatie scoort uitermate slecht op beide vlakken aangezien de navigatie-items niet zichtbaar zijn. Enkel de button is er.
Dit wordt hoe langer hoe meer merkbaar als we kijken naar de gebruiksfrequentie bij dergelijk systeem. De gebruiker weet niet waarheen hij kan gaan aangezien de navigatie-opties niet getoond worden. Het kan zijn dat de gebruiker deze op een bepaald punt bij het surfen wel gezien heeft maar die is dit snel vergeten. Het spijtige is dat de gebruiker op die manier een stuk waardevolle informatie kan missen waardoor de website of app niet het beoogde effect zal genereren.
 

Maakt een variant van de hamburger dan eventueel een wezenlijk verschil?

Veel developers begonnen te experimenteren met alternatieven, zoals het gebruik van een ander icoon of het woord “menu” of het woord “menu” als toevoeging bij de hamburger, net zoals ook wij op onze huidige website gedaan hebben. Maar laten we eerlijk zijn, daarmee wordt het probleem (de afwezigheid van een duidelijke intuïtieve navigatie) dus niet 100% opgevangen.
De gebruiker is nog steeds niet geneigd om daarop te klikken omdat ze er de relevantie niet van inzien. Het woord “menu" op zich is voor een gebruiker niet interessant of relevant genoeg om op te klikken. 
Het argument dat we gewoon wat geduld moeten uitoefenen tot het merendeel van de gebruikers het hamburgericoon als navigatie-"conventie" aanzien gaat hier moeilijk op. Goed design is op zich intuïtief en hoeft geen inlooptijd of uitleg.
 

Waarom wordt het hamburgermenu dan nog steeds gebruikt?

  • It's a designer's dream: Wat als we die horizontale navigatie nu eens concentreren in een klein, strak icoontje? Problem solved! Vooral op mobiele toestellen. Was het maar zo gemakkelijk …
  • Het hamburgericoon was een trend en werd overal opgepikt zonder dat er veel vragen rond gesteld werden. Alle grote sites pikten dit op. Velen volgden in de veronderstelling dat de grote sites wel hun nodige research gedaan hadden. 
  • Het is alomtegenwoordig. Veel front-end applicaties hebben standaard het hamburgermenu ingebouwd. Je moet als developer al zover gaan om de code te hacken om er vanaf te geraken.
  • Onaantrekkelijk nieuws gaat maar traag rond. De hamburgernavigatie werd als dé oplossing gezien voor een gebruiksvriendelijke minimalistische navigatie en werd in geen tijd massaal opgepikt. Het nieuws dat deze niet zo gebruiksvriendelijk is als gedacht bereikt veel minder snel zijn nodige doelpubliek.
  • Een aantrekkelijker gebruiksvriendelijk alternatief is er niet echt, of toch?
     

Wat zijn dan de alternatieven?

  • Paradeiser claimt het alternatief te zijn. Maar dit lijkt me terug een horizontale navigatie die meeschaalt. Net zoals die universeel toegepast werden voor het gebruik van de hamburgernavigatie. 
  • Een ander idee dat misschien wel werkbaar kan zijn is het priority+ patroon waarbij je zoveel mogelijk navigatie-items toont op de beschikbare plaats. Naargelang de horizontale ruimte toon je de meest prioritaire navigatie-items. Op mobiele toestellen met een geringere breedte krijg je dan een "more"-button waaronder de navigatie schuilt die van secundair beland is. Een duidelijk voorbeeld: https://www.ncsbn.org/index.htm (schaal je browservenster en kijk hoe de navigatie reageert). Enkele andere mooie voorbeelden vind je hier: https://css-tricks.com/the-priority-navigation-pattern/
  • Het meest werkbare alternatief waarschijnlijk is een horizontale bar met een 4 tot 5-tal iconen (met tekst) + een hamburgernavigatie als verzamelmap voor de navigatie-items van secundair niveau zoals dit ook toegepast werd op onderstaand voorbeeld van de Facebook app.

 

In zijn artikel "Obvious Always Wins" geeft Luke Wroblewski, product director bij Google verschillende voor-en-na-voorbeelden van de mislukkingen van apps die overgestapt zijn naar de hamburgernavigatie en de successen van diegene die ervan afgestapt zijn.
 

Heeft de hamburgernavigatie nog een toekomst?

Er zijn veel voor- en tegenstanders van het gebruik van de hamburgernavigatie. De context van het gebruik (desktop, mobiel, app …) en de statistieken zullen uitwijzen of de hamburgernavigatie de tand des tijds zal overleven in zijn huidige vorm. Wij stellen deze toch in twijfel… houd onze website in de gaten!
 

Deel dit bericht nu

Lees meer over

Webdevelopment