Skip to content

The course Human Centred Design is about learning to design and build websites for real humans, using user testing and iterative design proces.

License

Notifications You must be signed in to change notification settings

jochemvogel/access-for-all

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AccessForAll - Toegankelijkheidsplatform

Live link

AccessForAll is een platform omtrent toegankelijkheid. Er zijn (toegankelijke) artikelen & tools te vinden. Daarnaast kunnen mensen met elkaar in gesprek gaan. Er kunnen onder andere meetups georganiseerd worden.

Deze README fungeert als een samenvatting van alle documentatie. Meer informatie over het concept, de testen en andere onderdelen is te vinden in de Wiki.

Table of Contents

🤓 Course ⚙️ Installation 💫 Concept 🙈 Exclusive Design Principles 🔍 Tests 🔗 Sources

🤓 Course

The course Human Centred Design is about learning to design and build websites for real humans, using user testing and iterative design proces. Human Centred Design is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.

Opdrachtomschrijving

Voor dit vak krijg je een ontwerp-opdracht die je gaat maken voor 1 mens. Een echt mens. Je moet je ontwerp 3 keer testen. Door te testen en te itereren ga je je ontwerp verbeteren. Uiteindelijk heb je een ontwerp dat exclusief gemaakt is voor 1 persoon. Een exclusive design ... Wie is deze persoon dan voor wie je dit gaat maken? Wat vindt deze persoon leuk of juist niet? En hoe bedient deze persoon een computer?

Het doel van deze opdracht is om je te verdiepen in een gebruiker, en om te leren testen. Test of jouw gebruiker, jouw 'mens', je ontwerp goed kan bedienen. Kloppen je aannames? Door te prototypen en testen met echte mensen leer je hoe je je ontwerp kan verbeteren.

Probleemstelling

De persoon waar ik voor heb ontworpen is Roger. Roger is 54 jaar en tien jaar geleden slechtziend geworden. De ziekte heet maculadegeneratie en is een progressieve oogziekte, waarbij het centrale zicht wegvalt. Omdat het progressief is, wordt het elk jaar slechter. Het is alsof er een vuist voor je ogen is. Door heel het gezichtsveld bevinden zich vlekken. Rechts is het zelfs een grote vlek. Daaromheen kun je wel zien, maar doordat het centrale zicht wegvalt, zie je de rest minder scherp. Zelf gaf Roger aan dat hij de vorm van de kerk wel ziet, maar de klok niet.

Uit de testen bleek dat Roger nog vaak zijn muis (en dus zicht) gebruikt, maar eigenlijk wilt hij dit niet. Is het daarom mogelijk om een app/website te maken die door middel van het toetsenbord en audio gebruikt kan worden?

Oplossing

Als eindproduct heb ik een toegankelijkheidsplatform ontwikkeld. Uit de gesprekken bleek dat Roger graag meer te weten wilt komen over toegankelijkheid en bedrijven/organisaties hier graag mee helpt. Hij gaf bijvoorbeeld aan dat hij graag in gesprek zou willen met Marie. Zij is Doof en gaf een gastcollege die Roger ook had bijgewoond. Daarnaast schreef hij een hoop dingen op die wij zeiden, zoals HTML, CSS, WCAG, contrast etc. Hieruit bleek dat hij erg veel interesse had in toegankelijkheid.

Het platform is in een donkere modus gemaakt. Wit is voor Roger niet fijn en kost veel energie. Daarnaast ziet Roger met zijn linkeroog beter dan met zijn rechteroog. Daarom heb ik een (groot) menu aan de linkerkant van elke pagina geplaatst, waarin ook goed te zien is op elke pagina hij op dat moment is.

Ten slotte maak ik gebruik van audio. Op het moment dat je door de pagina heen tabt, wordt alles uitgesproken. Ook is er een handleiding (bovenin het menu) te vinden, waarin alles wordt uitgelegd. Zo wordt er bijvoorbeeld gezegd dat je bij links op een bepaalde toets kunt klikken om te horen wat er precies op de desbetreffende pagina is. Ook heb ik aan elk artikel een omschrijving toegevoegd. Roger mist dit erg bij veel artikelen. Wij kunnen artikelen scannen om te kijken hoe lang het duurt en waar het over gaat. Roger kan dit niet. Om deze reden heeft elk artikel een samenvatting en inhoudsopgave (met extra informatie), zodat Roger de artikelen als het ware kan scannen.

⚙️ Installation

Get it local

This app is made with vanilla JS

1). Clone the repository

git clone https://github.com/jochemvogel/access-for-all.git

💫 Concept

AccessForAll is een platform omtrent toegankelijkheid. Er zijn (toegankelijke) artikelen te vinden. Daarnaast zijn er tools te vinden voor mensen met een beperking. Denk aan screenreaders, transcriptie tools etc. Niet enkel een lijst, maar ook de ervaringen van gebruikers. Daarnaast is het mogelijk om meetups te organiseren om te discussiëren over toegankelijkheid. Ten slotte is het mogelijk om te zoeken naar mensen met een specifieke beperking. Stel dat jij jouw website meer toegankelijk wilt maken voor slechthorende, dan kun je contact op nemen met iemand die slecht kan horen. Met deze persoon kun je dan gaan testen of je kunt wat vragen stellen. Hier zou bijvoorbeeld in een lijst met filters kunnen.

Screenshot

Screenshot app

Screenshot App

Design

First sketch design

Screenshot Design

Een meer uitgebreide versie van het concept is te vinden in de Wiki.

🙈 Exclusive Design Principles

Overview

1). Study Situation

Om te kunnen ontwerpen voor iedereen is het nodig dat je elk individueel bestudeert. Wat zijn zijn/haar gebreken? Wat kan deze persoon wel? Wat vindt de persoon interessant/leuk? Welke manier van interacteren heeft zijn/haar voorkeur? Het is dus belangrijk dat je eerst de situatie bestudeert en de persoon eventueel vragen stelt om achter bepaalde dingen te komen.

2). Ignoring Conventions

Op Wikipedia staat: Een conventie is een gangbare of verwachte manier van handelen binnen een groep of gemeenschap. Encyclo.nl zegt: wat de mensen meestal doen.

Het staat er goed: de verwachte manier van handelen en wat de mensen meestal doen. Deze conventies zijn ontworpen door ontwerpers en werken misschien helemaal niet voor mensen die geen ontwerpers zijn. Daarnaast komt er nog eens bij kijken dat ik hier ontwerp voor Roger. Roger kan niet even een grote witte popup wegklikken of vergelijkbare dingen doen. Wat voor mij normaal is, is voor niet ontwerpers misschien helemaal niet normaal, laat staan voor Roger.

3). Prioritise Identity

Door 'beperkte' mensen te betrekken bij het ontwerpen, worden deze als het ware jouw mede-ontwerpers in plaats van objecten die je bestudeert. Als jij een website ontwerpt voor een jong iemand, dan is het best wel leuk om er tussendoor grapjes in te stoppen of om de computer soms domme dingen te laten zeggen.

Alleen op het moment dat je iets ontwerpt voor wat oudere mensen én de website heeft een informatief doel (dus een een website met blogs/nieuwsartikelen) dan sla je de plank mis als je een beetje grappig gaat doen.

Dit komt allemaal weer samen bij het eerste onderdeel: bestudeer de situatie. Wie is de persoon waar jij het voor maakt? Hecht deze waarde aan snelheid of aan humor? Beiden misschien?

Gebruik de identiteit van de persoon voor wie je gaat ontwerpen. Door de identiteit voorop te stellen, krijg je ongetwijfeld nieuwe ideeën en inzichten.

4). Add Nonsense

Naast dat het vaak ook wel leuk is, zorgt het er ook voor dat je buiten de kaders gaat denken. Door iets te doen wat op voorhand nogal 'onzinnig' lijkt, maak je dingen die uiteindelijk misschien toch niet zo onzinnig zijn.

Door onzin toe te voegen, maak je alle dingen die je kunt bedenken zonder dat je ze gek vindt. Door dit te doen, ontstaan er een hoop dingen die eigenlijk helemaal niet zo gek blijken te zijn.

In de Wiki kun je lezen hoe ik deze principes heb toegepast binnen dit project.

🔍 Tests

Week 1

Het volledige testverslag van week 1 is in de Wiki te lezen.

Week 2

Het volledige testverslag van week 2 is in de Wiki te lezen.

Week 3

Het volledige testverslag van week 3 is in de Wiki te lezen.

🔗 Sources

Alle bronnen zijn te vinden in de Wiki.

About

The course Human Centred Design is about learning to design and build websites for real humans, using user testing and iterative design proces.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 86.7%
  • CSS 6.8%
  • JavaScript 6.5%