De ideale navigatie. Bestaat deze wel?

De navigatie vormt de ruggegraat van jouw website omdat een goede menustructuur de bezoekers helpt de weg te vinden op de site.  

En het liefst in de richting die jij wenst (conversie). Tijdens het ontwikkelen van een website, wordt mij dan ook vaak gevraagd waar het hoofdmenu moet komen te staan. Horizontaal bovenaan? Of aan de linker- of rechterzijde in een sidebar?
En zijn submenu’s eigenlijk wel nodig? Of leiden ze onnodig af?

Om deze vragen te beantwoorden, kunnen we teruggaan naar de basis en de kritische rol onderzoeken van zowel de gebruikersinterface (UI) als de gebruikerservaring (UX) bij het ontwerpen van websites.

Wat zorgt voor een goede navigatie?

Een goede navigatie voldoet aan drie belangrijke eisen:

1. Gemak: Bezoekers moeten zonder na te denken vinden wat ze zoeken.
2. Consistentie: Menu’s en linkjes moeten op alle pagina’s hetzelfde blijven.
3. Strategie: De belangrijkste pagina’s krijgen de meeste aandacht.

Bij het ontwerpen van een menu is het belangrijk om na te denken over de verwachtingen van je bezoekers. Veelgebruikte patronen, zoals een horizontaal menu met links een “Home”-knop en rechts “Contact”, werken omdat mensen deze indeling intuïtief begrijpen.

Voorbeeld van een standaard indeling:

Toelichting plaatje:

1. Horizontaal menu. Met links een verwijzing naar de homepage en rechts naar een contactformulier.
2. Menu aan de linkerzijde –in een sidebar (WordPress-begrip).
3. Menu aan de rechterzijde- in een sidebar.
4. Schromelijk onderschat (zie ‘Het belang van de inhoud en bovenkant, onderaan deze pagina’):
   tekst met linkjes ofwel verwijzingen naar de belangrijkste pagina’s op de site.
5. Zoekfunctie.
6. Logo met link naar de homepage.

Mijn voorkeur gaat uit naar het horizontale menu  bovenaan, en –bij een meer complexe site – een menu in de linker sidebar. Indien er echter voldoende (en goed) beeldmateriaal is, geef ik de voorkeur aan het menu aan de rechterzijde. Dit is echter volledig gebaseerd op ‘fingerspitzengefühl’  en niet gestaafd door feiten. Vandaar dat ik dit nieuwe jaar ben begonnen met het doorspitten van verschillende ‘facts & figures’ over de ‘ideale navigatie’ op een site. Belangrijkste conclusie is dat er geen – eenduidige – gouden regel bestaat voor álle websites, maar in grote lijnen zijn er zeker enkele regels waarmee rekening gehouden mag worden.    

Submenu’s: handig of hinderlijk?

Submenu’s zijn nuttig voor complexere websites, zoals webwinkels of platforms met veel content. Ze helpen bij het organiseren van informatie, maar kunnen overweldigend zijn als ze niet logisch zijn ingedeeld.

Houd submenu’s overzichtelijk:

• Gebruik niet meer dan twee niveaus.
• Plaats categorieën met veel pagina’s onder duidelijke hoofditems.
• Vermijd submenu’s die onverwacht verschijnen en gebruikers frustreren.

Eyetracking, hoe bekijken de webbezoekers een webpagina?

Wanneer je wilt weten wat de ideale indeling is van een webpagina, is het wezenlijk om te achterhalen hoe een bezoeker een pagina bekijkt.  Dit kan door middel van ‘Eyetracking’, een onderzoek waarbij d.m.v. software en hardware gemeten wordt hoe de ogen van mensen reageren op impulsen. Resultaten uit eerder onderzoek, tonen aan dat het menselijk oog vergelijkbare kijkpatronen vertoont als een advertentie of websites wordt bekeken.

Bezoekers scannen webpagina’s in een F-patroon.
Informatie die helemaal rechts op de pagina wordt gepresenteerd, trekt minder aandacht. Hieruit mag je concluderen dat een horizontaal menu een goede keuze is. Eventueel aangevuld met een menu in de linker sidebar.

Daarnaast zegt een plaatje vaak méér dan duizend woorden .
Images in de rechter sidebar is dus zeker geen slecht idee.
(Zie afbeelding hieronder)

 

Het belang van de linkerhelft

Onderzoek van de Nielsen Norman Group uit 2017 toonde aan dat internetgebruikers 80% van hun tijd besteden aan het bekijken van de linkerhelft van een webpagina en slechts 20% aan de rechterhelft. Hoewel dit onderzoek enkele jaren oud is, blijven de bevindingen relevant. Recente studies bevestigen dat gebruikers in westerse culturen, waar van links naar rechts wordt gelezen, de neiging hebben om eerst naar de linkerkant van een pagina te kijken. Dit patroon beïnvloedt hoe informatie op webpagina’s wordt waargenomen en benadrukt het belang van een conventionele lay-out.
BRON: http://www.nngroup.com/articles/horizontal-attention-leans-left/

Vandaar dat het belangrijk is om goed na te denken over de plaatsing én het nut van de menu-items. Daarnaast hebben webbezoekers bepaalde verwachtingen. Omdat de meeste sites tussen de vijf en acht menuknoppen hebben, help je de bezoeker NIET door hier vanaf te wijken. Ook zie je dat op de meeste sites de button ‘Home’ aan de linkerkant staat en helemaal rechts:  de button ‘Contact’.

NB: Bouw je navigatie op rondom je aanbod en de zaken die er echt toe doen

Ik weet niet wat jij als eerste doet als je op een onbekende site terecht komt? Maar ik loop niet direct warm voor onderwerpen als ‘Wie zijn Wij’ of ‘Onze Werkwijze’.  Ik wil eerst weten óf en wáár ik kan vinden wat ik zoek. Vaak gaat dat om een product, dienst of antwoord op een vraag.
Toch zie je dikwijls  ‘Over Ons’ op een plek staan waar de aandacht als eerste naar uitgaat: linksboven in het hoofdmenu.

Belangrijkste bevindingen:

• Het 1ste hoofdmenu staat bij 17 websites bovenaan. Bij 4 sites aan de linkerkant.
• Het 2de menu staat 14 keer links en 11 keer bovenaan.

Nieuwe trends en technologie in moderne websites

En hoe ze passen in het F-patroon.

1. Sticky navigatie:
   • Waarom het werkt: Sticky navigatie blijft in beeld, zelfs als bezoekers naar beneden scrollen. Dit sluit aan bij het verticale gedeelte van het F-patroon, omdat gebruikers vaak de linkerkant en bovenkant van de pagina scannen. Door het menu zichtbaar te houden, hebben ze altijd directe toegang tot belangrijke opties, zonder hun scrollpatroon te verstoren.
   • Effect op het F-patroon: Versterkt de horizontale en verticale lijnen in het patroon, doordat het menu bovenaan blijft en continu zichtbaar is.
2. Hamburgermenu’s:
   • Waarom het werkt: Op mobiele apparaten is de schermruimte beperkt, en een hamburgermenu houdt het ontwerp overzichtelijk. Het compacte menu springt vaak in het oog linksboven, een van de eerste gebieden waar bezoekers kijken volgens het F-patroon.
   • Effect op het F-patroon: Houdt de aandacht op het bovenste horizontale deel van het F-patroon, waar het menu meestal is gepositioneerd.
3. Geavanceerde zoekfuncties:
   • Waarom het werkt: Een goed zichtbare zoekfunctie speelt in op bezoekers die gericht zoeken. Deze functie wordt vaak bovenaan rechts of in het midden geplaatst, waar de bovenste horizontale lijn van het F-patroon begint. Voor grote websites kan een zoekfunctie de primaire manier zijn waarop bezoekers navigeren, waardoor ze minder afhankelijk zijn van de traditionele menu-indeling.
   • Effect op het F-patroon: Draagt bij aan een efficiëntere verkenning van de website door gebruikers, zonder dat ze de onderste delen van het F-patroon hoeven te volgen.

Conclusie: Sticky navigatie en hamburgermenu’s zorgen ervoor dat bezoekers belangrijke navigatie-opties in het zicht houden binnen het F-patroon, terwijl geavanceerde zoekfuncties een kortere, directe route bieden naar gewenste content. Samen versterken deze trends het gebruiksgemak en passen ze perfect bij de natuurlijke kijk- en scanpatronen van gebruikers.

!!! Het belang van de inhoud en bovenkant

Waarom besteden we eigenlijk zo veel aandacht aan de menu’s? Het is toch beter als gebruikers niet te lang afgeleid worden door de navigatie, maar hun –korte-  tijd besteden aan de inhoud? Zo heeft een menu bovenaan de pagina het voordeel, dat je dit bij het laden van de pagina direct ziet. Maar op het moment dat je begint te lezen, leidt het niet meer af.

Daarnaast kun je ook in de tekst –op strategische plaatsen- linkjes/verwijzingen maken naar de voor jou belangrijkste pagina’s.

‘Boven de vouw’
In de internetwereld heeft ‘boven de vouw’ een eigen betekenis gekregen. Het geeft aan wat een bezoeker op zijn scherm kan zien vóórdat hij moet scrollen om de rest van de informatie te bekijken. Alle informatie, en dus ook de linkjes/verwijzingen boven de vouw, worden beter bekeken dan onder de vouw.

Door de vele verschillende displays op tablets en smartphones is de vouw inmiddels niet meer zo belangrijk als ze vroeger was. Toch is het nog steeds zo dat de informatie én ‘look’ boven de ‘PC-vouw’ (ca 600-800px) bepaalt of de bezoeker op de website blijft en naar beneden scrollt, of wegklikt. Deze keuze wordt binnen 2 seconden gemaakt.

🙂 Persoonlijk vind ik dat als de content in het middenstuk goed is opgebouwd, met de juiste verwijzingen op de juiste plaats- een submenu in de linker- of zelfs rechter sidebar overbodig wordt en onnodig afleidt. 🙁

Last but not least:

“Dan zetten we het toch gewoon op de homepage?”

Voordat zoekmachines intensief werden gebruikt, communiceerde iedereen via URL’s ofwel de domeinnaam. De URL op visitekaartje en ander drukwerk, was eigenlijk de enige manier om ervoor te zorgen dat de website bezocht werd.

De homepage wás ooit de allerbelangrijkste pagina
Want dit was de pagina die de bezoeker als eerste zou zien. Vandaar dat alles wat de webeigenaar te bieden had, op deze pagina werd gezet. Dit leidde dikwijls tot overvolle homepages, die maar moeilijk te begrijpen waren.

Maar dankzij de zoekmachines is de homepage minder belangrijk geworden.  Toch lijkt het er nog steeds op dat als het lastig lijkt om een onderwerp in de navigatie onder te brengen, men hiervoor de homepage gebruikt.  Een gemiste kans, omdat in het meest gunstige geval de bezoekers via één van de vele landingspagina’s binnenkomen.  Of via ‘gewone’ pagina’s die goed gevonden worden door zoekmachines als Google.

NB: In de statistieken die ik bijhoud voor verschillende klanten, zie ik dat de eerste pagina die wordt bezocht, vaak een andere is dan de homepage.

Plaatsing op de homepage kan nog steeds een goed idee zijn, maar de verwijzing naar dat nieuwe product of dienst dient óók teruggevonden te worden in de navigatie. Of m.b.v. een steeds terugkerend linkje in de teksten op je site.  Een bezoeker die verder snuffelt op de site, zal er immers niet aan denken om helemaal terug te gaan naar de homepage.

🙄 Ik hoop dat je dit artikel met interesse hebt gelezen.
En indien je nog vragen, opmerkingen, of aanvullingen hebt…
hoor ik het graag!

Belangrijkste Bronnen facts & figures:
http://www.nngroup.com/articles/
http://www.agconsult.com/nl/usability-blog
http://www.google.nl/intl/nl/analytics/