SAFA HASSAN
GET IN TOUCH

PROJECT X

>
Interactive design Development Iterative design Professional standard Personal leadership

INTERACTIVE DESIGN

Voorwoord

Ik heb een website gemaakt om studenten met mentale gezondheidsproblemen te ondersteunen. Op de website kunnen ze verschillende diensten vinden die hen kunnen helpen.

Oriënteren

Voorafgaand aan dit project heb ik grondig onderzoek uitgevoerd. Ik heb een algemene studie over het onderwerp gedaan, een concurrentieanalyse uitgevoerd, trends en technieken geïdentificeerd, een interview gehouden met de doelgroep, persona's ontwikkeld, inspiratie opgedaan voor de website, een stijl vastgelegd inclusief kleurenpalet en lettertype, en verschillende naamideeën overwogen. Dit alles heb ik uitgebreid gedocumenteerd in eenPDF-bestand. Vervolgens heb ik dit ontwerp uitgewerkt in figma, waarbij ik meerdere iteraties heb doorlopen.

Usertest

Ik heb een usertest uitgevoerd bij mijn doelgroep, aanpassingen had met klikbaarheid te maken inplaats van design dus ik heb dat aangepast.

Doelgroep:

De usertest is uitgevoerd onder de doelgroep, bestaande uit gebruikers van onze website die geïnteresseerd zijn in mentale gezondheidsdiensten.

Testopzet Het doel van de test was om te evalueren hoe gebruikers de verschillende diensten op onze website konden vinden en gebruiken. Belangrijke taken waren onder andere: Navigeren naar beneden om een dienst te vinden. Selecteren van een dienst en de gedetailleerde informatie bekijken. Gebruiken van de bovenste navigatieknop om naar de sectie met diensten te scrollen. Klikken op tekst of afbeeldingen om naar de volgende pagina te gaan.

Resultaten Navigatie naar Beneden: Gebruikers konden eenvoudig naar beneden scrollen om de diensten te vinden. De navigatie werd als intuïtief ervaren. Selecteren van een Dienst: Gebruikers konden gemakkelijk een dienst selecteren. Het klikken op een dienst leidde tot gedetailleerde en nuttige informatie. Gebruik van de Bovenste Navigatieknop: De bovenste navigatieknop werd als zeer handig ervaren. Gebruikers waardeerden dat ze hiermee direct naar de sectie met diensten konden navigeren. Klikken op Tekst vs. Afbeeldingen: Over het algemeen klikten gebruikers vaker op tekst dan op afbeeldingen om naar de volgende pagina te gaan. Beide opties (tekst en afbeeldingen) zijn beschikbaar gesteld om de navigatie naar de volgende pagina te verbeteren.

Feedback Positieve Punten: De navigatie was duidelijk en gebruiksvriendelijk. De functionaliteit van de bovenste navigatieknop werd positief ontvangen. De informatie bij elke dienst was goed gestructureerd en informatief. Verbeterpunten: Verbeterde klikmogelijkheden: Omdat gebruikers vaker op tekst dan op afbeeldingen klikten om door te navigeren, is ervoor gezorgd dat beide opties even effectief werken.

Conclusie

De usertest toont aan dat de doelgroep de diensten op de website gemakkelijk kan vinden en gebruiken. De navigatie en informatiepresentatie voldoen aan de verwachtingen van gebruikers, en de bovenste navigatieknop wordt gezien als een waardevolle toevoeging. Door te zorgen dat zowel tekst als afbeeldingen goed functioneren voor navigatie naar de volgende pagina, wordt de gebruiksvriendelijkheid verder verbeterd.

DEVELOPMENT

Voorwoord

Ik heb een website gemaakt die studenten met mentale gezondheidsproblemen ondersteunt door middel van verschillende services. Voor dit project heb ik me vooral gericht op de ontwikkeling van de site, waarbij ik animaties heb toegevoegd met behulp van JavaScript. Dit was een uitdaging voor mij, dus ik heb hard gewerkt om mijn JavaScript-vaardigheden verder te ontwikkelen.

Gebruik van HTML en CSS

Het gebruik van HTML en CSS verliep over het algemeen soepel voor mij. Ik heb ervoor gezorgd dat ik alles goed geordend heb gehouden, de juiste benamingen heb gebruikt, en mijn bestanden in overzichtelijke mapjes heb geplaatst. Bovendien heb ik aandacht besteed aan het schrijven van semantisch correcte HTML en het toepassen van efficiënte CSS-stijlen om de structuur en presentatie van de website te verbeteren.

Gebruik van JavaScript (Animatie)

Ik had helemaal geen ervaring met JavaScript, dus dit was een echte uitdaging voor mij. Op mijn homepage heb ik een animatie toegevoegd die veel moeite vereiste. Voor mijn ontwerp wilde ik dat mijn hoofdtitel zou bewegen terwijl ik naar beneden scrolde en achter mijn volgende sectie zou verdwijnen. Wat aanvankelijk simpel leek, bleek al snel ingewikkeld toen ik aan de slag ging en tegen een aantal problemen aanliep.

In eerste instantie moest ik ervoor zorgen dat de hoofdtitel überhaupt mee zou bewegen als ik naar beneden scrolde, wat me vrij snel lukte. Ik merkte echter dat de beweging niet vloeiend was, dus heb ik dat ook aangepast. Daarnaast begon ook mijn ondertekst mee te bewegen, wat niet de bedoeling was. Ik heb ervoor gezorgd dat alleen de hoofdtitel beweegt. Verder zag ik dat de titel sprong en van zijn positie afweek bij het scrollen naar beneden. Ik heb ervoor gezorgd dat de beweging nu vloeiend verloopt vanuit zijn oorspronkelijke positie.

Toen kreeg ik te maken met het probleem dat de titel niet achter de volgende sectie verdween. Het bleek dat de z-index niet correct was ingesteld en dat de hoofdtitel een hogere z-index had dan de volgende sectie. Door deze uitdagingen op te lossen, is het mij uiteindelijk gelukt om de gewenste scrollanimatie te realiseren.

Mijn Javascript zorgt ervoor dat de header op mijn webpagina zich aanpast op basis van de scrollpositie van de gebruiker. Hiervoor heb ik twee event listeners toegevoegd die reageren op scrollgebeurtenissen. De eerste event listener zorgt ervoor dat de header wordt gefixeerd en dat de hoofdtekst (hero-heading) meebeweegt wanneer ik naar beneden scroll. De header wordt teruggezet naar de oorspronkelijke staat zodra ik weer naar boven scroll. De tweede event listener fixeert de header wanneer ik voorbij een specifieke sectie (tussen-section) scroll en reset de header wanneer ik boven deze sectie scroll.

Voor mijn javascript heb ik geleerd hoe ik scroll events kan gebruiken om dynamische veranderingen aan mijn pagina aan te brengen en hoe ik DOM-elementen kan selecteren en hun eigenschappen kan wijzigen op basis van de scrollpositie van de gebruiker. Daarnaast heb ik geleerd hoe ik de classList API kan gebruiken om klassen toe te voegen of te verwijderen van DOM-elementen voor conditionele CSS-stijlen. Verder heb ik inzicht gekregen in het efficiënt verwerken van scroll events om prestatieproblemen te voorkomen en hoe ik de transform CSS-eigenschap kan gebruiken om elementen te verplaatsen op basis van de scrollpositie, wat zorgt voor een vloeiendere en aantrekkelijkere gebruikerservaring.

Afbeelding 1 Afbeelding 2 Afbeelding 3

Version control

Ik heb gebruikgemaakt van Git voor versiebeheer in mijn projecten. Ik had hierbij nog geen ervaring, maar de workshop van Maikel was zeer behulpzaam. Dankzij deze workshop kon ik een Git-repository openen voor mijn website. Hierbij heb ik branches aangemaakt, commits gemaakt en merge conflicten opgelost om code-integratie soepel te laten verlopen.

Ik heb code-comments aan mijn code gezet omdat ze helpen om de functionaliteit en logica van mijn code te verduidelijken. Dit is belangrijk omdat het niet alleen anderen helpt om mijn code beter te begrijpen, maar ook mijzelf wanneer ik op een later moment terugkeer naar de code. Daarnaast heb ik ook een README-bestand gemaakt om gebruikers te voorzien van een handleiding voor de installatie en het gebruik van mijn code.

ITERATIVE DESIGN

Oriënteren

Ik heb een iteratief design proces doorlopen om het uiteindlijke deisgn te krijgen die ik heb. Ik heb hierbij feedbakc gevraagd van docent en doelgroep.

Ik heb als eerste wireframes en schetsen gemaakt. aan de hand van dit heb ik mijn eerst design gemaakt.

Ik heb als eerst gekeken naar mijn header en ik heb hiervoor een bijpassen afbeelding gevonden die goed past bij een rust gevend gevoel

Versie 1

van mijn ontwerp had aanvankelijk een bruine kleur die als overbodig werd beschouwd en de balans van de stijl verstoorde. Ook werd opgemerkt dat de tekst te klein en daardoor moeilijk leesbaar was. Als reactie hierop heb ik de kleuren verwijderd om het geheel rustiger te maken en de tekst meer zichtbaar en leesbaar gemaakt.

versie 2

van het ontwerp kreeg ik feedback dat de afbeeldingen niet goed bij de stijl pasten, dus heb ik deze aangepast. Daarnaast werd opgemerkt dat de footer niet voldoende informatie bevatte, dus heb ik deze uitgebreid.

Conclusie

Door het iteratieve ontwerpproces heb ik waardevolle feedback ontvangen, zowel van docenten als van de doelgroep, wat heeft geleid tot significante verbeteringen in het ontwerp. De eerste versies werden geoptimaliseerd door onnodige elementen zoals de bruine kleur te verwijderen, de tekstgrootte te vergroten voor betere leesbaarheid, en de afbeeldingen aan te passen zodat ze beter bij de stijl pasten. Daarnaast is de footer uitgebreid om meer relevante informatie weer te geven. Deze aanpassingen hebben geleid tot een meer gebalanceerd en gebruiksvriendelijk ontwerp dat beter aansluit bij de behoeften en verwachtingen van de gebruikers.

PROFESSIONAL STANDARD

Project Organisatie

Voor project X heb ik een website ontwikkeld gericht op studenten met mentale gezondheidsproblemen. Tijdens mijn onderzoek merkte ik op dat dit een significant probleem is. De website fungeert als een platform dat ondersteuning en verschillende diensten biedt. Om dit te realiseren, heb ik persoonlijke doelstellingen vastgesteld en een gedetailleerd plan opgesteld. Mijn focus lag voornamelijk op de ontwikkeling, waarbij ik mijn vaardigheden in JavaScript heb verbeterd. Ik kreeg waardevol advies van mijn coach, Lin Yuzhong, met betrekking tot het ontwerp van de website.

Communicatie met stakeholders

Tijdens overleg met mijn coach heb ik mijn initiële planning besproken. Hieruit bleek dat mijn planning te ambitieus was en ik deze moest herzien om realistischere doelen te stellen. Daarnaast hebben we het concept opnieuw besproken, waarbij ik van plan was meer nadruk te leggen op ontwikkeling dan op ontwerp.

Onderzoek

Voor ons onderzoek heb ik diverse methoden toegepast om diepgaand inzicht te verkrijgen. Dit omvatte algemeen onderzoek naar het onderwerp, een concurrentieanalyse, het identificeren van trends en technieken, het vaststellen van de doelgroep, interviews, persona's, inspiratie van andere websites, en het bepalen van een kleurenpalet en lettertype. Met al deze verzamelde informatie ben ik vervolgens gaan brainstormen over verschillende website-ideeën en welke informatie ik op de website wilde presenteren. Mijn bevindingen en conclusies heb ik gedocumenteerd in eenPDF-bestandover Exploratory Research

Reporting

Ik heb zorgvuldig elke stap van het onderzoeksproces gedocumenteerd, van het formuleren van onderzoeksvragen tot het ontwikkelen van prototypes. Deze documentatie zorgde voor consistentie en hielp bij het rapporteren van de voortgang aan mijn team en stakeholders.