Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen
Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen
Ontwerpdocument Het ontwerp, in detail toegelicht - Inloggen
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
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