Mid-fi-prototypen

För att underlätta framtagningen av en teknisk prototyp hjäl- per det om man börjar skissa på storyboards. Genom att noga välja vilka specifika scenarion som skissas upp kan det bidra med mycket information utan att det ger för många bilder.Vi valde därför att fokusera på en story där spelaren är mitt i spelet, ska mata kaniner och väljer fel antal morötter.

Som man kan se i figur 7.1 är kaninerna tydligt uppställda på en rad för att enkelt ge barnen en chans att räkna dem, samtidigt som grupperna med morötter är sorterade från minst till störst antal: vilket är för att framhäva effekten av tallinjen. Morötterna är samtidigt upplagda i grupper för att påminna om händer, vilket ska påminna spelaren om att räkna på fing- rarna.

Figur 7.1 - Story board när spelaren väljer en hög med

för få morötter

Figur 7.2 - En första implementation av kaninspelet i

Balsamiq

En mid-fi prototyp började ganska tidigt utvecklas i verktyget Balsamiq. Vi kom snabbt framåt med detta verktyg och hade utan större problem implementerat stora delar av vår spelidé. I figur 7.2 kan man se hur en första digital prototyp såg ut. När vi kommit en bit insåg vi att vi behövde animationer i prototypen för att förstärka känslor och vi valde därför att överge Balsamiq och övergå till PowerPoint, vilket alla i gruppen sedan tidigare har erfarenhet av.

I första delkursen valde vi att stanna vid en enkel mid-fi prototyp i PowerPoint, se figur 7.3, för att ge oss utrymme för att finslipa funktionalitet och koncept. Prototypen är grundligt gjord för att få en stabil grund att stå på när vi ska börja ut- veckla hi-fi. På så sätt kan vi snabbt komma igång att utveck- la hi-fi prototypen utan att behöva fastna på konceptuella de- taljer, kan fokusera på att ge en bra upplevelse för spelaren, och på så sätt kunna få ut så mycket som möjligt av våra tes- ter. I Appendix A återfinns en manual för de olika scenarierna i PowerPoint-prototypen.

Figur 7.3 - En första implementation av kaninspelet i

Balsamiq

Figur 7.4 - De två olika belöningssystemen

Figur 7.5 - De två olika Teachable Agenterna

7.1.1 Förbättringar

När Balsamiqprototypen byttes ut mot PowerPointprototypen skedde en del förändringar utseendemässigt. Till att börja med byttes belöningssystemet ut, se figur 7.1. Istället för att fylla tre stjärnor ska nu spelaren fylla en morot som sedan kommer återfinnas på bondgården. Anledningen till att vi gjorde detta är för att moroten har bättre koppling till bondgården än vad stjärnorna hade. I mid-fi-prototypen krävs det bara två korrek-

ta svar för att fylla moroten, men i hi-fi-prototypen kommer detta ändras till tre korrekta svar. Detta känns som en bra ba- lans, för vi vill inte att nivåerna nås för snabbt, för det leder till för många avbrott. Samtidigt vill vi att barnet ska få belö- ningarna tillräckligt ofta, så att de känner sig motiverade att fortsätta spela. För att förtydliga antalet rätta svar som krävs av barnet är stegen markerade i moroten.

Förutom att belöningssystemet byttes ut, byttes även Tea- chable Agenten ut. I Balsamiqversionen användes en blå fågel som Teachable Agent. Denna byttes sedan ut mot bondens androgyna barn Kim, se figur 7.5. Detta genomfördes på grund av att den nya agenten passar bättre in i bondgårdssto- ryn.

7.2 Hi-fi-prototypen

Mid-fi prototypen gav oss en bra känsla för konceptet och hur spelet fungerar. Nästa steg var att utveckla en spelbar proto- typ som kunde användas för testning på målgruppen. Vi valde att implementera ett spel som kunde spelas direkt i webbläsa- ren, utan att behöva installera ett program. Det är väldigt stra- tegiskt då det kan spelas på alla plattformar direkt, det vill säga Mac, Windows, och Linux etc. En ytterligare fördel med att spela i webbläsaren är att det går att spela på datorer utan att användaren har administrationsrättigheter, vilket är väldigt vanligt på till exempel skolor.

Det finns flera olika tekniker man kan använda för att implementera ett spel som spelas i webbläsaren. Vi valde att använda HTML5 och JavaScript för att det är ett växande område, så det är enkelt att hitta information och få hjälp vid behov, och det kräver inget utav användaren, förutom att de använder en modern webbläsare. För att vara effektiva och undvika att uppfinna hjulet en gång till använde vi oss av JavaScript-biblioteket KineticJS8 _{som sköter alla animationer}

och övrig grafik. Ljuduppspelningen sker med HTML5-ele- mentet “audio”.

För att flera personer i gruppen skulle kunna programmera samtidigt på ett effektivt sätt använde vi oss av versionshante- ringssystemet Git9_{, i kombination med GitHub}10_.

7.2.1 Förbättringar

När vi började utvecklingen av hi-fi-prototypen så gavs det mer möjligheter än när vi använde oss utav PowerPoint. Mid- fi-prototypen är väldigt statisk och man var tvungen att följa ett visst mönster. Men med hjälp av JavaScript och HTML5 fick vi större möjlighet att utveckla en prototyp som låg väl-

8 _{http://kineticjs.com/} 9 _{http://git-scm.com/} 10 _{https://github.com/}

digt nära en färdig produkt. Detta gjorde det mer möjligt för oss att utföra ordentliga tester på vår idé.

I början av utvecklingen av läget då Teachable Agenten Kim spelar själv så stod Kim stilla på samma plats, medan en hand pekade på den morotsgrupp som Kim valde, se figur 7.6. Denna lösningen lämnade vi senare på grund av risken att barnen inte skulle förstå att handen och Teachable Agenten hänger ihop. Vår slutgiltiga lösning blev istället att Kim för- flyttar sig från ursprungsplatsen och pekar på morotsgruppen som Kim valde, se figur 7.7.

Figur 7.6 - Arm som pekar och en stillastående Tea-

chable Agent.

Figur 7.7 – Teachable Agent som går fram och ställer

sig vid tallriken.

Figur 7.8 - Layout för morötterna i mid-fi-prototypen

Figur 7.9 - Layout för morötterna i hi-fi-prototypen

Ett problem var om morötterna var tillräckligt grupperade. Det är väldigt viktigt att barnen ser vilka morötter som hör ihop och förstår var de ska klicka, se figur 7.8. Detta löste vi genom att placera ut tallrikar under varje morotsgrupp, se figur 7.9. Det gav också den positiva effekten att de verkligen förståd att man ska mata kaninerna.

I mid-fi-prototypen använder vi oss av en röst för både Teachable Agenten Kim och Bonden Fred. Men i hi-fi proto- typen separerade vi dem, så att barnen lättare skulle förstå vem som pratar.

När man startar spelet så visas startskärmen. I vår mid-fi- prototyp hade vi en vit bakgrund som visade de olika delspe- len, samt Teachable Agenten och bonden Fred, se figur 7.10. I hi-fi-prototypen gjorde vi nya bilder som både är snyggare och dessutom följer samma stil, se figur 7.11 . Vi la också till en bakgrundsbild som ska göra spelet mer intressant för bar- nen.

Figur 7.10 - Bondgården med två klarade nivåer på ka-

ninspelet i mid-fi-versionen

Figur 7.11 - Bondgården med två klarade nivåer på ka-

8. Testning

För att få svar på hur vårt spel kan komma att fungera, samt för att fastställa designproblem, planerade vi in testning i samband med att spelet ansågs tillräckligt körbart. Buggar och andra problem gjorde att testning utfördes senare än be- räknat, men ändå i god tid för även hinna med analys. När väl kodningen var klar kunde resten av arbetet i projektet utföras parallellt.

Vi vill att vårt spel skall fungera för alla barn. Därför vore en förskola i Lund direkt olämplig eftersom andelen med akademisk bakgrund i staden inte representerar landet i öv- rigt. Vi sökte oss därför utanför staden med hjälp av vårt kon- taktnät, närmare bestämt Göteborg och Förskolan Lars Kaggsgatan 3511_.

En testplan gjordes, vilken återfinns i Appendix B, och användes som grund för testutförandet. Det visade sig dock att verktyget, Camtasia Studio12_{, medförde att spelets hastig-}

het drogs ner. Därför togs beslut att enbart observera och ta anteckningar.

Testet utfördes på totalt åtta deltagare, lika andel pojkar som flickor, i åldern 4-5 år.

8.1 Analys

8.1.1 Huvudmenyn

Det märktes tydligt att barnen hellre provar sig fram än att invänta och följa de instruktioner vi byggt in ljud till. Istället klickades det frenetiskt för att testa vad som hände.

Det var inte tillräckligt tydligt vilka delar av huvudmenyn som faktiskt ledde in till ett spel. Barnen klickade på ladan, bonden, Teachable Agenten, hönan, hästen, kon och kaninen i olika ordning. Speciellt efter att enbart kaninspelet fungerade försökte de klicka på annat, trots instruktioner om att de inte var implementerade. Bättre affordance skulle behövas i hu- vudmenyn, samtidigt som ljud och animationer skulle behö- vas även för bonden, Teachable Agenten och ladan.

8.1.2 Första spelfasen

Även här var barnen ivriga att komma igång, och klickade gärna innan instruktioner och animationer var klara. Enbart en deltagare förstod aldrig hur man skulle gå tillväga för att få rätt resultat. Resterande hade olika tillvägagångssätt. En del provade sig fram första omgången, för att sedan klara utma- ningen direkt nästa delmoment. Andra började med att räkna kaninerna och sedan räkna morötterna på tallrikarna. Vissa gjorde fel med vilje för att se vad som hände.

Barnen upplevde att animationerna gick för långsamt. Kanske borde man även lägga till fler moment innan man avslutar spelomgången i kombination med att dra upp tempot. Vid en eller två morötter utbrast barnen "lätt".

När första spelmomentet var utfört visades stor uppskatt- ning på belöningssystemet från samtliga deltagare. De var dock ivriga att antingen klicka in sig i spelet igen, eller försö- ka spela ett annat spel, varför första momentet i spelomgång 2 började med att de av misstag klickade på den tallrik som fanns just där de nyss klickat. Snabbare animation på belö- ningen samt constraints emot att klicka innan kaninerna ra- dats upp löser förhoppningsvis problemet.

8.1.3 Andra spelfasen, Teachable Agenten tittar på

Barnen lyssnade inte speciellt bra på förklaringen till att man skulle visa Teachable Agenten. Man bör kanske ha en skärm där Teachable Agenten kommer fram och förklarar att den också vill lära sig. Genom att visa en lugnare bild, utan klick- bara alternativ, tvingar barnet att ta del av den information vi vill förmedla.

I övrigt gick även denna del som tåget, bortsett från pro- blemet med att klick i huvudmenyn följde med in i spelom- gången.

8.1.4 Tredje spelfasen, Teachable Agenten spelar

Enbart en testdeltagare förstod hur man skulle göra, resteran- de behövde instruktioner. De försökte spela vidare som de gjort innan, klickade frenetiskt på rätt tallrik och undrade var- för det inte hände något. Efter att de klickat på rätt ansikte återgick de till att klicka på tallrikarna ett par gånger innan de åter kom på vart de skulle klicka.

En lösning skulle vara att plocka bort alla tallrikar utom den som Teachable Agenten väljer, för att tydligare belysa vad som efterfrågas. Risken med det är att konceptet med tallinjen försvinner, så en annan lösning kan vara att dimma ner de andra tallrikarna. Därefter bör de nya knapparna göras tydligare, i nuläget är de helt osynliga för barnen. Ändrad storlek, animering för att belysa att något nytt skett, eventuellt även flytta placeringen.

8.1.5 Teachable Agenten

Ingen deltagare förstod meningen med vår Teachable Agent. En del ryckte på ögonbrynen när Teachable Agenten pratade med tjejröst. De flesta barnen såg Teachable Agenten som en pojke, Teachable Agenten bör därför göras mer androgyn. Kanske bör både bonde och Teachable Agenten presenteras i

11 _{http://goteborg.se/wps/portal/enheter/forskola/forskolan-lars-kaggsg} 12 _{http://www.camtasiasoftware.com/camtasia/index-camtasia-studio-eu.htm}

en filmsekvens innan spelet drar igång. Det var inte tillräck- ligt tydligt vilken röst som tillhörde vem.

8.1.6 Diskussion med lärare

Främst diskuterades svårighetsgraden. Gemensamma uppfatt- ningen var att barnen tyckte spelet var för lätt. Förmodligen har vi underskattat kunnandet för målgruppen. Samtidigt kan detta balanseras med högre svårighetsgrader, samtidigt som även yngre personer kan använda spelet.

Läraren föreslog att direkt använda siffror, och att även byta ut glad och ledsen gubbe mot ”Rätt” och ”Fel”, eftersom de är i ett stadie där de lär sig känna igen ord och bokstäver.

Barnen samarbetar gärna, varför det vore positivt om man tydligt visar vilken nivå man klarat av. Om ett barn fått tio morötter, medan ett annat bara klarat få fem, kommer det första barnet visa hur man får fler. På så vis får man även en analog Teachable Agent stundvis.

Barnen bör själva få välja en Teachable Agent. Detta kan även användas som inloggning och för att spara information om hur långt man kommit i spelet. Det bör även leda till bätt- re uppskattning för sin Teachable Agent.

Att få ett barn att spela i 15 minuter är ingen konst om spelet är bra. Förskolelärarna begränsar barnens speltid för att de inte ska sitta för länge klistrade framför skärmen.

9. Diskussion

9.1 Arbetsprocessen

Under inledningsfasen diskuterades mycket om hur vi i stora drag ville lägga upp vårt projekt. Vi beslutade att koncentrera första halvan av projektet till att ge oss en stadig bas att stå på och andra delkursen till att finslipa och utveckla spelet. Detta passade väldigt bra eftersom samtliga gruppmedlemmar tänk- te läsa båda delkurserna.

Vi tog beslut rörande intern dokumenthantering, vilket resulterade i Google Documents, samt för intern kommunika- tion. För att enkelt kommunicera inom gruppen startade vi en grupp i WhatsApp-applikationen, vilket gör att man enkelt kan skicka meddelanden till varandras mobiltelefoner.

Med hjälp av brainstorming tog vi fram idéer till olika delspel. När vi beslutat om en huvudidé jobbade vi utifrån denna och diskuterade fram beslut rörande påbyggnad. Från handledarmötena fick vi mycket värdefull feedback om hur vi kunde förbättra vissa saker, och hur vi gjort bra beslut inom vissa områden. Prototypen togs fram med hänsyn till den teori och kunskap inom Teachable Agents och Number Sense vi tillägnat oss. Vår första prototyp byggdes i Balsamiq, men vi övergick senare till PowerPoint för att få tillgång till anima- tioner för att kunna presentera hela vårt koncept.

Efter att ha byggt upp en stadig mid-fi prototyp kontakta- de vi en utomstående expert på området kring spel för barn,

där vi ventilerade frågor och fick givande information rörande hur vi bör fortsätta utvecklingen med vårt spel.

Inför utvecklandet av hi-fi prototypen sattes ett versions- hanteringssystem upp och det första steget efter detta var att förstå hur implementationen av ett spel i HTML5 med Java- Script skulle ske. Eftersom ingen i gruppen hade tidigare erfa- renheter av KineticJS så utgick vi från ett exempel-projekt för att förstå upplägget. Efter att vi förstått hur grundläggande bildinläggning och animering fungerade så implementerade vi första spelfasen, där spelaren spelar själv, med den grafik som användes i mid-fi prototypen.

Vi fortsatte implementera logiken i spelet med att skapa en startskärm där man kan välja spel samt spelfas två och tre, där Teachable Agenten först kollar på när spelaren spelar och sen spelar själv. I läget där Teachable Agenten spelar själv hade vi ingen klar bild över hur det skulle fungera och vi var tvungna att diskutera fram ett handlingsätt för Teachable Agenten skulle fungera i praktiken. Då grunden i spelet var implementerad byttes grafiken ut mot nya bilder som höll en konsekvent stil. Dessa nya bilder är skapade av Magnus Haa- ke utifrån våra idéer och synpunkter.

Det sista steget i utvecklingen av hi-fi-prototypen var att implementera stöd för ljud och att justera alla fördröjningar och animationshastigheter.

Då spelet befann sig i ett testbart stadium kontaktades förskolan Lars Kaggsgatan 35 i Göteborg. Där utfördes sedan den mycket intressanta testningen som resulterade i matnyttig information. Eftersom vi stirrat oss blinda på vissa problem i spelutvecklingen, framförallt angående hur spelaren ska inte- ragera med Teachable Agenten, var det välkomnande med nya synpunkter från målgruppen samt förskolepedagoger som dagligen arbetar med målgruppen. Det bekräftades att saker som tidigare diskuterats behövde förändras. Detta var bland annat svårighetsgraden i spelet. Att istället för det fixa syste- met, som användes i hi-fi prototypen, använda sig av en ökande svårighetsgrad är att föredra. För att dra det hela ännu längre kan spelet känna av en passande svårighetsgrad för spelaren, men detta ligger utanför kursens ramar. Den andra inputen från testningen handlade om utformningen, samt hur interaktionen skedde med Kim, Teachable Agenten. Många av synpunkterna här var intressanta och borde inte vara alltför krävande att implementera i spelet. Slutligen gav testningen oss mycket att tänka på samt mycket nyttig information att ta upp i ett senare utvecklingsskede.

9.2 Testresultat

9.2.1 Barns beteende i samband med Freds Bondgård

Spelet Freds Bondgård uppskattades av testgruppen. Barnen tyckte spelet var roligt och var intresserade av att spela de andra delspelen som inte hunnit bli implementerade. Majori- teten av barnen ville klicka sig igenom spelet snabbt vilket

resulterade i att en del buggar visade sig. Barnen hade svårt att sammankoppla röster med karaktärerna i spelet. Detta kan lösas genom att skapa animationer i form av munrörelser eller någon annan form av animation.

9.2.2 Hur barn interagerar med en "Teachable Agent"

När vi utförde våra test hade barnen svårt att förstå sig på Teachable Agenten. De flesta hade svårt att se vilket syfte Teachable Agenten hade i spelet. En viktig punkt är att barnen känner en koppling till Teachable Agenten, så dem verkligen vill lära den att spela. Designen av Teachable Agenten som vi använde tyckte barnen var tråkig och de blev inte intresserade av den. Om barnen skulle fått välja en Teachable Agent bland en grupp figurer till exempel djur, så hade förmodligen bar- nen blivit mer intresserade av vad Teachable Agenten gör och känt en större koppling.

En annan viktig del är att man gör en tydlig skillnad mel- lan när barn respektive Teachable Agenten spelar. Många av barnen fortsatte att spela som innan fast de egentligen skulle hjälpa Teachable Agenten. Detta skulle man kunna lösa ge- nom att ha en tydligare mellanfas i de olika delspelen. Man kan också göra större designskillnader i spelläget så barnen förstår att det har skett en förändring. Detta kan vara att för- tydliga att morötterna inte är klickbara eller, göra “Ja” och “Nej” knapparna mer synliga eller att det visas en kort anime- rad film om den nya fasen i spelet innan barnet får börja spela igen.

9.2.3 Barns kunskapsnivå och vad som är en lämplig svårig- hetsgrad för spelet

Då testet tyvärr inte enbart innehöll testpersoner i den aktuella målgruppen kan våra resultat vara missvisande. Barnens ålder varierade mellan fyra och fem år och ytterligare variation om barnen är födda tidigt eller sent på året. Resultatet angående svårighetsgraden blev att den var för enkel. Detta verkade även vara fallet hos de fyraåriga barnen. Dock testades spelet på en liten grupp barn och framförallt bara på tre fyraåringar. Detta gör att resultatet angående svårighetsgraden blir svår att analysera i det stora hela. Sättet svårighetsgradsproblemet bör lösas på är genom att alla barn börjar på den lägsta svårig- hetsgraden. Allt eftersom spelet fångar upp en förbättring av spelarens resultat ökas svårighetsgraden. Högre svårighets- grader kan tänkas vara tärningsprickar och siffror istället för morötterna som finns i dagens version av spelet. Utöver detta behöver inte tallinjen börja på ett utan på exempelvis fem.

9.2.4 Number Sense och Teachable Agents i förhållande till målgruppen

Det är svårt att dra slutsatser om huruvida barns utveckling av