Waar je webdesign wel (en niet) consistent in moet zijn

Het komt gegarandeerd voor in een bespreking over jouw webdesign: de ontwerper geeft aan dat een bepaald element op die specifieke plek staat voor 'consistentie'. Je zult je dan misschien afvragen waarom dat zo belangrijk is. Het kan toch ook op die andere plek staan? Of die andere kleur hebben? Soms lijkt een ontwerp repetitief en ongevarieerd. Maar waarom heeft de ontwerper juist daarvoor gekozen? Waarom lijkt mijn site op al die anderen in dezelfde branche? Ik wil er toch uitspringen met mijn website? In dit artikel lees je wat consistentie in webdesign is en waarom het zo belangrijk is.

Wat is een consistent webdesign...?

Consistentie in webdesign is het repeteren van lay-out, functionaliteiten, visuele elementen en taalgebruik. Volgens de Norman Nielsen Group (het voornaamste onderzoeksinstituut op het gebied van UX design) is consistentie één van de beste manieren om de gebruikerservaring te verbeteren.

Er zijn twee soorten consistentie: interne en externe. Interne consistentie betekent dat elementen en functies worden gerepeteerd binnen één product (bijvoorbeeld een website). Denk hierbij aan het gebruik van hetzelfde lettertype, de terug-knop die altijd op dezelfde plek staat of broodkruimels die altijd op een pagina staan.

Op de website van Voetbal International worden video's in overzichten altijd aangegeven met een icoon. Hierdoor weet je altijd dat je op een pagina met een video komt. Dit is een goed voorbeeld van interne consistentie.

Externe consistentie betekent dat de werking en vorm van het product overeenkomt met de verwachtingen en kennis van de gebruiker. Zo werken de winkelwagens van webshops vaak hetzelfde en is de link naar het privacybeleid in de footer te vinden.

Zoek de overeenkomsten: al deze bekende webshops hebben een soortgelijke menu-indeling. Zie het consistente patroon rechtsboven: inloggen - favorieten - winkelwagen.

Elementen

Er zijn veel elementen waarin je consistentie kan toepassen.

De indeling van je site kan overeenkomen per pagina of per site-onderdeel. Denk bijvoorbeeld aan:

• De indeling van het menu.
• De volgorde van menulinks.
• De plaatsing van gerelateerde inhoud.
• De locatie en indeling van auteursinformatie.
• De indeling van formulieren.

Taalgebruik binnen je product of dienst. Taal is een belangrijk onderdeel van je site. Je kunt consistentie toe passen door:

• Typografie (lettertype en -vorm) te beperken tot een aantal variaties.
• Bezoekers aanspreken met 'je' of 'u'.
• Formeel of informeel taalgebruik.
• Sleutelwoorden die terugkomen.
• Gebruik van hoofdletters in koppen en inhoudstekst.
• Koppen een soortgelijke lengte te houden.
• Lengte van zinnen.
• Vormgeving van de merknaam.

Interactieve elementen op je website. Je kunt interactieve elementen hetzelfde vormgeven en acties laten uitvoeren. Probeer het volgende maar eens:

• Inline links laten linken naar andere pagina's.
• Het telefoonnummer in de header altijd laten linken naar de telefoonapplicatie op het apparaat.
• Links naar e-mails altijd in de e-mailclient van de gebruiker laten openen.
• Na het verzenden van formulieren een bedankbericht tonen in een overlay.
• Een carrousel animeren op dezelfde manier.

Vormgeving van alle elementen op je site. Hoe elementen eruitzien kan op diverse manieren versimpeld worden. Designers denken altijd aan:

• Elementen die met elkaar te maken hebben dezelfde kleur geven.
• Knoppen en andere interactieve elementen dezelfde vorm geven. Bijvoorbeeld een rechthoek, een rechthoek met ronde randen of een capsulevorm.
• Vorm van het logo.
• Kleuren van vlakken.
• Het gebruik van contrasterende randen.
• De afstand tussen paragrafen tekst en site-elementen.

Gebruikerservaring op alle apparaten. Tussen de weergave op verschillende apparaten kan ook consistentie worden toegepast. Heb je hier wel eens over nagedacht?

• Volgorde van informatie op een pagina.
• Niet verschuilen van functionaliteiten of inhoud.

Fotografie in de inhoud. Foto's kunnen goed bij elkaar passen en dezelfde merkwaarden uitbeelden. Bijvoorbeeld door gebruik te maken van de volgende eigenschappen:

• De dieptefocus van de foto's.
• Het wel of niet centraal stellen van mensen en/of de karakters van mensen die getoond worden.
• Intensiteit, verzadiging en tint van de kleuren op de foto's.
• Het wel of niet gebruiken van stockfotografie.
• Het gezichtspunt van de fotografie.

Interne consistentie

Interne consistentie kan goed bereikt worden door voordat je begint met het ontwerpen van de pagina's eerst een designsysteem op te zetten. Dit is een document waarin alle regels rondom kleuren, typografie, elementen, indeling en nog veel meer is vastgelegd. Het lijkt veel werk om eerst een designsysteem op te zetten, maar dit valt in de praktijk echter vaak mee. Je kunt een designsysteem ook prima simpel houden, en het bespaart op de lange termijn veel tijd.

Ook kan het toepassen van rasters en grids in je webdesign zorgen voor consistentie van de indeling van je site. Doordat de ontwerper zichzelf beperkingen oplegt kan zij een beter ontwerp maken.

Externe consistentie

Om externe consistentie te bereiken is het belangrijk om de verwachtingen en kennis van de gebruiker te onderzoeken. Bekijk bijvoorbeeld soortgelijke websites in jouw branche of ga op onderzoek uit bij de concurrent. Er zijn ook conventies die over het hele web worden gebruikt. Tekst die onderstreept en blauw is wordt herkend als een link. En donkere blokjes met tekst er in zijn duidelijk knoppen. Lees vooral ons artikel over designpatterns als je hier meer over wilt leren.

Bij externe consistentie gaat het er voornamelijk om dat elementen en pagina's hetzelfde dóen, en niet zozeer hetzelfde zijn vormgegeven. Je wilt natuurlijk wel voorkomen dat jouw product of dienst een kopie wordt van de concurrentie en dat je je niet kunt onderscheiden.

De 7 voordelen

Je vraagt je nu misschien af: waarom doen ontwerpers al deze moeite om hun ontwerpen zo consistent te krijgen? Daar zijn hele goede redenen voor.

1. Het levert geld op

Wist je dat consistent ontwerpen tijd en geld bespaart? De ontwikkelaars hoeven minder verschillende elementen en functionaliteiten te programmeren als ze worden hergebruikt. Soms kunnen ze externe consistente elementen zoals Drupalmodules gewoon implementeren om de ontwikkeling te verbeteren en versnellen. Het kan ook de conversie verhogen omdat gebruikers makkelijker begrijpen hoe ze een aankoop kunnen doen of zich aan kunnen melden voor jouw dienst.

2. Gebruikers kunnen sneller en beter aan de slag

Iedereen die een computer gebruikt heeft ooit geleerd hoe je daarmee omgaat. Als je website voldoet aan de standaarden kan een gebruiker zonder enige moeite de weg vinden. Interne consistentie is hierbij ook belangrijk: je wilt voorkomen dat de gebruiker zich op elke pagina helemaal opnieuw moet oriënteren om uit te zoeken hoe alles werkt.

3. Het wekt vertrouwen op

Bijna iedereen is bekend met phishing: oplichters die zich voordoen als een officiële instantie of bedrijf om via een misleidende e-mail of website hun slachtoffers op te lichten. Een manier om phishing te herkennen is door naar de consistentie van de site te kijken. Kleine verschillen in kleuren, lettertypes, indeling en werking kan een gebruiker het signaal geven dat jouw product of dienst niet te vertrouwen is. En deze kleine verschillen tellen snel op!

4. Het voorkomt verwarring

Als een handeling niet het gevolg heeft wat de gebruiker ervan verwacht is dat erg verwarrend. Stel je voor dat dezelfde knop op de ene pagina een overlay opent, en op de andere pagina direct doorlinkt naar een product. Voor een gebruiker werkt dat vermoeiend en desoriënterend. Met een goed webdesign wil je ervoor zorgen dat de gebruiker rust en duidelijkheid ervaart.

5. Consistentie zorgt voor toegankelijkheid

Voor gebruikers met een auditieve, visuele, motorische of psychische beperking is het lastiger om op het web te navigeren. Zij zijn extra afhankelijk van de standaarden en interne consistentie. Bedenk dat veel bezoekers van je site een beperking kunnen hebben en dat dit potentiële klanten zijn die je niet wilt mislopen!

6. Je communiceert je merk en intenties

Door consistentie te hanteren zorg je ervoor dat je je merk beter kan communiceren. Door bijvoorbeeld als overheidsinstantie de website ook echt vorm te geven als overheidsinstantie, weten de bezoekers gelijk waar ze aan toe zijn. En door je vormgeving goed op orde te hebben krijgen bezoekers een consistent gevoel op elke pagina van je website.

7. Het is makkelijker voor de ontwerper

Wist je dat het voor ontwerpers makkelijker is om consistent te ontwerpen? Dit komt omdat de ontwerper sneller ontwerpkeuzes kan maken en niet bij elk element en onderdeel het wiel opnieuw hoeft uit te vinden.

De regels verbreken

Na al deze voordelen vraag je je misschien af: mag je de regels voor consistentie dan nooit verbreken? Natuurlijk mag dat: er zijn twee manieren waarop een ontwerper interne en externe consistentie verbreekt in een ontwerp:

1. Elementen anders, maar vergelijkbaar maken. Het lijkt dus (op een groep) andere elementen. Vergelijkbare elementen werken goed om alsnog een verband tussen elementen te kunnen leggen. Als je een call-to-actionknop een andere kleur geeft dan alle andere knoppen op de site maar je houdt de rest van de vormgeving wel gelijk, dan communiceer je nog steeds dat dit een knop is. Maar wel een hele speciale.
2. Elementen anders, én distinctief maken. Het is dus niet te vergelijken met andere elementen op de site. Met distinctieve elementen is er geen of nauwelijks verband te leggen tussen andere elementen en moet een gebruiker zich heroriënteren. Dit kan goed toegepast worden om een onderdeel van je site los te koppelen van je merk, of om een onderdeel aantrekkelijker te maken voor een specifieke doelgroep.

Consistentie is een middel om de gebruikservaring te verbeteren. Maar als een ínconsistentie de gebruikservaring verbetert heeft het altijd voorrang. Consistentie is geen doel in design, maar een methode om je bezoeker te helpen.

Eén van de meest veelvoorkomende redenen om een element of onderdeel van een site inconsistent te maken is om de aandacht te trekken. Als je een foto, lettertype of kleur gebruikt die niet overeenkomt met de rest van de site, kun je ervan uitgaan dat dit elke gebruiker gaat opvallen. Je kunt zoiets toepassen om je businessdoelen en de gebruikersdoelen te behalen.

Op anwb.nl is te zien dat knoppen altijd hetzelfde zijn vormgegeven. Dit is een goede vorm van interne consistentie. Maar soms klopt de afstand tussen de tekst en de knoppen niet. Dit ziet er slordig en onbetrouwbaar uit. In de CTA-knop onder de tarieven wordt slim gebruik gemaakt van vergelijkbare knoppen met een andere kleur, maar de lettertypes in de knoppen zijn anders. Dit ziet er ook onbetrouwbaar uit. Daarnaast is de witte tekst in de gele knoppen niet toegankelijk voor gebruikers die slechtziend zijn.

Wees altijd voorzichtig in het verbreken van consistenties. Bedenk dat het een drastische methode is om aandacht te trekken, en dat het verwarrend kan werken voor de bezoeker. Zoals eerder genoemd kunnen kleine verschillen vragen bij de gebruiker oproepen, dus áls je een inconsistentie toepast moet je dat ook goed en compleet doen.

Het is eigenlijk heel simpel

Consistentie is een manier om je website gebruiksvriendelijker te maken, maar mag nooit een doel op zichzelf zijn; de gebruikerservaring staat altijd voorop.

Als een ontwerper tijdens de designmeeting het woord 'consistentie' gebruikt, kun je vanaf nu meepraten. Ben je op zoek naar een bureau dat je helpt om een gebruiksvriendelijke website te ontwerpen en te bouwen? Neem dan gerust contact met ons op. De koffie staat al klaar op het kantoor in Zeist!