Development

Cardan

Introductie

In dit project ga ik samen met mijn groepsgenoot Zakaria werken aan het coderen van het design wat we als groepproject hadden gemaakt voor Cardan. We hebben verschillende stationen gecodeerd. Elk station heeft een eigen beperking die wordt beschreven en uitgewerkt doormiddel van Javascript. De talen die worden gebruikt in dit project zijn HTML, CSS en JS.

Cardan logo

Projectplan

Learning Outcome 4 Professional Standard

Voordat we kunnen beginnen met het project heb ik samen met Zakaria een projectplan opgezet zodat we precies weten wat we in het project wilde neerzetten. Hierin staat hoe we het project hebben opgezet en hoe we het project willen inrichten.

In het projectplan hebben we de volgende dingen beschreven:

  • Aanleiding van het project
  • Onderzoeksdoel
  • Probleemdefinitie
  • Git & Codepraktijken
  • Over de opdrachtgever
  • Planning
  • Communicatie/Werkafspraken
  • Beperkingen
  • Eindproduct

Daarnaast hebben ik en Zakaria de taken opgedeeld in twee delen. Zakaria was verantwoordelijk voor station 1 en 2 en ik voor station 4 en 5. Station 3 was een soort van vliegende keeper. Deze heb ik uiteindelijk op me genomen.

Projectplan

Station 3 Cognitieve Beperking

Learning Outcome 2 Development and Version Control

Dit station is gericht op mensen die te maken hebben met een cognitieve beperking. In dit station heb ik op basis van het design wat we in het design project van Cardan van Jarvin een e-mail formulier gemaakt met allemaal verschillende popups die op een random moment binnen de container oppoppen.

Met dit station wordt ervaren hoe het is om ADHD te hebben. Ik heb met JavaScript een array gemaakt die verschillende meldingen en emoji's oproept en deze daarna op een willekeurige plek binnen de container laat zien.

De code van dit station kan je hier vinden op Github:

Station 3 Cognitieve Beperking

Station 4 Motorische Beperking

Learning Outcome 2 Development and Version Control

Dit station gaat over de motorische beperking. Binnen dit station gaat de gebruiker door een form zijn gegevens invullen. Dit station is iets anders ingericht dan station 3. Namelijk de gebruiker heeft een keuze om twee verschillende games om te spelen om de motorische beperking te ervaren.

We beginnen met het eerste spel. In dit spel moet de gebruiker een formulier invullen met zijn of haar gegevens, maar er is iets bijzonders aan de hand met de muis. De cursor is namelijk erg lastig te besturen, omdat er een visuele beperking wordt gesimuleerd waarbij de muis willekeurig alle kanten op lijkt te bewegen. Omdat het technisch gezien niet legaal is om de muis volledig over te nemen in de browser, heb ik dit effect gesimuleerd door de cursor onzichtbaar te maken en onverwachte bewegingen toe te voegen via JavaScript.

Station 4 Game 1 Motorische Beperking

Het tweede spel is een spel waarbij de gebruiker moeite heeft om te typen. Hiermee wordt gesimuleerd dat je bijvoorbeeld de ziekte MS hebt. In dit spel moet de gebruiker zijn gegevens typen, maar de letters worden willekeurig vervangen door andere letters. Dit maakt het erg moeilijk om de zin correct te typen, wat de frustratie van mensen met motorische beperkingen simuleert.

Station 4 Game 2 Motorische Beperking

Station 5 Dyslexie

Learning Outcome 2 Development and Version Control

Dit station is gericht op mensen die te maken hebben met dyslexie. In dit station heb ik een tekst gemaakt die de gebruiker moet lezen. De tekst is zo gemaakt dat het lijkt alsof de letters door elkaar staan en de gebruiker moeite heeft om de tekst te lezen.

Ik heb de verschillende vragen gemaakt door middel van een les van Frank. In deze les heb ik namelijk geleerd hoe ik verschillende data kan genereren met een json file. In de bijgevoegde linkjes staan de scenario's en de javascript die ik heb gebruikt om deze game te maken.

De javascript code checkt of er bepaalde woorden in de ingevulde tekst staan. Deze worden dan vergelijkt met de mogelijke antwoorden die worden op gegeven en daarmee wordt dus de check gedaan of het antwoord goed of fout is.

Versie Control Github

Learning Outcome 2 Development and Version Control

Voor dit project heb ik gebruik gemaakt van GitHub. Ik heb samen Zakaria uitgenodigd aan de git repository en we hebben verschillende branches aangemaakt om samen te gelijkertijd aan het project te werken.

branches dev

De branches die je ziet zijn de verschillende stationen die ik heb gemaakt. Daarnaast heb ik ook de navigatiebar en de homepagina gemaakt.

Github

Usertest bevindingen

Learning Outcome 3 Iterative Design

Tijdens dit project heb ik verschillende usertests gedaan om te kijken of de stationen goed werkten en of de gebruikers tegen problemen aanliepen en of er andere bevindingen waren.

Door deze usertests ben ik erachter gekomen dat er nog geen startknop was en dat ik deze heb toegevoegd. Hierdoor kan de gebruiker de simulatie starten.

startknop

Ik heb nog meer feedback / een iteratie gekregen op het design maar dit ga ik in het kopje hieronder van de presentatie benoemen.

Eind Presentatie

Learning Outcome 4 Professional Standard

Voor dit project heb ik een presentatie gemaakt waarin ik het project heb gepresenteerd. In deze presentatie heb ik het project uitgelegd en de verschillende stationen laten zien in de demo.

eindpresentatie development

Ik heb tijdens de powerpoint presentatie feedback gekregen van de stakeholder als van Frank en Anke. Daarnaast hebben we als groep ook nog feedback gekregen van twee mede studenten.

De feedback die we kregen van de studenten was:

  • Homepagina laat niet duidelijk zien waar je op moet klikken.
  • Bij kokervisie was de handdoek snel vindbaar.
  • Positief punt, alle stationen lijken op elkaar qua design.

De feedback die we kregen van de leraren en de stakeholder was:

  • Bij station 1 kan de legenda weg.
  • Bij station 1 kan je het meer op een echte bioscoop laten lijken met een scherm.
  • Bij station 2 kan de standaard normale video weg. Is niet nodig voor de ervaring.
  • Op de homepagina een grote CTA knop toevoegen zodat de gebruiker direct weet wat er nieuw is en hierdoor sneller naar het nieuwe ervaringsplein gaat.
  • De flow van alle stationen is goed. Je skipt door alles goed heen.

De feedback die ik specifiek kreeg van Frank voor development was:

  • Bij alle stationen kan je het beste voordat je op de start knop klikt de game helemaal op display: none zetten. Dit zorgt voor minder afleiding en dan slaat de gebruiker ook niet de knop over.
  • Nog een aanbeveling is om alle stationen te testen met mensen die bijvoorbeeld echt dyslexie hebben. Hierdoor kan je testen met experts.
Eind Presentatie