26.09.2013 Views

Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen

Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen

Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen

SHOW MORE
SHOW LESS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Versie<br />

Auteur<br />

Datum<br />

Tennis App<br />

Design document<br />

Ontwerp<br />

1.0<br />

1APP<br />

Fri Nov 18 2011 32 pag<strong>in</strong>a's


Versies<br />

Versie Auteur<br />

Beschrijv<strong>in</strong>g<br />

1.0 1APP<br />

<strong>Ontwerpdocument</strong><br />

2 / 32


Inleid<strong>in</strong>g<br />

Naar aanleid<strong>in</strong>g van de conceptpresentatie bij Sanoma Media, hebben<br />

wij <strong>in</strong> overleg met de opdrachtgever ervoor gekozen om de ‘Sport app’<br />

uit te gaan werken.<br />

Meerdere sporten uitwerken was geen mogelijkheid, omdat je bij elke<br />

sport dan niet de diepte <strong>in</strong> kon. Daarom hebben wij ervoor gekozen om<br />

één sport uit te werken.<br />

We hebben gekozen voor de sport tennis, omdat deze sport <strong>in</strong>dividueel<br />

is en veel wordt gespeeld <strong>in</strong> Nederland.<br />

In dit document v<strong>in</strong>d je uitleg, onderbouw<strong>in</strong>g en toelicht<strong>in</strong>g over de<br />

Tennis app die het team 1APP voor Sanoma Media ontwikkelt.<br />

4 / 32


What's New<br />

• Er is één uite<strong>in</strong>delijke app gekozen<br />

• Er is één sport gekozen: tennis<br />

• <strong>Het</strong> idee is vereenvoudigd<br />

• Doelgroep is specifieker: competitieve jongens en meiden van 14 t/m 24 jaar<br />

oud die fanatieke met tennis bezig zijn<br />

• De <strong>in</strong>terface is vereenvoudigd en overzichtelijker gemaakt<br />

• Er is overeenstemm<strong>in</strong>g omtrent het op te leveren resultaat<br />

• Techniek voor de prototype is duidelijk: mobile-webapplicatie<br />

5 / 32


Concept<br />

Kernidee<br />

Een self-track<strong>in</strong>g tennisapp waarmee je je <strong>in</strong>dividuele voortgang<br />

kunt bijhouden en bekijken via statistieken.<br />

Omschrijv<strong>in</strong>g<br />

De Tennis Score app zou je kunnen zien als een <strong>in</strong>telligent<br />

scorebord. <strong>Het</strong> toont niet alleen je laatst behaalde resultaten,<br />

maar geeft ook ge<strong>detail</strong>leerde statistieken over je voortgang en<br />

die van je tegenstanders.<br />

Daarnaast is het na afloop van iedere gespeelde partij mogelijk<br />

aan te geven wat je strategie was om zo dus te zien 'wat werkt'<br />

en wat niet. Op deze manier koppel je dus feitelijk je speelwijze<br />

aan je resultaten, met als positief effect meer zelfkennis.<br />

Daarnaast zorgt de app ook voor het competitieve element op<br />

het moment een speler zijn scores onl<strong>in</strong>e publiceert. Hierdoor<br />

ziet iedereen wie je zojuist hebt (of heeft) <strong>in</strong>gemaakt waardoor je<br />

dus wordt geconfronteerd met je resultaten. Hierdoor maak je<br />

dus van je vrienden fans en bereik je een publiek dat wellicht niet<br />

eens wist dat je tenniste.<br />

De app maakt dus gebruik van 'self-track<strong>in</strong>g': je houdt<br />

persoonlijke gegevens bij, <strong>in</strong> dit geval sportscores, die je<br />

vervolgens weer kunt terug bekijken <strong>in</strong> de vorm van een grafiek<br />

en kan delen met vrienden. <strong>Het</strong> speelt dan ook vooral <strong>in</strong> op de<br />

behoefte van de gebruiker om zijn of haar resultaten te meten en<br />

zo een duidelijke voortgang waar te nemen.<br />

Doelgroep<br />

We willen ons richten op een jonge doelgroep. Hier hebben<br />

we voor gekozen omdat deze doelgroep het meest actief is<br />

b<strong>in</strong>nen de tenniswereld en daarnaast het meest gebruik<br />

maakt van sociale media zoals Facebook.<br />

Onze doelgroep comb<strong>in</strong>eert school met sporten en <strong>in</strong> dit<br />

geval met tennis. Tennis is een sport waarbij je veel<br />

<strong>in</strong>dividueel bezig bent en veel moet spelen wil je beter<br />

worden.<br />

Onze doelgroep sluit aan op het bovenstaande.<br />

Om de doelgroep specifieker te maken, zodat onze Tennis<br />

app het meest tot zijn recht komt hebben we gekozen voor:<br />

jongens en meiden van 14 t/m 24 jaar oud. Ze zijn fanatiek<br />

en competitief met tennis bezig, dat wil zeggen dat ze<br />

m<strong>in</strong>imaal een potje tennis <strong>in</strong> de week spelen en ze maken<br />

gebruik van Social Media.<br />

6 / 32


Proof of Concept<br />

Omdat wij ons richten op jongens en meiden <strong>in</strong> de leeftijdsgroep 14 t/m 24<br />

jaar, moet zowel een meisje van 14 jaar als een jongen van 24 jaar iets<br />

aan de app hebben.<br />

Naast het feit dat de app <strong>in</strong>teressant moet zijn voor verschillende<br />

leeftijden, hebben we er ook over nagedacht hoe mensen de app zullen<br />

willen <strong>in</strong>vullen. <strong>Het</strong> is tenslotte een self-track<strong>in</strong>g app en er moet dus<br />

bepaalde data b<strong>in</strong>nengehaald worden om voor bruikbare statistieken te<br />

zorgen. Daarom hebben we de gebruiker de mogelijkheid gegeven om,<br />

naast het <strong>in</strong>voeren w<strong>in</strong>st of verlies, nog dieper te gaan en de strategie,<br />

speelstijl, en ondergrond te kunnen <strong>in</strong>voeren. Dit zijn allemaal gegevens<br />

die gebruikt kunnen worden om statistieken te maken, waar de gebruiker<br />

wat aan heeft.<br />

Wanneer de gebruiker voldoende statistieken heeft verzameld kan hij of zij<br />

hier bepaalde conclusies uit trekken om vervolgens per wedstrijd of<br />

tegenstander zijn strategie of speelstijl aan te passen.<br />

Door het kijken naar de statistieken van een partij die hij heeft gespeeld<br />

tegen een vriend waar hij één keer <strong>in</strong> de week tegen speelt krijgt de<br />

gebruiker dus <strong>in</strong>zicht <strong>in</strong> de manier waarop hij heeft gespeeld. Zoals eerder<br />

gezegd, je hoeft dus niet alle opties <strong>in</strong> te vullen, maar hoe meer je <strong>in</strong>vult<br />

hoe waardevoller de statistieken worden.<br />

Naast het <strong>in</strong>vullen en bijhouden van gegevens, wil de doelgroep zijn<br />

statistieken en resultaten ook kunnen delen met vrienden door middel van<br />

Facebook. Hierdoor creëert de gebruiker een nog meer competitieve sfeer,<br />

wat zijn of haar spel nog meer ten goede kan komen.<br />

7 / 32


Usecase<br />

Ron de Vries<br />

Ron is 17 jaar en zit 9 jaar op tennis, hij zit nog op de middelbare<br />

school en zit <strong>in</strong> 4-havo, naast school besteedt hij zijn tijd het liefst<br />

aan tennis. De komende jaren wil hij zich ontwikkelen door zoveel<br />

mogelijk wedstrijden te spelen met vrienden en <strong>in</strong> competities. <strong>Het</strong><br />

probleem is dat je niet zoals met voetbal een coach hebt, die alles<br />

voor jou analyseert en bijhoudt. Vandaar dat Ron ervoor gekozen<br />

heeft om de Tennis app te gaan gebruiken om, zijn uitslagen,<br />

strategieën/speelstijlen etc. bij te houden. Uite<strong>in</strong>delijk wil hij hier<br />

relevante statistieken aan over houden, om zijn spel te verbeteren<br />

en mogelijk <strong>in</strong> de toekomst zijn resultaten/speelwijze tegen<br />

tegenstanders terug te kunnen kijken. Zodat hij voor zijn<br />

eerstvolgende wedstrijd een strategie kan handhaven.<br />

Gebruiksmomenten:<br />

Ron zal zijn score/strategie bijhouden tijdens de rustmomenten. Aan<br />

het e<strong>in</strong>d van de wedstrijd vult hij de def<strong>in</strong>itieve score <strong>in</strong>, als hij thuis<br />

is of <strong>in</strong> de kant<strong>in</strong>e tot rust komt vult hij ook zijn strategie/speelwijze<br />

en zijn gevoel over de wedstrijd <strong>in</strong>. Zodra Ron weet dat hij nog een<br />

wedstrijd tegen een bepaald persoon moet spelen vult hij ook de<br />

zwaktes van zijn tegenstander <strong>in</strong>, zodat hij die bij de eerste<br />

ontmoet<strong>in</strong>g weer kan oproepen als hij dat wilt.<br />

Henk Molenaar<br />

Henk is 23 jaar oud en zit zes jaar op tennis. Hij zit op het hbo en<br />

doet de studie Bouwkunde. Vanaf jongs af aan is hij geïnteresseerd<br />

<strong>in</strong> statistieken en zijn persoonlijke ontwikkel<strong>in</strong>g. Hij speelt elke<br />

woensdagavond met drie vrienden een paar enkelspellen.<br />

Er ontstaat altijd sportieve onenigheid over gewonnen of verloren<br />

wedstrijden, daarom wil Henk voor zichzelf bijhouden van wie hij<br />

w<strong>in</strong>t en verliest. Henk kan dan altijd aan zijn vrienden laten zien hoe<br />

de w<strong>in</strong>st en verlies partijen voor hem zijn verlopen over een<br />

bepaalde tijd.<br />

Gebruiksmomenten:<br />

Aan het e<strong>in</strong>d van de wedstrijd dr<strong>in</strong>ken Henk en zijn vrienden nog<br />

even een biertje en bespreken ze de wedstrijden en hun sociale<br />

leven. Henk vult zelf altijd even snel zijn resultaten <strong>in</strong>, tegen wie hij<br />

gespeeld heeft en of verloren of gewonnen heeft en met welke<br />

cijfers.<br />

Lisa de Groot<br />

Lisa is 14 jaar en zit al vanaf haar zevende op tennis. Ze is fanatiek<br />

en competitief <strong>in</strong>gesteld, ze speelt veel wedstrijden om beter te<br />

worden. S<strong>in</strong>ds een paar jaar zit ze bij de KNLTB, omdat ze als talent<br />

wordt gezien. Ze is veel met Facebook bezig om contact met haar<br />

vriend<strong>in</strong>nen te onderhouden, omdat ze veel tijd aan tennis kwijt is.<br />

Ze v<strong>in</strong>dt het daarom ook leuk om haar uitslagen via Facebook te<br />

delen.<br />

Gebruiksmomenten:<br />

Lisa, vult haar resultaten/speelwijze en strategie vaak <strong>in</strong> als ze thuis<br />

is, zo kan ze het zo ge<strong>detail</strong>leerd mogelijk <strong>in</strong>vullen, zodat ze de<br />

meest ge<strong>detail</strong>leerde statistieken krijgt. Ze voert het liefst alles <strong>in</strong> dat<br />

ze kan, want ze wil op elk mogelijke wijze beter worden. Daarom<br />

laat ze haar vader of moeder tijdens belangrijke wedstrijden de<br />

precieze score bijhouden op haar mobiel. Lisa komt zo nu en dan<br />

dezelfde speler tegen en wil dan terug kunnen kijken hoe ze de<br />

wedstrijd heeft gespeeld en hoe het kwam dat ze gewonnen of<br />

verloren heeft. Hier kan ze dan haar strategie voor de volgende<br />

wedstrijd op baseren. Lisa deelt haar resultaten op Facebook, zodat<br />

haar vriend<strong>in</strong>nen kunnen zien hoe het met haar tennisspel gaat.<br />

8 / 32


Storyboard I<br />

9 / 32


Storyboard II<br />

10 / 32


Interactie - Hoofdpag<strong>in</strong>a's<br />

1.0 Nieuw 2.0 Scores 3.0 Statistieken 4.0 Mensen<br />

11 / 32


Selecteer<br />

de set<br />

Set -1<br />

Set +1<br />

Interactie - 1.0 Nieuw<br />

Reset alle scores<br />

naar 0-0, 0-0, etc.<br />

1.0 Nieuw<br />

- Standaard tegenstander: meest recente<br />

- Standaard <strong>in</strong>itiële setscores: 0-0, 0-0, etc. of<br />

meest recente score (<strong>in</strong>dien app was afgesloten)<br />

- M<strong>in</strong>imum score: 0<br />

Bewaar <strong>in</strong>gevoerde<br />

scores en ga naar 1.1<br />

- Maximum score: 6<br />

(Uitzonder<strong>in</strong>g: bij 6-6 kan één van de scores tot 7)<br />

- Indien app wordt afgesloten zonder opslaan:<br />

onthoud <strong>in</strong>gevulde scores voor volgende keer<br />

wanneer de app wordt geopend<br />

Game -<br />

Game +<br />

Ga naar<br />

'Tegenstander wijzigen'<br />

Detailmodus H<strong>in</strong>t Tegenstander wijzigen<br />

- Standaard <strong>in</strong>itiële gamescore: 0,0<br />

- Gamescores tell<strong>in</strong>g: 0, 15, 30, 40<br />

(Na 40: verhoog bijhorende set met +1 en<br />

reset gamescore op 0-0)<br />

- Indien geen tactiek is gedef<strong>in</strong>ieerd bij de<br />

betreffende speler, toon: "Je hebt nog geen<br />

zwakke punten aangegeven bij Tim."<br />

Terug<br />

naar 1.0<br />

Terug<br />

naar 1.0<br />

Terug naar<br />

1.0 'Nieuw'<br />

(Modal w<strong>in</strong>dow)<br />

Wijzig tegenstander<br />

<strong>in</strong> 1.0 'Nieuw'<br />

12 / 32


Interactie - 1.1 Opgeslagen<br />

Ga naar 2.0<br />

1.1 Opgeslagen<br />

- Checkboxen 'Speelstijlen' staan standaard uit<br />

- Waarden voor 'Ondergrond':<br />

- Hardcourt<br />

- Gras<br />

- Gravel<br />

- Tapijt<br />

- Snapsports<br />

- Smashcourt<br />

Bewaar <strong>in</strong>gevoerde<br />

strategie en ga naar 2.0<br />

- Tekstveld 'Overige <strong>detail</strong>s' is standaard leeg<br />

13 / 32


Interactie - 2.0 Scores<br />

2.0 Scores<br />

- Standaard gesorteerd op datum, tenzij<br />

anders <strong>in</strong>gesteld door gebruiker<br />

Ga naar<br />

2.1<br />

Sorteren 2.1 Score 2.1.1 Score wijzigen<br />

- Update lijst wanneer sorteerwijze is<br />

geselecteerd via dropdownbox<br />

Terug naar<br />

2.0 'Scores'<br />

- Waarden voor dropdownbox 'Sorteren op':<br />

- Datum<br />

- Tegenstander<br />

- Beste partij<br />

- Slechtste partij<br />

Open geolocatie<br />

<strong>in</strong> Google Maps<br />

- Format voor datum: 'Vandaag', 'Gisteren' of<br />

eerder '14 feb 2011'<br />

- Format voor tijd: '13:26 PM/AM'<br />

Ga naar<br />

x.x Delen via<br />

Facebook<br />

Bewaar score<br />

en ga naar 2.1<br />

(Dezelfde functies als 1.0 'Nieuw', behalve<br />

het wijzigen van tegenstander en wissen van<br />

scorebord.)<br />

14 / 32


Interactie - 3.0 Statistieken<br />

3.0 Statistieken<br />

- Waarden dropdownbox zijn alle<br />

tegenstanders van de gebruiker, gesorteerd<br />

op meest recent tegenstander<br />

- Standaardwaarde dropdownbox:<br />

'- Vergelijken met -'<br />

Vergelijken<br />

met Jori<br />

Ga naar<br />

x.x Delen via<br />

Facebook<br />

Vergelijk<br />

- Maximum aantal vergelijk<strong>in</strong>gen: 6<br />

- Button '+' krijgt voor iedere nieuwe<br />

vergelijk<strong>in</strong>g een andere kleur:<br />

- 1e: oranje (eigen statistieken)<br />

- 2e: paars<br />

- 3e: groen<br />

- 4e: blauw<br />

- 5e: zwart<br />

- 6e: grijs<br />

- 7e: rood<br />

(Deze kleur komt overeen met de<br />

grafieklijn die bij de tegenstander hoort)<br />

Verwijder<br />

statistiek<br />

Statistiek<br />

toevoegen<br />

15 / 32


Interactie - 4.0 Mensen<br />

4.0 Mensen<br />

- Lijst gesorteerd op naam<br />

- Toon 'F'-icoon achter de naam <strong>in</strong>dien zij de app<br />

ook hebben en zijn aangemeld via Facebook<br />

4.1.1 Tegenstander: profiel<br />

- Standaard <strong>in</strong>itiële tab: 'Profiel'<br />

4.1.2 Tegenstander: statistieken 4.1.2 Tegenstander: tactiek<br />

Ga naar<br />

x.x Delen via<br />

Facebook<br />

- Maximum aantal punten per onderdeel: 15<br />

16 / 32


Interactie - 5.0 Instell<strong>in</strong>gen<br />

Wis alle<br />

gegevens<br />

Weet je heel zeker<br />

dat je alle gegevens<br />

wilt wissen?<br />

Ja<br />

Nee<br />

5.0 Instell<strong>in</strong>gen 5.x Instell<strong>in</strong>gen: Facebook 5.1 Instell<strong>in</strong>gen (Verbonden) 5.1 FAQ<br />

Ga naar App Store, zoek<br />

alles van 'Sanoma Media'<br />

Ga naar<br />

5.1 'FAQ'<br />

- Zie ook: x.x 'Delen via Facebook'<br />

(ter referentie)<br />

- Push-notiticaties aan: stuur berichten<br />

wanneer een andere persoon jouw <strong>in</strong> zijn/haar<br />

score heeft vermeld (zie x.x Push-bericht)<br />

- Inhoudelijke tekst zal later worden bepaald<br />

17 / 32


Interactie - x.x Delen via Facebook<br />

Verbonden met<br />

Facebook?<br />

Nee<br />

Aanmelden Facebook<br />

Ja<br />

Publiceer op<br />

Facebook<br />

Sluit pop-up en ga<br />

terug naar 2.1 Score<br />

Gelukt?<br />

Ja<br />

2.x Resultaat: gelukt<br />

Ga naar update op<br />

Facebook.com<br />

(browser b<strong>in</strong>nen app)<br />

Nee<br />

Sluit pop-up en ga<br />

terug naar 2.1 Score<br />

2.x Resultaat: mislukt<br />

Publiceer op<br />

Facebook<br />

18 / 32


Interactie - x.x Push-bericht<br />

x.x Push-bericht<br />

- Lijst gesorteerd op naam<br />

- Toon 'F'-icoon achter de naam <strong>in</strong>dien zij de app<br />

ook hebben en zijn aangemeld via Facebook<br />

Ga naar<br />

2.1 Score<br />

19 / 32


Testrapport<br />

De testen die wij zullen gaan uitvoeren zijn paper prototyp<strong>in</strong>g en een test van het<br />

uite<strong>in</strong>delijke prototype. Hiermee hopen we de app nog beter te kunnen maken.<br />

Onderstaande onderwerpen willen we centraal zetten b<strong>in</strong>nen ons onderzoek:<br />

Interactie:<br />

We willen de app testen vooral op <strong>in</strong>teractie. Hiervoor gebruiken we mensen uit<br />

onze doelgroep. We gaan vooral kijken of zij de 'juiste weg' kunnen v<strong>in</strong>den met<br />

onze app, dus zonder enige hulp van buitenaf. Daarnaast willen we testen hoe<br />

lang de gebruiker erover doet om de app te gebruiken. In sport draait het<br />

allemaal om snelheid, dus willen we deze doelstell<strong>in</strong>g terug laten komen <strong>in</strong> onze<br />

de app.<br />

Techniek:<br />

Werkt de prototype nagenoeg perfect en soepel? Kan de gebruiker een score<br />

succesvol opslaan, delen op Facebook, etc.? Met andere woorden: hoe gedraagt<br />

de app zich als het gaat om processen (gegevens <strong>in</strong>- en uitvoeren).<br />

Usabilty:<br />

Is de <strong>in</strong>terface duidelijk voor de gebruiker, is een belangrijke vraag. De gebruiker<br />

moet direct kunnen zien wat de bedoel<strong>in</strong>g is en wat de app te bieden heeft.<br />

De flow waarmee de gebruiker door de app gaat moet goed en duidelijk zijn.<br />

Design:<br />

V<strong>in</strong>dt de gebruiker het <strong>ontwerp</strong> niet alleen aantrekkelijk maar is het ook duidelijk?<br />

We willen er hierbij achter komen wat de gebruikt stoort of wat niet prettig oogt.<br />

Doelgroep:<br />

Is de doelgroep groot genoeg voor deze app. Waar bev<strong>in</strong>dt de doelgroep zich het<br />

meest en hoe komt het <strong>in</strong> aanrak<strong>in</strong>g met de app. Dit staat overigens <strong>in</strong> sterk<br />

verband met de market<strong>in</strong>gstrategie.<br />

20 / 32


Visual Interface Design - Typografie I<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

Font: Helvetica<br />

Style: bold<br />

Size: 9 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: regular<br />

Size: 7,5 pt.<br />

Color: #333333<br />

Font: Helvetica<br />

Style: regular<br />

Size: 7,5 pt.<br />

Color: #e05518<br />

Font: Helvetica<br />

Style: regular<br />

Size: 4,5 pt.<br />

Color: #9A9A9A<br />

Font: Helvetica<br />

Style: bold<br />

Size: 6 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: bold<br />

Size: 9 pt.<br />

Color: #000000<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: right<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

Font: Helvetica<br />

Style: bold<br />

Size: 5,5 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: bold oblique<br />

Size: 5 pt.<br />

Color: #B2B2B2<br />

Font: Helvetica<br />

Style: bold<br />

Size: 12 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: bold<br />

Size: 6,5 pt.<br />

Color: #343434<br />

Font: Helvetica<br />

Style: regular<br />

Size: 6 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: bold<br />

Size: 6 pt.<br />

Color: #333333<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: top<br />

21 / 32


Visual Interface Design - Typografie II<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

Font: Helvetica<br />

Style: regular<br />

Size: 6 pt.<br />

Color: #808080<br />

Font: Helvetica<br />

Style: regular<br />

Size: 6 pt.<br />

Color: #333333<br />

Font: Helvetica<br />

Style: regular<br />

Size: 7,5 pt.<br />

Color: #be8b00<br />

Font: Helvetica<br />

Style: regular<br />

Size: 5 pt.<br />

Color: #808080<br />

Font: Helvetica<br />

Style: regular<br />

Size: 4 pt.<br />

Color: #808080<br />

Font: Helvetica<br />

Style: regular<br />

Size: 5,5 pt.<br />

Color: #9A9A9A<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: top<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: top<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: center<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

[ screenshot ]<br />

Font: Helvetica<br />

Style: bold<br />

Size: 6 pt.<br />

Color: #808080<br />

Font: Helvetica<br />

Style: regular<br />

Size: 7,5 pt.<br />

Color: #989898<br />

Font: Helvetica<br />

Style: regular<br />

Size: 7 pt.<br />

Color: #FFFFFF<br />

Font: Helvetica<br />

Style: regular<br />

Size: 5 pt.<br />

Color: #333333<br />

Font: Helvetica<br />

Style: oblique<br />

Size: 5 pt.<br />

Color: #808080<br />

Font: Helvetica<br />

Style: bold<br />

Size: 5,5 pt.<br />

Color: #FFFFFF<br />

"We hebben gekozen voor Helvetica als basislettertype, aangezien deze standaard wordt gebruikt <strong>in</strong> de iOS-omgev<strong>in</strong>g. <strong>Het</strong> zal op deze manier vertrouwd overkomen."<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: top<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: middle<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: right<br />

V Align: top<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: left<br />

V Align: top<br />

H Spac<strong>in</strong>g: 0<br />

V Spac<strong>in</strong>g: 0<br />

H Align: right<br />

V Align: middle<br />

22 / 32


Visual Interface Design - Kleuren<br />

HEX: #E05518<br />

RGB: R224 G85 B24<br />

CMYK: C7 M80 Y100 K1<br />

HEX: #333333<br />

RGB: R51 G51 B51<br />

CMYK: C69 M63 Y62 K58<br />

"De vier kleuren vormen samen het warme karakter waar tennis voor staat. Oranje staat voor<br />

de omgev<strong>in</strong>g, de grijst<strong>in</strong>ten staat voor het net en wit staat voor de lijnen op het veld. We hebben<br />

overigens niet voor groen gekozen, omdat deze kleur m<strong>in</strong>der sportief oogde dan verwacht."<br />

HEX: #B3B3B3<br />

RGB: R179 G179 B179<br />

CMYK: C31 M24 Y25 K0<br />

HEX: #FFFFFF<br />

RGB: R255 G255 B255<br />

CMYK: C0 M0 Y0 K0<br />

23 / 32


Visual Interface Design - Textuur<br />

"We hebben gekozen voor een lichtelijk grove textuur met daarbij gebruik van subtiele patronen<br />

en effecten om de app te laten aanvoelen als de omgev<strong>in</strong>g van een echte tennisbaan<br />

We hopen hiermee dat sportieve gevoel op te roepen."<br />

24 / 32


Techniek - Functionaliteiten<br />

Techniek<br />

De prototype van de app wordt een mobile webapplicatie, gebouwd met<br />

HTML 5, Javascript, PHP en MySQL. Verder zullen we gebruik maken<br />

van de Facebook API om de gebruiker te laten <strong>in</strong>loggen/uitloggen en<br />

gegevens te delen.<br />

Pag<strong>in</strong>a's / Functies:<br />

1.0 Nieuw – HTML 5<br />

- Tegenstander wijzigen<br />

- Tip / H<strong>in</strong>t tonen (1.2)<br />

- Setscore verhogen<br />

- Setscore verlagen<br />

- Setscore specifiek <strong>in</strong>voeren middels toetsenbord<br />

- Detailmodus: set 'uitklappen' om de score per game <strong>in</strong> te voeren (1.1)<br />

- Ingevoerde scores wissen<br />

- Ingevoerde scores opslaan<br />

1.1 Nieuw: games – HTML 5<br />

- Gamescore verhogen<br />

- Gamescore verlagen<br />

1.2 Tip / H<strong>in</strong>t – HTML 5<br />

- Scherm sluiten<br />

1.3 Strategie – HTML 5<br />

- Checkboxen aan-/uitv<strong>in</strong>ken<br />

- Dropdownbox selecteren<br />

- Opmerk<strong>in</strong>gen typen<br />

- Strategie opslaan ('onthouden')<br />

2.0 Scores – HTML 5<br />

- Sorteerveld tonen (2.1)<br />

- Score selecteren<br />

2.1 Scores: sorteren – HTML 5<br />

- Sorteerwijze selecteren<br />

- Sorteerveld verbergen ('Klaar')<br />

2.2 Scores: score – HTML 5, PHP, SQL, JavaScript<br />

- Score wijzigen (2.2.1) – HTML 5<br />

- Google Maps openen met locatie van spelen - PHP<br />

- Overzicht delen via Facebook - JavaScript<br />

2.3 Scores: score wijzigen – HTML 5<br />

- Dezelfde functionaliteiten als 1.0<br />

3.0 Statistieken – HTML 5, JavaScript<br />

- Vergelijken met tegenstander – HTML 5<br />

- Overzicht delen via Facebook – JavaScript<br />

4.0 Mensen – HTML 5<br />

- Persoon toevoegen<br />

- Persoon selecteren<br />

4.1 Mensen: persoon: profiel – HTML 5<br />

- Gegevens wijzigen<br />

4.2 Mensen: persoon: statistieken - JavaScript<br />

- Overzicht delen via Facebook<br />

4.3 Mensen: persoon: tactiek – HTML 5<br />

- Gegevens wijzigen<br />

5.0 Instell<strong>in</strong>gen – HTML 5, JavaScript<br />

- Niet verbonden via Facebook: Verb<strong>in</strong>den met Facebook - JavaScript<br />

- Verbonden via Facebook: Verb<strong>in</strong>d<strong>in</strong>g verbreken met Facebook - JavaScript<br />

- Alle scores, mensen en andere gegevens wissen – HTML 5<br />

- FAQ tonen – HTML 5<br />

- Meer apps tonen – HTML 5<br />

25 / 32


Techniek - Model<br />

Opmerk<strong>in</strong>g: ERD-model kan veranderen naarmate het project vordert.<br />

26 / 32


Productie<br />

1APP<br />

Diverse concepten worden bedacht waarvan de beste drie worden voorgelegd aan<br />

Sanoma Media. Vervolgens wordt er <strong>ontwerp</strong>document gemaakt en het product wordt<br />

getest. <strong>Het</strong> e<strong>in</strong>dproduct van 1APP is <strong>in</strong> de vorm van een werkende prototype.<br />

Sanoma Media<br />

Stelt de opdracht samen met de randvoorwaarden. Beslist uit de drie concepten het<br />

beste idee. Dit concept wordt vervolgens verder uitgewerkt door 1APP. <strong>Het</strong> werkende<br />

prototype die wordt aangeleverd door 1APP kan uite<strong>in</strong>delijk geproduceerd worden<br />

door Sanoma Media.<br />

27 / 32


Market<strong>in</strong>gstrategie<br />

Wij willen ons volledig richten op de competitieve tennisser die graag zijn resultaten<br />

bijhoudt en wilt delen met de rest van de wereld. Deze mensen willen wij bereiken op<br />

tennistoernooien en -evenementen. En door middel van plaatselijke promotieacties bij<br />

de grotere tennisverenig<strong>in</strong>gen b<strong>in</strong>nen Nederland.<br />

De app zelf wordt het eerste halfjaar gratis te gebruiken. Dit om nieuwe gebruikers te<br />

pushen de app uit te proberen en ledendatabase op te bouwen. Na deze periode<br />

wordt er een kle<strong>in</strong>e bijdrage gevraagd om de app te gebruiken.<br />

Dit alles kan via Apple's App Store, Marketplace van Android of ook via een betaald<br />

accountsysteem b<strong>in</strong>nen de mobile webomgev<strong>in</strong>g. Dit hangt natuurlijk ook af van de<br />

wijze waarop Sanoma Media deze app wilt verspreiden.<br />

28 / 32


Tone of Voice<br />

Onze doelgroep is jong, daarom willen we de gebruiker <strong>in</strong> jij-vorm en op <strong>in</strong>formele<br />

wijze aanspreken. B<strong>in</strong>nen de app willen we dat de gebruiker niet veel hoeft te lezen,<br />

omdat dit de gebruiker misschien zal afleiden van zijn doel. We willen dan ook zoveel<br />

mogelijk gebruik maken van grafische <strong>in</strong>formatie zoals icoontjes en grafieken.<br />

De gebruiker is een sporter en wil gestimuleerd worden. Daarom is het van belang als<br />

de gebruiker wel wordt aangesproken dit op een frisse, to-the-po<strong>in</strong>t manier gebeurt.<br />

Gewenste gevoelswaarde:<br />

• Vriendelijk (als vrienden onder elkaar)<br />

• Balans tussen serieus en luchtig (competitief / recreatief)<br />

• Kennisrijk en vaardig (<strong>in</strong>telligent)<br />

• To-the-po<strong>in</strong>t (snel, direct)<br />

• Stimulerend (competitief)<br />

Voorbeelden:<br />

• “Hey, hoe gaat het op deze vroege morgen?”<br />

• “Ik denk dat je veel beter kunt dan dit! Maar misschien is deze zaterdag je dag niet”<br />

• “<strong>Het</strong> blijkt dat je moeite hebt met tegenstanders die aanvallend spelen, probeer<br />

sneller terug te vallen naar de basel<strong>in</strong>e”<br />

• “Je bent <strong>in</strong>gehaald door je rivaal! - Daag hem uit om weer bovenaan te staan”<br />

Regels<br />

- Schrijf <strong>in</strong> de jij-vorm, houd het persoonlijk<br />

- Help de gebruiker met professionele tips, maar beschrijf deze eenvoudig<br />

- Stimuleer de gebruiker om te gaan tennissen<br />

29 / 32


Contentmatrix<br />

Wij leveren het uite<strong>in</strong>delijke prototype werkend op bij Sanoma Media.<br />

Hierna is er ruimte voor een correctieronde waarbij wij van 1APP nog<br />

wijzig<strong>in</strong>gen aan het product kunnen doorvoeren.<br />

Sanoma Media levert de uite<strong>in</strong>delijke applicatie op en kan hier eventueel<br />

aanpass<strong>in</strong>gen en verbeter<strong>in</strong>gen <strong>in</strong> aanbrengen. De app wordt <strong>in</strong> de<br />

toekomst bijgehouden door Sanoma Media en voorzien van tussentijdse<br />

updates.<br />

De gebruiker levert feitelijk de content voor de app. Dit doet hij tijdens het<br />

gebruik van de app. De bewerk<strong>in</strong>gen van de app zijn het berekenen van<br />

resultaten en statistieken.<br />

Daarnaast zorgt de gebruiker zelf ook voor de sociale <strong>in</strong>formatie wanneer<br />

hij of zij de <strong>in</strong>gevoerde besluit te delen met anderen.<br />

30 / 32


Thesaurus<br />

Hier hebben we geen woorden voor ;-)<br />

31 / 32


Plann<strong>in</strong>g<br />

Plann<strong>in</strong>g is gemaakt vanaf moment van schrijven (di 15 nov 2011).<br />

Resterend aantal weken: 7<br />

Week Taken<br />

1 • opleveren <strong>ontwerp</strong>document<br />

• start ontwikkel<strong>in</strong>g techniek app<br />

2 • ontwikkel<strong>in</strong>g app<br />

• visuele vormgev<strong>in</strong>g exporteren<br />

• paper-prototyp<strong>in</strong>gtest<br />

3 • verbeter<strong>in</strong>gen doorvoeren n.a.v. testresultaten<br />

• mogelijke uitbreid<strong>in</strong>g van functionaliteiten<br />

4 • ontwikkel<strong>in</strong>g app<br />

5 • opleveren werkend prototype<br />

6 • verbeteren en f<strong>in</strong>etunen<br />

7 • e<strong>in</strong>ddocumentatie<br />

32 / 32


Notities<br />

Auteur Notitie<br />

Prioriteit<br />

1APP Testrapport zal later worden uitgebreid met daadwerkelijke resultaten M<br />

33 / 32

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!