Wanneer een hamburgermenu wél werkt
Een hamburgermenu verbergt de navigatie achter drie streepjes, zodat de rest van het scherm vrij blijft voor de inhoud. Voor een advieskantoor met een overzichtelijke site, zeg vijf tot acht pagina's, werkt dat prima. Bezoekers die oriënteren, bijvoorbeeld op zoek naar het team of de diensten, tikken het menu open en vinden binnen een paar seconden waar ze moeten zijn. Het probleem ontstaat pas zodra de meest gevraagde actie, zoals bellen of een aanvraag starten, ook achter dat pictogram verdwijnt.
Een bezoeker die met haast naar je telefoonnummer zoekt, wil dat nummer zien. Niet ernaar zoeken. Zet je dat contactgegeven binnen het hamburgermenu, dan kost elke extra tik je bezoekers die je liever meteen aan de lijn had. Het menu is voor navigatie. Niet voor de acties waar je site om draait.
Het pictogram zelf verdient ook aandacht. Drie streepjes zonder tekst herkent een bezoeker inmiddels wel, maar het woord "Menu" ernaast helpt vooral oudere bezoekers die het icoon niet dagelijks tegenkomen. Een klein label kost nauwelijks ruimte en voorkomt dat iemand het pictogram over het hoofd ziet of aanziet voor iets anders, zoals een instellingenknop.
Wanneer een zichtbare balk beter werkt
Draait je site vooral om een paar kernacties, zoals een offerte aanvragen, een kennismaking plannen of bellen, dan werkt een vaste balk onderaan het scherm vaak beter dan een verborgen menu. Die balk blijft in beeld terwijl een bezoeker scrolt, zonder dat hij ergens naar hoeft te zoeken. Voor hypotheekadviseurs en verzekeringskantoren, waar één telefoontje vaak het verschil maakt tussen een lead en een gemiste kans, is dat een klein verschil met een direct effect op de aanvragen die binnenkomen. Wij schreven eerder over wat een mobielvriendelijke website voor hypotheekadviseurs verder nog vraagt, van laadtijd tot leesbaarheid.
Twee of drie knoppen in die balk is genoeg: bellen, een aanvraag starten en eventueel een kennismaking plannen. Meer opties erin proppen maakt de balk net zo onoverzichtelijk als het menu dat hij moest vervangen. Kies liever te weinig knoppen dan te veel, en laat de rest van de navigatie gewoon in het hamburgermenu staan.
Veelgemaakte fouten in de indeling
De meest voorkomende fout is een menu met te veel items. Zeven opties is een praktisch maximum voordat een bezoeker het overzicht verliest. Heeft je kantoor meer pagina's, groepeer ze dan onder een paar heldere hoofdcategorieën in plaats van alles los op te sommen. Een tweede fout is vage labels zoals "Meer" of "Overig": een bezoeker moet raden wat erachter zit voordat hij erop klikt, en dat gokken kost precies dat ene tikje te veel. Noem het kind bij de naam. "Hypotheekadvies" werkt beter dan "Diensten", ook als dat betekent dat het menu iets langer wordt.
De knoptekst binnen het menu verdient net zoveel aandacht als de items zelf. "Klik hier" of "Meer info" zegt niets over wat een bezoeker te wachten staat, terwijl knoptekst die wél werkt een bezoeker meteen vertelt wat er gebeurt na de klik. Een laatste valkuil is het menu alleen testen op een laptop. De volgorde en grootte van items zien er op een groot scherm heel anders uit dan op een telefoon in een hand, waar een duim en geen muisaanwijzer bepaalt of iets makkelijk te raken is.
Open je eigen site op je telefoon, buiten kantoor, met gewoon mobiel internet. Probeer binnen tien seconden bij de dienstenpagina te komen die voor jouw kantoor het belangrijkst is. Lukt dat niet zonder nadenken, dan is de indeling van het menu toe aan een herziening, ongeacht hoe modern de site er verder uitziet.
Vraag er gerust iemand anders bij, iemand die je site nog nooit heeft gezien. Zelf vind je je eigen menu altijd logisch, simpelweg omdat je precies weet waar alles staat. Een collega, een klant of je partner die er voor het eerst doorheen klikt, struikelt sneller over dezelfde punten waar straks ook een onbekende bezoeker over struikelt.
Bij Contaqt Website bouwen we navigatie die op elk scherm werkt, van het hamburgermenu tot de knoppen die er het meest toe doen.
Samengevat
- Een hamburgermenu werkt goed bij een klein aantal pagina's die vooral oriënterende bezoekers gebruiken.
- Bij een paar kernacties, zoals bellen of een aanvraag starten, werkt een zichtbare balk onderaan het scherm beter dan een verborgen menu.
- Verstop nooit de belangrijkste knop van je site, zoals "Plan een kennismaking", achter het hamburgerpictogram.
- Een menu met meer dan zeven opties verliest zijn overzicht, ook al past het technisch onder één icoon.
- Vage labels zoals "Meer" of "Diensten" laten bezoekers gokken naar wat erachter zit.
- Test het menu altijd op een echt telefoonscherm, niet alleen op de desktop-preview van je browser.