Het Ontwerp
Last updated
Last updated
Het eindproduct is een speelkeukentje met op het aanrecht verschillende kookonderdelen en aan de achterwand een scherm dat fungeert als spiegel met een AR-laag er overheen. In deze speelkeuken kan gekookt worden met virtuele ingrediënten. Door houten schijven, met daarop een afbeelding van een ingrediënt, te laten scannen door een camera kunnen deze virtuele ingrediënten zichtbaar worden op het scherm. Vervolgens kunnen deze ingrediënten bewerkt worden door de kookonderdelen. Zo kan het ingrediënt in stukken gesneden worden door het mes, kan het gebakken worden door de pan en kan het gewassen worden via de kraan.
Daarnaast kunnen er ook recepten gevolgd worden door verschillende stappen te doorlopen, zodat er een gerecht ontstaat. Ook wordt het spel af en toe onderbroken voor een mini-game waarbij verschillende kooktechnieken aan bod komen. Zoals het op smaak brengen met peper en zout of het schoonmaken van de keuken. Om het aantrekkelijker te maken voor de doelgroep is er ook een monster personage ontworpen, die in een paar situaties terugkomt in de game. Tevens kunnen er stickers verdiend worden bij verschillende prestaties van de gebruiker.
Een sterk punt van dit concept, tegenover bijvoorbeeld touchscreen games, zit in de tastbaarheid. De gebruikers hebben de kookspullen echt vast, waardoor ze kunnen opgaan in het koken. De toevoeging van de AR, zorgt voor een extra dimensie in deze ervaring. Die koppeling tussen realiteit en virtualiteit zorgt voor verwondering en motorieke en cognitieve uitdaging voor de gebruiker. Naar die uitdaging zijn ze opzoek, bleek uit onderzoek naar kinderen in restaurants.
Bij het onderzoek naar speelgedrag en de gebruikerstesten (hier en hier) is ook opgevallen dat er een groot verschil zit tussen de jongere kinderen binnen de doelgroep en de oudere. De jonge kinderen zijn minder van de regels. Ze spelen in rollen (rollenspel) en kunnen daar helemaal in op gaan. De oudere kinderen zijn veel doelgerichter. Designer Debra Gelman zegt in haar boek 'Design for Kids' dat kinderen rond de 7 jaar zich echt beginnen te focussen op de regels. Ze willen ook per se het doel van een spel behalen.
De game faciliteert dit allebei. De gebruiker kan vrij spelen en beginnen met het koken van de ingrediënten, zonder dat hij ook nog maar een blik heeft geworpen op het recept. De installatie fungeert op dat moment meer als digitaal speelgoed, dan een game. Oudere kinderen zullen direct overgaan tot het maken van een gerecht en steeds meer uitgedaagd worden door complexere recepten.
In onderstaand filmpje wordt de algemene werking van het prototype getoond:
Meer informatie over de bouw van de installatie op bovenstaande foto is hier en hier te vinden.
Een valkuil van dit concept kan de gebruiksvriendelijkheid zijn. De gebruikers zullen nauwelijks met het concept van AR bekend zijn en daar komen de fysieke kookelementen nog bij. Daarom is het belangrijk dat de UX goed in elkaar steekt en hierop is dan ook de focus gaan liggen. Voor het ontwerpen zijn er focuspunten opgesteld die telkens terug moeten komen in het ontwerp.
De eerste is de term 'verwondering', dit is de emotie die de game moet opwekken bij de doelgroep. Toen bij de test met de doelgroep 'echte' dino's tot leven werden gebracht door middel van de AR app van de Albert Heijn was de testpersoon verbaasd en enorm enthousiast tegelijk. Bij het ontwerp is deze reactie en emotie als uitgangspunt genomen. Dit kan de AR bijvoorbeeld bewerkstelligen, maar het kan ook door iets te laten gebeuren dat de gebruiker niet verwacht. De schrijvers van het artikel 'How to design for children' hebben het over 'moments of surprise' die kinderen kunnen opwinden en zorgen voor 'herspeelbaarheid' en betrokkenheid. Deze 'moments of surprise' zullen ingezet worden op verschillende plekken in de game om zo de ervaring van de gebruiker te bevorderen.
Om het budget binnen de perken te houden en er voor te zorgen dat het niet toch een touchscreen game wordt is er voor gekozen geen touchscreen display te gebruiken. Dit geeft een extra uitdaging voor het ontwerpen van de UX, omdat vrijwel de enige input nu de AR is. De gebruiker kan niet handig door een tutorial heen klikken. Ook kan er geen gebruik gemaakt worden van audio. Uit een survey en expert review met restauranthouders kwam naar voren dat dit niet wenselijk is. Daarom is het belangrijk dat de game spelenderwijs wordt aangeleerd. Een andere uitdaging is dat de doelgroep net leert lezen. Alle teksten moeten dus kort, bondig en simpel zijn.
Tijdens het onderzoek is gekeken naar hoe je kinderen iets leert. De instructietheorie van psycholoog Robert M. Gagné bestaat uit 9 stappen om iets aan te leren (Khadjooi, 2011). Niet al deze stappen zijn even toepasbaar op een UX, maar sommige zijn wel gebruikt om een structuur aan te brengen in het ontwerp:
Aandacht verwerven
Presenteer de inhoud
Bied leer begeleiding
Bied feedback
Toetsing
Om de game zo gebruiksvriendelijk mogelijk te maken is het belangrijk dat de gebruiker constant feedback krijgt bij vrijwel iedere handeling. Dit kwam naar voren uit het onderzoek naar UX ontwerp voor kinderen. Volwassenen willen feedback wanneer er iets fout gaat. Kinderen willen feedback wanneer er überhaupt iets gebeurt. Vooral bij games werkt contextuele feedback goed, door bijvoorbeeld hints te laten zien die demonstreren hoe iets gedaan moet worden (White, 2016).
Als de UX en techniek perfect zijn, maar het er visueel niet aantrekkelijk uit ziet, dan zullen kinderen er gewoon voorbij lopen. Het is dus belangrijk dat de visuele stijl de aandacht trekt van de doelgroep. Hierin is een balans gezocht tussen speels en kleurrijk, maar mag het ook niet te 'kinderachtig' zijn. Dit is ontdekt bij gebruikerstesten. Kinderen van 8, 9 jaar beginnen dingen die te kinderlijk zijn minder leuk te vinden. Daarnaast mag de vormgeving niet te druk zijn en niet afleiden of in de weg zitten van het koken met de AR. Ook dit kwam naar voren in de gebruikerstesten. Met deze uitgangspunten is er een moodboard gemaakt om een idee te krijgen van de stijl:
Vervolgens is de stijl vastgelegd in een style tile. Om het ontwerp niet te druk en te kinderachtig te maken worden lichte maar ook onverzadigde kleuren gebruikt. Voor kinderen moet typografie simpel gehouden worden om lezen niet extra moeilijk te maken (Gross, z.d.). Er is gekozen voor een speels, maar ook goed leesbaar font. Titels zijn vaak kort en kunnen daarom in hoofdletters met een grote border getoond worden en tegelijkertijd hun leesbaarheid behouden. Bij korte zinnen is de typografie wel zo simpel mogelijk gehouden. Qua vorm wordt er gebruik gemaakt van ronde hoeken en om te hinten naar de driedimensionaliteit van sommige objecten worden highlights en schaduwen gebruikt.
Het beginscherm is de screensaver van de game en wordt getoond wanneer er iemand langs de installatie loopt. Het doel van het scherm is om de aandacht van de kinderen te trekken, dit is stap 1 uit Gagné's instructietheorie. Vervolgens moet de gebruiker aangezet worden tot het in beeld brengen van een eetschijf. Als dit lukt zal de schijf gescand worden en kan het spel overschakelen naar 'de kookstand'. Zodra de game voor ander halve minuut niet is gespeeld zal de game zich resetten voor de volgende gebruiker en wordt het beginscherm weer getoond. Het hele ontwerpproces van het beginscherm vind je hier en hier.
De AR techniek vereist nog dat de afbeelding die gescand wordt groot in beeld komt, dit was een probleem dat naar voren kwam bij gebruikerstest 1. In het uiteindelijke ontwerp wordt gebruik gemaakt van een rechthoek waarin de eetschijven geplaatst moeten worden, hierdoor komt de afbeelding groot in beeld en kan hij gescand worden. Dit design pattern is deels overgenomen van de AR dino app.
Om de aandacht te trekken en deze te focussen op de rechthoek is er gebruik gemaakt van levendige animatie en zijn de elementen geroteerd naar de gewenste kijkrichting.
Snijden Om een ingrediënt te snijden moet deze op de snijplank worden gelegd. Vervolgens komt er een hint tevoorschijn van een mes dat op een neer beweegt, om zo constant contextuele feedback te bieden (White, 2016). Dit past ook bij stap 3 van Gagné's instructietheorie: 'Bied leerbegeleiding in de vorm van hints'. Als het mes op en neer bewogen wordt, zal de hint verdwijnen en een progressbar zichtbaar worden, om ook op deze handeling feedback te bieden. Als de progressbar vol is wordt het ingrediënt gesneden.
Bakken Om een ingrediënt te bakken moet deze in de pan worden gelegd. Feedback op deze actie wordt gegeven in de vorm van rook. Om de progressie van deze handeling aan te geven zal het ingrediënt van kleur veranderen. Wordt een ingrediënt te lang gebakken, dan zal het object zwart worden en dus verbrand zijn. Dit voegt een stukje timing toe aan de gameplay.
Wassen
Om een ingrediënt te wassen moet deze onder de kraan worden gehouden. Vervolgens loopt er, in de AR laag, water uit de kraan voor feedback en loopt er langzaam een progressbar vol. Deze functionaliteit is niet verwerkt in het prototype en zal in de toekomst uitgewerkt moeten worden.
Het ontwerp brengt het gevoel van een echte keuken over naar de gebruiker, zonder dat dit afleidt van de AR laag. In gebruikerstest 1 zaten bepaalde elementen in de weg van de AR laag, wat voor ongemak zorgde. Daarom zijn alle elementen aan de bovenkant van het scherm geplaatst. Voor een uitgebreide kijk op het ontwerpproces klik hier.
Om de gebruiker het gevoel van 'accomplishment' en 'mastery' te geven, moet het eerste level zo makkelijk mogelijk zijn (Gelman, 2014). Het eerste level in het spel zal dan ook bestaan uit 2 ingrediënten en 4 simpele stappen. Vervolgens worden de recepten complexer, waarbij er 3 ingrediënten zijn met meer dan 2 stappen per ingrediënt.
De stappen zitten vast aan een stang en schuiven tegelijkertijd in als het recept geactiveerd wordt, dit is volgens stap 2 van Gagné's instructietheorie: Presenteer de inhoud. In gebruikerstest 1 mistten gebruikers soms dat een taak voltooid was, omdat de animatie te kort was. Daarom zal de stap, na afgevinkt te zijn, langzamer uit beeld schijven en duidelijk vervangen worden door een nieuwe stap. Voor een uitgebreide kijk op het ontwerpproces klik hier.
Om de gebruiker te prikkelen om alles in de game te ontdekken en om gewenst gedrag te belonen is er een beloningsmechanisme toegevoegd in de vorm van stickers. Kinderen houden er van om dingen te verzamelen en als ze bepaald gedrag associeren met beloningen zullen ze dit gedrag vaker tonen. Dit is de basis van 'gamification' (Gelman, 2014) en slaat ook weer terug op stap 4 van Gagné's instructietheorie: Bied feedback.
Elke keer als een sticker in beeld verschijnt zal dit moeten zorgen voor zo'n 'moment of surprise' die de gebruiker opwindt. Er zijn 4 stickers te verdienen. Als de gebruiker stap voor stap alle taken van een recept afvinkt en het eten bijvoorbeeld niet aanbrand dan zal de sticker 'Topkok!' gegeven worden. Als dit niet zo is gegaan dan zal de 'Vies!' sticker gegeven worden. Om aan te geven dat een ingrediënt kan verbranden wordt de 'Oeps!' sticker gegeven en de kinderen moeten dmv timing voorkomen dat ze deze sticker krijgen. De 'Netjes!' sticker wordt gegeven na het voltooien van de schoonmaak mini-game.
Bij gebruikerstesten kwam naar voren dat bij een langere speelduur het spel eentonig kan worden en dat het 'aanzetten tot bewegen' van de Design Challenge nog niet goed verwerkt zat in het spel. Om de cognitieve handelingen van het recepten volgen af te wisselen zullen er mini-games in de game zitten. Hierin staat beweging en motoriek centraal en worden verschillende kooktechnieken behandeld. Mini-games worden geactiveerd wanneer de gebruiker al enige tijd speelt en bijvoorbeeld twee recepten heeft volbracht. Dit moet ook zorgen voor een 'moment of surprise' voor de gebruiker.
Een voorbeeld van een mini-game is de keuken schoonmaken. Zodra deze mini-game start wordt er smurrie op het scherm geschoten, waardoor de keuken bijna niet zichtbaar is. Vervolgens wordt instructie gegeven om de sponsschijf over het scherm te bewegen om de smurrie te verwijderen. De smurrie zal blijven komen als de gebruiker niet snel genoeg is, dit stimuleert extra beweging bij de gebruiker. Voor meer informatie over de mini-games klik hier.
Bij de gebruikerstesten en feedback van de groenlichtpresentatie kwam naar voren dat de aandacht van het kind beter getrokken kon worden en het ontwerp visueel meer karakter kon gebruiken. Volgens designer Rebecca Gross is een goede manier hiervoor het introduceren van een vriendelijk personage (Gross, z.d.).
Het monster personage dat is ontworpen komt in verschillende situaties binnen de game terug, zodat de gebruiker hem herkent en een mini-band met hem opbouwt. De animatie van het monster is speels en natuurlijk om het personage meer persoonlijkheid te geven. De eerste keer dat het monster tevoorschijn komt om een gerecht op te eten moet zorgen voor een van de vele 'moments of surprise' binnen de gebruikservaring (BBC GEL, 2016). Voor meer informatie over het monster klik hier en meer over de animatie van het opeten hier.
De eetschijven zijn houten schijven met aan beide kanten een afbeelding van een ingrediënt. Deze afbeelding wordt gescand door de camera, waardoor de computer de positie van de schijf kan bepalen. De afbeelding moet veel trackpunten bezitten, zodat de AR beter werkt. Deze trackpunten ontstaan uit strakke contouren en harde contrasten en dit is dan ook toegepast bij het ontwerp. Voor meer informatie hierover klik hier.
Bij de 3-D-modellen van de ingrediënten zijn twee punten belangrijk. Het mag niet veel rekenkracht vereisen om te renderen, maar het moet tegelijkertijd herkenbaar zijn voor kinderen. Daarom is al vrij snel gekozen voor 'low poly', waarbij objecten gereduceerd worden tot geometrische vormen. Dit vereist weinig rekenkracht, maar het blijven toch herkenbare objecten voor kinderen. Voor alle 3D-modellen klik hier.
BBC GEL. (2016, 18 augustus). How to design for children. Geraadpleegd op 15 mei 2018, van https://www.bbc.co.uk/gel/guidelines/how-to-design-for-children#1-rewarding-experience
Gelman, D.L. (2014). Design for Kids. doi:1-933820-43-8
Gross, R. (z.d.). Designing websites for kids: Trends and best practices. Geraadpleegd op 15 mei 2018, van https://www.canva.com/learn/kids-websites/
Khadjooi, K. (2011). How to use Gagne's model of instructional design in teaching psychomotor skills. Geraadpleegd op 4 mei 2018, van https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4017416/
White, B. (2016, 20 januari). Designing For Kids Is Not Child's Play. Geraadpleegd op 15 mei 2018, van https://www.smashingmagazine.com/2016/01/designing-apps-for-kids-is-not-childs-play/
