Wat is inclusive design? En hoe pas je dit toe?

Om een website te bouwen die voor iedereen duidelijk is, is het belangrijk om een eenvoudige en herkenbare structuur te hebben. Jongeren zijn vaak gewend om op het web te surfen, maar ouderen hebben vaak minder ervaring. Om iedereen aan te spreken in je website is het goed om je structuur eerst te definiëren.

Je website start altijd met de homepagina in de navigatie en eindigt in de meeste gevallen met de contactpagina. Indien je een webshop hebt plaats je best het winkelmandje rechts bovenaan. Daar staat het bij de meeste webshops en dat maakt het herkenbaar voor jong en oud. Gebruik hier ook het herkenbare winkelmandje-icoon met daarnaast het woord "winkelmandje". Dit is gekend bij iedereen en maakt het eenvoudig voor de gebruiker om in een oogopslag te zien waar een klik op deze knop hem zal brengen. Het logo in de navigatie maak je altijd aanklikbaar en brengt de gebruiker terug naar de homepagina.

Daarnaast is het goed om gelijkaardige contentblokken in dezelfde stijl te plaatsen over heel je website. Heb je bv. een quote van een werknemer op de home staan, dan zal dit best in dezelfde opmaak zijn als een quote van een klant op een andere pagina. Dit geeft herkenbaarheid in je website en brengt automatisch rust voor de gebruiker. Hij zal dit blok onbewust herkennen vanuit de home en weten wat het blok inhoudt zonder het hoeven te lezen. Hetzelfde geldt voor knoppen. Maak 2 (maximum 3) varianten van je knop en gebruik deze consistent doorheen heel de website.

Bij een formulier is het belangrijk om een eenvoudige opbouw te hebben. Zo plaats je best je labels buiten het inputveld. Wanneer de gebruiker vergeten is wat hij in het inputveld moet plaatsen, kan hij dit eenvoudig lezen boven het inputveld. Een placeholder in het inputveld kan een handige hulp zijn om aan te tonen hoe jij wilt dat iemand het input veld invult. Bijvoorbeeld bij een telefoonnummer kan je vragen dat ze starten met +32 …

Bij het invullen van je logingegevens is het handig dat de optie bestaat om je wachtwoord te tonen. Standaard wordt een wachtwoord niet getoond, maar wordt er per karakter een bolletje of sterretje in het inputveld geplaatst. Ben je iemand die snel typt of die op een smartphone typt, is het handig om het wachtwoord eerst even te controleren. Door een “oogje” aan het inputveld toe te voegen, geef je mensen de optie om hun wachtwoord zichtbaar te maken.

Bij het maken van inputvelden is het goed om ook kleurenblinden in het achterhoofd te houden. Maak je bij een inputveld een fout duidelijk door een rode rand rond het inputveld te plaatsen, dan is dit duidelijk voor veel mensen. Maar als je moeite hebt met het onderscheiden van kleuren is dit niet duidelijk genoeg. Daarom is het goed om zowel in kleur, als met een icoon en/of tekstueel aan te duiden dat er een foutmelding is. Hieronder zie je een voorbeeld. Google Material Design geeft hier ook duidelijke en goede guidelines voor.

Hetzelfde geldt voor knoppen. Heb je bijvoorbeeld moeite met lezen omdat je niet goed ziet of simpelweg omdat je je bril vergeten bent, dan kan het lastig zijn om de tekst in knoppen te lezen. Daarom geldt hier dezelfde regel als bij inputvelden. Voorzie zowel tekstueel als visueel wat deze knop gaat doen indien je er op klikt. Bijvoorbeeld bij een download knop zal je het woord "download" in de knop plaatsen. Maar wil je dat dit nog duidelijker wordt voor een breder publiek dan is het goed om een universeel, ondersteunend icoon aan de knop toe te voegen. Zie onderstaand voorbeeld.

In de websites die wij maken voor onze klanten voorzien we daarom vaak ook een pijl in elke knop. Dit doen we simpelweg om mensen in één oogopslag duidelijk de maken dat dit een knop is en een klik hierop de gebruiker naar een andere pagina zal brengen.

Wanneer je website onder andere uit tekst bestaat is het belangrijk om ook hier de gebruiker in het achterhoofd te houden. Heb je een ouder doelpubliek? Zet je lettertype dan niet te klein. Een goede regel die Google Material Design hanteert is om de fontgrootte bij leestekst en titels niet kleiner dan 14px te plaatsen.

Een ander gegeven waarop je best let bij tekst op je website, is de leesbreedte. Wanneer je regels té lang zijn zal het moeilijk worden voor bepaalde mensen om vlot door te kunnen lezen. In de printwereld is dit een gekende regel. Wanneer je de papieren krant bekijkt, zie je dat de blokken tekst niet van de linkerkant tot aan de rechterkant van het papier lopen. Er wordt vaak in meerdere kolommen gewerkt waardoor de leesbreedte niet te breed wordt. Als je kijkt naar nieuwssites zie je ook dat hierop gelet wordt. Een goed voorbeeld is de vrt nws site. De foto’s worden pagina-breed weergegeven, terwijl de leestekst slechts 500px breed is. Een quote kan hiervan afwijken omdat deze meestal in een groter lettertype staat. Een goede vuistregel is om je doorlopende teksten nooit breder te maken dan 700px.

Hetzelfde geldt voor de hoogte van de tekst, de lineheight. Ook deze moet groot genoeg zijn zodat mensen die minder vlot lezen duidelijk zien welke regels te onderscheiden zijn van elkaar. Zoals je in onderstaand voorbeeld ziet, oogt een ruime lineheight ook veel beter.

Bij het opmaken van tekstuele pagina's is het belangrijk om de juiste hiërarchie aan de tekst toe te voegen. Een veel gebruikte fout is dat er visueel niet duidelijk wordt gemaakt dat een titel bij een bepaald blok hoort. Zorg daarom altijd dat de padding boven de titel groter is dan de padding onder de titel. Hierdoor zorg je dat titels dichter bij hun tekst zullen staan en het dus ook duidelijker is voor mensen welke blokken tekst samenhoren. Voor mensen met dyslectie bijvoorbeeld is dit een aanpassing die de moeite waard is.

Ook in je kleurkeuze moet je de eindgebruiker in het achterhoofd houden. Felle kleuren vallen op en zijn goed om een contrast aan te duiden in je website. Zachte kleuren creëren rust en kunnen goed dienen als achtergrondkleur. Beide kunnen -indien goed gebruikt- een website duidelijker maken. Een regel die wij bij Digital Pulse vaak toepassen in het ontwerpen van een website is dat we minstens 1 hoofdkleur (of primaire kleur) gebruiken en minstens 1 steunkleur. De hoofdkleur mag opvallen, de steunkleur mag subtieler zijn en rust uitstalen. Op basis van die kleurkeuze kunnen we per pagina enkele woorden/knoppen/items in de kijker zetten door de primaire kleur te gebruiken. En kan de secundaire kleur net voor rust en aflijning zorgen.

Een voorbeeld hiervan zie je bij de website van Dokter Mia. Deze website wordt door een zeer uitgebreid doelpubliek bezocht. Zowel jong als oud komt hiermee in aanraking. Daarom kozen we voor de kleuren blauw en roze. Deze kleuren zijn opvallend en vooral ook goed leesbaar voor oudere mensen. Bij het openen van de website kan je in een oogopslag zien dat de knop “maak een afspraak online” opvalt door zijn primaire kleur. Daarnaast valt de bovenste balk met contactgegevens en het telefoonnummer op. Mensen die de site van een dokter bezoeken willen meestal zo snel mogelijk een afspraak kunnen maken, vandaar onze keuze om deze zaken te laten opvallen door een krachtige kleur. De tekst en foto zijn in dit geval ondergeschikt en hoeven dus niet té veel aandacht te vragen. Ook bij de foto’s is het dus belangrijk dat je kiest voor het juiste kleurenpallet. Moet de foto opvallen? Zorg dan voor een beeld met felle kleuren. Is de foto ondersteunend (zoals bij de website van Dokter Mia), dan kies je een foto met zachte, effen kleuren.

Wanneer je op zoek gaat naar duidelijke kleuren voor in je website, kan je gebruik maken van de tool Colorable van Invision. Hier kan je de kleurcode ingeven en kijken hoe goed leesbaar een kleur is op een andere kleur. Je kan aan de hand van sliders de hue, saturation en lightness aanpassen, net zoals je in grafische programma's zoals Sketch of Photoshop ook zou doen. Op basis van een "fail", "AA" of "AAA" zie je of de kleur niet goed leesbaar is, goed leesbaar is, of uitstekend leesbaar is. Met de hulp van Colorable hebben wij onlangs zelf de test gedaan en een kleine aanpassing in ons kleurenpallet gedaan op de website. Wil je een kleurenpallet dat goed leesbaar is voor iedereen? Gebruik dan zeker deze tool.

Tot slot is het belangrijk bij het bouwen van een website dat je je eindgebruiker goed kent. Vaak denk je als bedrijfsleider goed te weten wat je klanten willen en hoe ze dit willen. Als je al jaren in het vak zit, klopt dit vaak wel. Maar toch is het goed om de noden van je gebruiker nog eens af te toetsen bij hun alvorens je conclusies te trekken. Bij Digital Pulse vinden wij het daarom ook belangrijk om bij de start van een project goed af te toetsen wie de doelgroep is en wat het hoofddoel van de website is. Met die informatie in ons achterhoofd bouwen wij vervolgens een design op maat voor jouw doelgroep.

Een aantal puntjes om in het achterhoofd te houden bij het maken van een website:

• Ga eerst na wie de doelgroep is die de website zal bezoeken
• Zorg voor een duidelijke structuur en hiërarchie
• Zorg voor consistentie in je design elementen
• Kies goed leesbare kleuren en zorg voor een hoog contrast
• Controleer bij je doelgroep hoe hij/zij de website ervaart en maak hierna de nodige aanpassingen