Het menu of navigatie is het hart van elke website. Bezoekers gebruiken het menu om door de site te navigeren, spiders van zoekmachines gebruiken onder andere het menu om alle pagina’s te indexeren. Hoog tijd dus om de website navigatie aan te pakken en zowel op gebruiksvriendelijkheid, snelheid als zoekmachines en flinke sprong vooruit te gaan.

Zoekoptimalisatie

Techniek

Een menu bouw je best op met lijst tags. Dat is semantisch gezien het meest correcte gebruik. Een menu is niet anders dan een lijstje met links. Bijna alle andere manieren zijn omslachtige pogingen om tijd uit te sparen. Zoekmachines weten ondertussen echt wel hoe een goed menu eruit ziet. Elke blog CMS maakt op de volgende manier een menu:

Snelheid

Afbeeldingen minimaliseren

Optimaliseer je menu om met zo weinig mogelijk afbeeldingen te laden. Elke afbeelding is 1 http aanvraag aan de server (en dus extra laadtijd). Vaak is een menu zo opgebouwd dat dezelfde afbeeldingen keer op keer opnieuw kunnen gebruikt worden. In het geval het een menu is met allemaal aparte menu item afbeeldingen het best te regelen met sprite afbeeldingen.

Zonder afbeeldingen test

Is je menu nog leesbaar zonder afbeeldingen? Zorg voor een alternatief als de afbeeldingen niet (snel genoeg) laden. Zo kan de bezoeker toch al navigeren. Dit kan je doen door met CSS een achtergondkleur te voorzien.

Gebruiksvriendelijkheid

Leesbaarheid

Zorg dat het menu altijd goed leesbaar is. Een menu is zo belangrijk dat aan zichtbaarheid niet mag ingeboet worden. Form follows function. Een menu die puur uit afbeeldingen of flash bestaat, laat bezoekers met een verminderd zicht niet toe om de tekst automatisch te vergroten of voorlezen.

Feedback

Zorg dat de gebruiker voldoende feedback krijgt. Als de bezoeker met een muis over het menu gaat moet er een duidelijke verandering zijn. Feedback is ongelooflijk belangrijk. Laat het een onderstreepte link zijn of een wijziging in kleur, dat kennen mensen al.

Volgorde

Wat webdesigners vaak onderschatten is de volgorde of locatie van de menu items. Het is al langer gekend dat bezoekers bij het scannen van een site van links naar rechts lezen in een F patroon. Zo krijgt linksboven een veel grotere waarde dan rechtsonder. Plaats je product/dienst voorop.

Voorbeeld

Edwin van Usability Vlaanderen maakte gebruik van een menu die er als volgt uitzag:Menu usability vlaanderen

Door het optimaliseren van dit menu en alle bovengenoemde punten te verbeteren krijgen we een menu dat:

  • -Sneller laadt
  • -Zoekmachine vriendelijk is
  • -Meer flexibiliteit biedt
  • -Optimaal gebruikersgericht is

In cijfers geeft dit 92% minder volume aan afbeeldingen, en 55% minder http aanvragen. Alles wordt met andere woorden een flink pakje sneller.

Bekijk de 2 menu’s naast elkaar. De code staat allemaal netjes in de bron:
Origineel menuNieuw menu