Websitenavigatie: denk na over plaatsing, weergavestijl en interactie

De meeste websites hebben een informatiestructuur van meer dan één niveau diep. Er kan veel tijd gaan zitten in het ontwerpen van een gebruikersvriendelijke informatiearchitectuur, zoals bijvoorbeeld een TU Delft-casus bewijst. Daarentegen worden keuzes over de plaatsing, stijl en interactie van de navigatiecomponenten lang niet altijd weloverwogen en met usability in het achterhoofd genomen. Vaak spelen vooral huisstijl en logo, trends en persoonlijke voorkeuren van interactieontwerper, grafisch vormgever en/of opdrachtgever mee in de afweging.

Op de Usability Week 2009 afgelopen mei vertelde Garrett Goldfield welke afwegingen je moet maken bij het kiezen van navigatiecomponenten voor je website. Hierbij zijn tips – en een aantal van mij – voor het ontwerpen van de globale en lokale sitenavigatie.

Wat zijn globale en lokale navigatie?

Kort gezegd is de globale navigatie het hoofdmenu van een website. Je kunt ermee naar de hoofdonderdelen van de website navigeren. Als het goed is kun je de globale navigatie op iedere pagina op dezelfde plaats terugvinden. Zo kun je vanaf iedere willekeurige pagina altijd direct naar alle hoofdonderdelen toe.

De globale navigatie van Rijkswaterstaat

De lokale navigatie is de navigatie binnen een hoofdonderdeel, vaak submenu genoemd. Vaak geeft de lokale navigatie toegang tot pagina’s op meerdere niveaus.

De lokale navigatie van Rijkswaterstaat

Nieuwe bezoekers van een website zijn meestal eerst gefixeerd op de globale navigatie. Zodra ze een beetje gewend zijn aan de site en de globale navigatie, gaan ze meer focussen op de lokale navigatie. Het is dus belangrijk aan beide aandacht te besteden.

Selectie-facetten voor een navigatiesysteem

Waarover moet je als ontwerper nadenken als het gaat om websitenavigatie? Natuurlijk over de structuur en labeling, oftewel de informatiearchitectuur. Maar ik wil nu vooral ingaan op het interactieontwerp van een navigatiesysteem. We komen dagelijks diverse navigatievormen tegen op alle websites die we gebruiken: een menubalk, uitklapmenu, ‘mega-dropdown’, accordion, tagcloud, enzovoorts. Maar hoe bepaal je welke het meest geschikt is voor de website waar je aan werkt?

Goldfield noemt 3 zaken waar je op moet letten bij de keuze voor een navigatieoplossing: plaatsing, weergavestijl en interactie.

Plaatsing

Bestaat er een ideale plaatsing voor globale en lokale navigatie? In zekere zin wel. Mensen raken snel gewend aan bepaalde conventies. Bijvoorbeeld dat het logo altijd links bovenaan de pagina staat, dat de metanavigatie (‘Contact’, ‘Sitemap’, e.d.) en de zoekfunctie meestal rechts bovenin staan, en dat banners vaak aan de rechterkant staan.

Globale navigatie verwacht men over het algemeen als horizontale menubalk bovenin, of als verticaal menu aan de linkerkant. Lokale navigatie wordt door de meeste mensen aan de linkerkant verwacht. Dit blijkt volgens Goldfield uit eyetracking studies.

Ideale plaatsing van navigatiecomponenten, gebaseerd op eyetracking studies

Of de rechterbalk ‘ideaal’ is voor contextuele navigatie (zoals de afbeelding suggereert), mag je vraagtekens bij plaatsen. In veel usability tests, ook in mijn eigen ervaring, wordt content in de rechterbalk vaak slecht opgemerkt.

Betekent het ‘ideaalplaatje’ dat je navigatie nooit rechts of onderaan mag plaatsen? Nee, onder bepaalde voorwaarden kan navigatie rechts of onderin best werken. Een menu aan de rechterkant zal wel pas opvallen als er aan de linkerkant geen menu staat (zie bv. de website van Universiteit Leiden), of als de linkernavigatie zichtbaar ondergeschikt is (bv. filters) aan het menu rechts. Een hoofdmenu aan de onderkant kan werken als de pagina’s geheel op het scherm passen (en er dus niet gescrolld hoeft te worden).

Universiteit Leiden heeft de lokale navigatie aan de rechterkant

Navigatie onderaan die steeds gebruikelijker wordt, zijn bijvoorbeeld metanavigatie en (globale) sitemaps. Bekende voorbeelden hiervan zijn Apple en Amazon.

De footer van Apple bevat contextuele navigatie (in dit geval m.b.t. iPhone)

Weergavestijl

Wat zijn de sterkten en zwakten van een bepaalde weergavestijl? Laten we eens kijken naar een viertal stijlen: 2 conventionele – het horizontale en het verticale menu – en 2 specifiekere – de accordeon en de carrousel/filmstrip.

Horizontaal menu

Gewoon een rij hyperlinks, weergegeven als knoppen, tabs, of gewoon als links. Plaatsing: bijna altijd bovenin de pagina.

Rabobank gebruikt een horizontale menubalk

Sterkten	Zwakten	Aanbevelingen
Heel veel toegepast voor globale navigatie, dus conventioneel en intuïtief. Geschikt om grotere letters in te gebruiken, dus meer te laten opvallen als hoofdnavigatie. Eenvoudig te bedienen.	Slechts ruimte voor een aantal items, nauwelijks ruimte voor uitbreiding (2e rij hoofdingangen is zelden goed). Om ruimte te besparen, worden labels vaak ingekort met als risico dat de labels minder duidelijk worden. Als de labels op elkaar gepropt moeten worden om het te laten passen, kan het onduidelijk worden waar het ene item stopt en het andere begint. Geschikt voor max. 2 niveaus: onder de rij hoofdingangen kan een rij met de onderliggende laag gepresenteerd worden. Met name geschikt voor globale navigatie, veel minder geschikt voor lokale navigatie.	Ideaal voor compacte, stabiele navigatie (dus weinig items en geen/weinig uitbreiding). Als je labels moet inkorten: Test of de labels nog intuïtief genoeg zijn.

Verticaal menu

Zelfde als het horizontale menu, alleen met de links onder elkaar, en meestal weergegeven als hyperlinks (al dan niet gescheiden door streepjes), niet als knoppen of tabs.

Het verticale menu van stichting Drempelvrij.nl

Sterkten	Zwakten	Aanbevelingen
Heel veel toegepast voor globale navigatie, dus conventioneel en intuïtief. Geschikt om veel items in te plaatsen. Items staan dichter bij elkaar, wat het vergelijken van de items eenvoudiger maakt. Geschikt om meerdere niveaus mee te ontsluiten. Geschikt voor zowel globale als lokale navigatie.	Items kunnen verticaal verschuiven doordat een item erboven is uitgeschoven, wat sommigen kan verwarren (“het was toch tweede link van boven?”). De verleiding om hele lange menu’s te maken, met als mogelijke risico’s: minder overzichtelijk, overlappende categorieën, minder toegankelijk. De verleiding om hele diepe menu’s te maken, waardoor het menu 4-5 keer inspringt en de context van de huidige pagina onduidelijk wordt. Gaat ten koste van de beschikbare breedte voor de content.	Altijd links uitlijnen, anders krijg je een probleem met het inspringen van het onderliggende niveau. Probeer labels altijd op 1 regel te laten passen. Vermijd het opofferen van contentruimte omwille van lange navigatielabels.

Accordeon

Bij een accordeon-stijl menu schuift het item uit als je er met de muis op gaat staan. Beweeg je de muis naar het volgende item, dan klapt dat item uit en het vorige weer in. Vandaar de naam accordeon.

De Amerikaanse Commonwealth Connector gebruikt een accordeon voor de doelgroepingangen.

Sterkten	Zwakten	Aanbevelingen
Laat meer over het item zien voordat de bezoeker doorklikt naar het item. Slimme manier om meer informatie op te nemen zonder dat het de lengte van de pagina erg beïnvloedt.	Verkeerde implementatie: openklappen duurt te lang of werkt niet op alle elementen waarvan de bezoeker verwacht dat die klikbaar zijn (bv. plus-icoon of het label zelf). Niet geschikt als de toelichting die door de accordeon verstopt wordt, nodig is om de gebruiker te triggeren de link te bekijken.	Gebruik het niet als enige navigatie. Overweeg het als je ruimte te kort komt om aan iedere link voldoende ‘feed-forward’ (indicatie van achterliggende content) mee te geven.

Carrousel of Filmstrip

Stel je wilt een rij items presenteren, maar je wilt er meer tonen dan waarvoor ruimte is op de pagina. Dan is een carrousel of filmstrip wellicht een goede oplossing. De bezoeker kan dan naar links en rechts bewegen in de rij om de andere items te bekijken. Het enige verschil tussen de carrousel en de filmstrip is dat de carrousel rond is (dus geen begin en einde heeft) en de filmstrip een lange strook is. Sommige carrousels draaien automatisch al langzaam rond.

Bij Disney draait een carrousel rond met Disney-karakters

Apple gebruikt een filmstrip om zijn producten te etaleren.

Een bekend soort carrousel/filmstrip is de ‘coverflow’.

Sterkten	Zwakten	Aanbevelingen
Je kunt meer items tegelijk presenteren. Het is nog steeds betrekkelijk nieuw en wordt vaak positief ontvangen. Het nodigt uit om door te bladeren. Is vooral handig als aanvullende navigatie.	Verkeerd ontwerp: mensen zien niet dat er meer items zijn en dat ze er doorheen kunnen bladeren. Verkeerd ontwerp: plaatjes zijn te klein, waardoor mensen ieder plaatje moeten aanklikken om het goed te kunnen zien. Verkeerde implementatie: het inladen duurt te lang. Mogelijk willen bezoekers liever de hele set zien dan slechts een paar tegelijk. Voor de meeste sites niet geschikt als primaire navigatie.	Gebruik het als afbeeldingen meerwaarde bieden. Als je maar 1 item tegelijk toont, nummer dan de items (bv. “3 van 10”) om duidelijker aan te geven dat het item onderdeel is van een reeks. Laat duidelijk ziet dat en hoe de carrousel verschuift. Gebruik het niet als het nodig is dat de bezoeker de hele lijst ziet.

Interactie

Over navigatie-interactie kun je hele boeken schrijven. Sterker nog: die zijn ook geschreven. Voor het doel van nu – laten zien dat je keuzes voor navigatieoplossingen bewust moet maken – beperk ik me even tot enkele menu-gedragingen op het niveau van de globale navigatie, te weten:

• Klikken op tab/link opent overzichtpagina;
• Bewegen over tab opent subnavigatie;
• Klikken op tab/link opent subnavigatie;
• Het ‘Mega drop-down’ menu.

Klikken op tab/link opent (overzichts)pagina

De meest basic vorm van navigatiemenu’s bevat de meest vertrouwde en verwachte interactie. Je klikt op een tab (die mogelijk gewoon als link wordt gepresenteerd) en komt daarmee op een (overzichts)pagina. Het menu-item gedraagt zich dus als een gewone hyperlink.

Bij Rijkswaterstaat opent iedere hoofdtab gewoon een pagina.

Sterkten	Zwakten	Aanbevelingen
Heeft het hyperlink-gedrag, is dus super intuïtief voor iedereen.	De labels moeten het alleen opknappen. Er zijn geen ondersteunende navigatie-elementen die meer context kunnen bieden. Grootste kans op misvatting van labels.	Test de labels! Liever te veel dan te weinig. Ontwerp overzichtspagina’s die toegevoegde waarde hebben. Maak het dus meer dan een lijstje hyperlinks naar onderliggende pagina’s. Oh ja, en een loze introtekst schrijven omdat de pagina anders zo kaal is, ook niet doen!

Bewegen over tab opent subnavigatie

Ook een veelgebruikte vorm van navigeren. Je beweegt de muis over een tab, waardoor direct een submenu naast of onder de tab verschijnt. Je kunt klikken op het hoofditem, maar ook direct op een item in het submenu waarmee je het topniveau overslaat. Klik je niet en beweeg je de muis van de tab en het submenu af, dan verdwijnt het submenu weer.

Het ‘drop-down’ menu van de TU Delft

Sterkten	Zwakten	Aanbevelingen
Je ziet het submenu voordat je op het hoofditem klikt; het submenu geeft daarbij extra context aan het hoofditem. Je kunt meerdere navigatie-opties snel vergelijken zonder daarvoor meerdere pagina’s te hoeven openen. Je kunt direct een pagina uit het submenu openen (soms zelfs het sub-submenu), en dat scheelt muiskliks en tijd.	Het submenu in een verticale navigatie is voor mensen met een motorische beperking moeilijk te bereiken. Je moet immers de muis over een lang, smal stuk bewegen om bij het submenu te komen. Aan voorgaand punt gerelateerd: het ‘diagonale probleem’: het korste pad naar item 2 en verder kruist andere tabs, waardoor het submenu kan verdwijnen (tenzij een goede vertraging is geïmplementeerd). Voor een toegankelijk menu moet de programmeur extra goed controleren of het menu ook nog werkt zonder JavaScript. Veel frustatie als de implementatie niet helemaal goed is: menu sluit te snel, blijft te lang staan, opent te snel, bedekt een belangrijk deel van de pagina, enz.). Kan een probleem opleveren als er teveel items in het submenu staan (bv. items die onder de ‘vouw’ verdwijnen).	Fine-tune het verschijnen en verdwijnen van het submenu. Test dit goed! Een dropdown submenu in een horizontaal menu is aan te bevelen boven die in een verticaal menu (gemakkelijker te bedienen met de muis). Zorg dat het submenu qua achtergrond- en tekstkleur voldoende contrasteert met de elementen waar het menu overheen valt. Maak het submenu niet te smal; hij mag best onder de volgende tab uitkomen. Te smal maakt het submenu onnodig hoog (items nemen meerdere regels in beslag).

Bij De Hypotheker verschijnt het submenu onder het hoofdmenu. Risico hiervan is het ‘diagonale probleem’, maar positief aan deze uitvoering is dat het submenu blijft staan als je met je muis weggaat van het menu.

Klikken op tab/link opent subnavigatie

Je ziet deze interactievorm niet zo vaak als de twee voorgaande. De menu-tabs bevatten een submenu, die niet tevoorschijn komen als je er met de muis overheen beweegt, maar pas als je erop klikt. In de horizontale variant verschijnt het submenu in een horizontale balk onder het hoofdmenu. In de verticale variant schuift het hoofdmenu meestal open tussen het aangeklikte item en het item eronder, om ruimte te maken voor de subnavigatie.

Het submenu van ABN AMRO verschijnt pas als je een van de hoofditems aanklikt.

Sterkten	Zwakten	Aanbevelingen
Goed om de bovenste 2 niveaus tegelijk te laten zien. Vereist niet de fijne motoriek die wel nodig is bij vorige variant (waarbij het submenu verschijnt als je met de muis over een tab beweegt) In sommige situaties of voor bepaalde (gevorderde) gebruikers kan het handig zijn als er meerdere tabs tegelijk open staan. Dan moet je het menu natuurlijk wel zo ontwikkeld hebben dat dit kan. En het werkt alleen bij verticale menu’s.	Veel mensen verwachten naar een andere pagina te gaan als ze ergens op klikken. (Dit neemt overigens wel enigszins af) Mensen kunnen de pagina achter het hoofditem willen zien, maar die is niet bereikbaar omdat ze uitsluitende met de subnavigatie naar een pagina kunnen navigeren. Maar waar kom je terecht als je in het kruimelpad op het hoofd-item klikt? Als er standaard 2 rijen tabs staan (hoofd en sub), zien mensen soms niet dat het submenu verandert als ze op een hoofdtab klikken. Het kan disoriënterend werken als menu-items naar boven en beneden schuiven.	Is vooral te overwegen voor doelgroepen met een mindere oog-hand coördinatie. Kijk naar alternatieve interactie als submenu’s gaan bestaan uit 10+ items. Hierdoor schuiven de hoofditems namelijk erg ver op naar onder. Pas erg op met ‘genest’ openklappen (menu in menu in menu). Het kan erg onoverzichtelijk worden (wat hoort nu bij wat?). Gebruik geen uitklapboom hints (zoals [+] icoon) voor menu’s die zich niet gedragen als uitklapboom.

Mega drop-down

Een navigatievorm in opkomst is de zogenaamde ‘mega drop-down’. Jakob Nielsen heeft er al een uitgebreid, aanprijzend artikel over geschreven. Een mega drop-down menu is in principe gewoon een uitklapmenu (‘drop-down’ betekent hier ‘uitklap’) met extra mogelijkheden: meerdere kolommen, plaatjes en ‘rijke’ links (bv. nieuws- of productitems).

Philips benut zijn mega dropdowns ten volste. Minder gebruikelijk aan deze uitvoering is het moeten aanklikken van het hoofditem om het dropdown menu te kunnen zien.

Sterkten	Zwakten	Aanbevelingen
Alle opties op het onderliggende niveau kunnen in een groot panel worden aangeboden, ook al zijn het er twintig. Je kunt aan elkaar gerelateerde opties in categorieën groeperen. Dit vergroot ook de scanbaarheid van het menu. Extra context of functionaliteit kan gecreëerd worden door het gebruik van iconen, afbeeldingen, formuliervelden e.d. Verder dezelfde sterkten als variant 2 “bewegen over tab opent subnavigatie”	Je kunt ook mega drop-downs te vol proppen. Dan blijft er van de scanbaarheid weinig over. Het ‘diagonale probleem’: als je de kortste weg wilt afleggen met de muis naar een menu-item in de tweede of derde kolom, dan raak je al gauw onderweg de volgende hoofdtab, waardoor het submenu kan verdwijnen (tenzij er een goede vertraging geïmplementeerd is).	Kijk goed hoe je dit menu implementeert als je site ook veel mobiel gebruikt wordt. Gebruik liever niet de hele breedte als je dit niet nodig hebt. Verstop geen key functies zoals zoek- of login-velden in een drop-down. Verder dezelfde aanbevelingen als variant 2 “bewegen over tab opent subnavigatie”

Hier nog een aantal voorbeelden van mega drop-down menu’s.

Tot slot

Er zijn natuurlijk nog meer navigatieoplossingen die je kunt overwegen voor de globale of lokale navigatie, bv. een tagcloud of facetnavigatie (filteren op tag/categorie). Voor alle oplossingen geldt: denk na over plaatsing, weergavestijl en interactie. Welke oplossing past het best bij de site, de content en de doelgroep?

Ander verslag van de Usability Week 2009: “Checklist: 10 tips voor een effectieve navigatie“.