Home » Artikelen » Navigatie ontwerp met card-sorting

Navigatie ontwerp met card-sorting

Geplaatst op 26-03-2006 in Usability

Een logische navigate heeft misschien wel de grootste invloed op de usability van een website. Zeker wanneer uw website uit verscheidene lagen bestaat is het van belang goed na te denken over de structuur van de website.

Stap 1 – Content verzamelen

In de eerste plaats is het van belang inzichtelijk te maken welke onderwerpen op de website moeten komen te staan. Ga bij verschillende mensen uit uw bedrijf langs om te vragen of zij nog zaken op de website kwijt willen. Te denken valt aan de HR afdeling i.v.m. vacatures of de afdeling Sales die de laatste aanbiedingen op de website wil zetten. Ga na of u 1 pagina wilt voor adres, contactformulier en routebeschrijving, of dat u dit verspreidt over 3 pagina's. Schrijf alle onderwerpen op. Komt u niet verder dan 8 onderwerpen? Dan is het een kort proces, ga verder met stap 7.

Stap 2 – Kaarten maken

Maak voldoende kaartjes (kunnen ook post-it's zijn) om alle onderwerpen op te kunnen schrijven. Houd daarnaast ook nog een kwart van het totaal aantal onderwerpen aan blanco kaartjes bij de hand. Maak ook een kaartje voor “Home”. Zaken zoals “sitemap” en “zoeken” vormen geen onderdeel van de navigatiestructuur, maar zijn onderdeel van de lay-out, ze hoeven daarom niet op kaarten geschreven te worden.

Stap 3 - Niveau's bepalen

Uit ervaring blijkt dat bezoekers niet eindeloos veel niveau's diep doorklikken. We hebben daarom de volgende tabel opgesteld, waarbij het aantal bezoekers dat de homepage bezoekt als 100% is genomen.

Pagina
Voorbeeld onderwerp
Percentage bezoekers
Voorbeeld berekening pageviews
  • Homepage
Home
100%
400 views
  • 2de hoofdmenu-item
Over ons
45%
180 views
  •  
    • Sub-menu-item1
Visie&missie
15%
60 views
  •  
    •  
      • Sub-sub-menu-item2
Visie
7%
28 views
  • 3de hoofdmenu-item
Producten
45%
180 views
  •  
    • Sub-menu-item3
CMS
15%
60 views

Uit de tabel wordt duidelijk dat je de inhoud van de website niet te ver weg moet stoppen. Natuurlijk zijn de getallen te beinvloeden, bijvoorbeeld door links naar de subpagina's direct op de homepage te zetten. Het is daarom van belang te bepalen hoeveel niveau's noodzakelijk zijn. Idealiter bestaat het hoofdmenu uit 5 tot 8 items, de sub-menu's uit 3 tot 8 items. Niet ieder hoofdmenu item hoeft natuurlijk een submenu te hebben. Bevat uw website meer dan 10 onderwerpen/pagina's, dan zit u al snel aan 2 niveau's. Bij meer dan 25 pagina's zijn vaak al 3 niveau's nodig.

Stap 4 – Kaarten groeperen

Leg nu steeds alle kaarten bij elkaar die onder één hoofdonderwerp te groeperen zijn. Idealiter zijn dit groepen kaarten van 3 tot 7 stuks. Hou hierbij in gedachte dat de ideale pagina-lengte iets meer dan één A4 is. Onderwerpen die veel meer pagina's nodig hebben kan je dan beter opsplitsen naar sub-onderwerpen en hele korte onderwerpen zijn vaak samen te voegen met een ander onderwerp.

Stap 5 – Groepen labellen

Voor ieder groepje kaarten moet een dekkende naam bedacht worden. Deze stap is erg belangrijk vanuit usability oogpunt. Probeer vanuit de bezoeker te denken, deze weet niet wie jullie zijn, wat jullie doen en wat jullie onderscheidt van de concurrentie. Zorg er dus voor dat het geheel ook voor buitenstaanders logisch in elkaar steekt. De beste manier om dit te testen is natuurlijk heel simpel: leg de gevormde groepen met labels voor aan een buitenstaander.

Stap 6 – Groepen tellen

Tel het aantal groepen, zijn dit er meer dan 8, inclusief “Home” en “Contact”, dan is het zaak de groepen nogmaals in groepen in te delen, waardoor er een niveau bij komt. Ga terug naar stap 4 en groepeer de huidige groepen. Blijven er te weinig groepen over, kijk dan of je een sub-groep kunt promoveren tot een hoger niveau.

Stap 7 - Groepen ordenen

Laatste stap is het ordenen van alle groepen. Vaak is hier al snel logica in te herkennen, bijvoorbeeld de stappen in een proces. Houd voor het hoofdmenu in ieder geval het volgende aan: Begin met “Home”. “Over ons” of andere informatie over uw bedrijf zelf staan direct na “Home”. De “Contact” button staat altijd achteraan het menu. Het hoofdmenu is niet geordend op belangrijkheid, maar voornamelijk op het verwachtingspatroon van de bezoeker.

En nu komt het échte werk

Nadat de structuur van de website inzichtelijk is gemaakt, is het verstandig deze in Visio uit te werken, zodat het voor iedereen duidelijk is hoe de website eruit zal zien. Aan de hand hiervan kunnen de teksten geschreven worden. Wanneer er door verschillende mensen teksten geschreven worden, spreek dan af welke stijl gehanteerd wordt. Stel het schrijven van teskten niet uit! Het grootste deel van vertraging op webprojecten wordt veroorzaakt door te laat aangeleverde teksten.


« Terug naar Usability