Navigatie

Uit Usability

Inhoud 1 Algemene principes 2 Navigatiestructuur 3 Navigatie 4 Links 5 Bewegingen 6 Koppen, titels en labels 7 Externe links

Algemene principes

In vergelijking tot navigatie in de fysieke wereld hebben gebruikers op een website..

• ..geen benul van schaal (uit hoeveel pagina's bestaat de website?);
• ..geen benul van richting (er is geen links of rechts -- alles is aan alles ge(hyper)linked);
• ..geen benul van locatie (ik ben hier via een zoekmachine terechtgekomen. Waar ben ik? Hoe kom ik weg? Waar kan ik heen?) (18)

Elke navigatiestructuur zou op ieder moment op de volgende vragen antwoord moeten kunnen geven (17)(18)(39) 

• Welke website is dit?
• Op welke pagina bevind ik me nu?
• Wat zijn de voornaamste onderdelen van deze website?
• Wat zijn mijn opties op dit navigatieniveau?
• Hoe verhoudt mijn huidige locatie zich tot het grotere geheel?
• Hoe kan ik zoeken?

Laat alleen de noodzakelijke informatie zien (1).

• Gebruikers moeten zich zoveel mogelijk kunnen concentreren op de taak waar zo op dat moment mee bezig zijn. Informatie die niet nodig is bij het uitvoeren van die taak leidt af en moet zoveel mogelijk worden weggelaten (1).
• Laat minimale informatie zien aan gebruikers die weten waar ze naar op zoek zijn, en meer informatie aan gebruikers die dat (nog) niet zo goed weten (34).

Biedt altijd alternatieve navigatieroutes aan (3)(48).

• Gebruikers hebben verschillende stijlen om te navigeren. Sommigen gaan recht op het doel af, anderen werken op basis van bekende patronen, of gaan meer ad-hoc te werk. De navigatie moet voldoende flexibel zijn om met die verschillende stijlen om te kunnen gaan (1).
• Zorg altijd voor een ontsnappingsroute (naast het botweg afsluiten van de browser).

Basisfunctionaliteiten moeten vanaf elke pagina bereikbaar zijn.

• De hoofdnavigatie staat op iedere pagina (32).
  • De subnavigatie biedt ondersteuning per subrubriek van de website (32).
• Zorg er in ieder geval voor dat de zoek- en helpfunctie vanaf elke pagina zijn te bereiken.
• Gebruikers stellen het op prijs als ze op meerdere plaatsen in de website van taal kunnen wisselen (3).

3D-navigatie is bijna altijd een slecht idee (20).

• Het maakt het bewegen over de pagina aanzienlijk complexer en moeilijker.
• Het laat de navigatie-opties niet zo duidelijk zijn als bij 2D-navigatie.
• Het is meestal stukken zwaarder en dus beduidend langzamer dan 2D-navigatie.

Navigatiestructuur

Gebruik consequent dezelfde navigatiestructuur.

• Maak een duidelijk onderscheid tussen navigatie-elementen. Zet dezelfde soort elementen bij elkaar (1).
• Gebruikers leren snel bepaalde patronen en taken aan. Ze kunnen beduidend sneller en efficiënter werken als ze die patronen kunnen herhalen (1).
• Dit geldt niet alleen binnen een bepaalde website maar ook tussen websites. Het gebruik van conventionele navigatiestructuren vergemakkelijkt het gebruik van een (nieuwe) website in hoge mate. Dit is met name van belang voor gebruikers die weinig gebruik maken van de website (1).
• Als de informatie of het aanbod van diensten van een organisatie over meerdere sites verdeeld is, moet de gebruiker op een consistente manier tussen de sites kunnen navigeren zonder (voor)kennis van het doel, de inhoud en de onderlinge relaties van de individuele sites.
  • Breng op iedere pagina (bij voorkeur op steeds dezelfde plaats) een logo aan van de organisatie. Gebruikers zijn zich er niet altijd van bewust dat ze naar de site van een andere organisatie zijn gesprongen (1).
• Plaats het primaire navigatiemenu aan de linkerkant van het scherm.
  • Uit onderzoek blijkt dat het plaatsen van alle menu's in de linkerkolom het beste werkt. Alle menu's aan de rechterkant zetten werkt ook goed -- het verschil is slechts gradueel (1).

Laat een klikbare inhoudsopgave zien bij langere pagina's

• Een voorbeeld daarvan is deze website. Die laat bij meer dan drie onderwerpen per pagina automatisch een index zien.

Gebruik geen grote afbeeldingen bovenaan de pagina.

• Dit suggereert aan gebruikers dat er geen informatie meer onder de afbeelding staat. Er bestaat een gerede kans dat ze die informatie dan over het hoofd zien.
• Zorg ervoor dat elementen die essentieel zijn voor de taak van de gebruiker op een (home)pagina, boven de 'vouw' (400-500 pixels) liggen. Zorg er verder voor dat gebruikers bij elke veel voorkomende resolutie kunnen zien dat er gescrolled kan worden (49).

Vermijd het gebruik van frames zoveel mogelijk.

• Meer dan drie frames op een pagina werkt zeer verwarrend voor (met name onervaren) gebruikers. Frames verminderen vaak ook de vindbaarheid van informatie en brengen soms printproblemen met zich mee (1).
• De stelregel is dat er alleen nieuwe vensters moeten worden geopend als dat de taak van de gebruiker ondersteunt (3). Denk daarbij aan het gebruik van simultane menu's zodat de functies in één deel toegankelijk blijven als er in een ander deel van het scherm wordt gewerkt. Een voorbeeld van een dergelijke geneste structuur is StatLine van het CBS.
• Nota bene: de Webrichtlijnen verbieden het gebruik van frames op overheidswebsites, inclusief i-frames (R-pd.2.5) (20).
• Elders wordt gesteld dat professionele sites geen frames hebben.
  • Dat daardoor in bepaalde gevallen de navigatie bij het scrollen uit het beeld verdwijnt is geen probleem: de gebruiker weet die wel weer terug te vinden (2).
• Open geen nieuwe vensters bij het linken naar interne pagina's (26).

Pas op dat dialoogboxen niet achter het hoofdscherm verdwijnen.

• Een veelgebruikt alternatieve methode is de Lightbox. Het grootste voordeel is dat het onmogelijk is voor gebruikers om het lichtgekleurde deel van het scherm over het hoofd te zien. Dit staat in schril contrast tot veel conventionele ontwerpen waarin de gebruiker door de vaak drukke pagina's meldingen al snel over het hoofd ziet (10). Houdt bij het gebruik van een lightbox wel rekening met de volgende nadelen:
  • Lightboxen domineren de gehele pagina. Gebruik ze alleen voor belangrijke meldingen (10);
  • Als de achtergrond te donker wordt weergegeven, kunnen gebruikers de informatie op de achtergrond niet meer goed lezen. Ze hebben die informatie soms echter nodig voor de taak die op dat moment in het lichte dialoogvenster wordt afgehandeld (10).

Navigatie

Gebruik knoppen voor acties die tot een blijvende (persistent) verandering leiden, zoals <BEVESTIGEN> en hyperlinks voor vluchtige (non-persistent) acties zoals navigatie (3)(10).

• Gebruik in navigatiemenu's altijd tekstlinks, geen afbeeldingen (21).
• Gebruik geen iconen voor navigatie (21).
• Gebruik geen iconen voor zoeken (21).

Als een taak uit meerdere stappen bestaat, moet er op elke pagina een <TERUG> functie aanwezig zijn.

• Schakel nooit de <TERUG> knop van de browser uit (3).
• Nota bene: de <TERUG> knop is goed voor 30 tot 40% van alle muisklikken. Minimaliseer het gebruik door alternatieve navigatiemogelijkheden aan te bieden zoals kruimelpaden (breadcrumbs) (3).

Op elke pagine moet er een link zijn naar de homepage van de website (1)(3)(33).

• De link naar de homepage kan het beste onder het logo, liefst linksboven in de site, én onder een aparte knop <HOME> (2). Niet alle gebruikers weten immers dat ze terug kunnen keren naar de homepage door op het logo te klikken (1).

Zorg ervoor dat gebruikers altijd een vluchtroute hebben -- een mogelijkheid om verder te kunnen als ze ergens zijn vastgelopen (19)(33).

• Gebruik geen webpagina's (zoals frames of windows) waar de gebruiker niet zondermeer uit kan ontsnappen (1).
• Verwijder inactieve verwijzingen (dead links) zo snel mogelijk van de website (3).
• Stuur bezoekers die met een foutboodschap worden geconfronteerd niet automatisch door naar de homepage. Laat in plaats daarvan een link zijn naar de zoekfunctie of toon de (gedeeltelijke) sitemap direct op de foutpagina. Dit helpt bezoekers die op zoek waren naar een specifiek onderdeel weer snel op weg (8).

Laat de gebruiker altijd weten waar hij zich bevindt op de website (3).

• De navigatiestructuur moet zo zijn ontworpen dat de gebruiker begrijpt (3)(22):
  • waar hij zich nu bevindt;
  • waar hij is geweest;
  • waar hij vanaf de huidige plaats naar toe kan gaan.
• Door enkel het subnavigatiemenu, de hoofdnavigatie en de paginatitel te bekijken, moet het volledige klikpad naar de huidige pagina duidelijk zijn (23).
  • Dit is met name van belang bij het gebruik van zoekfuncties en zoekmachines. Die brengen de gebruiker direct naar een bepaald specifiek deel van de site. Omdat de context dan ontbreekt over de betekenis en de plaats van de pagina in de navigatiestructuur zijn de gebruikers volledig aangewezen op de informatie die op de pagina zelf staat (1).
  • De hoofdnavigatie moet permanent zichtbaar zijn, of door de gebruiker makkelijk zichtbaar kunnen worden gemaakt wanneer deze uit het beeld scrollt (3).
  • Als de navigatiestructuur uit meerdere niveaus bestaat, laat dan steeds alle niveaus zien (3).
    • Een veel gebruikte methode is het broodkruimelpad. Het gebruik van breadcrumbs leidt tot een aanzienlijke verbetering in het gebruik (1). Geef wel duidelijk een omschrijving van de breadcrumb <"u bevindt zich hier:"> omdat veel gebruikers (nog) niet bekend zijn met deze relatief nieuwe navigatiemethode (1)(18).
    • Breadcrumbs werken het beste in combinatie met andere navigatiemethodes (18).
  • Als de navigatiestructuur uit meerdere niveaus bestaat, maak dan duidelijk onderscheid tussen hoofd- en subnavigatie (26).

Gebruik kruisverwijzingen naar andere (potentieel) relevante informatie op de website (3).

• Bepaal eerst een primaire locatie voor informatie en voeg dan later, op basis van testresultaten, verwijzingen toe naar die locatie vanuit plaatsen waar gebruikers van hebben aangegeven op zoek te zijn naar die informatie (3)(8).
• Houdt bij het aanbrengen van deze kruiswijzingen wel in het achterhoofd dat de gebruiker niet wordt overbelast door teveel hyperlinks (1).

Gebruik het meest geschikte type menu.

• Gebruik opeenvolgende (sequential) menu's voor simpele opeenvolgende taken en parallelle (simultaneous) menu's voor taken die bij met opeenvolgend menu veel terugbladeren hadden vereist (1).
• Het gebruik van uitklapmenu's is onhandig als er totale aantal links groot is (zelfs als ze verborgen zijn) (3).
• Als er wordt gewerkt met uitklapmenu's, gebruik dan de point-and-click in plaats van de mouse over methode. De eerste methode werkt sneller, levert minder fouten op, en geniet de voorkeur van de meeste gebruikers (1).
• Als er wordt gewerkt met uitklapmenu's, mag deze functionaliteit niet afhankelijk zijn van client-side scripts. (26).

De toegevoegde waarde van site maps is beperkt.

• Uit de literatuur blijkt dat site maps de mentale voorstelling van een gebruiker van de site niet of nauwelijks verbeteren (1).
• Site maps zijn wel weer zeer nuttig voor 'non-human agents' zoals search bots en screen readers. Ze komen indirect de toegankelijkheid van sites dus wel ten goede.

Gebruik geen alternatieve teksten (tool tips of glosses) voor navigatiedoeleinden.

• Alternatieve teksten zijn geen compensatie voor onduidelijke labels van knoppen of links (1). Tegen de tijd dat de gebruiker de tool tip ziet, heeft hij al besloten om wel of niet te klikken (42).
• Er wordt heel weinig gebruik gemaakt van alternatieve teksten. In een studie bleek dat 90% van de testgebruikers de tekst helemaal niet had gezien (16).
• Gebruik alternatieve teksten niet voor het oproepen van helpfuncties (tooltips) (19).
• Zijpaden en definities moeten zo gemarkeerd worden dat ze weinig opvallen en toch klikbaar zijn (16).

Links

Gebruik bij voorkeur unieke, onveranderlijke (statische) URL's.

• Dynamisch gegenereerde links zijn vaak moeilijk te lezen, niet alleen door de gebruiker maar ook door zoekmachines (1)(19).

Plaats links naar relevante informatie zoveel mogelijk in de tekst (in plaats van naar een lijstje elders op de pagina te verwijzen).

• Dit helpt gebruikers om de tekst te scannen en te duiden. Het verschaft relevante links de juiste context (23).

Gebruik betekenisvolle labels voor links.

• Geef duidelijke verschillen tussen de namen van links aan zodat gebruikers niet in verwarring raken (1).
  • Geef de link exact dezelfde naam als de titel of kop van de pagina waar de link naar verwijst (1).
• Gebruikers moeten uit het label en de context van de link een idee krijgen over de bestemming van de link (information scent) (19). Geef in ieder geval voldoende informatie over de bestemming van de link om onaangename verrassingen voor de gebruiker te vermijden (19). Uiteindelijk gaat het er om dat de gebruiker vertrouwen krijgt in het navigeren (35).
  • Gebruik trigger words -- woorden die geassocieerd worden met de link -- om gebruikers duidelijk te maken welke informatie ze kunnen vinden door op de link te klikken (24)(25).
  • Stel in de linkteksten zelf niet de bestemming van de link centraal maar het onderwerp of de actie die de gebruiker op die bestemming vindt.
  • Gebruikers worden voortdurend geconfronteerd met meerdere doorklikmogelijkheden. Ze zijn bereid om vaak te klikken als ze maar weten waar het spoor hun uiteindelijk naar toe zal leiden. Ze moeten dus snel in staat zijn om 'dode sporen' te vermijden (22).
  • Link in de tekst niet naar pagina's die de flow van de bezoeker onderbreken zolang hij nog niet bij de doelinformatie is aanbeland.

Gebruik een onderscheidende opmaak voor hyperlinks (1).

• Het mag niet van gebruikers worden verwacht dat ze met hun muis over het scherm moeten bewegen om uit te vinden wat klikbaar is of niet (minesweeping) (1).
• Verander de opmaak van een link (in kleur of door een gestippeld onderschrift) als de link is bezocht (1)(3).
• Onderstreep geen woorden als het geen hyperlinks zijn.

Maak een onderscheid tussen interne en externe links (3).

• Gebruikers nemen over het algemeen aan dat links ze naar een andere pagina binnen dezelfde website. Als die aanname niet klopt, raken ze soms verward (1)(32).
• Open externe links niet in een apart venster. Onervaren gebruikers raken hierdoor verward: ze moeten bewust nadenken hoe ze terug kunnen gaan naar de vorige pagina omdat de <Terug> knop van hun browser niet meer werkt. Ervaren gebruikers weten zelf wel hoe ze een extern venster in hun browser moeten openen (23).
• Vermeld bij externe links in de tekst altijd expliciet het adres van de website of het woord 'website', om aan te duiden dat de link naar een pagina leidt buiten de site (23)(32).
• Voorzie externe links van een markering.
  • Als er iconen worden gebruikt, plaats deze dan bij voorkeur voor de link in plaats van er achter. Gebruikers lezen niet maar scannen. De eerste woorden van een link krijgen beduidend meer aandacht dan de laatste (23).
  • Iconen worden vaak niet bewust opgemerkt. Het lijkt beter om expliciet te vermelden dat er naar een externe bron wordt verwezen (32).
• Gebruik een onderscheidend icoon voor links naar speciale doelen (andere bestandsformaten, uitzonderlijk grote bestanden, informatie in andere talen enzovoort) (3).
  • Geef vooraf informatie over de inhoud van een bestand door middel van een samenvatting en/of introductie (21).
  • Biedt grotere documenten aan in meerdere delen (21).

Gebruik tekstlinks in plaats van links met afbeeldingen (1).

Zorg ervoor dat dubbelklikken op een link niet tot onverwachte resultaten leidt (1).

Bewegingen

Vermijd horizontaal scrollen ten ene male voor resoluties vanaf 1024 x 768 (1)(3).

Minimaliseer verticaal scrollen (3).

Minimaliseer het aantal keren dat een gebruiker moet klikken om informatie te vinden.

• De totale tijd die gebruikers nodig hebben om een stuk informatie te vinden hangt recht evenredig samen met het aantal keren dat ze moeten klikken. Belangrijke informatie moet binnen twee tot drie klikken vanaf de homepage bereikt kunnen worden (1).
• Gebruikers klikken of scrollen niet meer dan vijf keer om te vinden waar ze naar op zoek zijn (21).
• Belangrijker dan het aantal klikken is echter de vraag of gebruikers genoeg hints krijgen of ze op het goede spoor zitten. Gebruikers zullen blijven klikken zolang ze het idee hebben dat ze dichter bij hun doel komen (information scent) (1).
  • Zolang gebruikers uiteindelijk de informatie vinden waar ze naar op zoek zijn, heeft het aantal klikken nauwelijks invloed op hun tevredenheid over het gebruik van de site (32).

Op pagina's die louter voor navigatiedoeleinden dienen, zouden gebruikers niet moeten scrollen (1).

Vermijd 'scroll-stoppers'.

• Zorg ervoor dat de plaatsing van afbeeldingen, koppen en titels niet de indruk wekken dat de gebruiker het begin of einde van de pagina heeft bereikt terwijl dat nog niet zo is (1).

Gebruik alleen lange teksten op één pagina als het laden van meerdere pagina's veel tijd kost.

• Omdat scrollen veel tijd kost kan informatie beter in kortere stukken over meerdere pagina's worden verspreid dan in langere stukken op één pagina worden gezet (1).
• Hoewel uit onderzoek is gebleken dat er wat betreft lezen nauwelijks verschillen zijn tussen scrollen en bladeren (paging) tussen pagina's, blijken gebruikers die bladeren in plaats van scrollen
  • een beter begrip te hebben van de tekst als geheel;
  • de kernideeën beter te kunnen onthouden;
  • relevante informatie sneller te lokaliseren op een pagina (1).
• Het verschil tussen scrollen en bladeren is met name van belang voor oudere gebruikers. Die scrollen over het algemeen veel langzamer dan jongere gebruikers (1).
• Onervaren gebruikers geven meestal ook de voorkeur aan bladeren boven scrollen (1).
• Ervaren gebruikers lezen niet maar scannen. Ze kunnen, wanneer ze snel naar beneden scrollen, de hoofdtekst niet onderscheiden maar wel de tussenkoppen -- mits die duidelijk zijn en goed zijn geplaatst (1).

Koppen, titels en labels

Maak overvloedig gebruik van beschrijvende koppen.

• Goed geschreven (duidelijk, eenduidig, onderscheidend) koppen zijn een belangrijke hulp voor gebruikers bij het scannen van teksten (1).
• Dit is met name relevant voor oudere gebruikers omdat die over het algemeen eerder stoppen met scannen en dan (veel langzamer) gaan lezen. Koppen die ze op het verkeerde been zetten, kosten deze gebruikers dus relatief veel tijd.

Gebruik heldere beschrijvende titels voor pagina's.

• Dit vergroot de vindbaarheid door zoekmachines aanzienlijk (1)
• De verwijzingen naar de pagina is dan ook nog duidelijk wanneer deze als bookmark wordt opgeslagen (1).
• Het verhoogt de inzichtelijkheid van de navigatie voor gebruikers aanzienlijk (1).

Gebruik duidelijke beschrijvingen voor de rijen en kolommen van tabellen (met data).

• Hetzelfde soort data moet dezelfde naam krijgen als het op verschillende pagina's voorkomt (1).

Voorzie afbeeldingen van labels.

• Elke klikbare afbeelding moet in ieder geval voorzien zijn van een beschrijving (alt-text) (1).
• Afbeeldingen die geen extra informatie bevatten (zoals scheidingslijnen), krijgen een leeg alt-attribuut (alt=""). Dat voorkomt dat de bestandsnaam wordt getoond of voorgelezen (21).
• Als een afbeelding klikbaar is, zorg er dan voor dat de gehele afbeelding klikbaar is of dat het klikbare delen duidelijk zijn aangegeven (1)

---

Externe links

Test voor navigatie (Keith Instone's Navigation Stress Test):
http://instone.org/navstress