Ontwerpdocument Visual Design Ruben Kwaaitaal
Klas: IMD-B Studentnr: 525778 Datum: 27 oktober 2014 Docente: Yvonne Brinkman
Samenvatting 1. Schatzoeken Handeling: Uitleggen aan: Organisatie:
Schatzoeken Kinderen Detect Metaaldetectors https://detect.nl
In de applicatie: -wordt er uitgelegd waar je goed kunt schatzoeken en hoe je dat precies moet doen (interactief, kunt een metaaldetector, een schep en een handboek gebruiken – je kunt ook fouten maken met instellingen waardoor de detector bijvoorbeeld bij ijzer gaat piepen, wat in het handboek niks waard blijkt te zijn.) -is een video te zien uit de praktijk (bijv. Ik leeg in begrijpbare taal uit hoe het schatzoeken werkt) De applicatie past qua inhoud, vorm en interactie bij de doelgroep. Dit o.a. door gebruik van herkenbare iconen, beelden en geluiden.
1
Inhoudsopgave Inleiding blz. 3 Aanleiding blz. 4 Hoofdstuk 1: De opdracht blz. 5 Hoofdstuk 2: Conceptbeschrijving blz. 6 Hoofdstuk 3: Inspiratie blz. 8 Hoofdstuk 4: Scenario blz. 10 Hoofdstuk 5: Flowchart blz. 11 Hoofdstuk 6: Interactie ontwerp (wireframes) blz. 12 Hoofdstuk 7: Ontwerpfase blz. 19 Hoofdstuk 8: Aanpassingen blz. 22 Bronvermelding blz. 23 Schetsen blz. 24
2
Inleiding Immersive Media Design richt zich op media-ervaringen waarbij de gebruiker of klant zich opgenomen voelt in een andere wereld. Informatie wordt niet meer eenvoudig gecommuniceerd via media waarbij er gelezen, geluisterd of gekeken wordt, maar in totale ‘experiences’, waarbij alle zintuigen liefst tegelijk ruimschoots aan bod komen. Zo wordt het contact van de gebruiker of klant een beleving, die van het begin tot het eind is ontworpen en geregisseerd. Het is duidelijk dat dit aan het gebruik van beeldende middelen hoge eisen stelt en de ontwerper van dergelijke experiences vele technieken en combinaties van technieken en vaardigheden moet beheersen en in staat moet zijn hiermee overtuigende en bruikbare toepassingen te creĂŤren. Dit is het werkterrein van Visual Design, als onderdeel van het semester Immersive Media Design.
3
Aanleiding Er zijn enorm veel websites, boeken, verenigingen over schatgraven. Toch is er niks op het gebied van schatgraven voor kinderen. Dit terwijl het niet te ingewikkels is voor kinderen. Ook kan het best spannend en leerzaam zijn voor kinderen om op zoek te gaan naar schatten of oude munten.
4
Hoofdstuk 1: De opdracht De opdracht is om een interactieve instructie te ontwerpen voor het gebruik van metaaldetectoren geschikt voor kinderen van 6-9 jaar. De instructie wordt aangeboden in een door ons gecreëerde interactieve omgeving, waarbinnen de gebruiker op intuïtieve wijze zijn weg kan vinden. De inhoud, de vorm en de interactie zijn optimaal afgestemd op en passend bij kinderen van 6-9 jaar en vormen samen een unieke belevenis. De applicatie wordt gerealiseerd door middel van Adobe Edge met een schermresolutie van 1000 x 576 pixels. Kinderen van 6-9 jaar moeten op een avontuurlijke manier leren hoe een metaaldetector werkt. De opdrachtgever: De opdrachtgever is bedrijf Detectorplaza uit van de broers William en Adrie van der Bolt. Dit bedrijf uit Uden verhuurt en verkoopt metaaldetectoren in Nederland. (Detectorplaza, Metaaldetector, spanning en ontspanning in één hobby, 2014)
5
Hoofdstuk 2: Conceptbeschrijving Om een beeld te krijgen wat mijn idee, doel, inhoud is, heb ik een conceptbeschrijving gemaakt. Het totaalconcept heb ik zodanig uitgewerkt dat een ander op grond hiervan het product kan realiseren. Ik heb het basisidee, het doel, de vorm en de inhoud hierin beschreven. Basisidee Handeling: Uitleggen aan: Organisatie:
Schatgraven Kinderen van 6-9 jaar Detectorplaze http://detectorplaza.nl
In de applicatie: -wordt er uitgelegd waar je goed kunt schatzoeken en hoe je dat precies moet doen (interactief, kunt een metaaldetector, een schep en een handboek gebruiken – je kunt ook fouten maken met instellingen waardoor de detector bijvoorbeeld bij ijzer gaat piepen, wat in het handboek niks waard blijkt te zijn.) -is een video te zien uit de praktijk (bijv. Ik leeg in begrijpbare taal uit hoe het schatgraven werkt) De applicatie past qua inhoud, vorm en interactie bij de doelgroep kinderen van 6-9 jaar. Dit komt o.a. door het gebruik van herkenbare iconen, beelden en geluiden. Doel Het doel is om binnen negen weken een concept van een interactieve instructie voor een specifieke doelgroep te ontwikkelen. De instructie wordt aangeboden in een door mij gecreëerde interactieve omgeving, waarbinnen de gebruiker op intuïtieve wijze zijn weg kan vinden. De inhoud, de vorm en de interactie zijn optimaal afgestemd op en passend bij de specifieke gebruikersgroep en vormen samen een unieke belevenis. Inhoud Om de inhoud te beschrijven gebruiken ik MoSCoW (plan van eisen). Must have: Creatief en innovatief zijn (vergeleken met applicaties uit dezelfde branche). De applicatie moet herkenbare karakters bevatten. De karakters moeten een doel en een verhaal hebben Het karakter moet interactie hebben met de gemaakte keuzes. Het moet voor het kind duidelijk zijn wat hij of zij moet doen (door middel van een instructie). De vormgeving moet aansluiten op de doelgroep. De gebruiksvriendelijkheid moet hoog zijn. Een mouse-over om duidelijk te maken waar je op moet klikken. Voorpagina waar op staat wat de bedoeling is van de applicatie. “Help” button voor de het kind, waarin uitgelegd wordt wat de bedoeling is van de opdracht. Om kinderen plezier te laten beleven aan het spel voeg ik een grappige elementen toe aan de applicatie. Het karakter moet grappige dingen onder de grond tegenkomen.
6
Should have: Op de voorpagina kan een keuze worden gemaakt tussen een jongen of een meisje. Optie geluid aan/uit. Could have: Iets wat bijhoudt hoeveel schatten het kind gevonden heeft. (statistieken via database). Won’t have: Extra levels.
7
Hoofdstuk 3: Inspiratie In hoofdstuk 3 staat beschreven waar ik mijn inspiratie vandaan heb geplukt om de applicatie vorm te geven. Passend bij de doelstellingen heb ik aansprekend beeldmateriaal, fonts en voorbeelden verzameld om de stijl, typografie, kleuren en video van de applicatie te visualiseren. Stijl: Ik wil gebruik maken van een eenvoudige en door kinderen getekende stijl.
Typografie: Als typografie wil ik een goed leesbaar (ook voor kinderen) lettertype gebruiken. Arial is een van de meest gebruikte scheefloze lettertypes en hierom ook erg geschikt.
8
Kleuren: Ik wil gebruik maken van eenvoudige kleuren die passen bij de eenvoudige door kinderen getekende stijl.
Video: In de video wil ik mijzelf als piraat naast een cartoon versie ervan neerzetten. Dit om de werelden goed te combineren.
9
Hoofdstuk 4: Scenario Om goed beeld te krijgen waarom de applicatie gespeeld wordt, op welk tijdstip, hoe de persoon op de applicatie terecht is gekomen, de verwachting, het doel van het bezoek en hoe de persoon de app ervaart, ben ik in de huid gekropen van één van de persona’s. Wat ziet hij, wat denkt hij en wordt er gevonden waar hij naar op zoek was etc. Alles wat van belang kan zijn is genoteerd om de complete beleving van de gebruiker helder neer te zetten.
Pieter is een jongetje van 8 jaar. Hij zit in groep 5 van de basisschool ‘De Steenuil’ in Leiden. De ouders van Pieter hebben een baan in de ICT, bewegen weinig en nemen weinig tijd om leuke dingen te doen met Pieter. Pieter is een slimme jongen en weet ontzettend veel over planeten, dinosaurussen. De laatste tijd duikt hij echter meteen achter zijn iPad om Angry Birds te spelen. Daar vermaakt hij zich de rest van de dag mee. Het gevaar is er dus dat hij alleen nog maar spelletjes gaat spelen en weinig dingen onderneemt. School gaat Pieter ook iets te makkelijk af. Door de applicatie te laten spelen leert Pieter hoe je schat kunt graven en dat geschiedenis ook best spannend kan zijn om te ontdekken.
10
Hoofdstuk 5: Flowchart In de flowchart staat het aantal pagina’s en hoe ze met elkaar verbonden zijn. Het is een soort plattegrond van de applicatie. De flowchart vormt de basis van het navigatieontwerp.
Beschrijving van de flowchart: Het kind start de applicatie en komt op het startscherm, daarna kan hij of zij kiezen hoe het poppetje eruit ziet, hoe het poppetje heet en of het poppetje gek is op haaien, octopussen, spinnosaurussen of slangen. Nadat hij of zij een keuze heeft gemaakt komt hij/zij in het eerste level (het strand). Daar zal het kind een metaaldetector, een schep en een handboek kunnen gebruiken om schatten te zoeken. Het kind zal drie schatten moeten vinden, waarmee het ervaringspunten verdient, om naar het volgende level te gaan. Mocht het kind niet verder komen, dan kan het kind het handboek gebruiken. Daar staat alles in over schatgraven. Elk level heeft een eigen sfeer. In het eerste level (het strand) komt er een kat af en toe kijken en zijn er piraten.
11
Hoofdstuk 6: Interactie ontwerp (wireframes) In het interactie ontwerp (wireframe) heb ik zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Door deze wireframes heb ik het concept kunnen toetsen. Begrijpt de gebruiker wel hoe de app in elkaar zit? Deze wireframes zijn eenvoudig om te zetten in een werkend (klikbaar) prototype. Dit is zeker prettig gezien het doel om een werkende demo in korte tijd te maken. 1 - Titelscherm met naam van de applicatie:
2. Keuzescherm:
3 – Het verhaal 1 (heersten):
12
4 – Het verhaal 2 (gevreesd):
5 - Het verhaal 3 (mast):
13
6 - Het verhaal 4 (schip):
7 - Het verhaal 5 (gillen):
14
8 - Het verhaal 6 (veilig):
8 - Het verhaal 7 (geruchten):
15
9 - Het verhaal 8 (walvis):
10 - De metaaldetector:
16
11 - De schep:
12 - Het handboek:
17
13 - De munten:
18
Hoofdstuk 7: Ontwerpfase In dit hoofdstuk laat ik zien hoe ik tot het ontwerp ben gekomen. 1 - Eerste tekeningen door Emil (6) en Elin (5) samgengevoegd
2 - Stempelfilter in Photoshop om achtergrond wit en strepen dikker te krijgen:
19
3 - Sommige lijnen zijn in Photopshop dichtgemaakt. Uitschieters van het tekenen zijn in de tekening gelaten. Alles is ingekleurd met simpele kleuren:
4 - Om meer leven te brengen in de tekeningen komen er misschien in de uiteindelijke versie ook schaduwen, lichten en wordt er bepaalde delen in de tekening geaccentueerd. Maar kinderen vinden zowel bovenstaande als onderstaande stijlen mooi:
20
5 - In Adobe Edge zijn de tekeningen en audio samengevoegd. Het titelscherm, keuzescherm en het verhaal staan er nu in. Nu is het ‘coderen’ begonnen. Ik wil een jQuery code gebruiken om een parallel effect toe te voegen in de wereld. Op random plekken wil ik via variabelen gouden en zilveren munten verstoppen. Ook wil ik grappige dingen laten gebeuren zoals mensen die liggen op het strand met een gouden horloge of een zilveren ketting: Xbox360, XboxOne: De gebruiker drukt op de Right stick, waardoor de wereld zelf gaat bewegen. Daardoor lijkt het of de gebruiker loopt. Met de Left stick kan er rondgekeken worden. De Facebuttons kun je gebruiken om te kiezen tussen een schep, metaaldetector of het handboek. De Back knop kun je gebruiken om de metaaldetector echt in te stellen. Met de left en right triggers kun je - of = waarden geven aan deze instellingen.
PC: De gebruiker drukt op WASD, waardoor de wereld zelf gaat bewegen. Daardoor lijkt het of de gebruiker loopt. Met de muis kan er rondgekeken worden. De knoppen ZXC kun je gebruiken om te kiezen tussen een schep, metaaldetector of het handboek. De knop 0 kun je gebruiken om de metaaldetector echt in te stellen. Met de knoppen - en + kun je - of + waarden geven aan deze instellingen.
Overige: Het is ook mogelijk de applicatie te porten naar Playstation3, Playstation 4, WiiU, Wii, tablets, etc.
21
Hoofdstuk 8: Aanpassingen In dit hoofdstuk staan alle aanpassingen die ik wil doen na aanleiding van feedback. Hulpknop Uit de usability test kwam naar voren dat de gebruikers niet wisten dat er een helpknop zat in de schatgravers handleiding rechtsbovenin het scherm. In de volgende versie wil ik het handboek met de gele knop verplaatsen naar rechtsonderin. Rechtsboven wil ik een rode rode knop met een vraagteken. Het handboek is dan voor tips over schatgraven in het algemeen, het graven, de vindplekken en het instellen van de metaaldetector. Met het vraagteken op de rode knop kom je in het helpscherm. Daar staat de werking van de applicatie midden in het scherm. Tijdsduur Bij de uitleg van het spel wil ik ook de tijdsduur van een gemiddelde sessie aangeven. Dit omdat ze dat op school plezierig vinden. Ook voor ouders is dit handig. Beginscherm In het beginscherm wil ik ook uitleggen hoe de applicatie werkt en waarom je deze zou moeten gebruiken. In het begin wilde ik gewoon zo weinig mogelijk teksten en knoppen, maar hier is wel behoefte aan.
22
Bronvermelding Computertotaal. (2007). Handige functies onder de FN toets. Geraadpleegd op 20 oktober 2014, van http://computertotaal.nl/overige-elektronica/handige-functies-onder-de-fn-toets-6922. Detectorplaza. (2014). Metaaldetector, spanning en ontspanning in één hobby. Geraadpleegd op 1 oktober 2014, van http://detectorplaza.nl. Izismile. (z.d.). Le Théâtre de mon Cerveau. Geraadpleegd op 13 oktober 2014, van http://img.izismile.com/img/img6/20130222/640/cartoon_cardboard_cutouts_640_09.jpg. Taketenteam. (2014. Happy children… happy learning. Geraadpleegd op 3 oktober 2014, van http://www.taketenteam.com/education.aspx?vpage=1. Wikipedia. (2013). Arial (lettertype). Geraadpleegd op 29 september 2014, van http://nl.wikipedia.org/wiki/Arial_%28lettertype%29. Wikipedia. (2014). Xbox360 controller. Geraadpleegd op 15 oktober 2014, van http://en.wikipedia.org/wiki/Xbox_360_Controller. Youtube. (2013). Creating a Parallax Effect in Edge Animate. Geraadpleegd op 21 oktober 2014, van https://www.youtube.com/watch?v=wUJ63cBwS1I. Youtube. (2013). Drag and Drop in Edge Animate. Geraadpleegd op 20 september 2014, van https://www.youtube.com/watch?v=u4R8jFI_DeE.
23
Schetsen
24
25
26