Hoe bouw je een goede navigatie?

Door Quinten van Geest, 24 oktober 2009

Vraag je het volgende eens af: Wat is een website zonder navigatie? Het antwoord mag duidelijk zijn; helemaal niets. Aangezien (bijna) alle websites meerdere pagina’s bevatten, moeten deze goed bereikbaar zijn. Wanneer dit niet het geval is, zullen mensen niet kunnen vinden waar ze naar op zoek zijn. Dit kost bezoekers en eventueel omzet.

Vandaar dat ik in dit artikel tips ga geven over het maken van een goede navigatie. Ik zal een aantal verschillende aspecten behandelen die meteen toepasbaar zijn in de praktijk.

Primaire en secundaire navigatie

Elke (goede) website bevat een primaire navigatie (een hoofdmenu). De primaire navigatie is, zoals de naam al doet vermoeden, de basis navigatie van je website. Via deze navigatie kan je elke pagina bereiken die er is. Denk bijvoorbeeld aan de homepage, de productenpagina, de ‘over ons’ pagina, de contactpagina enz.

De secundaire navigatie is eigenlijk een submenu. Via de secundaire navigatie kan je bij specifieke pagina’s terechtkomen. Denk bijvoorbeeld aan een pagina over de medewerkers van een bedrijf. Dit soort specifieke pagina’s zijn vaak te bereiken via het hoofdmenu-item ‘over ons’ en submenu-item ‘ons team’. De secundaire navigatie is dus een aanvulling op de primaire navigatie.

Het is uiteraard niet altijd nodig om naast de primaire navigatie ook een secundaire navigatie te hebben. De hoeveelheid informatiebepaalt de behoefte naar een secundaire navigatie.

Informatiestructuur

Voordat je begint met het maken van een website (en dus ook de navigatie) moet je bepalen wat er allemaal op de website moet komen. Zoals hierboven staat, hebben websites met een grote hoeveelheid informatie behoefte aan een secundaire navigatie. De reden hiervan is overzichtelijkheid en structuur. Wij, als menszijnde, vinden dit erg prettig.

Als we uitgaan van een grote website met veel informatie, moeten we de content gaan indelen in bepaalde hoofdcategorieën. De hoofdcategorieën moeten worden weergegeven in de primaire navigatie. Twee belangrijke punten:

  • De benaming van een hoofdcategorie in de primaire navigatie moet representatief zijn voor de onderliggende pagina’s;
  • De onderliggende pagina’s moeten ook daadwerkelijk allemaal in dezelfde hoofdcategorie thuishoren.

De beste manier om een degelijke informatiestructuur op te bouwen, is door een ‘cardsorting test’ te doen. Kort gezegd komt het hier op neer: je laat een aantal mensen de verschillende onderwerpen (die op kaartjes staan) indelen in van te voren vast gestelde hoofdcategorieën, of je laat een aantal mensen zelf hoofdcategorieën bij bepaalde onderwerpen verzinnen.

Deze manier van testen is zeer eenvoudig, goedkoop en levert belangrijke informatie: je komt te weten hoe andere mensen denken. Met deze kennis kan je dus inspelen op de verwachtingen van je bezoekers.

Visuele weergave

Wanneer je een erg uitgebreide informatiestructuur hebt, kan je ervoor kiezen om deze te visualiseren. Maak bijvoorbeeld een hiërarchische boomstructuur waarin je alle pagina’s neerzet. Hoofdcategorieën staan uiteraard bovenaan en subcategorieën eronder. Je kan dan meteen de onderlinge links tussen pagina’s weergeven door middel van verbindingslijnen. Zie hiernaast een simpel voorbeeld van een hiërarchische boomstructuur.boomstructuur

Plaatsing navigatie

Nadat je de informatiestructuur van de website hebt bepaald, moet je dit gaan verwerken in de website. Het belangrijkste is de plaatsing van het hoofdmenu en / of submenu.

Wij zijn gewend om het hoofdmenu bovenaan de pagina te vinden. Vaak staan de menu-items horizontaal weergegeven en rechts van (of onder) het logo. Neem als voorbeeld de site van Apple:

apple

Een andere manier is een verticaal hoofdmenu. Je zet dan de menu-items onder elkaar aan de linkerkant van de website, aangezien wij van links naar rechts lezen. De website van Shell bevat een verticaal hoofdmenu:

shell

Naast de primaire navigatie moet je uiteraard ook je secundaire navigatie ergens kwijt. Bij grote sites zie je veelal een verticaal submenu aan de linkerkant van de website. Zoals hierboven al is vermeld, lezen wij van links naar rechts (en bekijken wij websites dus ook van links naar rechts). Dit zorgt ervoor dat de navigatie meteen in het oog springt. Zie de website van BP:

bp

Je kan ook kiezen voor een horizontaal submenu onder het horizontale hoofdmenu. Dit wordt bijvoorbeeld toegepast op de site van de Rabobank:

rabobank

 Met deze verwachtingspatronen zul je rekening moeten houden (indien je een gebruiksvriendelijke website wilt). Wanneer men namelijk iets vindt waar men het verwacht, voldoe je aan het verwachtingspatroon. Dit heeft een positieve invloed op de ervaring van de gebruiker tijdens het bezoeken van je website. De bezoekers zijn dan meer tevreden (of minder gefrustreerd).

Volgorde van navigatie-items

De navigatie-items (vooral van een submenu) kan je op veel verschillende volgorden weergeven. Het kan alfabetisch, maar ook op volgorde van belangrijkheid. Kortom: er is niet echt een duidelijke ‘regel’ die bepaalt wat je moet doen.

De, naar mijn mening, enige consensus die er bestaat, is over de plaatsing van menu-items ‘home’, ‘contact’ en ‘over ons’ in de primaire navigatie. Meestal kom je ze op deze posities tegen:

  • ‘Home’ is het eerste item;
  • ‘Contact’ is het laatste item;
  • ‘Over ons’ is meestal het tweede item (indien van toepassing).

Vooral aan de posities van de items ‘home’ en ‘contact’ is men min of meer gewend. Daarnaast is het gebruikelijk dat ook het logo naar de homepage linkt.

Conclusie

Wanneer we alles onder elkaar zetten, krijg je deze lijst met tips en advies:

  • Maak een informatiestructuur met hoofdcategorieën, waarin je bepaalde onderwerpen kan onderverdelen;
  • Zorg dat de benaming van hoofdcategorieën duidelijk en inhoudelijk representatief zijn;
  • Maak eventueel een visualisatie van de informatiestructuur;
  • Zorg ervoor dat je de primaire en secundaire navigatie plaatst op plekken waar men ze verwacht;
  • Houd rekening met de volgorde van de navigatie-items: in de primaire navigatie is het gebruikelijk om ‘Home’ en ‘Contact’ respectievelijk als eerst en als laatst te plaatsen;
  • Link het logo naar de homepage.

Hopelijk hebben jullie wat aan de tips. Als je zelf nog andere tips hebt, hoor ik het graag!



Tags: ,
Geplaatst in: Usability, Webdesign | 4 Reacties »

  1. Edwin :

    Het is niet omdat véél websites, zo niet de meeste, die ‘Over Ons’ link op de 2de plek zetten, dat het effectief de beste plaats is.

    Mensen komen doorgaans niet naar een site met als doel ‘ik wil iets over de geschiedenis van dat bedrijf te weten komen’.

    Neen, die zoeken een antwoord op een probleem, die willen misschien eens lachen of verontwaardigd zijn of bepaalde functionaliteit gebruiken (bv. een Euro naar Dollar convertor gebruiken).

    Pas als die verwachting is ingelost, dan willen sommigen wel eens kijken naar “who’s behind”.

    ‘Over Ons’ is geen primaire taak, het is zelfs geen secondaire taak, geef dat dan ook niet de op één na hoogste prioriteit in je menu structuur.

    Als de marketinglui meewillen dan zet ik de ‘Over Ons’ link onderaan in een footer menu. Klikken de mensen er dan minder op? Absoluut, maar da’s niet belangrijk. Degene die het écht wil lezen, die vindt dat menu wel.

    Als ze niet meewillen, zet het dan achteraan, nét voor het Contactinfo menu item.

  2. Hoi Edwin,

    Heb eerst weer even het artikel moeten lezen, want het is vrij oud :-)

    Ben wat kort door de bocht gegaan over dat onderdeel (de volgorde). Het soort website bepaalt de navigatie. In dit geval ben ik teveel uitgegaan van een zakelijke website die zichzelf ‘verkoopt’ en niet een product (denk aan een portfolio website). Hier komt de bezoeker om te kijken of er een eventuele ‘klik’ is om samen een project op te starten en zal dus in veel gevallen de persoon achter het bedrijf willen kennen. Dit schept vertrouwen en is in mijn ogen dan wel degelijk een secundaire taak.

    Bij een simpele applicatie die ‘gewoon gebruikt’ wordt door bezoekers, is het inderdaad niet van belang (zeker als het gratis is). Ik denk dat wanneer mensen daadwerkelijk iets aanschaffen, een deel hiervan graag iets leest / meer informatie wil over het bedrijf (voordat ze geld overmaken). Waarschijnlijk ken je het al, maar dit is wel een interessant artikel over het indelen van mensen (bezoekers) op basis van MBTI (snel/langzaam en emotie/ratio):

    http://www.frankwatching.com/archive/2009/04/01/hoe-personas-en-user-stories-bijdragen-aan-een-succesvol-designproces/

    En bedankt voor je tip ;-)

  3. Edwin :

    Quinten,

    Ik ken het MBTI verhaal van Raymond, één van mijn eerste artikelen op mijn weblog was een korte samenvatting van zijn visie.

    Dat vertrouwen wordt nog veel meer geschept door de experience, door de content en door de usability van je website.

    Als dat allemaal acceptabel is, dan vertrouwen de meeste mensen dat bedrijf wel. Een ‘Over Ons’ afdeling voegt daar weinig aan toe.

    Als een website er 90ties uitziet, foutieve content heeft, belachelijke prijzen gebruikt (te duur of te hoog) en een slechte usability bezit dan gaat je ‘Over Ons’ verhaal je niet redden.

    Zie Ook:
    Praat eens wat minder ‘Over mij’ op je website

  4. Een auto zonder wielen rijdt inderdaad niet. Maw: natuurlijk moet de website compleet en in orde zijn (ook qua looks) om enig vertrouwen te scheppen. Mijn inziens levert een informatieve pagina over het bedrijf zelf een positieve bijdrage aan dit vertrouwen.

    Nogmaals: prioriteit van dit onderdeel is afhankelijk van het soort website.


Laat een reactie achter