Leeruitkomst 2: Interaction Design

Je ontwerpt een interactief mediaproduct dat aansluit bij de behoeften en kenmerken van de eindgebruikers op basis van aangereikte interaction design-principes en een of meer prototypes.

In het project WeRelate ontwerp ik een interactief mediaproduct dat aansluit bij de behoeften, wensen en eigenschappen van de eindgebruikers. De app richt zich op gebruikers met uitdagingen als ADHD, ASS en chronische ziekten en biedt hen een veilige en intuïtieve ruimte om gelijkgestemden te ontmoeten en betekenisvolle verbindingen aan te gaan. Om dit te bereiken, pas ik verschillende interaction design-principes en prototyping-methoden toe, waarmee ik de gewenste gebruikservaring kan creëren en testen.

Beschrijving Leeruitkomsten:
Wat heb ik gedaan? - Wat heb ik geleerd? - Hoe maakt me dat een betere media designer?

• Ontwerp - Aansluiten behoeftes en kenmerken eindgebruikers - Interaction Design Principes - Prototypes

Wat heb ik gedaan?

1. Ontwerpproces Voor WeRelate heb ik de complete branding ontwikkeld, waaronder de naam, het logo en de complete huisstijl. Bij het ontwerpen van de visuele identiteit heb ik rekening gehouden met de kernwaarden van de app, zoals verbinding, inclusiviteit en authenticiteit. Het logo is ontworpen om deze waarden visueel te weerspiegelen, met een modern en toegankelijk design dat de doelgroep aanspreekt. De huisstijl, inclusief kleurenschema's en typografie, is afgestemd op een warme en uitnodigende uitstraling zonder overprikkeling te veroorzaken, passend bij het doel van de app om een veilige en ondersteunende omgeving te creëren voor haar gebruikers.



Voor het ontwerp van de app heb ik verschillende interaction design-keuzes gemaakt, gericht op toegankelijkheid en gebruiksgemak. De interface is bewust eenvoudig gehouden, met een beperkt aantal dagelijkse matches en een duidelijke navigatiestructuur om cognitieve belasting voor de doelgroep te verminderen. Om deze keuzes te onderbouwen, hebben we gebruikersonderzoek uitgevoerd in de vorm van surveys onder potentiële gebruikers. Deze surveys gaven waardevolle inzichten in de behoeften en voorkeuren van de doelgroep, zoals de wens voor overzichtelijkheid en de behoefte aan een rustige en intuïtieve gebruikerservaring. De resultaten van dit onderzoek zijn direct meegenomen in onze concept- en designkeuzes, waardoor het ontwerp beter aansluit bij de doelgroep.



Gedurende het proces heb ik meerdere iteraties ontwikkeld: variaties in wireframes, visuele ontwerpen, en zowel low-fidelity als high-fidelity prototypes. Deze iteraties heb ik met elkaar vergeleken en geëvalueerd om te bepalen welke het beste aansluiten bij de gebruiksbehoeften en toegankelijkheid van de doelgroep. De app is uitgewerkt in verschillende prototypes om de interactie-elementen stap-voor-stap te kunnen testen. De eerste prototypes waren low-fidelity wireframes om de globale indeling en navigatie te testen. Deze wireframes dienden als basis voor het uitwerken van high-fidelity prototypes, waarin de onboarding is opgenomen. Met het high-fidelity prototype hebben we usability tests uitgevoerd bij potentiële eindgebruikers, waarbij we inzicht kregen in hun ervaring met het navigeren en interacties in de app. De feedback uit deze tests wordt verwerkt in de volgende ontwerpiteraties om de gebruikservaring verder te optimaliseren en nog beter aan te sluiten bij de behoeften van de doelgroep.



Voor de onboarding van WeRelate heb ik onderzoek gedaan naar het gebruik van humor en interactieve elementen om gebruikers een positieve eerste indruk te geven. Uit dit onderzoek kwam het idee voor een avatar genaamd Amber, een stoïcijnse steen met een humoristische en relativerende persoonlijkheid, die gebruikers door het onboardingproces zou begeleiden. Ik heb Amber volledig ontworpen en uitgewerkt, inclusief visuele representatie en dialoogopties, om een speelse en unieke gebruikerservaring te creëren. Na evaluatie van het concept hebben we echter besloten om Amber niet te integreren in de app. Dit besluit is genomen om de interface rustiger en minder prikkelend te houden, in lijn met de behoeften en voorkeuren van onze doelgroep.



2. Kenmerken van Eindgebruikers in het Ontwerp De doelgroepanalyse heeft de ontwikkeling van het interaction design sterk beïnvloed. Zo bleek uit onze onderzoeken dat gebruikers behoefte hebben aan veiligheid, overzicht en een eenvoudig proces om te matchen en te communiceren. Deze inzichten zijn vertaald naar ontwerpkeuzes, zoals de introductie van een beperkt aantal (drie) dagelijkse matches, en de toevoeging van visuele en tekstuele hints voor een rustig en overzichtelijk interface. De mogelijkheid om zelf door profielen te browsen is achterwege gelaten om keuzestress te beperken.

3. Toepassing van Interaction Design Principes
Consistency: Om gebruikers een voorspelbare en vertrouwde ervaring te bieden, heb ik gestreefd naar consistentie in kleuren, iconografie, en knoppen. Elke interactie binnen de app volgt dezelfde principes, zodat gebruikers niet verrast worden door onverwachte of onnodige visuele elementen.
Simplicity: Om de cognitieve belasting te verminderen, is het aantal visuele elementen in de interface beperkt. Acties binnen de app zijn stap-voor-stap opgebouwd, met duidelijke knoppen en aanwijzingen om gebruikers zonder stress door het proces te leiden.
Accessibility: Het ontwerp is aangepast voor een doelgroep die mogelijk moeite heeft met langdurige interacties of onoverzichtelijke schermen. Dit wordt ondersteund door grote, gemakkelijk leesbare tekst, voldoende witruimte, en een rustige kleurenschema.

Wat heb ik geleerd?

1. Ontwerpproces
Werken met Figma: Voor dit project heb ik voor het eerst gewerkt met Figma, nadat ik eerder Adobe XD had gebruikt. Ik heb de basisprincipes van Figma snel onder de knie gekregen, zoals het maken van wireframes en componenten, maar ook geavanceerdere technieken geleerd, zoals het maken van toggles, sliders, animaties en radiobuttons. Hierdoor kan ik nu dynamischere en realistischere prototypes maken die interacties beter simuleren.
Feedback: Tijdens het maken van wireframes en prototypes heb ik geleerd hoe belangrijk het is om ideeën iteratief te ontwikkelen en feedback van gebruikers te verwerken. Dit heeft me geholpen om mijn ontwerpen doelgerichter en gebruiksvriendelijker te maken.
Balans tussen creativiteit en functionaliteit: Het ontwerpen van Amber heeft me geleerd hoe creativiteit kan bijdragen aan een unieke gebruikerservaring, maar ook dat keuzes praktisch moeten blijven om de kernbehoeften van gebruikers niet uit het oog te verliezen.
Gebruikersonderzoek toepassen: Door surveys en usability tests te combineren met ontwerpbeslissingen, heb ik geleerd om mijn creatieve ideeën te baseren op echte gebruikersinzichten in plaats van aannames.

2. Kenmerken van Eindgebruikers in het Ontwerp
Empathie voor de doelgroep: Door de doelgroepanalyse heb ik geleerd hoe belangrijk het is om me te verdiepen in de behoeften en uitdagingen van specifieke gebruikersgroepen. Dit hielp me om ontwerpbeslissingen te nemen die aansluiten bij hun voorkeuren, zoals het beperken van matches en het vermijden van keuzestress.
Inclusieve ontwerpen creëren: Ik heb geleerd dat inclusieve ontwerpen verder gaan dan alleen visuele elementen. Het vraagt om een bewuste aanpak van de hele gebruikersflow, waarbij functionaliteit en emotionele veiligheid centraal staan.
De kracht van eenvoud: Door complexiteit te vermijden en gebruik te maken van rustige en overzichtelijke schermen, heb ik ingezien hoe belangrijk eenvoud is voor een goede gebruikerservaring.

3. Toepassing van Interaction Design Principes
Consistentie versterkt vertrouwen: Ik heb geleerd dat consistent gebruik van kleuren, knoppen en iconen gebruikers een gevoel van vertrouwen geeft. Hierdoor navigeren ze sneller en gemakkelijker door de app.
Cognitieve belasting verminderen: Het toepassen van eenvoud en overzichtelijkheid heeft me geleerd dat een minimalistische aanpak gebruikers helpt om zonder stress door een proces te gaan, vooral in apps die gericht zijn op kwetsbare doelgroepen.
Toegankelijkheid is essentieel: Het ontwerpen van leesbare, rustige interfaces met voldoende witruimte heeft me laten zien hoe belangrijk toegankelijkheid is, en hoe het ontwerp inclusiever kan worden door kleine aanpassingen.

Hoe maakt me dat een betere media designer?

Deze ervaringen hebben me geleerd hoe ik ontwerpkeuzes kan maken die niet alleen visueel aantrekkelijk zijn, maar ook functioneel en gebruiksvriendelijk. Het werken met Figma heeft mijn technische vaardigheden uitgebreid, waardoor ik prototypes sneller kan maken en meer flexibiliteit heb in het ontwerpen van dynamische interfaces. Door mijn focus op iteratie, feedback, en het verkennen van nieuwe tools ben ik flexibeler geworden in mijn creatieve proces, en ik ben meer bedreven in het combineren van creativiteit met praktische toepassing.

Ontwerpproces

Logo ontwerpproces V1 JPGKlik Hier

Logo ontwerpproces V2 JPGKlik Hier

Logo ontwerpproces V1 AIKlik Hier

Logo ontwerpproces V2 AIKlik Hier

Huisstijl Klik Hier

Onderzoek Huisstijl Klik Hier

Paper Wireframes Klik Hier

Onderzoek Creatieve Onboarding voor WeRelate Klik Hier

Uitwerking Creatieve Onboarding - Amber de Stoïcijnse Steen JPG Klik Hier

Uitwerking Creatieve Onboarding - Amber de Stoïcijnse Steen JPG V2 Klik Hier

Uitwerking Creatieve Onboarding - Amber de Stoïcijnse Steen AI Klik Hier

Uitwerking Creatieve Onboarding - Amber de Stoïcijnse Steen AI V2 Klik Hier

Prototypes

Figma Low-Fidelity Prototype Screens Klik Hier

Figma Low-Fidelity Live Prototype Klik Hier

Figma High-Fidelity Prototype Screens Klik Hier

Figma High-Fidelity Live Prototype Klik Hier

Figma High-Fidelity Prototype Screens - Showroom Klik Hier

Figma High-Fidelity Live Prototype - Showroom Klik Hier