Okan

Inleiding

Dit document beschrijft mijn persoonlijke bijdrage aan het Development-project voor Cardan. Het doel van dit project was het ontwikkelen van interactieve en toegankelijke digitale simulaties, specifiek gericht op het ervaren van visuele beperkingen zoals 'kokervisie'. Het was een vervolg op ons eerdere UX-project, waarbij we nu daadwerkelijk werkende prototypes maakten met HTML, CSS en JavaScript.

Mijn werkzaamheden tijdens dit project omvatten het mede opstellen van het projectplan, het maken van Figma-designs, het ontwikkelen van een keuzemenu voor simulaties en het programmeren van een interactief spel met behulp van JavaScript.

Projectplan en Werkafspraken

Aan het begin van het project hebben we met onze groep gezamenlijk een gedetailleerd projectplan opgesteld. Dit hielp ons om duidelijke doelen te stellen, deadlines vast te leggen en onze taken effectief te verdelen. We hebben hierbij ook concrete werkafspraken gemaakt die ervoor zorgden dat onze communicatie soepel verliep en problemen tijdig werden aangepakt.

Belangrijke punten uit het projectplan:

• Ontwikkelen van een responsieve website met minimaal drie interactieve games
• Volledig toegankelijk bouwen (WCAG-conform)
• Implementatie van versiebeheer via GitLab
• Uitvoeren van gebruikerstesten en verwerken van feedback

Werkafspraken

1. We gebruiken WhatsApp als communicatiemiddel
2. Ben je te laat of afwezig; communiceer dit op tijd (vóór 09:00) via WhatsApp
3. Houd je werk volgens planning bij, mocht het niet lukken; communiceer dit
4. We houden elkaar op de hoogte van onze werkzaamheden
5. We helpen elkaar waar nodig en bespreken problemen waar we niet zelf uitkomen
6. Drie keer niet aan de afspraken houden betekent dat je uit de groep wordt gezet

Conceptontwikkeling

Onze groep besloot een digitaal simulatieplatform te ontwikkelen met drie verschillende spellen, elk gericht op een specifieke visuele beperking. Ik heb gekozen voor het spel dat 'kokervisie' simuleert. Mijn spelconcept draait om het bereiken van doelen op het scherm met een beperkte zichtbaarheid door een kokervisie-effect, aangestuurd via muisbewegingen.

Mijn spelconcept:

• Kokervisie simulatie: Het zichtveld wordt beperkt tot een kleine cirkel die de muis volgt
• Interactieve gameplay: Spelers moeten vliegen vangen binnen de beperkte zichtbaarheid
• Progressive difficulty: Elke level wordt moeilijker met meer vliegen en kleiner zichtveld
• Real-time feedback: Score, timer en level tracking

Samenvatting

Er wordt een keuzepagina voor de simulaties gemaakt. Hier zijn drie simulaties weergegeven voor de drie soorten van een visuele beperking. Iedere simulatie bestaat uit een spelletje, waarin de gebruiker de beperking zo realistisch mogelijk ervaart door middel van hinderende elementen, gemaakt met Javascript.

Design

Voor de visuele uitwerking heb ik uitgebreide ontwerpen gemaakt in Figma. Ik richtte me hierbij specifiek op:

• Een duidelijk en toegankelijk keuzemenu om verschillende simulaties te selecteren
• De gebruikersinterface voor het 'kokervisie'-spel, inclusief navigatie, uitlegschermen en interactieve elementen

Figma Designs

Mijn ontwerpen hielden rekening met toegankelijkheidsprincipes zoals hoog contrast, duidelijke navigatie en eenvoudige interacties, waardoor de gebruikerservaring intuïtief en gebruiksvriendelijk is. Dit afgeleid van de brandguide en de website van Cardan zelf.

wireframe spel

kokervisie simulatie per level

feedback en verbetering

Design Principes

• Toegankelijkheid: Hoog contrast en duidelijke navigatie
• Gebruiksvriendelijkheid: Intuïtieve interface en eenvoudige interacties
• Consistentie: Afgeleid van Cardan's brandguide en website
• Responsive design: Werkt op verschillende schermformaten

Hoofdpagina simulatie

Hoofdpagina keuzemenu

Development: HTML, CSS en JavaScript

De daadwerkelijke ontwikkeling van mijn spel omvatte het programmeren van een interactieve simulatie in HTML, CSS en JavaScript. Ik bouwde een duidelijke en responsieve structuur waarin het spel met canvas-elementen functioneert.

Mijn werkzaamheden:

• HTML Structuur: Opzetten van een gestructureerde HTML-pagina, inclusief een duidelijke navigatie en informatie-elementen
• CSS Styling: Uitgebreide CSS-styling die zorgt voor een toegankelijk en visueel aantrekkelijk ontwerp
• JavaScript Functionaliteit: Implementatie van dynamische spelmechanismen
• Keuzemenu ook is de keuzemenu gemaakt door mij

JavaScriptspel:

• Een bewegende "kokervisie"-effect dat het zicht beperkt
• Klikdetectie voor interactieve spelelementen (vliegen vangen)
• Score- en levelsystemen met real-time updates
• Responsive canvas die zich aanpast aan verschillende schermformaten
• Audio feedback en visuele effecten

Technische Features:

• Event Handling: Muis- en toetsenbord interacties
• Game State Management: Level progressie en score tracking

GitLab Samenwerking

Voor een effectieve samenwerking hebben we GitLab gebruikt voor versiebeheer en projectmanagement.

Mijn bijdrage aan Git:

• Ik heb een git aangemaakt voordat we konden beginnen met coderen
• Alles staat opgenomen in de Git, ook heb ik geprobeerd om mijn mede groepsgenoten te helpen, dit staat buiten de commits
• Door duidelijke afspraken over branches, commits en code reviews konden we efficiënt samenwerken zonder conflicten

Git Workflow:

• Branch Management: Feature branches voor nieuwe functionaliteit
• Commit Strategy: Duidelijke commit messages en regelmatige updates
• Code Reviews: Peer review van alle wijzigingen
• Merge Process: Gecontroleerde merges naar main branch

Usertesten

Om de effectiviteit en realisme van de kokervisie simulatie te evalueren, heb ik uitgebreide usertests uitgevoerd met 5 verschillende gebruikers. Het doel was om te bepalen hoe realistisch de simulatie aanvoelt en of de gebruikerservaring toegankelijk en leerzaam is.

Testmethodiek:

Elke gebruiker speelde het spel tweemaal: eerst met de kokervisie beperking en daarna zonder beperking. Ik mat beide tijden met een stopwatch om het verschil in prestatie te kunnen beoordelen. Na afloop beantwoordden gebruikers vragen over de realisme, gebruiksvriendelijkheid en verbeterpunten.

Kwantitatieve Resultaten:

• Gemiddelde tijd met beperking: 01:24 minuten
• Gemiddelde tijd zonder beperking: 00:29 minuten
• Tijdsverschil: Bijna 3x langzamer met kokervisie simulatie

Belangrijkste Bevindingen:

• Effectiviteit: Alle gebruikers ervoeren de kokervisie simulatie als realistisch en leerzaam
• Gebruikersgedrag: Gebruikers bewogen de muis veel actiever om het beperkte zichtveld te compenseren
• Hoofdprobleem: Vliegen vlogen te snel, wat zorgde voor frustratie bij hogere levels
• Interface: Instructies werden door alle gebruikers als duidelijk en helder ervaren

Feedback voor Verbeteringen:

• Zichtcirkel: Meerdere gebruikers suggereerden een kleinere cirkel voor meer realisme
• Rand scherpte: De overgang van zichtbaar naar onzichtbaar minder scherp maken
• Spelbalans: Snelheid van vliegen aanpassen per level voor betere speelbaarheid

Implementatie van Feedback:

Op basis van de usertest resultaten heb ik de volgende aanpassingen doorgevoerd:

• Snelheid van vliegen aangepast per level voor betere spelbalans
• Zichtcirkel grootte geoptimaliseerd voor meer realisme
• Graduele moeilijkheidsverhoging geïmplementeerd
• Instructies verder verduidelijkt voor nieuwe spelers

usertest before en after

Conclusie:

De usertest toont aan dat de kokervisie simulatie effectief is in het overbrengen van de ervaring van deze visuele beperking. Het significante tijdsverschil (1:24 vs 0:29 minuten) en de hoge realisme scores bevestigen dat het spel zijn educatieve doel bereikt en gebruikers daadwerkelijk laat ervaren hoe uitdagend het is om te functioneren met kokervisie.

Reflectie

Door dit development-project heb ik praktische ervaring opgedaan met zowel front-end ontwikkeling als backend en heb ik geleerd hoe belangrijk toegankelijkheid en gebruiksvriendelijkheid zijn bij digitale oplossingen. Het werken met GitLab versterkte mijn samenwerkingsvaardigheden en heeft me geleerd hoe je effectief in teamverband ontwikkelt en problemen oplost.

Wat ik heb geleerd:

• Technical Skills: Verdieping in HTML5 Canvas, JavaScript game development en CSS animations
• Accessibility: Praktische implementatie van WCAG-richtlijnen
• Version Control: Effectief gebruik van Git in teamverband
• User Testing: Het belang van gebruikersfeedback in het ontwikkelproces
• Project Management: Agile werkwijze en sprint planning

Toekomstige Ontwikkeling:

• Uitbreiden met meer types visuele beperkingen
• Toevoegen van multiplayer functionaliteit
• Implementeren van progress tracking en analytics
• Mobile app ontwikkeling voor bredere toegankelijkheid

Dit project vormt een sterke basis voor mijn verdere ontwikkeling als webdeveloper en heeft me getoond hoe technologie kan worden ingezet om sociale impact te creëren door bewustwording te verhogen over toegankelijkheidsissues.