# Navigatie
HTML staat voor Hypertext Markup Language. Hypertext staat voor tekst met direct activeerbare hyperlinks (verwijzingen). Dus van bij het begin van de creatie van HTML was het de bedoeling dat de lezer van 1 pagina met tekst werd doorverwezen naar een volgende pagina. De bezoeker navigeert dus doorheen meerdere pagina’s en websites.
Als website ontwerpers / bouwers willen we het de gebruiker zo eenvoudig mogelijk maken om doorheen jouw website te surfen. Dit doen we door het leggen van hyperlinks. Een groep van hyperlinks noemen we dan meestal een navigatie of sub-navigatie.
# IA
De informatiearchitectuur (IA) om een overzichtelijke website te bouwen moeten we de informatie die we wensen te geven aan de gebruiker op een goede manier structureren. Dit is het werk van een informatieachitect (Eng. information architect).
De inhoud wordt dan opgesplitst in meerdere pagina’s waartussen de gebruiker kan navigeren.
# Navigatie
De navigatie brengt duidelijkheid over de informatie die te vinden is op een website. De navigatie brengt overzicht in de informatie die te vinden is op een website. (hiërarchie)
# Tip 1: Gebruik termen die de gebruiker ook gebruikt
| Verstaanbaar | Officieel |
|---|---|
| containerpark | recyclagepark |
| paraplu | regenscherm |
| glijbaan | schuif-af |
| kruiwagen | steekkar |
# Tip 2: Plaats de belangrijkste items vooraan…
… en plaats contact (meestal) als laatste.
# Tip 3: Vermijd overbodige tussenniveaus
# Navigatieschema
# Sitemap
Met een sitemap brengen we de pagina’s van een website en hun onderlinge structuur in beeld.
# Hiërarchische structuur
Pagina’s zijn een onderdeel van een hiërarchie. We starten bij een ‘hoofdpagina’ hieronder zitten sub-paginas. Deze pagina’s kunnen op hun beurt sub-pagina’s hebben.
De meeste websites werken met deze structuur als basis.
# Lineaire structuur
In een lineaire structuur moet je eerst door alle pagina’s surfen om op de laatste pagina terecht te komen. Er zijn weinig websites die enkel deze structuur bieden maar kunnen wel een onderdeel van een website zijn.
Bijvoorbeeld het aankoop proces in een webwinkel.
- Stap 1: Het winkelmandje
- Stap 2: Uw gegevens
- Stap 3: Betaal pagina
- Stap 4: Bestelling is geplaatst
Het is logisch dat je niet vanuit het winkelmandje rechtstreeks naar stap 4 kan gaan. Je moet dus lineair door dit proces.
Andere voorbeelden van lineaire structuur
- Registratie proces
- MOOC of online cursus. Bv: [HTML/CSS cursus van khanacademy.org](https://www.khanacademy.org/computing/computer-programming/> html-css)
- Online presentatie. Bv: slideshare.net (opens new window)
- Website met een verhaallijn. Bv: borgoveneto.com (opens new window)
# Web structuur
De meest complexe structuur is een web structuur. Dit is een structuur waarbij er niet echt een startpagina is. Je kan ook vanuit de ene pagina maar meerdere andere pagina’s. En kan kan ook van meerdere andere pagina’s op dezelfde pagina terecht komen. Een echt spinnenweb dus…
Het beste voorbeeld hiervan is Wikipedia (opens new window).
# Waar ben ik?
Waar ben ik? Waar kan ik naartoe? Dit zijn heel belangrijke vragen die we ons (onderbewust) stellen als we op een pagina terecht komen.
Aan de hand van een aantal tips kunnen we ervoor zorgen dat dit meteen duidelijk is.
Daarom is het belangrijk om in de navigatie aan te duiden in welk onderdeel van de website we ons bevinden. Dit kan door het navigatie item te laten opvallen door bijvoorbeeld in een andere kleur te plaatsen.
Breadcrumbs (broodkruimels) kunnen ervoor zorgen dat we weten welke pagina’s er voorafgaan aan deze pagina. En geven ons een inzicht in de structuur.
Uiteraard zal een titel ook belangrijk zijn om te weten waar we ons bevinden.
# Voorbeeld: MijnTuin.org
- In het voorbeeld hieronder kan je zien dan het actieve item in de navigatie ‘Buiten’ is. De pagina waarop we ons bevinden valt onder dit onderdeel.
- De titel geeft ons een inzicht op welke inhoud we kunnen verwachten ‘Voorjaarsbloei’.
- De breadcrumb toont ons de volledige structuur. De pagina voorjaarsbloei bevindt zich onder ‘Bloembollen’ die zich op zijn beurt onder ‘planten’ bevindt.
- Waar kunnen we naartoe? We kunnen verder klikken op Amaryllis, Allium, Anemoon, Crocus …
