Module: Skill 1.6, User-Centered Design
Nanna Rond DDM2D
Patrick Gielisse
11-1-2024
Deze opdracht draaide om het creëren van interactieve en aantrekkelijke gebruikersinterfaces, ofwel UI-ontwerp. Ik heb hier geleerd hoe ik de gebruikerservaring kan verbeteren door rekening te houden met de behoeften en voorkeuren van mijn doelgroep.
Ik heb in deze module lessen een user centered interface gemaakt. Dit heb ik gedaan met behulp van Adobe XD en Adobe Illustrator. Aan de hand van een casus heb ik een interface gemaakt voor een educatieve game met een doelgroep van 6 tot 10 jaar.
Debriefing
Ik ben begonnen met het maken van een debriefing van de opdracht. Dit heb ik gedaan om voor mezelf de opdracht duidelijk te maken. Zo weet ik zeker dat ik alles goed begrijp en kan ik zien wat er van mij verwacht wordt deze opdracht.
Planning:
De planning van deze periode is verdeelt over 10 weken, in week 9 is de deadline aan het einde van de les.
Week 1&2 – Introductie & Low Fidelity Wireframes (Debriefing & Wireframes sketches)
Week 3&4 – Wireframes, Adobe XD (Interactief, Mid Fidelity Ontwerp)
Week 5&6 – Uitwerking Interface, Adobe Illustrator (High Fidelity Ontwerp)
Week 7&8 - Kerstvakantie, Oud & Nieuw
Week 9 - Deadline Interactieve Interface + Proces(document)
Week 10 – Project of Voorbereiding ‘Schouw’
Leerdoelen:
We hebben ook een aantal leerdoelen gekregen die we aan het van de einde van de periode behaald moeten hebben. Deze sluiten aan op de focusgebieden waar we aan moeten werken.
- Heb ik kennis gemaakt met, en kan ik op basisniveau werken in Adobe Illustrator.
- Kan ik toelichten wat de tools ‘Adobe Illustrator’ en ‘Adobe XD’ toevoegen voor mijn ontwikkeling als Mediavormgever.
- Heb ik kennis gemaakt met, en kan ik op een basisniveau werken in Adobe XD.
- Heb ik actief mijn ‘toolbox’ verder ontwikkeld.
- Kan ik benoemen wat userflow, wireframes en een interface is.
- Kan ik uitleggen waarom een interface (UI) zo belangrijk is.
Opdracht:
We moeten in deze module lessen een user centered interface maken. Dit gaan we doen met behulp van Adobe XD en Adobe Illustrator. Aan de hand van een casus moeten we een interface maken voor een educatieve game. Voordat ik begin aan het maken van de interface moet ik onderzoek doen naar andere educatieve games die al bestaan.
CASUS: Lagere scholen ervaren de behoefte aan vernieuwing in het onderwijs. Terwijl boeken en apps hun waarde behouden, groeit de vraag naar een boeiendere en interactieve leerervaring. In reactie op deze behoefte heeft QuirkMind, een nieuw opkomend bedrijf gefocust op serious-games, de uitdaging aangenomen om een educatieve game of app te ontwikkelen voor lagere scholen. Als stagiair bij QuirkMind speel je een essentiële rol in dit project.
Het basisonderwijs is op zoek naar educatieve games voor leerlingen tussen de 6 en 10 jaar oud. De focus ligt op verschillende vakken zoals Engels, Nederlands, Rekenen, Geschiedenis en Aardrijkskunde. Quirkmind verwacht van mij dat ik de interface voor de educatieve game ga ontwerpen en uitwerken.
Eisen project:
Ik moet kunnen benoemen wat een wireframe, interface en userflow is.
Ik ga onderzoek doen naar interfaces van educatieve games die al bestaan.
Wireframe sketch om een idee te krijgen van hoe het eruit gaat zien.
Behance proces pagina
3 uitgewerkte schermen
Onderzoek - Product-analyse
Voor dat ik ben begonnen met maken van een assetlijst heb ik onderzoek gedaan naar andere educatieve games. Dit heb ik gedaan om een idee te krijgen van hoe een interface van een educatieve game eruit ziet. En welke stappen je doorloopt voor je het doel hebt behaald.
Ik heb onderzoek gedaan naar 3 verschillende educatieve games. Onder andere: Duolingo, Squla en Quizlet. Ik heb van deze games een level gespeeld en heb hierbij vooral gekeken naar de userflow en lay-out van de interface.
Duolingo:
Als ik de site open krijg ik de optie om in te loggen, zodra ik dat heb gedaan maak ik kennis met het uiltje van Duolingo. Vervolgens kies je een taal die je wilt leren en start Duo samen je eerste level op. Ik zie dat Duolingo verschillende soorten opdrachten aanbied om de taal te leren, zo wordt het niet saai.
Tijdens het maken van de opdrachten kun je niet terug naar de vorige opdracht, en ook niet vooruit voordat je deze hebt beantwoord.
Als je opdrachten fout beantwoord krijg je op het laatst nog de optie om deze opnieuw te maken. Zodra je dit hebt gedaan wordt je beloond met diamanten voor het behalen van het level.
Squla:
Zodra ik de site opstart zie ik dat ik de optie heb om een lidmaatschap af te sluiten, of om in te loggen. Ook kun je de prijzen van het lidmaatschap zien. Je kan kiezen in welke groep je zit en welke vakken je wilt leren. Hier kun je kiezen voor een gratis demo.
Ik heb gelet op de interface die Squla gebruikt, het is duidelijk en overzichtelijk. Je kan terug en vooruit op vrijwel alle schermen. Er zijn veel opties dus ook veel knopjes om op de klikken.
Na een opdracht afgerond te hebben krijg je nog wat feedback van het programma, deze kun je ook weer verder klikken.
Als je een opdracht volledig afrond heb je de optie om een spelletje te spelen, dit is waarschijnlijk gedaan om de kinderen die oefenen te belonen voor het leren. Zo blijft het leuk en uitdagend.
Quizlet:
Zodra je de app Quizlet opent krijg je gelijk in beeld om een abonnement te nemen op Quizlet Pro. Als je dit hebt afgewezen kun je op zoek naar leermateriaal. Je moet zelf in de zoekbalk opzoeken welk leermateriaal je wilt oefenen. Zodra je dit hebt gevonden kun je kiezen tussen verschillende opties om te leren.
Je kan de hele tijd terug naar het homescreen met behulp van het kruisje. Je kan niet vooruit voordat je de opdracht hebt gemaakt. Dit zie ik terug bij alle apps waar ik onderzoek naar heb gedaan.
Als je een opdracht fout maakt laat het programma je deze gelijk opnieuw invullen of komen er extra seconde bij je record tijd.
Assetlijst
Bij het maken van de assetlijst heb ik gebruik gemaakt van de template die mij is gegeven. In deze assetlijst laat ik zien welke buttons ik nodig heb en wat de prioriteit hiervan is. Ook heb ik voor mezelf opgeschreven hoe ik wil dat de userflow gaat.
Titlescreen: Ik wil als eerste graag het logo van het spel in beeld laten komen, zodat mensen weten welke app ze hebben opgestart. De prioriteit hiervan is laag maar het leek me gewoon een leuke toevoeging. Ik wil de stijl simpel en duidelijk houden omdat de doelgroep tussen 6 en 10 jaar ligt, ik wil het wel leuk houden door misschien een karakter toe te voegen.
Log-in & Sign-in: Het logo uit de titlescreen beweegt naar boven en daaronder komt een log-in en sign-in knopje. Je hebt dan de optie om in te loggen of een account aan te maken. Er komt ook een optie om een nieuw wachtwoord aan te maken als je deze vergeten bent. De priotiteit van deze Log-in en Sign-in knoppen is medium, als kind hoef je wat mij betreft niet in te loggen op een app om te kunnen leren voor school. Het is wel handig om je leer progressie bij te kunnen houden. De stijl blijft de gehele inferface hetzelfde.
Start/Settings/Exit: Zodra je hebt ingelogd zie je een scherm met de opties start, settings en exit onder elkaar. Zo is het overzichtelijk voor de speler van het spel. De prioriteit hiervan is hoog omdat ik wil dat mensen gelijk zien hoe ze het spel kunnen starten. Zonder knop zou dit onduidelijk zijn. De stijl blijf hier ook weer hetzelfde. Je kunt hier het spel starten, de settings openen of de hele app sluiten en terug naar het homescreen van je telefoon.
Background: De achtergrond zal passen bij de rest van de app. De prioriteit van de achtergrond is hoog, omdat dit de app een geheel maakt. De stijl past weer bij de rest van de interface. Je ziet het hele spel een achtergrond. Op de titlescreen en tijdens de opdrachten. De achtergrond is niet interactief.
Title: De titel van het spel komt in het begin in beeld, en tijdens het startscherm. Tijdens de opdrachten zal de titel niet in beeld zijn. De prioriteit van de titel is hoog. Mensen weten dan direct welk spel het is. De stijl is het zelfde als de rest van het spel. De titel is niet interactief.
Paper Prototype
Ik ben begonnen met het maken van een wireframe op papier, zo heb ik een idee gekregen hoe het er later digitaal uit gaat zien.
Wireframes & Userflow
Vervolgens ben ik begonnen met het maken van de wireframe sketch, hier zie je het proces wat de speler verloopt tijdens het gebruiken van de app. Ik heb deze wireframe gemaakt in Adobe XD. Aan het begin van de les heb ik kort uitleg gekregen over hoe Adobe XD werkt en wat je er allemaal mee kunt. Ik ken dus de basis van het programma.
Na het experimenteren met het programma ben ik aan de slag gegaan met het uitwerken van mijn paper prototype in Adobe XD. Ik had mijn paper prototype nog niet helemaal af dus ik heb ervoor gekozen om de rest in Adobe XD te maken, dat leek me efficiënter. Dit was alsnog best een uitdaging omdat ik het programma nog niet helemaal onder de knie had.
Adobe Illustrator
Nadat ik de wireframe en userflow af had ben ik in adobe illustrator begonnen. Ik ben icoontjes, logo's, achtergronden en buttons gaan maken. Ik heb ervoor gekozen om als logo een compas te maken. Omdat mijn spel kennis kompas heet leek me dit een leuk idee, ook heb ik als achtergrond een simpel landschap gemaakt omdat dit past bij de doelgroep.
Ik heb icoontjes gemaakt voor de verschillende vakken die de doelgroep kan kiezen. Ik heb elk vak een eigen kleur en icoon gegeven, ook heb ik bij elk icoontje geëxperimenteerd met de gradiënt color optie. Dit heb ik ook gedaan voor het aanspreken van de doelgroep.
Ook heb ik gezocht naar een passend lettertype voor mijn leerzame app, ik heb gelet op lettertypes die mijn doelgroep zouden aanspreken maar toch duidelijk leesbaar zouden zijn.
Ik heb gekozen voor het eerste lettertype omdat ik deze het beste vind passen bij de doelgroep, ook vind ik het leuk dat het lijkt alsof het zelf geschreven is. Ik ben bang dat de andere lettertypes op een klein telefoonscherm niet goed leesbaar zullen zijn.
Ik heb dit lettertype toegepast op alle schermen en op de buttons zodat het een geheel is. Ik heb de buttons een contrast gegeven door de achtergrond van de button een andere kleur te geven dan de tekst.
Nadat ik alle schermen en buttons heb gemaakt, heb ik alles in Adobe XD gezet. Vervolgens heb ik het prototype van de userflow gemaakt met de illustraties. Ik heb al een keer geprobeerd om een userflow te maken maar dat was met de eerste wireframe.
Eindwerk
Userflow link: https://xd.adobe.com/view/0346d497-71f1-4e2f-bf04-0ae7f7c02cf6-5615/?fullscreen&hints=off
Reflectie
Ik vond deze opdracht best leuk, ik heb veel geleerd over nieuwe adobe programma's en ook heb ik dus mijn toolbox kunnen verbreden. Ook vond ik het leuk dat ik een keer iets anders kon doen dan normaal.
