Webdesignprincipes die echt effect hebben op resultaten
Veel webdesignadvies is voorkeur vermomd als principe. Een kleiner aantal beslissingen verandert betrouwbaar wat bezoekers doen, en die zijn meestal weinig spectaculair: wat als eerste zichtbaar is, of tekst leesbaar is, en hoeveel stappen er staan tussen iemand en waarvoor hij kwam.
Deze gids behandelt de beslissingen waarvoor bewijs bestaat en benoemt welke werkelijk een smaakkwestie zijn.
Eén heldere hiërarchie per scherm#
Elk scherm hoort één ding duidelijk het belangrijkst te maken. Wanneer drie elementen met hetzelfde gewicht om aandacht strijden, lossen bezoekers de dubbelzinnigheid op door te vertrekken.
Hiërarchie bouw je met grootte, gewicht, kleur, ruimte en positie — ruwweg in die volgorde van kracht. Ruimte wordt het minst benut: een element met lucht eromheen leest als belangrijk zonder te hoeven schreeuwen.
- Eén primaire actie per scherm, anders vormgegeven dan al het overige.
- Secundaire acties aanwezig maar visueel rustiger — omlijnd in plaats van gevuld.
- Koppen die de inhoud beschrijven, geen gevatte koppen die niets beschrijven.
- Ruimte bewust ingezet: een volle pagina heeft geen hiërarchie, alleen dichtheid.
Leesbaarheid vóór decoratie#
Tekst die moeilijk leest kost je lezers, hoe goed het schrijfwerk ook is. Dit zijn meetbare drempels, geen meningen.
| Eigenschap | Praktisch doel | Waarom |
|---|---|---|
| Grootte lopende tekst | 16–18 px op mobiel | Onder 16 px zoomt iOS in bij focus op een veld en verliest kleine tekst lezers |
| Regellengte | 55–75 tekens | Langere regels laten het oog bij terugkeer de plek kwijtraken |
| Regelafstand | 1,5–1,7 voor lopende tekst | Krappe regelafstand verlaagt de leessnelheid meetbaar |
| Tekstcontrast | Minimaal 4,5:1, beter 7:1 | WCAG AA; grijs op grijs faalt buiten op een telefoon |
| Contrast bedieningselementen | 3:1 tegen de achtergrond | Gebruikers moeten kunnen zien waar een invoerveld eindigt |
| Alinealengte | Drie tot vier regels | Lange blokken worden op mobiel overgeslagen |
Controleer contrast tegen de werkelijke achtergrond, inclusief verlopen en afbeeldingen. Een waarde die op wit slaagt kan falen op de afbeelding waarop hij daadwerkelijk ligt.
Ontwerp formulieren om afgerond te worden, niet om symmetrisch te zijn#
Formulieren zijn de plek waar de meeste websitedoelen daadwerkelijk worden bereikt, en waar de minste ontwerpaandacht heen gaat. Elk veld dat je toevoegt kost afrondingen; elk veld dat je weghaalt is gratis geld als je die gegevens niet nodig had.
- Vraag het minimum dat je nodig hebt om te reageren. De rest kun je in het antwoord vragen.
- Eén kolom. Formulieren in twee kolommen leiden tot overgeslagen velden en zijn slechter op mobiel.
- Labels boven de velden, altijd zichtbaar — labels die alleen als voorbeeldtekst bestaan verdwijnen zodra je typt.
- Juiste invoertypes en autoaanvulattributen, zodat telefoons het passende toetsenbord tonen en aanbieden in te vullen.
- Valideer bij het verlaten van het veld, niet bij elke toetsaanslag, en zet de fout naast het veld.
- Maak het formulier bij een fout nooit leeg. Ingetypte antwoorden kwijtraken is de meest voorkomende reden om af te haken.
- Vertel wat er na het versturen gebeurt, en hoelang het duurt.
Wat smaak is en wat niet#
Helder zijn over dat verschil scheelt veel tijd in beoordelingsvergaderingen. De linkerkolom is bediscussieerbaar; de rechter niet.
| Smaak | Geen smaak |
|---|---|
| Kleurenpalet | Contrastverhoudingen tegen de echte achtergrond |
| Lettertypekeuze | Grootte van de lopende tekst en regellengte |
| Illustratiestijl | Of afbeeldingen zinvolle alt-tekst hebben |
| Wel of geen grote koptafbeelding | Of de primaire actie zichtbaar is zonder te scrollen |
| Ronde of rechte hoeken | Of focustoestanden zichtbaar zijn voor toetsenbordgebruikers |
| Animatiestijl | Of animatie prefers-reduced-motion respecteert |
| Opmaakdichtheid | Of aanraakdoelen minstens 44 px zijn |
Veelgestelde vragen
Doet «boven de vouw» er nog toe?
Niet als regel dat alles wat belangrijk is daar moet passen — mensen scrollen, en dat doen ze al twintig jaar. Wat telt is dat de bovenkant van de pagina binnen een paar seconden antwoord geeft op «wat is dit en is het voor mij?». Doet ze dat, dan scrollen bezoekers voor de details. Doet ze dat niet, dan wordt er verderop niets gelezen.
Hoeveel lettertypen moet een website gebruiken?
Meestal één of twee families, waarbij gewichten het werk doen dat extra families zouden doen. De praktische reden is snelheid en niet smaak: elke extra familie en elk extra gewicht is nog een bestand dat geladen moet worden voordat tekst correct verschijnt. Eén goedgekozen familie met drie gewichten dekt vrijwel elke site.
Is een donkere modus de moeite waard?
Hij is de moeite waard als je hem vanaf het begin met ontwerptokens kunt doen, wanneer hij weinig kost. Hem achteraf op een afgeronde site aanbrengen betekent elke kleur, elke afbeelding en elke schaduw nalopen, en dat is een echt project. Ondersteun je hem, respecteer dan standaard de systeemvoorkeur en laat de gebruiker die overrulen.
Moet het ontwerp lijken op dat van concurrenten?
Conventies horen overeen te komen — navigatie bovenaan, winkelmandje rechtsboven, logo dat naar de homepage linkt — omdat die breken begrip kost zonder iets op te leveren. Alles boven de conventies is waar je je onderscheidt. De fout is de opmaak van een concurrent in zijn geheel kopiëren, wat meestal beslissingen importeert die bij hun content pasten en niet bij die van jou.
webdesign principeswebdesign best practicesux-principesformulierontwerpleesbaarheid websitevisuele hiërarchie
