Navigatiecrisis? Zo puzzel je de ruggengraat voor je website in elkaar

Zoals dat dan gaat. Je staat op een verjaardagsfeest. Je nichtje werkt als marketing- & communicatiemevrouw bij een commerciële dienstverlener van behoorlijke omvang. Ze is betrokken bij ‘project nieuwe website’ en laat jou – als internetmevrouw – de nieuwe site zien. De eerste knoppen in het hoofdmenu zijn ‘Over ons’ en ‘Nieuws’. “Tja,” mompel je. En je neemt nog maar een hap taart.

Rammelende navigatie

Opvallend vaak kom ik websites tegen die niet goed in elkaar zitten voor wat betreft navigatie. Ook nieuwe websites. Ook websites waar professionele opdrachtgevers en bureaus bij betrokken zijn. Ook websites waar flinke bedragen voor neergeteld zijn. De menubalk verraadt zendergerichte communicatie, je kunt niet vinden wat je zoekt en raakt de weg kwijt.

Terwijl het ontwikkelen van een bezoekersvriendelijke navigatiestructuur helemaal niet zo moeilijk is, mits je bij aanvang van een websitebouwproject zaken gestructureerd aanpakt en een paar dingen in het achterhoofd houdt. In het volgende beschrijf ik een beproefde methode en een paar bekende valkuilen.

Voor de doorgewinterde websitebouwer is deze (of een variant van deze) cardsortingmethode gesneden koek. Omdat ik vaak opdrachtgevers – zoals mijn nichtje – tegenkom die er onbekend mee zijn, schreef ik dit artikel.

De puzzelmethode: cardsorting

De werkwijze die ik hier beschrijf heb ik toegepast op talloze websites: voor éénpittersitejes tot  overheidsgiganten met duizenden pagina’s. Deze methode leidt tot de ruggengraat van de website: het knoppenmenu.

Post-its

Je gaat met een aantal betrokkenen en veel post-its (geeltjes) bij elkaar zitten. Iedereen schrijft alles wat op de website moet op geeltjes op. Eén geeltje per onderwerp. Grote dingen, kleine dingen: maakt niet uit. Ook dingen waar over je twijfelt: gewoon opschrijven. Geen overleg met elkaar, iedereen denkt in dit stadium voor zichzelf. Zo kom je op de meeste ideeën.

A4-tjes

Als iedereen uitgeschreven is, ga je de geeltjes ordenen. Onderwerpen die bij elkaar horen, leg je bij elkaar op tafel. Iedereen legt zijn geeltjes neer. Er ontstaan groepjes geeltjes. Iemand legt ‘telefoonnummer’ en ‘contact’ bij elkaar. De volgende legt er ‘contact & route’ bij. En weer een volgende plakt er ‘noodnummer’ bij.

Als de geeltjes verdeeld zijn, leg je de groepjes op a4-tjes. Elk stapeltje geeltjes krijgt een eigen a4-tje. En elk a4-tje krijgt een naam. Vraag je af hoe deze verzameling onderwerpen heet: ‘producten’, ‘over ons bedrijf’, ‘nieuws en agenda’. Schrijf de namen op de a4-tjes. Dit zijn de werknamen van de menu-knoppen.

Geheid dat er discussie ontstaat. Zeker waar het producten en diensten aangaat. Niet zelden dreigt een dergelijke sessie op een principiële positionerings- of brandingskwestie uit te lopen. Als dat het geval is, verdaag ik die kwestie naar de hei op een later moment. Door simpele vragen als ‘wat hoort bij wat’ en ‘hoe zou een buitenstaander dit noemen’ kom je vaak toch tot een heel pragmatische indeling. En vaak blijkt die zo goed te voldoen dat die principiële hei-sessie nooit gepland wordt.

Verder ontstaan er vragen over of zaken als ‘service’, ‘referenties’: moet dat een apart groepje geeltjes zijn of moeten ze bij ‘producten’ of ‘diensten’ gevoegd worden? Voer de discussies, neem er de tijd voor. Er zijn meestal meerdere oplossingen. Bedenk wel dat de ordening die je als organisatie hanteert, niet noodzakelijk logisch is voor een buitenstaander. Bijvoorbeeld: een universiteit brengt de studie geschiedenis onder bij de faculteit geesteswetenschappen. Voor een middelbare scholier die geschiedenis wil studeren, is dit helemaal niet logisch: die zal zoeken bij opleidingen.

Volgorde

Leg nu de a4-tjes op volgorde van belangrijkheid. Kies hierbij in eerste instantie het perspectief van de bezoeker. Voor welke onderwerpen komen de meeste bezoekers? Welke zaken wil een gebruiker van de website als eerste weten?

Het is een vrij hardnekkig misverstand dat websitegebruikers als eerste komen voor de informatie over de organisatie zelf. Men is geneigd om ‘Over ons’ vooraan in de informatiehiërarchie te plaatsen. Terwijl bezoekers van een website in eerste instantie op zoek zijn naar een product of dienst. Stel dat iemand op zoek is naar rode sneakers. Zo’n gebruiker wil dan eerst weten of de website over schoeisel gaat, of het sportieve schoenen betreft en wat de kosten zijn. Pas in tweede instantie wil zo’n bezoeker misschien iets weten over geschiedenis, team en missie & visie van het bedrijf achter de website.

Meestal ontstaat er een volgorde als deze:

• Vooraan: producten, diensten, de kern van de organisatieactiviteiten.
• Daarna: service, referenties, offerte, werkwijze, cases en dergelijk.
• Vervolgens: dingen als over ons, team, vacatures, partners.
• Tenslotte: nieuws.

Ook hier is niet één goede volgorde. Iedere organisatie weegt voor haar situatie af wat het meest in het oog moet springen. Bijvoorbeeld: er kunnen redenen zijn om vacatures eerder te plaatsen, wanneer je heel moeilijk aan personeel komt. Verder zal het in het ene geval wenselijk zijn ‘service’, ‘referenties’ of ‘cases’ niet als aparte a4 op te nemen, maar om ze als geeltjes bij ‘producten’ of ‘diensten’ te plaatsen. Of in het andere geval ‘team’ en ‘vacatures’ als geeltjes op het a4-tje ‘over ons’ te plakken.

Het al dan niet benoemen van a4-tjes voor onderwerpen in afhankelijk van de nadruk die je op onderwerpen wilt leggen en de hoeveelheid ruimte die je hebt. Als je de a4-tjes op volgorde hebt liggen, beginnen de menu-knoppen van de website zich af te tekenen. Echter, er is nog ruimte genoeg om te schuiven.

Als het goed is, ligt er nu een hele rij a4-tjes met namen op een rij. Links de onderwerpen die voor de meeste websitebezoekers het meest belangrijk zullen zijn, rechts de – relatief – minder belangrijke onderwerpen.

Conventies

Omdat websites gebruiksvoorwerpen zijn, is het handig om ze zo te bouwen dat ze voldoen aan verwachtingen van de meeste gebruikers. Dat scheelt zoeken en ergernis. Bezoekers verwachten belangrijke onderwerpen in de hoofdnavigatie – daarover straks meer – maar er zijn ook knoppen/onderwerpen die hun eigen positie hebben.

De meeste websites hebben een knop ‘home’ en een knop ‘contact’. Het is gebruikelijk om de homeknop als eerste navigatieknop en de contactknop als laatste te plaatsten. ‘Zoeken’, ‘inloggen’ en de vreemde-talen-vlaggetjes vind je vaak rechtsboven op de website. Ze staan meestal een beetje los van de rest van de knoppen. Ook juridische knoppen als ‘disclaimer’ of ‘algemene voorwaarden’ staan meestal los van de overige knoppen. We plaatsen ze vaak in de footer van de website.

Hoofdnavigatie en utilities

In de hoofdknoppenrij, de hoofdnavigatie van een website, kun je tussen de vijf en acht knoppen kwijt. Een beetje minder of meer kan ook, maar echt lekker wordt dat nooit. Meestal bevindt de hoofdnavigatie zich in de header en is op elke pagina van de website hetzelfde. Soms heeft een website de hoofdnavigatie links.

Een hoofdnavigatie begint in dit geval met home en eindigt met contact. De rest van de knoppen staat daar tussen op volgorde van belangrijkheid voor de bezoeker.

Als je meer dan acht knoppen hebt, kun je gebruik maken van zogenaamde ‘utilities’. Je verhuist dan de algemene knoppen als ‘home’ en ‘contact’ naar de rechterbovenhoek van de website. De onderwerpen die aan de rechterkant van de a4-tjesrij liggen komen dan ook in de utilities terecht.

Het is altijd even puzzelen. Welke knoppen verhuizen we naar boven en welke houden we in de hoofdnavigatie? En welke onderwerpen krijgen een eigen knop en wat brengen we toch onder bij een andere knop in de subnavigatie? Zoals gezegd moet je in de hoofdnavigatie echt niet meer dan acht knoppen plaatsen, zeven of zes is eigenlijk beter. In de utilities kun je zomaar nog vijf of zes knoppen kwijt. In de praktijk blijk je er altijd wel uit te komen.

Op een flipover of whiteboard kun je aan het einde van deze sessie een opzet van je websitenavigatie maken. Deze kun je pagina voor pagina verder uitwerken tot compleet interaction-design.

Valkuilen

Wekelijks begeleid ik dergelijke sessies. En wekelijks denk ik over sommige dingen ‘daar hebben we die weer’. Er zijn een paar bekende valkuilen.

Onbeduidende knopnamen

Omdat je een hele organisatie of bedrijf in een knoppenrij kwijt moet, ligt het gevaar van te algemene knopnamen op de loer. Met name waar het gaat over producten en diensten. Wat is er makkelijker dan een knop ‘producten’ om daaronder in de subnavigatie uit te makken op het gehele productcatalogus? Het scheelt lekker veel ruimte in je hoofdnavigatie. Nadeel is dat je niet meteen voor de dag kunt komen met wat je als bedrijf doet.

Als het even kan, noem je de producten en diensten bij naam of duid je ze als categorie en maak je gebruik van de utilities. De sneakerzoekende websitegebruiker weet in het tweede geval meteen dat hij goed zit.

Dan zetten we het toch op de homepage?

Als het lastig lijkt om een onderwerp in de navigatie onder te brengen of als iets als heel belangrijk ervaren wordt, is men wel geneigd om zo’n onderwerp op de homepage te plaatsen. Op de homepage plaatsen kan een goed idee zijn, maar alle onderwerpen die je op een website zet, moet je ook in de (sub)navigatie onderbrengen. De reden daarvoor is dat bezoekers zo’n onderwerp ook via de navigatie zullen zoeken als ze eenmaal in de website zijn.

Stel dat je vacatures graag onder de aandacht van je websitegebruikers wilt brengen. Dan lijkt het een geweldig idee om ze loeigroot op de homepage te plaatsen. Dat is ook zo, maar een geïnteresseerde sollicitant snuffelt misschien wat rond op de website voor hij daadwerkelijk solliciteert. Hij zal de vacatures in de navigatie zoeken, als eigen knop of bij ‘over ons’. De sollicitant komt als hij eenmaal in de website is niet op het idee om voor de vacatures helemaal terug te gaan naar de homepage.

Doelgroepbenadering

Een knoppenmenu inrichten op doelgroep lijkt heel gebruikersvriendelijk, je denkt immers in doelgroepen. Echter, wanneer voor een gebruiker niet zonneklaar is welke doelgroep hij is, vermoei je hem met een lastige keuze. Welke knop zou een 20-jarige werkende moeder in onderstaand voorbeeld kiezen?

Een doelgroepbenadering moet je dus alleen kiezen als het voor de bezoeker helder is waar hij bij hoort. En daarbij: als de informatie op dat deel van de website ook specifiek voor die doelgroep is. Als de informatie voor meerdere doelgroepen van belang is, moet je onder alle doelgroepknoppen dezelfde informatie plaatsen. Dat is veel werk en geeft doublures op de website. Ester Toffoletto schreef over dit onderwerp een goed artikel: ‘Wel of geen doelgroep-ingang op je website?‘.

Het past nooit!

Een heel bedrijf in een paar knoppen vatten: het lijkt soms een onmogelijke taak. Met slim puzzelen op hoofdniveau, twee of drie navigatielagen en soms een vierde lukt het vrijwel altijd. Voor gigantisch grote websites zijn er andere oplossingen. Rijksoverheden, gemeentes en universiteiten kiezen andere wegen, lees er meer over bij Paul Boag: Navigation For Mega-Sites.

De kofferbaktest

Doe tot slot de volgende denkbeeldige test (bedacht door Steve Krug in zijn boek ‘Don’t make me think’): iemand stopt je in een kofferbak van een auto, rijd je naar een uithoek van de website en haalt je er weer uit. Kun je dan zonder problemen je weg op de website vinden? Wanneer je bij het opbouwen van een knoppenmenu zoals hierboven te werk gaat en je de vuilkuilen een beetje omzeilt, slaagt de website voor de kofferbaktest. Zeker weten.

Dit artikel draag ik van harte op aan mijn marketingcommunicatiemevrouwnichtje. Bovendien heb ik haar na het doorslikken van die hap taart hulp aangeboden: de website van de commerciële dienstverlener gaan we repareren.

Meer lezen? Deze interessante case van Lonneke van Theelen en Niels van Midden over o.a. de navigatiestructuur van een responsive intranet is een aanrader.

Illustraties in artikel met dank aan Andre van Iterson.