Inclusive design: een optimale ervaring voor iedereen
Kan jouw website iedereen een optimale gebruikerservaring bieden? En dan bedoelen we ook echt iedereen – visueel of verstandelijk gehandicapten, dove mensen of iemand met een lichamelijke beperking. Grote kans van niet. En daarin staat jouw bedrijf zeker niet alleen!
De gebruiker voorop
Inclusive design is in principe heel breed en kan binnen veel branches toegepast worden. Maar omdat wij een digitaal bureau zijn willen wij ons richten op een optimale beleving op het web en hoe je een stap in de goede richting kunt doen door enkele van onze praktische tips toe te passen. Rekening houdend met de wensen en behoeften van de eindgebruiker. Veel mensen worden namelijk vaak vergeten als het gaat om het creëren van een optimale beleving op internet. Iemand die bijvoorbeeld slechtziend is kan vaak moeilijk zijn weg vinden op het web. Er zijn veel manieren waarop dit verbeterd kan worden. Denk aan duidelijke teksten, heldere kleuren en logische positionering van belangrijke elementen.
Overheidsstandaarden
Sinds december 2016 is een nieuwe Europese richtlijn in werking getreden, die digitale toegankelijkheid voor de overheid verplicht maakt. Net als dat openbare voorzieningen voor iedereen toegankelijk moeten zijn, geldt dit ook voor de websites van de overheid. Zou dit dan eigenlijk niet voor alle websites moeten gelden?
User Experience
Inclusive design gaat verder dan UX design. Dit laatste staat voor user experience design. Het gaat daarbij voornamelijk om het bieden van een zo goed mogelijke gebruikerservaring. Vanuit dit perspectief wordt een ontwerp gemaakt. Er wordt hierbij meestal enkel gekeken naar een algemene gebruikerservaring en dus niet naar álle gebruikers. Juist omdat UX designers de meest toffe ervaringen bedenken, wordt de toegankelijkheid vaak uit het oog verloren.
Accessibility design
Je zou denken dat je de gebruikerservaring later kunt verbeteren door accessibility (toegankelijkheid) toe te passen, en dat is natuurlijk ook zo. Maar waarom zou je niet direct in je design rekening houden met toegankelijkheid? Door de combinatie van een goed ontwerp, toegankelijke code en overzichtelijke context toe te passen werkt je website optimaal.
Voeg waarde toe
Door goed te luisteren naar de wensen en behoeften van de eindgebruikers komen we al een stap in de goede richting. Je wilt uiteindelijk echt iets kunnen toevoegen aan de ervaring van de gebruiker. Wanneer mensen surfen op het internet zijn ze vaak specifiek op zoek naar iets. Je wilt er dus voor zorgen dat diegene zo snel mogelijk vindt wat hij of zij zoekt. Soms kan een design nog zo mooi zijn, maar functioneel de plank volledig mis slaan. Zeker nu, in een tijdperk waarin alles steeds meer digitaal wordt hebben veel mensen moeite om hierin mee te komen. We kunnen onze ogen daarvoor sluiten en ons richten op de groep die het allemaal wel begrijpt, maar dit is uiteraard niet de bedoeling. Inclusie is een belangrijk aspect dat de nodige aandacht behoeft.
Een keuze bieden
Geef gebruikers een keuze. Laat ze zelf kiezen hoe ze door een website willen navigeren. In een webshop geeft de ene gebruiker er bijvoorbeeld de voorkeur aan om eerst een Quick view van een product te zien. De ander wil gelijk de detailpagina bekijken met zo veel mogelijk informatie. Je hoeft in dit geval niet perse een keus te maken. Dat willen we eigenlijk juist niet. Omdat je dan al snel kiest voor de grootste doelgroep. Ieder persoon is anders en je kunt daarom verschillende opties aanbieden. Ook zonder dat je het overzicht verliest. Door een duidelijke structuur aan te brengen door middel van kopjes scheelt dit qua tekst al heel veel. Licht belangrijke acties uit met duidelijke buttons die kunnen leiden tot conversie.
Toepassen in design, development & content
Je kunt dit alles doorvoeren in zowel design als development & content. Hieronder bespreek ik even kort een aantal dingen die je eventueel zou kunnen toepassen of die als inspiratie kunnen dienen.
Strategie & design
Contrast & Kleurgebruik
Maak gebruik van heldere, frisse kleuren. Bij voorkeur is de achtergrond van de pagina wit. Buttons en koppen in een contrasterende kleur komen zo beter uit. Wanneer iemand slechtziend is zullen belangrijke dingen er zo alsnog uitspringen. Toch is kleur niet het enige waarmee rekening moet worden gehouden als het gaat om contrast. Mensen die kleurenblind zijn zien dit contrast in kleur namelijk niet altijd. Een zwarte tekst met rode linkjes zijn voor mensen die kleurenblind zijn niet zichtbaar. Het is in dit geval dus slim om de linkjes ook onderstreept te maken.
Het veelbesproken hamburger icoon
Er wordt de laatste jaren steeds meer gebruik gemaakt van het hamburger menu. Voor de meeste mensen inmiddels een zeer bekend onderdeel. Toch is dit niet voor iedereen zo. Een gedeelte van de mensen, en met name ouderen, zijn op zoek naar hun vertrouwde menu items bovenaan de pagina. Wanneer dit niet gelijk gevonden wordt, wekt dit irritatie op wat weer kan leiden tot een hoger bouncepercentage (mensen die wegklikken). Het kan qua design een hele mooie oplossing zijn om een hamburger icoon te gebruiken, omdat dit niet afleidt van de rest van de content en weinig ruimte in beslag neemt. Toch is er op een desktop versie van de website vaak wel genoeg ruimte om een aantal menu items weer te geven. Dit scheelt ook weer een extra klik om je menu te openen en je hebt je navigatie altijd in beeld. Echt niet genoeg ruimte? Het is dan altijd nog een optie om, wanneer je alleen het hamburger icoon wilt gebruiken, hier het woord ‘menu’ aan toe te voegen.
Situaties van gebruikers
Je kent het wel: je staat in een overvolle trein, hutjemutje op elkaar. Toch moet je echt even kijken waar je de trein uit moet om over te stappen op de volgende trein. Super handig dat dit kan via de gebruiksvriendelijke 9292 app. Doordat je suggesties krijgt, makkelijk kunt doorklikken en alleen waardevolle informatie krijgt. Zo heb je binnen een mum van tijd de gegevens die je zoekt en wordt je geholpen op een heel klantvriendelijke manier. Dit is ook toe te passen op videobeelden. Zorg hierbij voor automatische ondertiteling waarbij het geluid uitstaat. Als optie kun je zelf het geluid aan zetten. Zo voorkom je irritatie bij de gebruiker en zijn omgeving. Houd rekening met situaties waar de gebruiker zich in kan bevinden, vooral bij de mobiele versie van een website.
Development
Video’s & animaties
Je ziet het steeds meer terug: bewegend beeld & animatie. Wist je dat er mensen zijn bij wie dit heel heftig overkomt? Ze raken hierdoor geïrriteerd of overprikkeld en haken sneller af. Het is heel verleidelijk om zo veel mogelijk hippe animaties te verwerken in een website. Het ziet er dan in jouw ogen heel tof uit doordat het super innovatief is. Houd alleen wel altijd de volgende vraag in gedachten; zit de klant hierop te wachten? En nog belangrijker, hoe komt dit over op de eindgebruiker die al die bewegende elementen misschien alleen maar verwarrend vindt?
WAI-ARIA & Page-scanners
WAI-ARIA of ARIA houdt in dat je secties binnen je websites markeert. Dit is voornamelijk handig voor blinde mensen die een pagina uitlezen met behulp van een page-scanner. Een page-scanner scant de pagina en leest alles heel snel voor. Met WAI-ARIA kun je de rol van bijvoorbeeld je menu doorgeven. Je kunt in je code role=”” gebruiken en hierbinnen de rol van een sectie aangeven. Ongeveer 95% van de browsers ondersteunt dit en kan zo uitgelezen worden door een page-scanner. Als developer valt dit te gebruiken in een combinatie van o.a. HTML en Javascript. Ook kun je met page-scanners rekening houden door al je attributen te labelen en je afbeeldingen een alt-tekst mee te geven.
Content
Vermijd vakjargon
In de content kun je rekening houden met gebruikers door makkelijke termen te gebruiken en vakjargon te vermijden. Dit begint al in de navigatie. Zorg er te allen tijde voor dat al je bezoekers kunnen vinden wat ze zoeken. Zij komen tenslotte voor informatie op je website en zijn meestal op zoek naar een specifiek onderwerp. De route waarmee gezocht wordt kan nogal afwijken van elkaar. Als je alleen al twijfelt of mensen bepaalde onderwerpen kunnen vinden of iets onduidelijk is moet je dit weglaten of op een andere manier indelen. Wanneer jij zelf al twijfelt, terwijl je vaak al de nodige kennis hebt, gaat de bezoeker dit zeker doen!
Logische opbouw
Iets anders is het vermelden van 'HOME' in je navigatie. Vroeger stond dit er altijd standaard in. Ofwel als 'huis icoon' of het woord 'HOME'. Voor veel gebruikers is het nog steeds verwarrend als je op het logo moet klikken om terug te gaan. Wanneer je twijfelt of gebruikers goed hun weg kunnen vinden zorg dan eerst voor een logische opbouw in je kopjes en navigatie. Wat past er echt onder een onderwerp en wat kan beter een eigen menu item worden? Je mag hierbij best kritisch zijn. En verplaats je in de gebruiker die voor het eerst de website te zien krijgt. Niemand wil teveel zoeken. Een logische opbouw met goed vindbare content is dus een must.
Conclusie
Waar het dus uiteindelijk op neer komt bij inclusive design is een optimale gebruikerservaring creëren voor alle bezoekers. Rekening houden met je doelgroep en hun behoeften. Je écht verplaatsen in de eindgebruiker en ook zijn of haar eventuele gebreken.
In het kort:
- Geef de gebruiker een keuze.
- Geef de gebruiker zelf de controle.
- Design met herkenbaarheid.
- Geef prioriteit aan attributen die waarde toevoegen.
Nodig ook iemand uit die bijvoorbeeld kleurenblind is om te kijken hoe hij of zij de website ervaart die je aan het ontwikkelen bent. Je komt zo tot nieuwe inzichten en gaat dingen zien waar je niet eerder aan hebt gedacht!
Mijn conclusie is dat iedere webdesigner, ux’er, accessibility designer, een inclusive designer zou moeten zijn. Ik snap dat je voor sommige websites denkt; is dit wel nodig? Mijn doelgroep is hier toch niet op gericht? Toch denk ik dat inclusive design heel breed is. Het gaat erom dat je je verplaatst in je eindgebruiker. Het is even niet de klant die koning is maar de eindklant. En wanneer deze gelukkig is, is je klant dit ook. Zorgen voor de beste ervaring voor al je bezoekers. Wanneer je dit hebt bereikt ben je toch stiekem wel een beetje trots?!
Let’s make the web a better place for all of us!
