Omarm inclusiviteit: 7 principes van inclusive design



Onze individuele ervaringen variëren enorm. Zo erg zelfs, dat het tijd is om de begrippen 'normaal' of 'gemiddeld' eindelijk eens achter slot en grendel te stoppen. Misschien lees je deze blogpost bijvoorbeeld in een rustige kantoorruimte, comfortabel voor een computerscherm. Maar een andere lezer bekijkt hetzelfde stuk mogelijk op zijn mobiel, terwijl hij op het vliegveld zit te wachten op zijn vlucht naar Azië. Deze twee leeservaringen verschillen dag en nacht van elkaar. En elk heeft zijn eigen invloed op het geheel; denk aan de lettergrootte, het contrast en meer. Maar in werkelijkheid is het nóg diverser. Een slechtziend persoon bijvoorbeeld, moet zijn scherm waarschijnlijk vergroten voor de leesbaarheid. En iemand die blind is luistert misschien naar de tekst, terwijl deze wordt voorgelezen door een schermlezer. Zo gaat de lijst met mogelijke menselijke ervaringen door.

De manieren waarop we technologie waarnemen en ermee omgaan, zijn net zo uniek als onze persoonlijkheden. Ze zijn gebaseerd op onze directe omstandigheden, maar ook op onze achtergrond, kennis en vaardigheden. Wanneer we producten en interfaces maken met slechts één ideale gebruiker in gedachten, missen we een grote groep mensen die in contact komen met onze ontwerpen. En dat is precies waar webtoegankelijkheid en inclusive design (inclusief design) om de hoek komen kijken!

De 7 principes van inclusive design

  1. Bied content aan op meerdere manieren

  2. Ontwerp met verschillende situaties in gedachten

  3. Zorg voor consistentie en ontwerpgewoonten

  4. Creëer een eenvoudig en intuïtief ontwerp

  5. Werk samen om persoonlijke vooroordelen te overwinnen

  6. Wees tolerant bij gebruikersfouten

  7. Test en meet

Wat is inclusive design?


Inclusief design is een methodologie die mensen centraal zet. Het doel is om producten en diensten te ontwerpen die aan de behoeften voldoen van mensen met langdurige, tijdelijke, situationele of veranderende beperkingen. Kortom; van iedereen. Bij het ontwerpen voor inclusie proberen ontwerpers en ingenieurs verschillende opties aan te bieden om het product te ervaren. Dit in tegenstelling tot het kiezen voor één enkele, one-size-fits-all route. Inclusief design bouwt voort op de principes van UX (user experience) en toegankelijkheid. Het streeft ernaar dat alle gebruikers zich welkom en veilig voelen. Door meerdere oplossingen aan te bieden voor interactie met het product, vergroot inclusive design de reikwijdte van mensen die het kunnen gebruiken. En dat alles op een manier die past bij hun individuele behoeften.



Inclusive design: continue groei en verbetering


Onthoud: inclusief design is een proces; geen einddoel. Een interface die in elk denkbaar scenario inspeelt op de behoeften van de hele bevolking, is nooit binnen handbereik. Maar het uitbreiden van onze perceptie als het gaat om ontwerpen voor internet en mobiel (en voor wie we ontwerpen), is een waardevolle inspanning. Het leidt namelijk tot continue groei en verbetering. Als 'Inclusive by Design-bedrijf', zetten we ons bij Wix in om van internet een plek te maken voor iedereen; ongeacht de omstandigheden en mogelijkheden. We voldoen aan de WCAG 2.0-richtlijnen en bieden handige tools aan gebruikers om hun website toegankelijk te maken. Daarnaast maken we er een prioriteit van om al onze gebruikers wereldwijd de beste ervaring te bieden. We juichen inclusiviteit toe! Hieronder leggen we 7 inclusive designprincipes uit, gevolgd door een paar inspirerende voorbeelden uit de praktijk.



01. Bied content aan op meerdere manieren


Zorg ervoor dat alle elementen op je interface op meer dan één manier kunnen worden ervaren, en tevens dat deze methoden zorgen voor dezelfde waarden. Het hebben van meerdere vergelijkbare opties kan de kansen vergroten om aan de unieke behoeften en mogelijkheden van elk van je gebruikers te voldoen. Zonder afbreuk te doen aan de kwaliteit van de content.


Sinds inclusiviteit en toegankelijkheid een bedrijfsfocus zijn bij Wix, merken we pas hoe bewuster omgaan met de toegankelijke alternatieven het ontwerp zelf kan verbeteren. Eerder voegde de Alt-tekst die we voor afbeeldingen schreven bijvoorbeeld niet veel waarde toe aan de context van de pagina. Hierdoor zagen we in dat de afbeelding zelf niet zoveel toevoegde als we wilden.


Dit resulteerde in een wijziging van het ontwerp van de pagina en afbeeldingen. Deze beslissing versterkte de boodschap van de pagina, en verbeterde de algehele bruikbaarheid.

Tip voor in de praktijk: voeg altijd Alt-tekst toe aan afbeeldingen, videobijschriften, audiobeschrijvingen en transcripties, en label veldnamen op online formulieren op de juiste manier. Het toevoegen van Alt-tekst geeft de SEO van je website bovendien ook een boost!


Actrice Eileen Grubba's en een screenshot van de Wix Editor met een alt-text beschrijving
Actrice Eileen Grubba's Wix website bevat gedetailleerde alt-tekstbeschrijvingen.


02. Ontwerp met verschillende situaties in gedachten


Gebruikers zullen in verschillende contexten door je product bladeren. En je interface moet aan die verschillende omstandigheden kunnen voldoen. Een nieuwe gebruiker gaat bijvoorbeeld op zoek naar een algemeen overzicht van je diensten. Terwijl een vaste gebruiker misschien precies weet waarvoor hij is gekomen, de taak snel uitvoert, en tegelijkertijd met een andere taak aan de slag gaat.

Tip voor in de praktijk: voeg pop-up lightboxen toe die gebruikers indelen op gedrag. Zoals een eenmalige pop-up voor nieuwe bezoekers, of een exit-pop-up voor degenen die de website willen verlaten. Een ander voorbeeld is de donkere modus. Deze is bedoeld voor een betere kijkervaring in een omgeving met weinig licht.



Gif. van een voorbeeldpagina in een lichte en donkere versie.
Donkere en lichte modi zijn twee schermen met dezelfde interface, elk voorzien van verschillende gebruikersbehoeften.


03. Zorg voor consistentie en ontwerpgewoontes


Gebruikers moeten weten wat ze kunnen verwachten wanneer ze door je product bladeren. Probeer hen dus een idee te geven van wat elk van hun acties op het scherm zal opleveren. Dit kan worden bereikt door een samenhangende interface te maken met gerichte ontwerpgewoontes. Gebruik deze bekende patronen om je boodschap te versterken en de gebruikerservaring te verbeteren.

Tip voor in de praktijk: een bekende ontwerpgewoonte is de grijze knop, die een ​​actie aanduid die op dat moment niet beschikbaar is. Gebruik dit soort toevoegingen in je voordeel, en vermijd verwarrende situaties (zoals een grijze knop waarop je eigenlijk wilt dat gebruikers klikken). Andere voorbeelden zijn de kleuren groen en rood, die in bijna alle gevallen "ja" en "nee" betekenen. En ook het gebruik van een logo die terugleidt naar de startpagina is een veelvoorkomende gewoonte.



04. Creëer een eenvoudig en intuïtief ontwerp


Bij Wix zijn we stiekem een beetje verliefd op toevoegingen als parallax scrollen, interactieve zweef-effecten en andere webdesigntrends. Maar tegelijkertijd kunnen deze ontwerpen leiden tot minder intuïtieve handelingen. Het ontwerp van je interface moet gebruikers begeleiden bij het uitvoeren van de taak. Bovendien moeten alle ontwerpfuncties die je gebruikt (van zweef-effecten tot animaties), samenkomen om je content te versterken, in plaats van deze te overschaduwen.

Inclusief design zou niet in tegenspraak moeten zijn met een "goed" design. In tegendeel: het kan juist helpen om het ontwerp te verfijnen. De principes van inclusive design houden ons op het juiste spoor, wat betreft de boodschap die we met onze producten willen overbrengen.

Tip voor in de praktijk: er bestaan veel aspecten binnen een website of app, die kunnen helpen om het ontwerp eenvoudig en intuïtief te maken. Denk aan websitemenu's die gemakkelijk toegankelijk zijn, zweef-effecten, visuele aanwijzingen die vertellen of een element klikbaar is, en samengevouwen elementen om grote hoeveelheden content te ordenen. Het gebruik van een hiërarchische opstelling kan daarnaast helpen om je content op elke pagina te prioriteren.



Afbeelding een voorbeeld van een actieknop die wel werkt, en een die niet werkt.
Een grijze knop is een bekende ontwerpconventie, die een niet-beschikbare actie aangeeft.


05. Werk samen om persoonlijke vooroordelen te overwinnen


We hebben allemaal persoonlijke vooroordelen. Deze leiden er vaak toe, dat we ontwerpen voor gebruikers die het meest op ons lijken. Om niet aan deze "vooroordelen" toe te geven, is het goed om verder te kijken dan je eigen gevoel en ideeën, en nauw samen te werken met personen die verschillende achtergronden, fysieke- en cognitieve vaardigheden hebben. Deze samenwerking kan namelijk leiden tot unieke inzichten over je product; zowel over kansen als valkuilen. Bij Wix proberen we onze teams te voorzien van zowel ontwerpers, ontwikkelaars, ingenieurs en QA-specialisten, met uiteenlopende vaardigheden en achtergronden.

Tip voor in de praktijk: zorg ervoor dat er een verscheidenheid van mensen deelnemen aan het ontwerpproces. Van het eerste gebruikersonderzoek, tot het ontwerp zelf en de testfasen van het product (hier komen we later nog op terug).



Drie vrouwen in witte jurken in een rij met de armen om elkaar heen geslagen.


06. Wees tolerant bij gebruikersfouten


Het concept van de "perfecte gebruiker" loslatende, is het goed om er bij stil te staan dat alle gebruikers wel eens fouten maken. Door dit in je achterhoofd te houden en vanaf het begin in het ontwerp te verwerken, kun je wellicht een fijnere, minder frustrerende browse-ervaring bereiken voor je bezoekers.


Ruimte overlaten voor fouten betekent dat je gebruikers de kans biedt om van gedachten te veranderen, en hun fouten te corrigeren. Op deze manier zullen ze eerder geneigd zijn om verder te klikken of browsen. Ze weten dan namelijk dat hun acties altijd teruggedraaid kunnen worden. Deze designbenadering bevorderd niet allen inclusie, maar sluit ook aan bij het concept van calm technology (een methode waarbij alleen de aandacht van een gebruiker wordt getrokken wanneer dat écht nodig is). Je bevorderd hierdoor namelijk een meer menselijke en positieve relatie met de digitale wereld.

In de praktijk: geef je gebruikers de mogelijkheid fouten ongedaan te maken. Laat waarschuwingsberichten verschijnen voordat een blijvende actie wordt uitgevoerd, en succes- of foutmeldingen die duidelijke informatie over een bepaalde status geven. (Een 404-pagina is hier een voorbeeld van).


Voorbeeld van een waarschuwingsbericht in de Wix Editor
Een waarschuwingsberichten in de Wix Editor, geeft gebruikers de kans om van gedachten te veranderen.


7. Testen en meten


Net als elk ander onderdeel van het ontwerpproces, moet ook de inclusiviteit van je producten worden gecontroleerd en getest. Integreer inclusiviteit als een van de meetbare aspecten om naar te kijken in alle stadia van de productontwikkeling; van de UX-prototyping tot de gebruikersinterviews en bruikbaarheidstesten. Onder andere via Wix Analytics kom je tot bruikbare inzichten over het verbeteren van je website. Tip voor in de praktijk: controleer je interface altijd op naleving van toegankelijkheid, en vraag jezelf af of deze aan alle bovengenoemde criteria voldoet. Test je product(ten) met behulp van mensen met andere behoeften en capaciteiten dan die van jou, en vraag hen om feedback om erachter te komen hoe je aan deze behoeften kunt voldoen.


We hopen dat je met deze informatie zelf aan de slag kunt gaan met een toegankelijke website, waar iedereen zonder problemen van kan genieten. Laat je publiek zien dat ook jij diversiteit omarmt, en start vandaag nog met het ontwerpen voor inclusie!


Marijne Verhoef

Marketing Manager




Deze blog is gecreëerd met Wix Blog