Deze Principes voor Inclusive Design stellen mensen centraal. Ze bestaan zodat we kunnen ontwerpen voor de behoeften van mensen met langdurige, tijdelijke, situationele of veranderende beperkingen — zo'n beetje iedereen.
Ze zijn bedoeld om iedereen die zich bezighoudt met het ontwerpen en bouwen van websites en applicaties – ontwerpers, UX designers, ontwikkelaars, product owners, ideeënbedenkers, innovators, artiesten en denkers — een brede aanpak van Inclusive Design.
De Principes
Bied een vergelijkbare ervaring
Zorg ervoor dat je interface een vergelijkbare ervaring biedt voor iedereen, zodat iedereen taken kan afronden op een manier die bij hun behoeftes past, zonder dat dat de kwaliteit van de content aantast.
Volledige omschrijving
Of dit nu komt door omstandigheden, keuzes of context: mensen zijn divers. Omdat mensen verschillende manieren en tools gebruiken om te lezen en met interfaces te werken, moet de interface elke gebruiker evenveel waarde, kwaliteit en efficiëntie bieden.
Voorbeelden
- Bied alternatieven: Een basaal alternatief, zoals een alttekst, een (audio)transcriptie of gebarentaal, maakt je content toegankelijker. Om een gelijkwaardig alternatief te zijn moet het wel de essentie van het origineel vatten.
- Ergonomische functies: Het bieden van gesynchroniseerde closed captions maakt je video toegankelijker. Als je ze aanpasbaar en kleurgecodeerd maakt, bied je de meest vergelijkbare ervaring.
- Notificaties: Notificaties die in je interface voorkomen zijn visueel duidelijk, maar vergen van screenreadergebruikers extra moeite om te ontdekken. Met een live region kun je een gelijkwaardige ervaring voor blinde gebruikers bieden. De notificatie kost dan geen extra moeite voor blinde gebruikers.
Link naar Bied een vergelijkbare ervaring
Denk na over de context
Mensen gebruiken je interface in verschillende contexten. Zorg dat je interface een waardevolle ervaring biedt aan mensen, ongeacht hun omstandigheden.
Volledige omschrijving
Mensen zijn nieuwe gebruikers, ervaren gebruikers, gebruikers op het werk, gebruikers thuis, gebruikers onderweg en gebruikers die onder druk staan. Al deze contexten kunnen een rol spelen. Vooral voor hen die interactieve zaken al lastig vinden, zoals mensen met een beperking, kunnen zulke contexten het nog lastiger maken.
Voorbeelden
- Kleurcontrast: Wannneer je een interface buiten de deur gebruikt, zorgt voldoende contrast ervoor dat je minder last hebt van felle zon.
- Contextgevoelige ondersteuning: Als gebruikers voor de eerste keer in aanraking komen met een complex formulier of een ingewikkelde pagina, hebben ze misschien hulp nodig. Voor gebruikers die de interface al kennen, is die hulp misschien overbodig, zelfs afleidend. Contextgevoelige ondersteuning geeft je gebruikers de keuze om wel of niet hulp in te schakelen en geeft ze meer controle over de pagina.
- Captions onderweg: Je weet dat de video-content die je aanbiedt ook onderweg zal worden bekeken. Dat zou zomaar eens kunnen gebeuren in publieke ruimten waar mensen de content willen bekijken zonder andere mensen tot last te zijn. Voor kleinere viewports zet je standaard het geluid uit, en captions aan.
Wees consistent
Maak gebruik van bekende patronen en doe dit consistent.
Volledige omschrijving
Herkenbare interfaces maken gebruik van bekende patronen. Om hun betekenis en doel kracht bij te zetten, moeten ze consistent worden gebruikt binnen een interface. Pas dit toe op functionaliteit, gedrag, teksten en presentatie. Zeg dezelfde dingen op dezelfde manier, zodat gebruikers dezelfde dingen kunnen doen op dezelfde manier.
Voorbeelden
- Consistente ontwerppatronen: Gebruik patronen die consistent zijn met het web en het platform, om vertrouwdheid en begrijpelijkheid te vergroten.
- Consistente teksten: Gebruik duidelijke taal op een consistente manier op alle platforms. Dat geldt ook voor taal die wordt ingezet voor gebruikers van screenreaders, zoals tekstalternatieven, koppen, labels voor knoppen enzovoort. Het is ook belangrijk om de stijl van je taal consistent te houden, zorg bijvoorbeeld dat artikelen bovenin een duidelijk gemarkeerde samenvatting bevatten, of zorg dat een opsomming altijd begint met een vetgedrukte definitie.
- Consistente pagina-architectuur: Gebruik consistente pagina-architectuur tussen templates, zodat mensen de content makkelijk kunnen scannen en door de belangrijkste content kunnen springen.
Geef controle
Zorg dat mensen de controle hebben. Mensen moeten je content kunnen benaderen en iets mee kunnen doen op de manier die zij kiezen.
Volledige omschrijving
Vermijd het onderdrukken van standaard browserfunctionaliteiten zoals de mogelijkheid om tekstgrootte, zoom, contrast of rotering. Vermijd ook het veranderen van content als de gebruiker daar niet voor heeft gekozen, of bied een manier om de gebruiker er controle over te geven.
Voorbeelden
- Controle over scrollen: Infinite scrolling kan een probleem zijn, met name voor toetsenbordgebruikers, want die kunnen dan soms niet langs de steeds verversende content springen. Bied een optie om infinite scrolling uit te zetten en vervang het met een ‘Meer laden’ knop.
- Bied een stopknop: Sommige gebruikers worden misselijk van animaties of parallax scrolling, voor anderen zitten ze in de weg. Als dit soort dingen automatisch afspelen, maak het dan makkelijk om ze uit te zetten: bied een stopknop.
- Sta zoomen toe: Er zijn allerlei redenen waarom gebruikers graag willen inzoomen op hun touch-apparaat. Zet deze functionaliteit dus niet uit, en zorg ervoor dat er geen content onleesbaar is als het wordt gebruikt.
Bied keuze
Overweeg verschillende manieren te bieden waarop mensen hun taak kunnen voltooien, vooral bij taken die complex of ongebruikelijk zijn.
Volledige omschrijving
Er zijn vaak meerdere manieren om een taak te voltooien. Je kunt geen aannames doen over welke manier iemands voorkeur heeft. Als je alternatieve manieren biedt, geef je mensen de kans een keuze te maken die bij hun omstandigheden past.
Voorbeelden
- Verschillende manieren om een actie te voltooien: Als dat mogelijk is, bied meerdere manieren om een actie te volotooien. Op mobiel kan een ‘Swipe om te verwijderen’ actie worden aangevuld met een ‘Wijzig’ knop, waarmee de gebruiker items kan selecteren om te verwijderen. De email-applicatie op iOS is hier een voorbeeld van.
- Layout: Als je pagina lange lijsten met content bevat, zou je de mogelijkeheid kunnen bieden deze data weer te geven als lijst of als grid. Hiermee help je mogelijk ook mensen die grotere afbeeldingen willen, of grotere rijen.
- Toegankelijke alternatieven: Alternatieve manieren om data aan te bieden, bijvoorbeeld tabellen in plaats van infographics, moeten beschikbaar worden gemaakt voor alle gebruikers, en niet als verborgen link voor alleen gebruikers van screenreaders. Toegankelijke alternatieven kunnen nuttig zijn buiten een specifiek publiek, zolang je gebruikers de keuze geeft.
Prioritiseer content
Help gebruikers zich te richten op de belangrijkste taken, functionaliteiten en informatie, door informatie te prioritiseren binnen tekst en layout.
Volledige omschrijving
Interfaces kunnen lastig zijn om te begrijpen als de belangrijkste functionaliteiten niet duidelijk worden weergegeven of geprioritiseerd. Een site of applicatie kan veel informatie en functionaliteiten bieden, maar we moeten het mogelijk maken zich op één ding tegelijk te richten. Zoek naar het belangrijkste doel van de interface en de content en functionaliteiten die dat doel ondersteunen.
Voorbeelden
- Houd taken gefocused: Toon functionaliteiten en content niet allemaal tegelijk, maar wanneer ze nodig zijn.
- Prioritiseer taken: Emailprogramma's zijn er om email te lezen en schrijven. De ‘Nieuwe email’ knop is daarom zichtbaar op alle schermen en ergens in het begin van de focus-volgorde. De inbox heeft meer prioriteit dan andere lijsten, zoals ‘Verzonden’ en ‘Spam’. Mindergebruikte functionaliteiten zoals tags en mappen komen later in de focus-volgorde, want ze zullen waarschijnlijk pas worden gebruikt nadat de primaire taak, het lezen van email, is voltooid.
- Prioritiseer content: De primaire content op een nieuwsartikelpagina is het bericht zelf, dus het komt voor andere content, zowel visueel als in de volgorde van je markup. Gerelateerde content, zoals vergelijkbare artikelen, komen erna, en ongerelateerde content komt nog later.
- Prioritiseer tekst: Tekst voor links, koppen en knoppen moeten duidelijke taal gebruiken en de primaire tekst moet als eerste geplaatst worden. Dat geldt voor zowel zichtbare als onzichtbare tekst. Dit maakt tekst makkelijker om te scannen voor zowel mensen die de teksten lezen als mensen die er naar luisteren met een screenreader. Duidelijke taal biedt ook voordelen voor anderstaligen en is makkelijker om te vertalen.
Voeg waarde toe
Denk altijd na over de waarde van functionaliteiten en hoe ze de ervaring voor verschillende mensen ten goede komen.
Volledige omschrijving
Functionaliteiten moeten waarde toevoegen aan de gebruikerservaring door efficiënte en diverse manieren te bieden waarop gebruikers content kan vinden en gebruiken. Denk na over device-specifieke functionaliteiten, zoals stem, geolocaitie, camera en API's voor vibratie, en over hoe integratie met andere apparaten of tweede schermen tot meer keuze kan leiden.
Voorbeelden
- Integratie met randapparatuur of een tweede scherm: Het gebruik van steminterfaces om multimedia te bedienen, te zoeken naar content of de output van muziek of TV in te stellen voegt waarde toe voor mensen die moeite hebben met andere interfaces.
- Integratie met Platform APIs: Verbeter functionaliteit met behulp van platformfunctionaliteiten. De Vibration API kan het gebruik van notificaties verbeteren voor doven en slechthorenden. De Geolocation API kan het makkelijker maken voor mensen met motorische beperkingen om locatie-gebaseerde diensten te gebruiken.
- Maak het makkelijker om taken af te ronden: Voeg een “Toon wachtwoord” button toe aan input-velden, zodat gebruikers kunnen nakijken of ze de juiste tekst hebben ingevoerd, of voeg identifcatie met aanraking toe voor afgeschermde delen van je applicatie of site.