Ontwerprapport Versie 1.0
Hogeschool Utrecht
Klas JDE-D03
“Common Friends”
donderdag 12 mei 2011
Communication & Media Design
Jorinde Boon 1571494
> You’re In The Games
Laurens Vreekamp
Theorie Interaction Design
Nathan Roos 1516462
> prethead
Inhoudsopgave
3 4 4 5 6 7 9 10 2
Concept
Een interactieve, digitale vertaling van een bestaand bordspel naar de interactieve, mobiele game “common friends”.
Doelgroep
De relevante, specifieke groep gebruikers, waar het ontwikkelde concept bij uitstek van toepassing op is.
Verantwoording eisen / wensen:
Beschrijving van de belangrijkste aspecten waar het prototype aan dient te voldoen, en rekening mee dient te houden.
3 persona’s
Beschrijving van representatieve gebruikers uit de eerder beschreven doelgroep.
2 scenarios
Twee persona’s in relevante omgeving, in relatie tot gebruik van het prototype.
3 use cases
Systematische beschrijving van de interactie tussen gebruiker en systeem.
Voorstel voor testplan
Beschrijving vooraf, hoe het concept zal worden getest.
Schetsen
Illustraties/tekeningen van de concept-onderdelen, in detail uitgewerkt, met de nadruk op soort en plaatsing van interactie-elementen .
Concept
Het spel ‘Common Friends’ is een Smart Phone battle over je gemeenschappelijke vrienden op Facebook. Je speelt het spel met z’n tweeën als je zin hebt in een spelletje of om te lachen, of als je je gewoon verveelt. Leuk voor in de trein, de kroeg of tijdens saaie lessen. Je speelt het spel samen op een Smart Phone met touch screen. Nadat je de ‘Common Friends’ Applicatie hebt gedownload en allebei je Facebook inloggegevens hebt opgegeven, kan het spel beginnen. Op het scherm verschijnt steeds een stelling die met een van je gemeenschappelijke vrienden op Facebook te maken heeft. Een voorbeeld is ‘Douwe is 21 jaar’. Elke speler heeft een ‘knop’ op het scherm. Als je denkt dat de stelling waar is, moet je zo snel mogelijk op jouw knop drukken. - Klopt de stelling en heb je als eerste gedrukt? Dan verdien je een punt en gaat er bij de ander een punt af. - Klopt de stelling en drukt er niemand? Dan verschijnt na 3-5 seconde een nieuwe stelling. - Klopt de stelling niet en druk je toch als eerste? Dan verlies je een punt en komt er bij de ander een punt bij. - Klopt de stelling niet en drukt er niemand? Dan verschijnt er na 3-5 seconde een nieuwe stelling. Het spel eindigt als de één alle punten heeft gewonnen (en de ander automatisch al zijn punten verloren is). Als de één veel meer over elkaars gemeenschappelijke vrienden weet dan is het spel dus eerder afgelopen dan in een situatie waarbij je aan elkaar gewaagd bent. De stellingen kunnen over alle soorten informatie gaan die de gemeenschappelijke vrienden op Facebook zetten. Voorbeelden zijn leeftijd, achternaam, werk, school, aantal Facebook vrienden, foto’s, relatie, etc. Het spel is van verschillende spellen afgeleid. Het concept is afgeleid van het spel ‘wie is het’. Bij wie is het moet je raden welke bekende persoon de ander in zijn hoofd heeft, door vragen te stellen. De ander verteld of het klopt of niet. De puntentelling is afgeleid van touwtje trekken. Zie voor een visuele weergave van het spel de schetsen.
3
Doelgroep
De doelgroep waar we op richten zijn jongens en meisjes in de leeftijd van 16 tot 20 jaar. De doelgroep heeft een smart Phone met touch screen en zijn actief op Facebook. De doelgroep zit op de middelbare school, een studie of doet werk met collega’s van dezelfde leeftijd. Hierdoor hebben ze veel gemeenschappelijke vrienden op Facebook, wat een must is het voor spel.
Verantwoording eisen / wensen
We zullen nu de belangrijkste aspecten bespreken waar het prototype aan dient te voldoen. Eisen waaraan het spel moet voldoen: - Het moet snel te downloaden en te spelen zijn. - Het spel moet snel opgestart zijn. Eisen waaraan de spelers moeten voldoen om het spel te kunnen spelen: - Het spel dient gespeeld te worden met 2 personen. - De spelers moeten beschikken over 1 smart Phone met touch screen. - Er moet verbinding met het internet zijn (Wi-Fi of 3G). - Beide personen moeten een Facebook account hebben. - Voor een optimale user experience dienen de spelers 5 of meer gemeenschappelijke vrienden te hebben.
4
3 persona’s
naam geslacht leeftijd nationaliteit woonplaats studie mobiele telefoon
Sander van Krimpen man 16 jaar Nederlands Enschede VMBO Techniek iPhone 3Gs
Sander zit in het laatste jaar van VMBO techniek. Hij is een jongen die vooral goed is in praktische en technische dingen. Hij gebruikt zijn iPhone vooral om spelletjes te spelen als hij zich verveelt. Hij kijkt dagelijks even op Facebook. Met vrienden spreekt hij vaak bij iemand thuis af om biertjes te drinken en te gamen.
naam geslacht leeftijd nationaliteit woonplaats studie mobiele telefoon
Esther Putten vrouw 18 jaar Nederlands Amsterdam VWO Samsung Galaxy S
Esther Putten is zit in haar eerste jaar van de opleiding Journalistiek. Ze is een meisje met een actief sociaal leven en graag op de hoogte van wat haar vrienden aan het doen zijn. Ze gebruikt haar telefoon de hele dag door en zit vooral op Social Media. Op Facebook is ze heel actief. Ze houdt ervan om ‘s avonds gezellig met vriendinnen naar een café te gaan.
naam geslacht leeftijd nationaliteit woonplaats studie mobiele telefoon
Hakim Badour man 20 Marokkaan Utrecht Rechten HTC Desire HD
Hakim Badour is een slimme jongen die rechten Studeert aan de Universiteit in Utrecht. Hij is druk bezig met zijn studie en al veel met zijn toekomst bezig. Hij wil later een goed betaalde baan. Hij gebruikt het internet op zijn telefoon vooral om snel informatie te vinden, maar ook om af te spreken met vrienden.
5
2 scenarios
Esther gaat vrijdag avond na een vermoeiende week school samen met haar vriendin Sanne wat drinken in de stad. Ze gaan zitten bij hun favoriete cafĂŠ en drinken bestellen een wijntje. Esther checkt op Facebook of er nog leuke nieuwtjes zijn. Ze ziet op Facebook op het prikbord van een vriendin dat die bij Common Friends heeft gewonnen van een klasgenoot. Ze is benieuwd wat voor spel het is en gaat naar de website. Ze download de applicatie op haar Samsung Galaxy S en opent hem. Esther en Sanne loggen in met hun Facebook account en het spel start. Na 10 minuten gespeeld te hebben zijn ze allebei melig. Esther wint en kiest ervoor om haar overwinning op Facebook te delen. Ze vind het leuk dat deze mogelijkheid er is.
6
Sander zit zich tijdens wiskunde heel erg te vervelen. Samen met zijn vriend Dennis zit hij flauwe grappen te maken. Dan verteld zijn vriend dat er een leuke nieuwe spel is voor op de iPhone, genaamd Common Friends. Sanders wil graag iets doen tegen de verveling en download de applicatie meteen. Sander en Dennis vullen hun inloggegevens voor Facebook in en het spel start. Ze spelen meerdere rondes en zijn al snel 20 minuten aan het spelen. Het leuke is dat veel van hun gemeenschappelijke vrienden om Sander en Dennis heen zitten in de klas.
3 use cases (#1)
Use case 1: voorbereidingen voor het spel 1. Het systeem toont het spel Common Friends in de Apple Store 2. De gebruiker koopt het spel via zijn Smart Phone. 3. Het spel verschijnt als Applicatie op de Smart Phone. 4. De gebruiker opent de Applicatie van Common Friends. 5. Het systeem toont het beginscherm en de gebruiker klikt op ‘play’. 6. De gebruikers vullen hun inloggegevens in en klikken op ‘start’. 7. Het systeem toont het game scherm en het spel begint. Alternatief: 6. Als de inloggegevens niet kloppen: 6.1 Het systeem geeft weer dat de gebruikersnaam of het wachtwoord niet kloppen. 6.2 Het systeem geeft de mogelijkheid om de Facebook inloggegevens nogmaals in te voeren. In de use cases wordt de interactie tussen de gebruiker en het systeem weergegeven. We zullen de drie belangrijkste conceptonderdelen omschrijven.
Use case 2: het spel spelen 1. Een van de gebruikers klikt op Start. 2. Het systeem geeft de eerste stelling weer. 3. Gebruiker1 klikt als eerste op zijn knop. 4. Het systeem geeft aan dat de stelling waar is en geeft gebruiker1 een punt, gebruiker 2 verliest een punt. 5. Het systeem geeft de tweede stelling weer. 6. Geen van de gebruikers klikt binnen de tijd op de knop. 7. Het systeem geeft aan dat de stelling waar is en veranderd niks aan de puntentelling. 8. Het systeem geeft de volgende stelling weer. Alternatieven: Als de stelling niet waar is: 4. 4.1 Het systeem geeft aan dat de stelling niet waar is 4.2 Het systeem geeft gebruiker1 een punt aftrek en gebruiker2 verdient een punt. 7. 7.1 7.2
Als de stelling niet waar is: Het systeem geeft aan dat de stelling niet waar is. Het systeem veranderd niks aan de puntentelling.
7
3 use cases (#2)
Use case 3: overwinning op Facebook zetten 1. Gebruiker1 heeft 10 punten verdiend en gebruiker2 is al zijn punten verloren. 2. Het systeem geeft weer dat gebruiker 1 heeft gewonnen. 3. Het systeem geeft een knop weer met ‘deel je score’ zetten. 4. De gebruikers klikken op de Facebook knop ‘deel je score’. 5. De overwinning wordt op Facebook op het profiel van gebruiker1 en gebruiker2 gezet. 6. De gebruikers sluiten de Applicatie. 7. Het systeem sluit de Applicatie. Alternatieven: 4. Als gebruiker1 zijn overwinning niet op Facebook wil zetten: 4.1 De gebruiker klikt op Applicatie sluiten (zie stap 6 van Use case 3) of ze willen het spel nog een keer spelen (zie Het alternatief voor stap 6 bij Use Case 3). 6. 6.1 6.2
8
De gebruikers willen nog een keer Common Friends spelen De gebruikers klikken op de knop ‘speel opnieuw’. Nu wordt stap 5 van Use Case 1 weergegeven. De gebruikers zijn nog ingelogd.
Voorstel voor testplan
Om het spel zo goed mogelijk te maken, gaan we het een aantal keer testen. Dit doen we om drie belangrijke redenen vooral met klasgenoten. De eerste reden is dat iedereen elkaar kent in de klas en (bijna) iedereen elkaar als vriend heeft op Facebook. Zo hoeven we niet elke keer nieuwe stellingen te maken; we hebben nu een grote groep mensen die steeds met dezelfde stellingen kunnen spelen. De tweede reden is dat de klas nu al een professionele kijk heeft op het spel, en goed kan zeggen wat er anders zou moeten. De derde reden is praktisch; we zitten 4 dagen per week met elkaar op school, dus makkelijk bereikbaar. Wel willen we het ook testen met andere mensen, buiten de klas. Juist om een frisse kijk op het spel te hebben. Hier zullen we geen gebruik maken van een uitgebreide testversie, maar een simpel prototype. Dit om een beeld te krijgen hoe het spel wordt ontvangen, zonder specifieke stellingen per testpersoon. De locatie hiervoor hangt af van de testpersonen. Om het zo goed mogelijk te testen, willen we alle schermen vanaf het opstarten tot het einde voorleggen aan de testpersonen. Dit om te kijken of ze alle interactieve stappen begrijpen en aan de andere kant of ze het spel leuk vinden. We testen dit spel om een aantal redenen: • snapt de gebruiker het spel (de stappen van startscherm naar speelscherm, maar ook de spelregels en overige functies). • vindt de gebruiker het spel leuk (wil de gebruiker het vaker spelen, zou de gebruiker het spel aanraden, heeft de gebruiker tips om het nog leuker en beter te maken). • is het spel visueel aantrekkelijk (wat zijn lelijke dingen en wat zijn juist de mooie elementen).
9
Schetsen
11 12 14 16 18 20 22 23 24 25 10
Styleguide AppStore Beginschermen Inloggen Laden en Speelscherm Spelen Uitleg Spelen Voorbeelen Spelen Winst of Verlies Na het spel Score op Facebook en Twitter
Schetsen: Styleguide
Kleuren
Lettertypes donker blauw R=0 G=51 B=153 C=100 M=91 Y=6 K=1 facebook blauw R=0 G=84 B=158 C=100 M=69 Y=0 K=9 licht blauw R=51 G=153 B=255 C=67 M=35 Y=0 K=0 zwart R=0 G=0 C=0 M=0
Klavika Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789±§!@#$%^&*()_-+={}[]:;/|\<>,.? Klavika Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789±§!@#$%^&*()_-+={}[]:;/|\<>,.?
Logo’s B=0 Y=0
K=100
grijs R=147 G=149 B=152 C=0 M=0 Y=0 K=50 wit R=255 G=255 B=255 C=0 M=0 Y=0 K=0 11
Schetsen: AppStore
stap 1
12
stap 2
stap 3
uitleg bij stap 1
uitleg bij stap 2
uitleg bij stap 3
De gebruiker (als voorbeeld gebruiken we Nathan Roos met een iPhone 3Gs) zoekt in de Apple Appstore naar een leuk spelletje om te spelen met 2 personen. In de top 25 van betaalde spelletjes staat het spel Common Friends op de 3e plek. Nathan kent het spel niet en wil er meer van weten.
Hij klikt op het icoon om meer over het spel te weten te komen. Er verschijnt een informatiescherm met een uitleg van het spel en verdere informatie, zoals bijvoorbeeld de kosten. Nathan besluit om het spel te kopen en te downloaden op zijn Apple iPhone.
Het spel wordt gedownload en wordt automatisch neergezet op de eerste lege plek van het beginscherm op de Apple iPhone van Nathan.
13
Schetsen: Beginschermen
stap 4
draaien
stap 5
14
uitleg bij stap 5 Het beginscherm komt in beeld. Op deze pagina zijn een drie soorten objecten te zien: het logo van het spel, knoppen en links. Het logo met de zin “powered by facebook” zijn statisch. De 3 knoppen, van onder naar boven: - de ‘credits’ knop (bevat informatie van het spel en de makers). - de ‘settings’ knop (bevat instellingen zoals geluid, taal en snelheid). - de ‘play’ knop (gaat naar het spel).
draaien uitleg bij stap 4 Nathan opent het spel en het startscherm verschijnt fullscreen in beeld.
Duidelijk is te zien dat het logo schuin staan. Nathan zal daardoor automatisch het scherm draaien; precies wat de bedoeling is.
De links verwijzen naar Twitter en naar Facebook en zijn klikbaar; als er op het logo of de tekst wordt geklikt, wordt er automatisch een pagina geopend met de Twitterpagina of de Facebookpagina van common friends. Nathan drukt op de ‘play’ knop. 15
Schetsen: Inloggen
Het inlogschem komt in beeld. Op deze pagina moeten de twee spelers zichzelf inloggen op Facebook om het spel te spelen. Dat kan doormiddel van het drukken op de knop ‘sign in to facebook’ bij speler 1 en speler 2.
16
Verder is er nog een ‘back’ knop die wit is en een ‘start’ knop die vaag is. Dat komt omdat de spelers nog wel terug kunnen naar het beginscherm, maar nog niet verder kunnen klikken, aangezien ze nog niet zijn ingelogd.
Speler 1, in dit geval Nathan Roos, klikt op de knop ‘sign in to facebook’ bij stap 6 en komt op in inlogscherm van speler 1. Hier kan hij zijn inloggegevens invullen van Facebook: zijn Username en zijn Password.
stap 6
stap 7
Nathan heeft zich succesvol ingelogd op Facebook. De knop ‘sign in to facebook’ is daarom bij speler 1 veranderd in een knop ‘change’, mocht Nathan nog willen ruilen met een andere speler. Ook is zijn naam nu in beeld (automatisch gegenereerd door Facebook). stap 8
Ook speler 2, in dit geval Jorinde Boon, heeft zich succesvol ingelogd door stap 7 te herhalen voor speler 2. Hierdoor is ook bij haar de knop ‘sign in to facebook’ veranderd in een ‘change’ knop en is haar naam zichtbaar. Nu is ook de knop rechtsonderin, de knop ‘start’, wit gekleurd en kan het spel beginnen. stap 9
17
Schetsen: Laden en Speelscherm
stap 11
draaien
stap 10
A. B. C. D.
18
uitleg bij stap 10 De spelers hebben zich ingelogd en het spel gestart. De applicatie gaat nu de gegevens laden van de gemeenschappelijke Facebook vrienden. Op het scherm zijn de twee spelers te zien met hun naam en de taal die ze hebben ingesteld op Facebook. In dit voorbeeld is dat bij allebei Nederlands, maar het is dus ook mogelijk dat speler 1 in het Nederlands speelt en speler 2 in een andere taal, bijvoorbeeld in het Frans. Links onderaan is ook een knop â&#x20AC;&#x2DC;annulerenâ&#x20AC;&#x2122; te zien, voor als een van de spelers het laden van de vrienden of het spelen van het spel wil annuleren.
draaien De gegevens van de gemeenschappelijke vrienden zijn geladen en het spel kan beginnen. Om het overzichtelijker te maken, kijken we vanaf nu uit de ogen van speler 1, Nathan Roos. Daarom draaien we de iPhone weer naar de staande modus. Het beeld van speler 2, Jorinde is hetzelfde, alleen dan ondersteboven.
uitleg bij stap 11 Het spelscherm is in beeld. Er wordt eerst afgeteld van 3 naar 0, waarna de eerste stelling in beeld komt. A. B. C. D.
Het scorebord / de stand De stelling Uitleg van het spel De drukknop 19
Schetsen: Spelen Uitleg
voorbeeld A
20
of
voorbeeld B
Als er een stelling in beeld komt zijn er twee mogelijkheden: - de stelling klopt De gene die als eerst drukt krijgt een punt erbij. Drukt er niemand, dan verdwijnt de stelling na 3 seconden er komt er een andere stelling in beeld. - de stelling klopt niet De gene die als eerst drukt krijgt een punt aftrek. Drukt er niemand, dan verdwijnt de stelling na 3 seconden er komt er een andere stelling in beeld. Het effect van de puntentelling is te vergelijken met “touwtjetrekken”. Wie als eerst 5 punten meer heeft dan de ander, heeft gewonnen.
uitleg bij voorbeeld A
uitleg bij stap 11
De stelling ‘Ecca Berhitu heeft een relatie met Lotte Harms’ staat in beeld. Deze stelling klopt. Jorinde drukt sneller dan Nathan en zij krijgt daardoor een punt erbij.
De stelling ‘Ecca Berhitu heeft een relatie met Lotte Harms’ staat in beeld. Deze stelling klopt. Nathan drukt sneller dan Jorinde en hij krijgt daardoor een punt erbij. 21
Schetsen: Spelen Voorbeelden
voorbeeld C
22
voorbeeld D
voorbeeld E
Schetsen: Spelen Winst of Verlies
voorbeeld F: winst
voorbeeld G: verlies
uitleg bij voorbeeld C - D - E Verschillende voorbeelden tijdens het spelen van het spel, met verschillende stellingen en verschillende standen.
uitleg bij voorbeeld F Nathan heeft het spel gewonnen, door sneller te reageren of meer kennis te hebben van de gemeenschappelijke vrienden. Jorinde heeft verloren.
uitleg bij voorbeeld G Jorinde heeft het spel gewonnen, door sneller te reageren of meer kennis te hebben van de gemeenschappelijke vrienden. Nathan heeft verloren. 23
Schetsen: Na het spel
stap 12 Het spel is afgelopen; Nathan heeft gewonnen en Jorinde heeft verloren. Er verschijnt een nieuw scherm met verschillende opties: - home: hiermee ga je terug naar de beginpagina (zie stap 5) - speel opnieuw: het spel begint opnieuw met dezelfde spelers. (zie stap 10) - deel je score: zet je score online en laat je vrienden zien dat je gewonnen/verloren hebt op Facebook en/of Twitter.
24
Schetsen: Scores op Facebook en Twitter
De scores zijn op Facebook en Twitter terug te vinden (zie stap 12)
25
2011 © prethead & You’re In The Games
Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door printouts, kopieën, of op welke andere manier dan ook, zonder voorafgaande schriftelijke toestemming van prethead & You’re In The Games.