Learn: Next Steps

Learn: Features

FEATURED PARTNER

boxesandarrows.com logo

Boxes and Arrows is an online journal dedicated to understanding the design of the architecture and structure of digital spaces, and often features articles on the craft of information architecture.

Websitenavigatie: een aantal nuttige definities

Site Navigation: A Few Helpful Definitions
© Indi Young, 3 September 2002
Vertaald door Rianne Stolwijk
18 Augustus 2010

Websitenavigatie: een aantal nuttige definities
door Indi Young

3 september 2002

Elke website heeft een structuur en bezoekers doen hun eerste en meest duurzame indrukken van die structuur op door te kijken naar de links, knoppen, tabbladen en andere bedieningsmiddelen die samen de "navigatie" vormen. Als ontwerpers hechten we veel belang aan het ontwerpen van een navigatiesysteem en -interface die het voor de gebruikers gemakkelijk maakt om te begrijpen wat ze kunnen doen en waar ze heen kunnen gaan. Met een team samenwerken aan het ontwerp van een navigatiesysteem kan echter moeilijk zijn, tenzij iedereen dezelfde vocabulaire hanteert wanneer er wordt gesproken over de verschillende onderdelen waaruit een navigatiegebruikersinterface bestaat.

Globale navigatie

Er schijnt overeenstemming te zijn dat er zoiets bestaat als een "universele" of "globale" navigatie: de verzameling keuzes die op elke pagina van de site terugkomt.

Een deel van de globale en lokale navigatie-interface van Amazon.

Het globale gedeelte op Amazon.com omvat alle tabbladen: Welcome, Indi's Store, Books, Electronics, etc. – alsmede de knoppen in de rij boven de tabbladen (View Cart etc.) De onderdelen in de blauwe balk veranderen al naargelang het tabblad waar je op klikt, deze behoren dus tot de "secundaire" of "lokale" navigatie. Dit kunnen we voorlopig even negeren.

Hoe zit het met het onderdeel "See More Stores" en de functionaliteit die hiermee wordt gesuggereerd? Amazon heeft te veel onderdelen om in de tabbladen op te nemen, daarom wijzigen ze de tabbladen aan de hand van je keuzes. Als je bijvoorbeeld op See More Stores klikt en Home & Garden kiest, verschijnt het tabblad voor Home & Garden in de globale navigatie. Vreemd? Misschien. Ze nemen een risico door ervan uit te gaan dat je op See More Stores zult klikken om datgene te vinden waarnaar je op zoek bent.

De rij tabbladen, inclusief "See More Stores", vormt de basisnavigatie van de site en kan dus gezien worden als de primaire navigatie. Deze geeft toegang tot de hoofdtaken waarvoor je naar de site bent gekomen – het kopen van een boek, het vinden van een digitale camera, het verzamelen van informatie voor de aankoop van een computer. Maar wat valt er verder nog onder de globale navigatie? Het winkelwagentje! Sterker nog, alle items in het rijtje boven de tabbladen vallen onder de globale navigatie – ze verschijnen op praktisch iedere pagina van de site. Deze verzameling hulpmiddelen helpt de klanten bij hun transacties met Amazon. Klanten kunnen de verzenddatum van een bestelling opzoeken, hun verlanglijstje bekijken, of hun aankopen betalen. Dat rijtje nuttige links wordt vaak functionele navigatie (utility navigation) genoemd. Deze navigatie geeft toegang tot hulpmiddelen die de klant van dienst zijn, maar is niet de bestaansgrond van de website.

Maar waarom valt de zoekbalk niet binnen dit plaatje? Amazon plaatst de zoekbalk op elke pagina aan de linker kant net onder de rij met navigatieknoppen. De balk ziet er net iets anders uit op de verschillende pagina's, maar vertegenwoordigt dezelfde functionaliteit: vul een trefwoord in en klik op een knop. Is dit nog steeds functionele navigatie – en daardoor dus ook globale navigatie – ondanks dat de balk niet in dat rijtje staat? Reken maar. Het is een hulpmiddel dat overal beschikbaar is.

De functionele navigatie wordt in de gebruikersinterface vaak visueel opgesplitst. Op Amazon staat de zoekbalk links terwijl de rest van de functionele navigatie in de rechterbovenhoek gepositioneerd is.

Visueel ontwerpers en ontwerpers van de gebruikersinterface kunnen de navigatiegroepen opdelen in verschillende lay-outs, afhankelijk van wat het meest gebruiksvriendelijk is. Zoekbalken worden vaak gescheiden van de rest van de functionele navigatie, zoals op eBay. Even vaak wordt de zoekbalk wel grafisch verbonden met de rest van de functionele navigatie, zoals op Agilent.

Denk nu eens aan het logo. Normaal gesproken bevindt er zich een aanklikbaar logo bovenaan de pagina dat je terugvoert naar de homepage. Vaak is er ook ergens een link naar "Home" – is dit onderdeel van de primaire of van de functionele navigatie? Van beide mogelijkheden zijn er voorbeelden te vinden. Bij Ideo is het onderdeel van de functionele navigatie. Bij Amazon is de Welcome-tab de homepage en is dus onderdeel van de primaire navigatie. Deze overvloed aan links naar de homepage is prima, aangezien een aanklikbaar logo niet zo vanzelfsprekend is dat je de link naar "Home" volledig kunt weglaten.

Het derde en laatste onderdeel van de globale navigatie is de footer. Het gedeelte onderaan de pagina kan hyperlinks in kleine letters bevatten naar dingen als "Algemene voorwaarden" of "Privacybeleid". Op sommige sites, zoals Colloquy, zijn er ook andere uiteenlopende links in de footer te vinden zoals "Contact", "Over ons" en "Vacatures". Weer andere sites vinden het handig om hier de overbodige primaire en functionele navigatie onder te brengen, zoals Autodesk doet. Als je dit doet, moet je er wel op letten om de overbodige primaire en functionele links visueel te scheiden van de footer-links.

Een geoefend oog voor navigatie

Elke website kan worden gestructureerd in primaire, functionele en footer-navigatie. Helaas hebben veel sites nog steeds een slechte of inconsistente navigatie. Hoe consistent is uw site? Trek eens tien minuten uit om door uw eigen site te klikken. Ga diep de site in en kies willekeurige pagina's. Vergelijk de primaire, functionele en footer-navigatie op die pagina's. Is het consistent? Zijn de groeperingen logisch? Als u deze drie componenten van de globale navigatie begrijpt, is het veel gemakkelijker om een samenhangend systeem te ontwikkelen en dit consequent toe te passen op de gehele site.

Indi Young is partner en mede-oprichter van Adaptive Path. Ze is gespecialiseerd in taakanalyse en het begrijpelijk, bruikbaar en betrouwbaar maken van navigaties.

This page was last modified on augustus 18, 2010 11:33 pm.