Een duidelijke en overzichtelijke website: zo maak je hem

Een overzichtelijke website voelt vanzelfsprekend. Je ziet meteen waar je bent, je vindt wat je zoekt en je weet wat je moet doen. Dat gevoel is geen toeval en geen kwestie van smaak, maar het resultaat van een paar heldere keuzes. Wie die keuzes niet maakt, krijgt een site waar bezoekers zoeken, twijfelen en weer weggaan.

In dit artikel lees je acht regels voor een duidelijke en overzichtelijke website, met voorbeelden van voor en na. Het gaat dieper in op één van de eisen waar een goede website aan voldoet: duidelijkheid. Aan het eind lees je hoe je met twee eenvoudige tests ontdekt of jouw site echt duidelijk is.

Wat maakt een website duidelijk en overzichtelijk?

Een website is duidelijk als een bezoeker zonder nadenken snapt wat er staat, en overzichtelijk als die zonder zoeken vindt wat die nodig heeft. Op elke pagina stelt een bezoeker zich, vaak zonder het te merken, drie vragen:

1. Ben ik hier goed?
2. Wat kan ik hier vinden of doen?
3. Wat is de volgende stap?

Beantwoordt een pagina die drie vragen binnen een paar seconden, dan is hij duidelijk. Moet de bezoeker daarvoor lezen, scrollen en puzzelen, dan niet. De acht regels hieronder zorgen ervoor dat je pagina's die vragen meteen beantwoorden.

1. Geef elke pagina één doel

Een overzichtelijke pagina heeft één hoofddoel: één onderwerp en één actie die je van de bezoeker vraagt. Een pagina over kleuren bij een kapper gaat over kleuren en eindigt met "Plan je kleurbehandeling". Een contactpagina gaat over contact. Zodra een pagina drie dingen tegelijk wil, weet de bezoeker niet meer waar die moet kijken.

Bepaal daarom per pagina, voordat er tekst op komt:

• waar de pagina over gaat, in één zin;
• welke vraag van de bezoeker de pagina beantwoordt;
• welke knop de belangrijkste is.

Andere links mogen best, maar ze vallen minder op dan die ene knop. Twijfel je of iets op een pagina hoort, vraag je dan af of het helpt bij het doel van die pagina. Zo niet, dan hoort het ergens anders, of nergens.

2. Schrijf voor wie scant: koppen, korte alinea's en lijsten

Bezoekers lezen een webpagina zelden van begin tot eind. Nielsen Norman Group, een onderzoeksbureau voor gebruiksgemak, adviseert ervan uit te gaan dat de meeste bezoekers scannen, op een computer en op een telefoon. Het bureau raadt aan om koppen te gebruiken, koppen te beginnen met de woorden die de meeste informatie dragen en het belangrijkste in de eerste alinea's te zetten (Nielsen Norman Group (opent in een nieuw tabblad)).

Een kop die iets vertelt, beantwoordt een vraag of noemt wat er staat. Een kop die niets vertelt, is een etiket dat op elke website zou kunnen staan. Het verschil:

Lees als controle alleen de koppen van een pagina. Snap je dan al waar de pagina over gaat en wat erop staat, dan zijn je koppen goed.

Houd ook alinea's kort: drie of vier zinnen over één punt, met het belangrijkste in de eerste zin. Op een telefoon wordt een alinea die op een groot scherm kort lijkt, al snel een lange lap tekst. Gebruik een lijst als je drie of meer dingen opsomt, en genummerde stappen als de volgorde ertoe doet, zoals bij "zo werkt je eerste afspraak". Zet hooguit een paar woorden per pagina vet: als alles opvalt, valt niets meer op.

3. Schrijf in gewone taal

Gewone taal betekent: woorden die je klant zelf gebruikt, korte zinnen, en eerst het antwoord en dan de uitleg. Een goede maat is taalniveau B1. CommunicatieRijk, het kennisplatform voor communicatie van de Rijksoverheid, omschrijft B1 als eenvoudig Nederlands dat de overgrote meerderheid van de bevolking begrijpt (CommunicatieRijk (opent in een nieuw tabblad)). De Rijksoverheid schrijft nieuwe teksten op Rijksoverheid.nl zelf ook op dat niveau.

B1 is geen kindertaal. CommunicatieRijk geeft voorbeelden als "betreffende" wordt "over", "verstrekken" wordt "geven" en "prioriteit" wordt "voorrang". In dezelfde geest wordt "dient te worden" gewoon "moet". Je vakkennis blijft overeind: je legt het alleen uit in woorden die je klant kent.

Denk niet dat het voor jouw klanten niet nodig is omdat ze hoogopgeleid zijn. Volgens CommunicatieRijk lezen ook hoger opgeleiden en professionals meestal liever teksten op B1 dan op het moeilijkere C1, omdat die teksten makkelijker en sneller lezen, zeker op een telefoon. Zo klinkt het verschil:

Lees je tekst hardop voor. Klinkt het als iets wat je aan de balie tegen een klant zou zeggen, dan zit je goed. Klinkt het als een brief van een instantie, herschrijf het dan.

4. Maak navigatie en knoppen herkenbaar

Herkenbare navigatie werkt zoals bezoekers het van andere websites gewend zijn. Ze hoeven er niet over na te denken, dus ze doen het meteen goed. Dat betekent:

• het logo linksboven, met een link naar de homepage;
• het menu bovenaan, op elke pagina op dezelfde plek en in dezelfde volgorde;
• op een telefoon een menuknop met drie streepjes, met de hoofdknop en je telefoonnummer ernaast;
• menuwoorden die zeggen wat erachter zit, zoals "Prijzen" en niet "Investering";
• je contactgegevens onderaan elke pagina.

Origineel zijn mag in je foto's, je teksten en je kleuren, maar niet in de plek van het menu. Welke pagina's er in je menu horen, lees je in de opbouw van een goede website.

Voor knoppen geldt hetzelfde. Bezoekers leren snel hoe een knop op jouw site eruitziet. Kies één stijl voor de belangrijkste knop, bijvoorbeeld oranje met witte letters, en gebruik die alleen voor de hoofdactie. Een tweede, rustigere stijl, zoals alleen een rand, is voor minder belangrijke acties. Zorg ook dat tekst die geen link is, er niet uitziet als een link.

De tekst op een knop zegt wat er gebeurt als je erop tikt:

• niet "Verstuur", maar "Vraag je offerte aan";
• niet "Klik hier", maar "Bekijk de prijzen";
• niet "Meer", maar "Lees hoe een behandeling gaat".

5. Geef het ontwerp rust: witruimte, kleur en contrast

Witruimte is de lege ruimte rond tekst, foto's en knoppen. Het is geen verspilde ruimte: het groepeert wat bij elkaar hoort en laat het belangrijkste opvallen. Een pagina zonder witruimte voelt vol en onrustig, ook als de inhoud goed is.

Met kleur werkt het net zo. Kies een rustig palet van een paar kleuren uit je huisstijl en één opvallende actiekleur die je alleen voor knoppen en acties gebruikt. Gebruik je die kleur ook voor koppen, achtergronden en versiering, dan valt de knop niet meer op. Heb je nog geen vaste kleuren, dan helpt een nieuw of opgefrist merk.

Let tot slot op contrast: het verschil tussen de kleur van de letters en die van de achtergrond. De internationale richtlijn voor toegankelijke websites (WCAG) vraagt voor gewone tekst een contrast van minstens 4,5 staat tot 1, en voor grote tekst minstens 3 staat tot 1 (W3C (opent in een nieuw tabblad)). Lichtgrijze letters op een witte achtergrond halen dat vaak niet. Met een gratis contrastchecker online zie je meteen of je kleuren genoeg verschillen.

6. Maak formulieren kort en duidelijk

Een duidelijk formulier vraagt alleen wat je echt nodig hebt, zegt bij elk veld wat erin moet en laat na het versturen weten wat er nu gebeurt. Elk extra veld is een reden om te stoppen. Zo maak je een formulier duidelijk:

• zet boven elk veld een zichtbaar label, zoals "Telefoonnummer". Het W3C, dat de standaarden voor het web opstelt, raadt aan om elk formulierveld een label te geven en schrijft dat de meeste gebruikers zichtbare labels prettig vinden of zelfs nodig hebben (W3C (opent in een nieuw tabblad));
• vraag niet om gegevens die je pas later nodig hebt;
• zeg bij een fout wat er mis is en hoe het goed moet: "Vul een telefoonnummer van tien cijfers in" en niet "Ongeldige invoer";
• zet bij het formulier een link naar je privacyverklaring. Volgens de Autoriteit Persoonsgegevens is een duidelijke verwijzing dan genoeg (Autoriteit Persoonsgegevens (opent in een nieuw tabblad));
• laat na het versturen een bevestiging zien, met wanneer je reageert.

Een kort, duidelijk formulier maakt de stap naar een aanvraag kleiner. Hoe je meer uit die stap haalt, lees je in meer aanvragen uit je website.

7. Laat weg wat niet helpt

Een overzichtelijke website is vaak vooral een website waar dingen uit zijn gehaald. Deze onderdelen kosten aandacht en voegen weinig toe:

• een fotoreeks die vanzelf wisselt, waardoor niets blijft hangen;
• een venster dat over de pagina springt zodra je binnenkomt;
• een welkomsttekst die niets zegt, zoals "Welkom op onze website";
• dezelfde informatie op drie plekken, telkens net iets anders verwoord;
• een menukaart of prijslijst als pdf, die je op een telefoon moet openen en vergroten;
• veel verschillende lettertypes, kleuren en lettergroottes door elkaar;
• vaktaal en afkortingen die alleen collega's kennen.

Twijfel je over een onderdeel, haal het dan tijdelijk weg en kijk of iemand het mist.

8. Test met echte mensen

Of je website duidelijk is, kun je zelf slecht beoordelen: jij kent je zaak en je site te goed. Laat daarom anderen kijken, het liefst mensen die op je klanten lijken. Twee tests kosten bijna niets en leren je veel.

De vijfsecondentest

De vijfsecondentest laat zien of je opening duidelijk is. Zo doe je hem:

1. Open je homepage op een telefoon en laat iemand die je zaak niet kent er vijf seconden naar kijken.
2. Neem de telefoon terug.
3. Vraag wat het bedrijf doet, voor wie het is en wat de testpersoon nu zou doen.

Krijg je van drie mensen drie verschillende antwoorden, dan zegt je opening niet genoeg. Deze test meet alleen de eerste indruk, niet of iemand de weg vindt. Daarvoor is de tweede test.

Iemand een taak laten doen

Geef iemand een opdracht die een echte klant ook heeft, zoals "maak een afspraak om op zaterdag te laten knippen" of "zoek uit wat een nieuwe badkamer ongeveer kost". Vraag de testpersoon hardop te denken en kijk mee zonder te helpen of uit te leggen. Elke keer dat iemand twijfelt, terugklikt of zegt "waar staat dat dan?", heb je een verbeterpunt gevonden.

Je hebt geen grote groep nodig. Nielsen Norman Group adviseert om met hooguit vijf mensen per ronde te testen en liever vaker een kleine test te doen (Nielsen Norman Group (opent in een nieuw tabblad)). Verbeter na elke ronde wat je zag, en test daarna opnieuw.

Checklist: is jouw website duidelijk en overzichtelijk?

Loop deze punten langs met je eigen site op een telefoon:

• Elke pagina heeft één onderwerp en één opvallende knop.
• Wie alleen de koppen leest, weet al waar de pagina over gaat.
• Alinea's zijn kort en opsommingen staan in lijsten.
• Je teksten klinken als praten met een klant, zonder vaktaal.
• Het menu is kort en staat op elke pagina op dezelfde plek.
• Alle hoofdknoppen hebben dezelfde kleur en zeggen wat er gebeurt.
• Er is genoeg witruimte en de tekst is goed leesbaar op de achtergrond.
• Formulieren vragen alleen wat nodig is en hebben zichtbare labels.
• Er staat geen wisselende fotoreeks en er springt geen venster op bij binnenkomst.
• Iemand die je zaak niet kent, snapt binnen vijf seconden wat je doet.

Vink je niet alles aan, begin dan bij de bovenkant van je homepage en je belangrijkste dienstpagina. Wil je zien hoe jouw site er duidelijk en overzichtelijk uit kan zien? Wij bouwen gratis een werkende preview van je nieuwe website, met jouw zaak erin, zodat je het verschil ziet voordat je iets beslist. Wat een nieuwe website kost, zie je op onze prijzenpagina.