2011. Naam: Bart Waardenburg, Studentnummer:

CMD-6VT-P1.09

Ontwerprapport Bart Waardenburg 21/10/2011

Naam: Bart Waardenburg, Studentnummer: 08081867

INHOUDSOPGAVE   1.  INLEIDING  

3  

2.  DE  STRATEGIE  BEPALEN  

4  

2.1.  PLANNEN  MAKEN   2.2.  VISIE  BEPALEN   2.3.  DOELGROEP  BESCHRIJVEN   2.4.  DOELEN  VASTSTELLEN  

4   10   12   16  

3.  BESLISSINGEN  NEMEN  

17  

3.1.  CONCURRENTIE  BEKIJKEN   3.2.  KOPPELINGEN  LEGGEN   3.3.  EISEN  VASTLEGGEN  

17   39   40  

4.  DE  STRUCTUUR  BEPALEN  

43  

4.1.  INTERACTIE  BESCHRIJVEN   4.2.  ACHTERKANT  VORMGEVEN   4.3.  GEGEVENS  BEPALEN  

43   48   49  

5.  HET  SKELET  VORMGEVEN  

50  

5.1.  NAVIGATIE  IN  KAART  BRENGEN   5.2.  WIREFRAMES  MAKEN  

50   51  

6.  HET  PROJECT  KLEUR  GEVEN  

59  

6.1.  ONTWERP  SPECIFICEREN  

64  

7.  DE  REFLECTIE  

65  

2

1.  INLEIDING   Het doel van dit verslag is om lezers een beeld te geven van de werkzaamheden die ik heb uitgevoerd om tot mijn ontwerp te komen. Het verslag is dan ook geschreven voor mensen die zich hiervoor interesseren en graag willen lezen welke stappen ik heb doorlopen. Om tot dit ontwerp te komen heb ik ervoor gekozen om de aanpak van Jesse James Garrett te volgen. De methode genaamd ‘The elements of user experience’ komt tot een gebruiksvriendelijk eindproduct door vijf verschillende fases te doorlopen. In hoofdstuk 2 is de eerste fase van de methodiek van Garrett beschreven. Hierin zal ik onderzoeken wat er voor dit project nodig is en wat er mogelijk is. Hoofdstuk 3 staat in het teken van het nemen van beslissingen en het vastleggen van de eisen aan het systeem. Het vierde hoofdstuk van dit document zal ingaan op de totstandkoming van de structuur van het eindproduct. Het vijfde hoofdstuk staat in het teken van het vormgeven van het zogenaamde skelet. Ik zal hier mijn interactieontwerpen verantwoorden en de totstandkoming ervan beschrijven. Hoofdstuk 6 beschrijft de laatste fase van ‘The elements of user experience’ en zal ingaan op het visuele ontwerp van het eindproduct. Tot slot zal ik in hoofdstuk 7 het project kort evalueren.

3

2.  DE  STRATEGIE  BEPALEN   Hoofdstuk 2 staat in het teken van de eerste fase van de methode van Jesse James Garrett, namelijk de ‘strategy plane’. Tijdens deze fase staat de orientatie op het te doorlopen proces centraal. Door het lezen van dit hoofdstuk zal het de lezer duidelijk worden wat ik gedaan heb om een duidelijk beeld van de te volgen route te krijgen. In de eerste paragraaf is het plan van aanpak ingevoegd waarin staat beschreven hoe ik vooraf heb bedacht dit project aan te gaan pakken. In de paragraaf daarna is het visiedocument te lezen wat bestaat uit een klein onderzoek naar de verschillende mogelijkheden en beschrijving van wat ik precies wil gaan maken. In paragraaf drie ga ik beschrijven hoe mijn doelgroepsomschrijving tot stand is gekomen. Paragraaf vier bestaat uit een overzicht van doelen die betrekking hebben tot dit project en waarom juist deze doelen van toepassing zijn op dit project.

2.1.  Plannen  maken   In dit document worden de werkzaamheden die ik ga uitvoeren tijdens het blok c6 ‘mobile interface’ beschreven. Gedurende het project zal ik dit plan van aanpak gebruiken om duidelijk te krijgen welke stappen er wanneer ondernomen moeten worden. Tijdens het project zullen er een aantal aanpassingen en verbeteringen worden doorgevoerd met betrekking tot dit document. In hoofdstuk 1 zal ik het project definiëren. Alle belangrijke factoren zoals onder andere de aanleiding, doelstellingen en probleembeschrijving zal ik hier helder beschreven. Vervolgens heb ik in hoofdstuk 2 de verschillende fases van het project beschreven en deze aan milestones gekoppeld, zodat het duidelijk is in welke periode van dit blok waaraan gewerkt moet worden.

2.1.1.  Projectdefinitie   Aanleiding Zelf doe ik aan amateurvoetbal bij Vitesse Delft op een redelijk laag niveau. Wekelijks kom ik in aanraking met verschillende situaties die goed geautomatiseerd zouden moeten kunnen worden. Hieronder zal ik enkele van deze situaties beschrijven. • •

• •

Er moet voor de wedstrijden altijd druk worden rond gemaild om te inventariseren wie er allemaal kunnen komen. Er moet op de dag zelf vaak nog uitgevogeld worden in het geval dat er bij een andere club wordt gespeeld wie er rechtstreeks naar toe gaan, wie er bij de club verzamelen en wie van hen met een auto bij de club verzamelen. Er moet altijd rond gemaild worden hoe laat er gespeeld wordt en waar er gespeeld wordt omdat die informatie niet snel en makkelijk te vinden is. Er moet na afloop van de wedstrijden altijd afgesproken worden wie er de ‘was’ mee naar huis neemt om te wassen. Dit zorgt altijd voor discussie en vaak zijn het dezelfden die uiteindelijk de taak op zich nemen.

Daarnaast zijn er nog enkele andere zaken zoals de stand, waarvan het handig is als die voor iedereen makkelijk te bekijken zou zijn.

4

Probleembeschrijving De informatie die binnen het voetbalteam gedeeld moet worden gaat stroef en zal goed en duidelijk vormgegeven moeten worden. Er zijn een aantal zaken die bij de aanleiding genoemd zijn die voor veel extra organisatiewerk zorgen. Niet iedereen zit daar altijd op te wachten. Doelstelling van de opdracht De doelstelling van de opdracht is om een HTML5 webapp te ontwikkelen die het voor amateurvoetballers makkelijk maakt om noodzakelijke informatie binnen het team gemakkelijk te delen. Methodiek Om een keuze te maken voor de te kiezen methodiek voor dit project heb ik goed gekeken naar wat er het beste in deze situatie past. Mijn keuze is uiteindelijk gevallen op de methode ‘The elements of user experience’ van Jesse James Garrett. Allereerst volgt er een beknopte beschrijving van deze methode en vervolgens zal ik de keuze voor deze methode toelichten. ‘The Elements of User Experience’ is een methode voor het ontwikkelen van websites waarbij de gebruikers van het uiteindelijke product central staan. In het proces worden vijf zogenaamde ‘planes’ doorlopen, deze planes zijn de stappen die genomen worden om uiteindelijk tot een website te komen die gebruiksvriendelijk en effectief is. Dit hele proces is er op gericht dat geen enkele actie van de gebruiker op jouw site gebeurd zonder dat jij als ontwerper dat voor ogen had. Dit betekent dat iedere mogelijke actie van tevoren is bepaald en dat de verwachtingen van de gebruiker gedurende het hele proces zijn vastgelegd. Iedere beslissing met betrekking tot het ontwerpen van de website komen aan bod in de vijf planes van Jesse James Garrett. Iedere keuze die gemaakt wordt heeft invloed op datgene wat in de volgende plane gedaan zal moeten worden. Werk in de volgende plane hoeft niet te wachten tot de plane ervoor voltooid is. Het werk kan elkaar overlappen, maar voordat de volgende plane voltooid kan worden moet de erop voorafgaande wel voltooid zijn. Als we van onder naar boven kijken komen we in de hieronder beschreven volgorde langs de planes. Elke plane verder komt dichter bij het eindresultaat en zal een concreter beeld geven van hoe de website er uiteindelijk uit komt te zien. De plane die als eerst doorlopen wordt is de ‘Strategy plane’. Datgene wat de gebruiker nodig heeft en wat haar doelen zijn is de primaire taak waar een website aan zal moeten voldoen. We zullen eerst moeten begrijpen wat deze doelen van gebruikers inhouden en wat ze verwachten van de website. Als we dit duidelijk in kaart hebben, dan kunnen we pas verder gaan met het ontwikkelen. Naast datgene wat de gebruikers willen zien in de site zijn er natuurlijk de doelen die de 5

opdrachtgever heeft. De opdrachtgever wil wat bereiken met de site en dat hoeft niet altijd hetzelfde te zijn als wat de gebruiker op de site wil zien. Er zal hier een goede afstemming in gezocht moeten worden. De producten die tijdens dit gedeelte van het ontwerp opgeleverd worden vormen de basis van de ‘Scope plane’. Na de ‘Scope plane’ volgt de ‘Strategy plane’. In de ‘Strategy plane’ zijn de verwachtingen van de gebruikers naar voren gekomen en datgene wat de opdrachtgever graag wil zien. Dit staat als basis voor de ‘functionele specificaties’ die tijdens deze plane gevormd worden. Hierin wordt beschreven welke mogelijkheden het uiteindelijke product minimaal moet bevatten. Daarnaast worden de ‘inhoudelijke specificaties’ gevormd. Deze specificaties beschrijven wat er op het gebied van gegeven informatie minimaal moet terug komen op de website. De ‘Structure plane’ gaat in op hoe het systeem reageert op de gebruiker. Dit noemen we de ‘Interaction Design’ van de website. Hierbij wordt rekening gehouden met alles wat de gebruiker kan doen en hoe het systeem daarop zal reageren. Op gebied van de informatie die de website bevat zal er een structuur moeten worden aangebracht. Er zal een keuze gemaakt moeten worden hoe de informatie naar de gebruiker gebracht wordt, oftewel hoe de informatie architectuur er uit zal komen te zien. De ‘Skeleton plane’ is in feite in drie gedeeltes opgedeeld. Op zowel de visuele kant als de informatieve kant zal er rekening gehouden moeten worden met hoe de informatie naar de gebruiker getoond zal worden. De informatie moet zo gebracht worden dat de gebruiker van het systeem meteen gebruikt wat er bedoeld wordt. Daarbij moet bijvoorbeeld gedacht worden aan de manier waarop de gebruiker kan navigeren op de website. Dit zal voor de gebruiker visueel te begrijpen moeten zijn, maar ook de volgorde zal een duidelijke logica moeten bevatten. Tot slot wordt de laatste plane doorlopen; de ‘Surface plane’. Op deze plane staat het uiteindelijke visuele ontwerp van het systeem centraal. Er wordt gekeken hoe het product er precies uit komt te zien en of daarbij rekening wordt gehouden met alle hiervoor doorlopen planes, alles zal op elkaar aan moeten sluiten. Mijn opdracht staat geheel in het teken van het maken van het gebruiksgedeelte van een website, het uitdenken van hoe alles moet gaan werken. ‘Interaction design’ en ‘user experience design’ zijn twee termen die bij mijn project zeer centraal zullen staan. Bij de methodiek van Jesse James Garret staan deze twee termen ook bijzonder centraal en met een aantal specifieke mijlpalen wordt ervoor gezorgd dat het uiteindelijke product op deze gebieden ook goed scoort. Tijdens mijn studie heb ik ook meerdere malen met deze methode gewerkt en heb hier altijd een goed gevoel bij gehad. De te doorlopen stappen zijn zeer gericht en dat zorgt voor een overzichtelijk project, waarbij kritiek punten van tevoren al duidelijk worden. Door mijn ervaring met de methodiek ben ik ervan overtuigd dat ik eventuele problemen in het projectverloop spoedig kan herkennen en hier adequaat op zal kunnen reageren. Afbakening Een opsomming van enkele specifieke gedeeltes waar ik me wel of niet mee bezig zal houden tijdens dit project. Dit is geen uitputtend lijstje, maar een globalisering van enkele onderwerpen waarvan ik wil vastleggen of ik me er wel of niet in zal verdiepen.

6

Binnen de projectgrenzen

Buiten de projectgrenzen

Het interaction design van de applicatie.

Het automatisch ophalen van gegevens van andere websites om mijn database te vullen.

Het visual design van de applicatie.

Het uitvoerig testen van de applicatie onder een gedeelte van de doelgroep

De informatiestructuur van de applicatie. De codering van de applicatie. Een verdienmodel voor de applicatie.

Risicofactoren Hieronder zal ik enkele van de in mijn ogen belangrijkste risicofactoren weergeven. Risico

Herkenning

Maatregel

Impact

De haalbaarheid van het project

Een goede, duidelijke en specifieke planning

De planning opvolgen en in het geval van problemen aan de hand hiervan de planning bijstellen.

Producten niet tijdig kunnen afronden, waardoor het eindproduct vertraging oploopt.

Onervarenheid

Goed naar mijn eigen kwaliteiten kijken en waar nodig leren van anderen.

Op het moment dat iets mij niet duidelijk is hulp vragen aan docenten of medestudenten.

Kwalitatief ondermaatse producten opleveren.

Onduidelijkheid afbakening

Voordat het project start duidelijk kijken wat er wel en niet gedaan moet en kan worden.

Een afbakening op papier zetten waarop duidelijk is wat er wel of niet gemaakt zal worden door mij.

Producten die ik niet kan maken, waardoor problemen met de oplevering ontstaan.

2.1.2.  Planning   Het is belangrijk om te starten met een duidelijke planning. In dit hoofdstuk wil ik duidelijk maken welke fases ik wanneer zal doorlopen en welke documenten ik zal opleveren. Daarnaast zal ik een schattig maken hoeveel tijd ik voor een specifiek onderdeel nodig zal hebben.

7

Concrete werkzaamheden De uit te voeren activiteiten omvatten onder andere: Fase 1 (Strategy plane): Het opstellen van een visie-document. Bekijken waarom voor welke aanpak gekozen wordt en dit duidelijk motiveren. Daarnaast is het belangrijk om op te schrijven waar het systeem aan moet voldoen. Er zal gekeken worden naar de doelgroep die het product gaat gebruiken en een overzicht gemaakt van de doelen. Documenten: Plan van aanpak, Doelgroepsomschrijving, Doelenoverzicht Fase 2 (Scope plane): Een scan waarin gekeken wordt wat er allemaal al op de markt is. Bestaande vergelijkbare applicaties worden bekeken en geëvalueerd. Hierbij is het ook belangrijk om te kijken wat er allemaal mogelijk is en om enige ervaring op te doen met het ontwerpen voor dit type medium. Aan de hand van deze bevindingen zal ik een lijst opstellen van eisen waar het systeem aan moet voldoen. Documenten: Benchmark, Systeemeisen Fase 3 (Structure plane): Er zullen schetsen gemaakt moeten worden van hoe alle functionaliteiten geplaatst gaan worden. De navigatie wordt getekend en beschreven, alle mogelijkheden moeten hierin duidelijk naar voren komen. Documenten: Siteplan, Navigatieplan Fase 4 (Skeleton plane): De eerste opzet voor het design wordt gemaakt. Documenten: Schetsen, Wireframes Fase 5 (Surface plane): De schetsen worden verder uitgewerkt en zullen omgebouwd worden tot een definitief product. Documenten: Wireframes, Eindproduct Op te leveren producten Product

Beschrijving

Afhankelijkheden

Plan van aanpak

Hierin staat beschreven hoe ik dit blok ga indelen. De nadruk ligt hierbij op de volgende punten: Wat is de opdracht? Hoe ga ik mijn tijd in plannen? Welke producten ga ik opleveren? En hoe ziet het project er uit?

Geen.

Doelgroepsbeschrijving

Het is belangrijk om voordat je aan een project begint je duidelijk in kaart brengt voor wie het project bedoeld is en door wie

Geen.

8

het gebruikt zal worden. In dit document zal ik de doelgroep beschrijven, segmenteren en persona’s opstellen. Doelen

Bij het ontwikkelen van een website is het goed om vooraf in kaart te brengen wat je ermee wilt bereiken. Ik za dit doen voor zowel de gebruikers als voor de opdrachtgever.

Geen.

Benchmark

Om een beeld te kunnen krijgen wat er allemaal al op de markt is zal ik onderzoek gaan doen naar verschillende vergelijkbare producten.

Ik zal de doelgroepomschrijving gedeeltelijk compleet moeten hebben om een duidelijk beeld te hebben waar ik precies naar moet kijken.

Systeemeisen

Als ik eenmaal een duidelijk beeld heb wat ik precies moet gaan maken zal ik een lijst opstellen met eisen waar het uiteindelijke systeem aan moet gaan voldoen.

Om een set goede systeemeisen op te kunnen stellen moet ik door middel van de benchmark een goed beeld hebben gevormd van de mogelijkheden en van wat wel en niet werkt.

Site plan

In het siteplan zal ik een overzicht maken van de pagina’s die ontworpen zullen gaan moeten worden en hoe deze met elkaar in verbinding zullen gaan staan.

Het siteplan is gebaseerd op gedeeltelijk de doelen, de benchmark en de systeemeisen. Ik moet weten wat er precies in het product moet gaan komen, wat er werkt en wat er niet werkt.

Schetsen

Er zullen een hoop schetsen gemaakt worden van alle pagina’s en functionaliteiten die ontworpen gaan worden.

De schetsen zijn afhankelijk van de systeemeisen. Als ik weet wat ik kan gaan schetsen dan pas kan ik hiermee aan de slag.

Wireframes

De hiervoor genoemde schetsen zal ik uiteindelijk met behulp van de computer om gaan zetten in digitale wireframes.

Om de wireframes te kunnen maken zal ik de schetsen af moeten hebben en het siteplan.

9

Eindproduct

Het uiteindelijk product dat ik zal gaan opleveren.

Al het hierboven genoemde zal voltooit moeten zijn om het eindproduct te kunnen opleveren.

2.2.  Visie  bepalen   In dit visiedocument ga ik in op twee aspecten van dit project. Allereerst zal ik de huidige situatie beschrijven en uiteenzetten waarom deze applicatie precies ontwikkeld moet gaan worden. Er moet immers voldoende reden zijn om deze applicatie te gaan gebruiken in tegenstelling tot doorgaan met de huidige situatie. Daarnaast zal ik een korte beschrijving doen over het ontwikkelen voor mobiele telefoons. Daaruit zal duidelijk naar voren moeten komen waar specifiek op gelet moet worden bij het ontwerpen voor dit medium.

2.2.1.  Waarom?   Zelf doe ik aan amateurvoetbal bij Vitesse Delft op een redelijk laag niveau. Wekelijks kom ik in aanraking met verschillende situaties die goed geautomatiseerd zouden moeten kunnen worden. Hieronder zal ik enkele van deze situaties beschrijven. • •

• •

Er moet voor de wedstrijden altijd druk worden rond gemaild om te inventariseren wie er allemaal kunnen komen. Er moet op de dag zelf vaak nog uitgevogeld worden in het geval dat er bij een andere club wordt gespeeld wie er rechtstreeks naar toe gaan, wie er bij de club verzamelen en wie van hen met een auto bij de club verzamelen. Er moet altijd rond gemaild worden hoe laat er gespeeld wordt en waar er gespeeld wordt omdat die informatie niet snel en makkelijk te vinden is. Er moet na afloop van de wedstrijden altijd afgesproken worden wie er de ‘was’ mee naar huis neemt om te wassen. Dit zorgt altijd voor discussie en vaak zijn het de zelfden die uiteindelijk de taak op zich nemen.

De hierboven problemen zijn slecht van organisatorische aard en het zou makkelijk zijn om deze problemen weg te nemen door middel van een website of/en applicatie. Als er een applicatie ontwikkeld kan worden die iedereen in het team kan en wil gebruiken zullen deze problemen verdwijnen. Belangrijk daarbij is dat daadwerkelijk iedereen in staat zal zijn om de applicatie te gebruiken. Er zal dus zodanig ontwikkeld moeten worden dat er een zo groot mogelijk aantal browsers en toestellen probleemloos toegang heeft tot het te ontwikkelen product. Naast de hierboven genoemde probleem zijn er nog een aantal zal die om een oplossing vragen. Om in de huidige situatie de stand en het programma op te vragen moet er gebruik gemaakt worden van de website ‘voetbal.nl’. Weinig mensen binnen het team doen dit en ikzelf betrap me er op dat ik heel weinig op deze website te vinden ben. Deze website is namelijk een draak van een website. Een groot gedeelte van deze website is gevuld met reclame. Navigeren is ontzettend moeilijk gemaakt en de juiste informatie op het scherm krijgen is een regelrechte uitdaging. Bovendien is dit alles simpelweg onmogelijk op een mobiele telefoon. De website is groot, log en traag en is werkelijk 0% geschikt voor kleinere schermresoluties. De makers van de website hebben onlangs een mobiele applicatie voor de iPhone uitgebracht, maar het feit dat je hiervoor bijna twee euro moet betalen schrikt iedereen af.

10

Kortom, een gratis mobiele versie van ‘voetbal.nl’ waar spelers simpele zaken als de stand en het programma kunnen bekijken is een zeer welkome toevoeging aan het internet.

2.2.2.  Hoe?   Nu er is vastgesteld dat een dergelijke mobiele applicatie nodig is zal er gekeken moeten worden naar hoe dit zal moeten gebeuren. Ontwikkelen voor een mobiel medium is niet hetzelfde als ontwikkelen voor de traditionele pc. Er komen namelijk een hoop nieuwe aspecten bij kijken waar volop rekening mee gehouden moet worden. Gebruik De smartphone wordt natuurlijk op een andere manier gebruikt dan dat de traditionele pc gebruikt wordt. Grote delen van de Nederlandse bevolking hebben tegenwoordig een mobiele telefoon met daarop internettoegang. Het feit dat 48% van alle zoekopdrachten vanaf een mobiele apparaten gedaan worden is hier een belangrijk voorbeeld van. De zoekopdrachten vanaf een pc worden in principe altijd vanaf dezelfde plek gedaan, waar de zoekopdrachten vanaf een mobiel apparaat vanaf iedere plek in Nederland gedaan kan zijn. Mensen zijn niet meer gebonden aan de bureaustoel, maar kunnen overal en altijd ‘even snel’ het internet op. Bij dat ‘even snel’ zit het grote verschil. Waar mensen met een pc (of tablet desnoods) de tijd nemen om te kijken op een website, zal een groot gedeelte van de mobiele telefoon gebruikers enige vorm van haast hebben. De websites worden namelijk bekeken op momenten tussendoor. Het is ongebruikelijk om te denken: “Laat ik nu even een kwartier op de bank gaan zitten internetten op mijn mobiele telefoon”. Nee, veel gebruikelijker is het om even snel terwijl je op de bus staat te wachten wat van je favoriete websites te bezoeken. Kortom het is belangrijk om bij het ontwikkelen voor mobiele telefoon er rekening mee te houden dat informatie zo snel mogelijk en zo duidelijk mogelijk getoond moet worden, de bezoekers hebben namelijk niet het geduld en de tijd als dat ze normaal zouden hebben. Schermgrootte Het eerste en misschien wel grootste verschil tussen een traditionele pc en een mobiel apparaat is de schermgrootte. Op de desktop is er in principe zeeën van ruimte om alle elementen en allerlei informatie op het scherm te plaatsen. Op de mobiele telefoon echter is deze ruimte er niet. Veel apparaten hebben een schermresolutie van 320 bij 480 pixels en dan hebben we het nog niet eens over de fysieke grootte van het scherm. Er zullen dus offers gemaakt worden wat betreft er allemaal op het scherm getoond moet worden. Oriëntatie Mobiele telefoons hebben een hele leuke en vooruitstrevende mogelijkheid, namelijk de mogelijkheid om de orientatie van het scherm te veranderen. Een gebruiker kan namelijk via landschap modus een website bekijken of via de portret modus. De ene variant is in de breedte en de ander in de lengte. Beide mogelijkheden zijn een wereld van verschil. Er zijn echter een aantal aannames die gedaan moete worden. Wanneer gebruiken mensen de ene versie en wanneer de andere? Doorgaans kan er vanuit gegaan worden dat de landschap modus het liefst gebruikt wordt om te typen en de portret modus om te lezen. Landschap geeft de mogelijkheid tot grotere knoppen waarmee

11

typen met de duimen prettiger wordt. Informatie kan over de breedte getoond worden en voorkomt zo de nood om horizontaal te scrollen. Portret geeft de mogelijkheid aan gebruikers om de telefoon rechtop te houden en met één hand vast te houden. Informatie wordt in de lengte getoond en voorkomt zo de nood om verticaal te scrollen. Voor mij het belangrijkste punt wat hierboven naar voren komt is het met één hand vasthouden. In portret is het makkelijk om dit te bewerkstelligen, maar in landschap is dit heel erg lastig. Als je dit feit combineert met de hiervoor genoemde haast die bezoeker op de website zullen hebben lijkt het logisch om in eerste instantie van portret uit te gaan. Mensen die haast hebben zullen gemakkelijker iets bekijken als ze daarmee een hand vrij houden. Bovendien is de portret mode de standaard voor het besturingssysteem, dus als het niet nodig is om landschap te verplichten zal dat zeker niet gedaan moeten worden. Het ondersteunen van de mogelijkheid is echter wel aan te raden. Door de mogelijkheid open te laten laat je mensen immers vrij in hun keuze. Touch De smartphone is vrijwel zonder uitsluiting een touchscreen apparaat, dat betekend dat er gebruik gemaakt zal worden van de vingers om te navigeren. Het is prettig om je vingers te gebruiken als ‘input-device’, omdat er een extra apparaat of laag wordt weggenomen. Je hoeft niet eerst meer op de muis te drukken om die muis vervolgens op het element dat je wilde aanklikken te laten drukken. Er is direct contact met het doel. Dit geeft echter wel enkele problemen. Een vinger is een stuk dikker dan het pijltje van de muis. Knoppen zullen een stuk groter moeten worden om nog door de dikke vinger geraakt te kunnen worden. Standaard wordt uitgegaan van een grootte van minimaal 44 bij 44 pixels (WWDC gespecificeerd. Visueel hoeven ze niet die grootte te beslaan, zolang het responsieve gedeelte maar wel die grootte beslaat. Doordat de muis niet meer over het scherm vliegt zijn mogelijkheden om te zien wat er precies interactief is beduidend geslonken. Op een reguliere pc kan je met behulp van de muis er achter komen wat interactief is en wat niet. Elementen zullen oplichten zodra je met de muis er overheen gaat om duidelijk te maken dat klikken mogelijk is. Doordat deze mogelijkheid nu verdwenen is zullen knoppen nog duidelijker knoppen moeten zijn. De gebruiker moet kunnen zien en zeker weten dat op het moment dat hij zijn vinger ergens op zet er ook daadwerkelijk wat za gaan gebeuren. Snelheid Een telefoon beschikt meestal niet over de snelheid van een grote moderne pc en het internet waar de telefoon gebruik van maakt komt vaak binnen via een 3G verbinding. Websites zullen dus niet net zo snel laden. Het is belangrijk dat daar rekening mee gehouden wordt. Dat betekent dat er spaarzaam omgegaan zal moeten omgegaan met afbeeldingen, animaties of zware scripts. Zeker als je nagaat dat de bezoekers niet alle tijd van de wereld hebben op jouw mobiele site.

2.3.  Doelgroep  beschrijven   Nadat ik een duidelijk beeld had gekregen, door middel van het opstellen van het visie-document, ben ik een stap verder gegaan. Voor ieder project waar je mee aan de slag gaat is het heel belangrijk om te weten wat precies je doelgroep is. Om deze

12

doelgroep duidelijk in beeld te krijgen heb ik een klein onderzoekje gedaan op internet. Ik ben toen begonnen met het doorlopen van een aantal belangrijke stappen om mijn doelgroep goed in beeld te krijgen. Allereerst ben ik begonnen met het beschrijven van de globale doelgroep. Vervolgens heb ik naar een aantal belangrijke factoren van deze groep gekeken. Deze factoren zijn: Demografisch (Hoe oud zijn ze? Waar wonen ze? Zijn het mannen of vrouwen?), Technlogisch (Wat is hun affiniteit met technoligie?) en Economisch (Hoe staan ze er financieel voor?). Nadat ik de doelgroep in globale lijnen had beschreven heb ik vervolgens een segmentatie gemaakt. De doelgroep was nog te breed en verschillend om goed mee aan de slag te kunnen gaan. Daarom heb ik drie verschillende groepen binnen de doelgroep aangemaakt. Ik heb besloten ze in te delen naar de mate waarmee ze het internet gebruiken. Dit omdat het internet een belangrijk punt is waar dit product mee staat of valt. In eerste instantie had ik ervoor gekozen om in te delen aan de hand van leeftijd, maar toen ik hiermee bezig was realiseerde ik mij dat het leeftijdselement niet heel erg van belang was. Vervolgens ben ik gaan kijken naar wat wel echt van belang was voor het project, het resultaat hiervan was dat ik de mate van internetgebruik erbij heb gepakt. Tot slot heb ik wat de doelgroepsbeschrijving betreft ervoor gekozen om een primaire en een secundaire persona te maken. De primaire persona is diegene voor wie dit project specifiek wordt ontwikkeld; in deze persoon komen alle eigenschappen terug die perfect op het project aansluiten en de doelgroep het beste belichamen. Naast deze primaire persona heb ik een secundaire persoon gemaakt. Aan deze persoon wordt niet direct de aandacht besteedt, maar zal bij het ontwikkelen wel in het achterhoofd gehouden worden. Het project zal perfect moeten zijn voor de primaire persona, maar de secundaire zal er ook genoeg uit moeten kunnen halen.

2.3.1.  Beschrijving   Deze applicatie zal worden ontwikkeld voor amateurvoetballers in het algemeen. De leeftijd waar ik me op zal richten zullen diegene zijn die in staat zijn om individueel gebruik te maken van applicaties en computers. De leeftijdscategorie die ik daaraan koppel is de categorie 18 t/m 50 jaar. De doelgroep zal overwegend mannen zijn. Demografisch Om een goed beeld van de doelgroep te kunnen geven zal ik een aantal belangrijke factoren wat betreft de doelgroep zo goed mogelijk onderzoeken en beschrijven. Het demografische aspect, in dit geval de leeftijd, het geslacht en het woongebied. De leeftijd van de applicatiegebruikers zal zo tussen de 18 en 55 jaar liggen. Onder de 18 wordt er nog niet aan seniorenvoetbal gedaan en bij de junioren is er sprake van goede en duidelijke begeleiding waarbij deze applicatie niet bijster veel zal toevoegen. De problemen waar ik me op richt zullen voornamelijk voorkomen bij de senioren. Als eenmaal de leeftijd van 55 bereikt is zijn er niet veel mensen die nog aan voetbal doen. Uit eigen ervaring weet ik dat de groep mensen die na hun 55ste nog actief deelnemen aan amateurvoetbal vrijwel nihil is. •

Halverwege 2009 stond de teller op 1.179.198 leden, een toename van 26.500 voetballers (2,3%) ten opzichte van het voorgaande seizoen.

Als je deze gegevens omgerekend naar halverwege 2011 kom je op een ledental van zo rond de 1.200.000. Je kan ervan uitgaan dat deze geregistreerde leden de maximaal

13

te behalen gebruikers van de applicatie omvatten, aangezien het in principe niet mogelijk is om mee te voetballen in competitieverband zonder aangesloten te zijn bij de KNVB (de nationale voetbalbond). De applicatie is immers niet interessant voor spelers die niet deelnemen aan een voetbalcompetitie. •

Halverwege 2009 telde de KNVB 112.681 vrouwelijke voetballers. Dit is zo’n 9,5% van het totale ledenbestand.

(bron: http://www.knvb.nl/clubsenleden/ledental) Het woongebied van de doelgroep is niet duidelijk vast te leggen. Amateurvoetballers wonen over heel Nederland. Ik ga me, doordat ik Nederlands als voertaal van de applicatie ga gebruiken, enkel richten op mensen die in Nederland wonen en Nederlands spreken. Economisch Financieel gezien staat de doelgroep, amateurvoetballers van 18 tot 55 jaar oud over heel Nederland er heel erg wisselend voor. Dit gegeven is in principe niet van belang voor de ontwikkeling van de applicatie, maar eerder voor de verspreiding ervan en het eventuele verdienmodel. Technologisch Ook technologisch gezien zit er veel verschil in de doelgroep. Hoe de doelgroep met technologie omgaat is erg verschillend in de leeftijdsgroep van 18 tot 55 jaar. Mannen achterin de 40 zullen minder actief zijn met bijvoorbeeld sociale diensten als facebook en twitter dan jongeren van rond de 20. Het is een uitdaging om hier goed op in te spelen. De gehele doelgroep zal in ieder geval in het bezit zijn van een internetverbinding en het grootste gedeelte hiervan ook via de telefoon of tablet.

2.3.2.  Segmentatie   Er is gekozen om een segmentatie van de doelgroep te maken. Hierbij is gekozen om de gehele doelgroep in drie verschillende segmenten in te delen. Zware gebruikers Maakt veel gebruik van het internet. Doet dat onder andere door gebruik te maken van een iPad en een mobiele telefoon. De mensen uit deze groep zijn lid van sociale netwerken en maken hier actief gebruik van. Zo hebben ze een Facebook profiel waar ze regelmatig informatie delen en daarnaast maken ze ook gebruik van Twitter om het laatste nieuws te delen en te lezen. Middelmatige gebruikers Deze groep is niet in het bezit van een tablet, maar maakt wel gebruik van de mobiele telefoon om zo af en toe het internet te gebruiken. Ze zijn lid van sociale netwerksites, maar gebruiken deze slechts sporadisch. Informatie delen doen ze niet veel, maar informatie lezen is iets wat ze geregeld online doen. Lichte gebruikers De lichtste groep gebruikers is niet in het bezit van een tablet en heeft een telefoon waar het internet niet mee bezocht wordt. Ze zijn geen lid van sociale

14

netwerksites en hebben daar ook geen behoefte aan. Het internet wordt slechts gebruikt voor het broodnodige en dient niet voor vermaak. Er zal gekozen worden om primair voor de middelmatige groep gebruikers te ontwerpen. Deze groep sluit namelijk het beste aan bij het doel van het project; een innovatief en vooruitstrevend magazine neer zetten.

2.3.2.  Primaire  persona   Steekwoorden • • • • • • •

Tussen de 18 en 30 jaar oud. Doet al lange tijd aan voetbal op een serieus en betrokken niveau. Doet iedere zaterdag aan voetbal. In het bezit van een iPhone (iOS). Werkt dagelijks met computers. Heeft een Facebook, Twitter en LinkedIn account. Maakt actief gebruik van social media.

Persoonlijke informatie Naam Leeftijd Getrouwd/relatie Kinderen Inkomen Woonplaats Opleiding Functie(s) Full-time/Part-Time

Paul de Vrijter 28 Verloofd Geen Boven Modaal Amsterdam HBO Commerciële Economie Sales Manager Freelance Fotograaf 32 uur per week Sales Manager 4 uur per week Fotograaf

2.3.3.  Secundaire  persona   Steekwoorden • • • • •

Tussen de 30 en 45 jaar oud. Heeft een onregelmatig rooster en kan slecht sporadisch voetballen. In het bezit van een Samsung Galaxy Apollo (android) Gebruikt internet sporadisch. Gebruikt geen social media.

Persoonlijke informatie Naam Leeftijd Getrouwd/relatie Kinderen Inkomen Woonplaats Opleiding Functie Full-time/Part-Time

Maaike Raamsdonk 39 Verloofd 2 kinderen Boven Modaal Haarlem WO Psychologie Personeelspsycholoog 20 uur per week

15

2.4.  Doelen  vaststellen   Om de eerst verkenningsfase van dit project af te sluiten zijn er een aantal doelen opgesteld. Daarbij is rekening gehouden met beide kanten van het verhaal. Namelijk de kant van de gebruiker en de kant van de ontwikkelaar. Het is belangrijk duidelijk te hebben wat er nodig is om het project succesvol te maken voor beide kanten. Om deze lijst te maken heb ik me beide situaties moeten inbeelden. Voor mij als ontwikkelaar is het vooral van belang dat het project slaagt en voldoet aan de eisen die de gebruikers er aan zullen stellen. Wat de gebruikers betreft is het vooral bedenken wat ze nou precies zouden willen. De gebruiker wil dat hij of zij wat aan de applicatie heeft en dat het gemakkelijk te gebruiken is. Niemand wil een vervelend product gaan gebruiken. Daarnaast zijn er een hoop verschillende gebruikers binnen de doelgroep. In de ideale situatie sluit het magazine op al deze verschillende gebruikers aan. Dit is een goed streven om mee aan de slag te gaan.

2.4.1.  Wat  wij  willen  behalen  met  behulp  van  dit  product   1. Een communicatiemiddel ontwerpen dat in de ogen van de gebruikers innovatief en modern is. 2. Een communicatiemiddel ontwerpen dat ervoor zal zorgen dat de gebruikers goed op de hoogte zijn van wat er zich afspeelt binnen het team. 3. Een communicatiemiddel ontwerpen dat de belangrijkste organisatorische zaken structureert en versimpelt.

2.4.2.   Wat   de   gebruikers   willen   behalen   met   behulp   van   dit   product   1. Een communicatiemiddel dat gemakkelijk te gebruiken is. 2. Een communicatiemiddel dat inspeelt op de wensen van alle verschillende gebruikers.

16

3.  BESLISSINGEN  NEMEN   Het derde hoofdstuk van dit ontwerprapport bestaat uit de tweede fase van de methode van Jesse James Garrett, te weten de ‘scope plane’. In deze fase van het project staat het nemen van beslissingen over wat er precies moet gebeuren centraal. De lezer kan door het lezen van dit hoofdstuk te weten komen wat ik heb gedaan om tot een lijst van eisen te komen waar het product aan moet voldoen. In de eerste paragraaf zal ik de werkzaamheden die ik heb verricht om tot een benchmark te komen beschrijven. In de tweede paragraaf zal te lezen zijn hoe ik tot de verschillende mogelijkheden van de applicatie ben gekomen. Tot slot kom ik in de laatste paragraaf met een lijst van systeemeisen die ik uitgebreid zal motiveren.

3.1.  Concurrentie  bekijken   Nadat de eerste fase van het project was afgerond had ik een beter beeld over wat precies de basis moest gaan worden. Het was mij duidelijk geworden wat de mogelijkheden waren met betrekking tot online magazine. Ik had een beter beeld over wat precies de doelgroep was en waar deze precies uit bestond. En tot slot had ik enkele doelen opgesteld die mij duidelijk hebben gemaakt wat voor wie precies belangrijk is binnen dit project. De volgende stap was het verkennen van de markt. Om een idee te krijgen wat wel en wat niet werkt heb ik een aantal vergelijkbare websites en applicaties bekeken die of al een tijdje op de markt zijn, of zeer recent zijn verschenen. Bij deze websites en applicaties heb ik gelet op een aantal belangrijke factoren. Hetgeen waar ik voornamelijk op heb gelet is welke functionaliteiten ze bevatten en hoe daarmee om wordt gesprongen. Bij deze benchmark ga ik een aantal applicaties en websites bekijken om te achterhalen welke mogelijkheden er gebruikt worden. Hierbij zal ik extra aandacht besteden aan de mogelijkheden die de applicatie of website biedt en hoe het zit met de usability. De te bekijken applicaties en websites zijn: 1. 2. 3. 4.

Teamlink (website) Teamlink (applicatie) Voetbal.nl (website) Voetbal.nl (applicatie)

17

3.1.1.  Teamlink  (website)  

Hierboven wordt de homepagina van de Teamlink website weergegeven. Teamlink is een applicatie gecombineerd met een website die senioren amateurteams op de hoogte wil houden van de stand en programma. Daarnaast biedt de applicatie enkele functionaliteiten om voor “teamgevoel” te zorgen. 1. Zoals op deze pagina te zien is ben ik, Bart Waardenburg, ingelogd bij het team VD6 (wat een afkorting is voor Vitesse Delft 6). Deze afkorting is door de beheerder van de Teamlink ingevoerd op de instellingen pagina. De grote rode knop zorgt ervoor dat je direct naar de pagina van jouw Teamlink gaat. Op deze eerste pagina worden nog een hoop andere gedeeltes weergegeven zoals actuele items, contact pagina, statistieken en winmogelijkheden.

18

Op de hierboven weergegeven pagina kom je terecht zodra je ervoor kiest om direct naar je eigen Teamlink te gaan. Dit scherm kan overigens ook door niet-leden van het team bekeken worden. 1. Bij het nummertje 1 worden een aantal gegevens over het team weergegeven. Deze Teamlink wordt niet actief gebruikt en de statistieken zijn dan ook niet compleet. De naam van het team, de naam van de beheerder, het aantal spelers, het aantal supporters, de wedstrijden en het aantal vaantjes wordt weergegeven. 2. Bij 2 staan statistieken over hoe het team gespeeld heeft, maar omdat de beheerder niet veel van de applicatie begreep is er nooit een ‘migratie’ uitgevoerd naar het nieuwe seizoen. Daardoor staan deze gegevens nog allemaal op nul en zijn er maar slechts een aantal spelers lid van het team. 3. Als er doorgevoerd zou worden wie in welke wedstrijden gescoord hebben zou hier in dit venster weer worden gegeven wie er de doelpuntenmakers van het team zijn. 4. Hier is de zogenaamde prijzenkast te zien waarin de hierboven genoemde ‘vaantjes’ worden weergegeven. Vaantjes kunnen worden gezien als ‘achievements’ die een team gezamenlijk bereikt. Daarbij kan gedacht worden aan een winstreeks of een aantal doelpunten in een wedstrijd bijvoorbeeld.

19

Het hierboven weergegeven scherm komt naar voren zodra de gebruiker kiest voor wijzigen rechts onderin het scherm. Na deze actie verdwijnt de rest van de website achter een donker gordijn en komt de pagina ‘wijzig profiel’ naar voren. De gebruiker heeft hier de mogelijkheid om een aantal gegevens aan te passen. Allereerst de persoonlijke gegevens als e-mail, naam wachtwoord en geboortedatum. Daarnaast kan de speler zich proberen toe te voegen aan een Teamlink, of zich daarvan verwijderen. Dit kost echter enige moeite aangezien de beheerder van een Teamlink spelers moet accepteren. De beheerder van deze Teamlink kreeg dat echter met moeite voor elkaar waardoor spelers als ‘supporters’ geregistreerd werden en ze niet alle informatie te zien hebben gekregen. Daarnaast zijn er de mogelijkheden om wekelijkse mailtjes te krijgen met nieuws over het team of over Teamlink in het algemeen. Tot slot is er de mogelijkheid om een mobiel telefoonnummer op te geven en om te bekijken wat er nieuw is sinds je laatste bezoek aan de website of applicatie. Onderin het scherm zijn de verschillende mogelijkheden van de Teamlink website te zien.

20

Het tweede scherm binnen de website is het voorkeuren scherm. Hier kan je gegevens specifiek over jou als speler aanpassen. Je kan een pasfoto toevoegen, een bijnaam opgeven, je positie binnen het team aanpassen en een persoonlijke omschrijving opgeven. Deze gegevens kunnen door andere gebruikers altijd gezien worden. Onder 2 zijn diverse interessante instellingen te zien die betrekking hebben tot de beschikbaarheid van een speler voor een wedstrijd. Er kan ingesteld worden dat de speler een mail krijgt om herinnert te worden aan een aankomende wedstrijd. Daarbij kan een speler aangeven of hij een auto beschikbaar heeft om teamgenoten naar uitwedstrijden te vervoeren. De speler kan ook aangeven of hij een wasmachine beschikbaar heeft om de was mee te doen en tot slot kan hij instellen dat hij een mailtje krijgt als er iets op het ‘prikbord’ geplaatst wordt. Onder deze instellingen staat nog de optie of de beschikbaarheid van de speler standaard onbekend, aanwezig en afwezig moet zijn. Het ‘nieuw sinds je laatste bezoek’ staat net als op de vorige pagina hier opnieuw weergegeven.

21

Op de website kan ook gebruik gemaakt worden van een planner. Hierin kunnen activiteiten door teamleden aangemaakt worden die vervolgens in de agenda terecht komen. Bij activiteiten kunnen teamleden apart uitgenodigd worden of kan er voor een heel team gekozen worden. De rest van de mogelijkheden zijn hierbij vrij vanzelfsprekend.

22

De website heeft ook de mogelijkheid om foto’s toe te voegen. Er kunnen gehele albums toegevoegd worden en beheerd worden door alle laden van het team. Supporters van het team kunnen deze foto’s bekijken.

23

Tot slot heeft de Teamlink website de mogelijkheid om berichten achter te laten op een zogenaamd prikbord. Bij het plaatsen van een bericht kan ervoor gekozen worden om het bericht aan iedereen te tonen of alleen aan teamgenoten.

24

3.1.2.  Teamlink  (applicatie)  

Naast de website heeft Teamlink ook een applicatie. De applicatie is in principe hetgene waar alles om draait. Het geeft de gebruiker overal toegang tot informatie over het team. De applicatie is beschikbaar voor android en voor de iPhone, beide applicaties zijn nagenoeg hetzelfde. De verschillen zitten hem in ieder geval niet in de inhoud of het gebruiksgemak. De eerste pagina die de gebruiker te zien krijgt bij het opstarten van de applicatie is het inlogscherm. Hier kan de gebruiker zijn gegevens invullen om in te loggen of voor annuleer kiezen.

25

Als de gebruiker voor annuleer kiest komt het volgende scherm naar voren. Het is dus niet mogelijk om te registreren via de applicatie of het wachtwoord op te vragen. Waarom is mij niet duidelijk, een dergelijke functie is niet moeilijk om te implementeren voor een applicatie lijkt mij.

Deze afbeelding krijgt de gebruiker te zien zodra hij ingelogd is. Daarbij is de naam van het team met de afkorting te zien en zijn onder in het scherm de volgende en de

26

vorige activiteit te zien. In groen rood en grijs is de beschikbaarheid van de spelers van het team te zien.

De eerste detail pagina van de applicatie is de team pagina. Hier zijn de spelers uit het team te zien onder 1 en kan er geschakeld worden naar de supporters bij 2. Door op een speler te klikken worden de gegevens van die speler getoond. Bovenin het scherm kan er voor het plusje gekozen worden om spelers aan het team toe te voegen of om spelers van het team een mail te sturen met behulp van de applicatie. Onderin het scherm zijn de verschillende navigatiemogelijkheden te zien. De mogelijkheid stand is niet beschikbaar omdat de beheerder nog niet naar het nieuwe seizoen heeft ‘gemigreerd’, wat volgens mij alleen maar het aanpassen van de competitie betekend. De mogelijkheid derde helft zal ik verder niet bespreken aangezien dit een soort dobbelsteen applicatie is waarmee bepaald kan worden wie er nieuw bier moet gaan halen.

27

Hier kan een speler toegevoegd worden aan het team door de naam van de speler en het emailadres in te voeren. Er kan ook een teamgenoot uit contacten gekozen worden.

De applicatie biedt ook de mogelijkheid om een bericht te sturen naar het gehele team of een selectie uit het team.

28

De planner geeft weer waar en tegen wie er gevoetbald moet worden, daarnaast is er te zien hoeveel mensen er aanwezig zullen zijn bij de wedstrijden. Door op een wedstrijd te klikken komt er een detailscherm in beeld waar zaken als de uitslag, de doelpuntenmakers, de ‘man of the match’, een voorbeschouwing en een wedstrijdverslag zijn te zien. Er kan hier ook een activiteit toegevoegd worden.

Onder meer bevinden zich diverse mogelijkheden namelijk: mijn profiel, wissel van team, over deze applicatie, feedback en veelgestelde vragen. Allereerst zal ik op de

29

optie mijn profiel ingaan. Hier zijn een aantal gegevens over de speler te zien: foto, naam, positie, doelpunten, gespeelde wedstrijden en een beschrijving van de speler. De optie om uit te loggen staat onder in het beeld.

Het laatste scherm dat ik kort zal bespreken is het wijzigen van de gegevens. Hier zijn een aantal velden te zien die gewijzigd kunnen worden door er op te klikken. Door te klikken opent zich een apart venster met daarbij een toetsenbordje of een menu’tje met keuzemogelijkheden.

30

3.1.3.  Voetbal.nl  (website)  

De voetbal.nl website kent nog een aantal schermen voordat je uiteindelijk bij dit scherm terecht komt. Een korte beschrijving van hoe je hier komt: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Navigeer naar de website. Kies voor registreren. Vul al je gegevens in en wacht op een mailtje. Bevestig je wachtwoord in het mailtje. Navigeer naar ‘senioren’. Zoek naar je team. Meld je aan bij een poule. Ga naar ‘competities’ Klik op de poule die je wil bekijken. Het bovenstaande scherm presenteert zich.

Het heeft mij heel wat jaren gekost voordat ik uiteindelijk door het bovenstaande drama heen ben gekomen. En die jaren zijn letterlijk, want ik heb het in het verleden vaak opgegeven om te bekijken of ik kon het gewoon niet vinden. Mocht je dit eenmaal hebben doorstaan kom je in de hierboven met reclame doorspekte website terecht.

31

Bovenaan de pagina wordt het programma van de afgelopen weken getoond. Daarbij zijn de wedstrijden voorzien van een uitslag, en content die mensen kunnen toevoegen.

Door verder naar beneden te scrollen komt eerst een groot blok reclame voorbij om vervolgens bij de huidige stand terecht te komen. Onder deze informatie bevindt zich

32

een uitleg van de afkortingen met daar weer onder het programma van deze week. Er kan daar vervolgens geschakeld worden naar het programma van volgende week en de gehele periode.

Achter het knopje alle uitslagen (uitslagen is standaard ingeschakeld) kan een tabel met alle uitslagen worden opgevraagd.

33

En tot slot kan onder het knopje comp indeling de volledige competitie indeling worden weergegeven. De informatie die hier te zien is zijn de tijden van de clubs bovenaan en het volledige speelschema onder een dik blok reclame.

34

3.1.4.  Voetbal.nl  (applicatie)  

De voetbal.nl applicatie is te downloaden in de appstore voor € 1,59. De applicatie wordt daar als volgt beschreven: Dé App voor amateurvoetballend Nederland. Je uitslagen, programma en stand op je mobiel. Voor gebruik dien je online geregistreerd te zijn op www.voetbal.nl. Deze applicatie kun je tot en met het KNVB amateurvoetbalseizoen 2011/2012 gebruiken. Functies: • • • • • • •

De applicatie is gekoppeld aan je registratie voor www.voetbal.nl; Vanwege de koppeling met www.voetbal.nl kun je snel naar je Mijn Teams, Mijn poules, Mijn clubs; Hierdoor kun je gemakkelijk voor de competitie en beker naar de laatste uitslagen, het actuele wedstrijdprogramma en de laatst bijgewerkte stand; Indien een wedstrijd is afgelast (en bekend bij de KNVB), zie je dat ook terug in het programma; Via Maps kun je gemakkelijk het adres van de accommodatie vinden; Je kunt ook gemakkelijk aan een wedstrijd een foto en/of een wedstrijdverslag toevoegen of reeds toegevoegde foto’s, verslagen bekijken; Via Zoek Club kun je zoeken in de lijst van alle amateurclubs, vervolgens uit alle teams je keuze maken en dan de laatste uitslagen, het actuele wedstrijdprogramma en de laatst bijgewerkte stand;

35

•

•

•

Of via Zoek Club gemakkelijk het accommodatieadres, andere clubgegevens terugvinden, het programma en/of de uitslagen per club rangschikken op Thuis en Uit; Via Scorebord vind je gemakkelijk de uitslagen, programma en standen van alle landelijke competities, zoals Eredivisie, Jupiler League, KNVB beker, Eredivisie vrouwen, Eredivisie zaalvoetbal, Topklasse amateurvoetbal, etc.; Daarnaast is er de mogelijkheid om obv de competitiepoule gemakkelijk een krabbel op Hyves, bericht op Facebook en/of een tweet via Twitter te plaatsen.

Door het hoge bedrag van de applicatie en het feit dat ik mijn iPhone niet meer gebruik heb ik er niet voor gekozen de applicatie aan te schaffen. (later kwam ik er achter dat hij ook voor Android beschikbaar is, maar ook daar kost hij net zoveel helaas). Maar mij te baseren op de screenshots die meegeleverd worden.

Het eerste scherm laat de Mijn teams, Mijn poules en Mijn clubs zien die ingesteld kunnen worden op de website van voetbal.nl. De website waar deze applicatie volledig mee gekoppeld is. Door op een team te klikken verschijnt het volgende scherm in beeld.

36

Dit scherm laat het programma van de gehele poule zien en niet alleen van het team. Daarnaast kan er boven in het scherm geschakeld worden tussen de verschillende schermen zoals deze ook op de website staan.

Eén hiervan is het stand scherm wat hierboven bekeken wordt in de landschap modus, omdat het in de portret modus niet mogelijk is om al deze informatie te tonen.

3.1.5.  Conclusies   De website van met name voetbal.nl heeft me alleen wat opgeleverd wat betreft mogelijke functionaliteiten. De presentatie van de gegevens is grotendeels op een duidelijke manier gedaan. Met in het achterhoofd dat de informatie in mijn applicatie uiteindelijk van deze website af zal moeten gaan komen is het prettig om enige vorm van consistentie te hebben. Het is makkelijker om informatie over te typen als ze op een zelfde manier zijn gepresenteerd.

37

De functionaliteiten van de Teamlink website zijn daarnaast wat minder vanzelfsprekend. De Teamlink applicatie probeert min of meer hetzelfde te doen als wat ik wil gaan bereiken met mijn applicatie, maar gebruikt daarnaast een hoop functies die ik als overbodig acht. De prikbord functie is goed te integreren in een applicatie waarmee informatie gedeeld moet worden en zal ik dan ook op mijn eigen manier terug laten komen in de door mij te ontwikkelen website. Door het bekijken van de applicaties is mij duidelijk geworden dat het presenteren van de stand in de poule een lastige opgave is. Er is namelijk veel informatie die gepresenteerd moet worden en daar is maar weinig ruimte voor. Ik zal iets moeten verzinnen om het scherm niet naar de landschap modus te moeten dwingen. Wat usability betreft loopt de voetbal.nl ver achter op de teamlink applicatie en website. Voetbal.nl is echt een draak van een website wat het gebruik betreft. Een gebruiker moet door allerlei hoepels springen om de gewenste informatie te bekijken. De frustratie van al die stappen heeft mij geleerd om het vooral simpel en overzichtelijk te houden. De website moet snel en gemakkelijk te gebruiken zijn en mocht dat goed werken dan kan daarna aan extra functionaliteiten gedacht worden.

38

3.2.  Koppelingen  leggen   Om nog eens goed na te gaan welke functionaliteiten gewenst zijn heb ik besloten om een mindmap te maken. In deze mindmap ben ik gaan associëren naar welke informatie er allemaal gebruikt zou kunnen worden. Wat er allemaal precies mogelijk is staat hierbij centraal. Ik heb me hierbij niet laten belemmeren door datgene wat ik in gedacht misschien niet of wel wil gaan maken.

39

3.3.  Eisen  vastleggen   Om deze plane, die als doel heeft om mogelijkheden te verkennen, af te sluiten ben ik met een lijst systeemeisen gekomen. De systeemeisen hieronder zijn onderverdeeld in vijf verschillende categorieën. De functionele eisen geven weer wat de applicatie allemaal moet kunnen doen voor de gebruiker. De integriteit eisen beschrijven welke gebruikers waartoe toegang hebben. De interface eisen geven aan waar de vormgeving van de applicatie minimaal aan moet voldoen. De operationele eisen geven aan welke eisen voldoen moeten worden om het gebruik ervan te rechtvaardigen. Tot slot geven de technische eisen weer met welke eisen in het achterhoofd de applicatie gebouwd zal worden. Daarnaast hebben alle eisen een cijfer gekregen waarbij gebruik gemaakt is van de MoSCoW methode. De MoSCoW-methode is een wijze van prioriteiten stellen. De eisen aan het resultaat van een project worden ermee ingedeeld. Het is een afkorting, waarvan de letters staan voor: •

Must have this - deze eis moet in het eindresultaat terugkomen, zonder deze eis is het product niet bruikbaar;

•

Should have this if at all possible - deze eis is zeer gewenst, maar zonder is het product wel bruikbaar;

•

Could have this if it does not affect anything else - deze eis mag alleen aan bod komen als er tijd genoeg is;

•

Won't have this but would like to have this in the future - deze eis zal in dit project niet aan bod komen maar kan in de toekomst, bij een vervolg project, interessant zijn.

(bron: http://nl.wikipedia.org/wiki/MoSCoW-methode) De onderverdeling daarbij is als volgt: • •

‘Must’ heeft het cijfer: 1. ‘Should’ heeft het cijfer: 2.

•

‘Could’ heeft het cijfer: 3. ‘Won’t’ heeft het cijfer: 4.

•

Functionele eisen • • • • •

1

Gebruikers bekijken de applicatie om de stand van hun team te weten te komen. 1 Gebruikers bekijken de applicatie om de uitslag van de vorige wedstrijden te bekijken. 1 Gebruikers bekijken de applicatie om de tegenstander van de volgende wedstrijd te bekijken. 2 Gebruikers bekijken de applicatie om de doelpuntenmakers van de vorige wedstrijd te weten te komen. 1 Gebruikers kunnen commentaar op de chat pagina achterlaten.

40

• • • • •

1

Gebruikers kunnen doorgeven bij welke wedstrijden ze aanwezig zijn en op welke manier (auto, rechtstreeks). 2 Gebruikers kunnen doorgeven wanneer ze de teamwas mee willen nemen. 1 Gebruikers kunnen een routebeschrijving voor uitwedstrijden opvragen. 2 Gebruikers kunnen hun wachtwoord veranderen. 1 Daarvoor aangewezen gebruikers kunnen de uitslagen van wedstrijden invoeren.

Integriteit eisen • • •

1 1

Alleen de gebruiker zelf kan de speler pagina bekijken. Alleen leden van het voetbalteam kunnen de home, team en chat pagina’s bekijken. 2 Alleen daartoe aangewezen mensen kunnen aanpassingen in het team maken.

Interface eisen • • • • • • • • • • • • •

1 2

De homepagina geeft een overzicht van de belangrijkste informatie. De gebruiker moet overal kunnen zien waar hij zich bevindt binnen de applicatie. 1 De gebruiker moet snel kunnen zien van welk team hij lid is en als wie hij staat ingelogd. 1 De gebruiker kan lange teksten lezen door naar beneden te scrollen. 1 De gebruiker moet teksten kunnen lezen zonder daarvoor hoeven in te zoomen. 2 De gebruiker moet duidelijk kunnen zien welke elementen interactief zijn en welke niet. 2 De belangrijkste pagina’s moeten via iedere andere pagina snel te vinden zijn. 2 Er moet een grote mate van consistentie aanwezig zijn in de navigatie. 2 Er moet sprake zijn van herkenbaarheid van de navigatie, zodat gebruikers sneller met het systeem om kunnen gaan. 2 Er moet een duidelijke terugkoppeling zijn naar de gebruiker als er een bepaalde actie is gepleegd. 2 Bij verkeerde invoer bij formulieren wordt de gebruiker daarop geattendeerd. 3 De applicatie werkt optimaal in de portrait mode, maar zal ook de landscape mode ondersteunen. 2 De website moet te bekijken zijn op computerbeeldschermen en mobiele telefoons.

Operationele eisen •

1

Het moet voor gebruikers gemakkelijker zijn om deze applicatie te gebruiken dan aparte mailtjes rond te sturen om teamgenoten te bereiken en informatie op te doen of te delen. 41

Technische eisen • • • • • • • •

2

De website moet te bekijken zijn op computerbeeldschermen en mobiele telefoons. 1 De structuur moet worden opgezet met HTML 5. 1 De opmaak van applicatie moet worden gemaakt met CSS 3. 1 De database wordt aangelegd met behulp van MySQL en aangeroepen met behulp van AJAX en PHP. 1 De overige functionaliteiten zullen worden verwezenlijkt met javascript door gebruik te maken van de jQuery library. 2 Links zullen op een externe pagina geopend worden waardoor de app niet wordt afgesloten. 1 De pagina’s moeten binnen 2 seconden geladen zijn. 2 De routebeschrijving moet binnen 5 seconden geladen zijn.

42

4.  DE  STRUCTUUR  BEPALEN   Het vierde hoofdstuk van dit ontwerprapport bestaat uit de derde fase van de methode van Jesse James Garrett, namelijk de ‘structure plane’. In deze fase van het project staat het bepalen van de structuur centraal. De lezer kan door het lezen van dit hoofdstuk te weten komen hoe het magazine gestructureerd is en hoe de verschillende mogelijkheden zich tot elkaar verhouden. In de eerste paragraaf beschrijf ik hoe ik tot de interactiestructuur ben gekomen door het opstellen van use cases. Vervolgens is te zien hoe ik van plan ben om de informatiestructuur vorm te geven. Dit heb ik gedaan door een UML klassendiagram op te stellen en de taal en metadata te specificeren.

4.1.  Interactie  beschrijven   Om de interactie op de website goed te kunnen beschrijven ben ik aan de slag gegaan met het opstellen van een aantal use cases. Na aanleiding van het systeemeisen document heb ik een aantal functionaliteiten beschreven en deze functionaliteiten ben ik hieronder gaan beschrijven. Ik heb daarbij gekozen voor een ‘main succes scenario’ en exceptions. Het ‘main scenario’ legt stap voor stap uit wat er gebeurt als alles volledig volgens plan gaat en het ‘exceptions’ gedeelte legt stap voor stap uit hoe het systeem omspringt met mogelijke afwijkingen.

4.1.1.  Use  case  1:  Inloggen   Main scenario: 1. Gebruiker navigeert naar de website. 2. Gebruiker voert zijn e-mailadres in. 3. Gebruiker voert zijn wachtwoord in. 4. Gebruiker drukt op de knop inloggen. 5. Systeem laat de gebruiker een laadscherm zien. 6. Systeem laat de gebruiker de applicatie zien. Exceptions: 2a.

Gebruiker voert een onbekend e-mailadres in. 1. Systeem geeft aan dat het e-mailadres niet bekend is.

2b. Gebruiker voert een verkeerd wachtwoord in en is het wachtwoord vergeten. 1. Systeem geeft aan dat het wachtwoord onjuist is. 2. Systeem geeft aan dat er een pagina voor wachtwoord vergeten is. 3. Gebruiker voert zijn e-mailadres in. 4. Systeem mailt het e-mailadres naar de gebruiker.

43

4.1.2.  Use  case  2:  Aanwezigheid  doorgeven   Main scenario: 1. Gebruiker logt in. 2. Gebruiker klikt op de juist aanwezigheid voor de eerstvolgende wedstrijd op de ‘home’ pagina. 3. Gebruiker navigeert naar de ‘speler’ pagina. 4. Gebruiker vinkt aan bij welke wedstrijden hij aanwezig is. 5. Gebruiker vinkt aan of hij rechtstreeks gaat, met de auto komt of vinkt geen van beiden aan.

4.1.3.  Use  case  3:  Nieuw  teamlid  aanmaken   Main scenario: 1. Gebruiker logt in. 2. Gebruiker navigeert naar de ‘team’ pagina. 3. Systeem laat mogelijkheid zijn van speler toevoegen als de gebruiker daar de rechten voor heeft. 4. Gebruiker voert de naam van de speler in. 5. Gebruiker voert de afkorting van de speler in. 6. Gebruiker voert het e-mailadres van de speler in. 7. Gebruiker voert het e-mailadres van de speler nogmaals in om te bevestigen. 8. Gebruiker klikt op de knop speler toevoegen. Exceptions: 4a.

De naam van de speler die ingevoerd wordt is te lang. 1. Het systeem geeft aan dat de naam te lang is en geeft aan hoeveel karakters het maximum is.

5a.

De afkorting van de speler is al in gebruikt. 1. Het systeem geeft aan de afkorting al in gebruik is.

7a.

Het ingevoerde e-mailadres is onjuist. 1. Het systeem geeft aan dat het ingevoerde e-mailadres onjuist is.

44

4.1.4.  Use  case  4:  Bericht  achterlaten   Main scenario: 1. Gebruiker logt in. 2. Gebruiker navigeert naar de ‘chat’ pagina. 3. Gebruiker klikt op de knop bericht toevoegen. 4. Gebruiker typt het bericht. 5. Gebruiker klikt op de knop toevoegen. 6. Systeem laat de ‘chat’ pagina met het nieuwe bericht zien.

4.1.5.  Use  case  5:  Nieuwe  poule  aanmaken   Main scenario: 1. Gebruiker logt in. 2. Gebruiker navigeert naar de ‘poule’ pagina. 3. Systeem laat de mogelijkheid zien als de gebruiker daar de rechten voor heeft. 4. Gebruiker klikt op de knop aanpassen. 5. Gebruiker kiest voor poule aanpassen. 6. Gebruiker voert voor ieder team dat in de poule komt de volgende gegevens in. 7. Gebruiker voert de teamnaam in. 8. Gebruiker voert de afkorting van de teamnaam in. 9. Gebruiker voert de standaardtijd van het team in. 10. Gebruiker voert de locatie van de club in. 11. Gebruiker klikt op de knop team toevoegen.

4.1.6.  Use  case  6:  Stand  bijwerken   Main scenario: 1. Gebruiker logt in. 2. Gebruiker navigeert naar de ‘poule’ pagina. 3. Systeem laat de mogelijkheid zien als de gebruiker daar de rechten voor heeft. 4. Gebruiker klikt op de knop aanpassen. 5. Gebruiker kiest voor stand bijwerken.

45

6. Systeem geeft het programma weer. 7. Gebruiker voert de scores in door middel van een dropdown menu. 8. Gebruiker klikt op de aanpassen knop.

4.1.7.  Use  case  7:  Programma  bijwerken   Main scenario: 1. Gebruiker logt in. 2. Gebruiker navigeert naar de ‘poule’ pagina. 3. Gebruiker navigeert naar de ‘programma’ subpagina. 4. Systeem laat de mogelijkheid zien als de gebruiker daar de rechten voor heeft. 5. Gebruiker klikt op de knop aanpassen. 6. Gebruiker kiest voor programma bijwerken. 7. Gebruiker voert de datum van de wedstrijd in. 8. Gebruiker voert de teams in. 9. Systeem geeft de standaard tijd voor deze wedstrijd weer. 10. Gebruiker klikt op invoeren om de wedstrijd in te voeren. Exceptions: 7a.

De standaard tijd voor deze wedstrijd is niet juist. 1. De gebruiker past de tijd handmatig aan.

4.1.8.  Use  case  8:  Navigatie  opvragen   Main scenario: 1. Gebruiker logt in. 2. Systeem geeft de homepagina weer. 3. Systeem geeft de eerstvolgende wedstrijd weer. 4. Gebruiker klikt op de navigatie knop. 5. Systeem geeft routebeschrijving vanaf huidige locatie naar de wedstrijdlocatie weer. Exceptions: 5a.

De huidige locatie is niet bekend. 1. Systeem geeft aan dat de huidige locatie niet bekend is.

46

5b.

De doel locatie is niet bekend. 1. Systeem geeft aan dat de locatie waar naar genavigeerd moet worden niet bekend is. 2. Gebruiker kan zelf de locatie handmatig invoeren.

4.1.9.  Use  case  9:  Gegevens  aanpassen   Main scenario: 1. Gebruiker logt in. 2. Systeem geeft de homepagina weer. 3. Gebruiker navigeert naar de speler pagina. 4. Systeem geeft de huidige gegevens weer. 5. Gebruiker kan gegevens aanpassen door deze nieuw in te vullen. 6. Gebruiker klikt op de knop aanpassen.

47

4.2.  Achterkant  vormgeven   Om de informatie goed te structureren ben ik gaan nadenken over de achterkant van de website, namelijk de database. Er worden in deze applicatie namelijk een hoop gegevens opgeslagen, aangepast en weergegeven. Het is daarbij belangrijk dat de juiste gegevens getoond kunnen worden. Ik ben dus aan de slag gegaan met een UML klassendiagram. Hieronder zijn de verschillenden tabellen in de database te zien, met daarnaast de gegevens die in ieder van die tabellen opgenomen moet worden. Daarnaast heb ik aangegeven wat de relaties tussen de tabellen zijn. Of het een 1 op 1 relatie is of een 1 op meer relatie. Gedurende het ontwerp proces is en zal deze tabel nog meerdere aangepast worden, zodat gegevens goed in beeld bij de gebruiker kunnen worden gebracht.

48

4.3.  Gegevens  bepalen   De applicatie zal volledig in het Nederlands zijn. Het gedeelte dat de applicatie gebruikt en geen Nederlands spreekt en de applicatie zal willen gebruiken is verwaarloosbaar. De mogelijkheid om een engelse versie te maken en een taal instelling te maken op de instellingen pagina behoort tot de mogelijkheden in de toekomst. De taal zal gespecificeerd worden in de header van de pagina:

Voor de karakterset heb ik gekozen om gebruik te maken van ‘iso-8859-15’, ook wel Latin 9 genoemd. De talen die door deze codering ondersteund worden zijn Noord Amerika, West Europa, Latijns Amerika, het Caribisch gebied, Canada en Afrika. Daarnaast ondersteunt Latin 9 in tegenstelling tot Latin 1, de meest gebruikte karakterset, ook het euroteken. Het euroteken komt in principe nergens in de applicatie voor, maar kan door gebruikers in de chat gebruikt worden. De karakterset wordt gespecificeerd in de header van de pagina:

<meta charset="iso-8859-15" /> Wat de overige metadata betreft zal ik een beschrijving van de applicatie geven. Ik heb ervoor gekozen de beschrijving kort en krachtig te houden.

<meta name="description" content="Alle informatie over jouw eigen amateurvoetbalteam" /> Tot slot zal ik enkele sleutelwoorden specificeren waardoor het duidelijk is waar de pagina precies over zal gaan. Ik heb alleen voor woorden gekozen die daadwerkelijk betrekking hebben op de gehele pagina. Daardoor ben ik geëindigd met slechts vier sleutelwoorden.

<meta name="keywords" content="amateurvoetbal, voetbal, voetbalteam, amateurvoetbalteam" />

49

5.  HET  SKELET  VORMGEVEN   In dit hoofdstuk zal ik aandacht besteden aan de ‘skeleton plane’. Dit is de fase van de methodiek van Jesse James Garrett waar het interactie ontwerp echt vorm krijgt. De lezer zal door het lezen van dit hoofdstuk weten hoe en vooral waarom ik tot een bepaald interactie ontwerp ben gekomen. In de eerste paragraaf van dit hoofdstuk zal ik het navigatieontwerp bespreken en laten zien door middel van een aangepaste flow chart. In het tweede paragraaf zal ik de wireframes laten zien die dieper ingaan op het interactieontwerp van de applicatie.

5.1.  Navigatie  in  kaart  brengen   Nadat er een lijst gemaakt is met welke pagina’s er allemaal ontwikkeld moesten worden ben ik een stap verdere gegaan en heb ik de interactie in kaart gebracht. Ik heb ervoor gekozen om duidelijk te maken hoe er binnen de applicatie genavigeerd kan worden en welke pagina’s allemaal met elkaar in verbinding staan. Dit heb ik gedaan door middel van pijltjes te trekken. Op pagina’s waar gegevens ingevuld moeten worden is dat te zien door het lege formuliertje.

50

5.2.  Wireframes  maken   Om de applicatie te kunnen bouwen had ik een duidelijk beeld nodig van waar alle elementen geplaatst zouden moeten worden en hoe het er uit zou komen te zien. Om dit te bewerkstelligen ben ik aan de slag gegaan met het maken van wireframes. Deze wireframes dienen ertoe om het verhaal van de use cases om te zetten in iets visueels wat mij later ondersteuning kan bieden bij het bouwen van de applicatie. Ik heb ervoor gekozen om de ontwerpen te presenteren op een mobieltje om duidelijk te maken hoe het er uit gaat zien in de uiteindelijke situatie. De kleuren en vormgeving zijn echter nog niet zoals ik ze uiteindelijk wil gaan laten worden. Die stap komt pas aan bod in de laatste plane.

Inlogscherm • • • • •

E-mail wordt gebruikt om in te loggen. Wachtwoord wordt in eerste instantie naar de gebruiker gemaild en kan deze daarna zelf nog aanpassen. Het is mogelijk voor de gebruiker om ingelogd te blijven op het huidige device. Een link naar een invulscherm waar de gebruiker zijn of haar e-mailadres kan gebruiken om een nieuw wachtwoord te laten mailen. De knop om in te loggen.

51

Home screen • • •

•

Bovenaan is de naam van de pagina te zien en wordt de naam van diegene die is ingelogd weergegeven. De naam van het team waar de speler lid van is wordt weergegeven en de positie in de poule inclusief het aantal punten uit wedstrijden. De eerstvolgende wedstrijd wordt weergegeven. Daarbij zijn de aanvangstijd belangrijk en het aantal spelers dat wel/onbekend/niet aanwezig is. Onder de teamnaam van de tegenstander wordt het aantal punten uit wedstrijden getoond. Er is een knop die de routebeschrijving direct weergeeft.

Herinnering •

De gebruiker krijgt een herinnering bij het inloggen te zien als hij zijn beschikbaarheid nog niet heeft doorgegeven.

52

Poule stand • • • •

In het poule-scherm is in eerste instantie de stand van de poule te zien. Bovenin wordt de naam van de poule weergegeven. Meer informatie is op te vragen onder het vraagteken, informatie over wat de afkortingen betekenen. Het logo’tje beneden van poule geeft de positie van het team aan.

Uitslagen invoeren • • •

Door op het plusje te klikken in het poule stand scherm komt de gebruiker op het scherm om uitslagen in te voeren. De gebruiker krijgt hier het programma te zien. Door de uitslagen in te voeren wordt de stand bijgewerkt.

53

Team toevoegen • • • •

Door op de teams tab te klikken komt de gebruiker in het team toevoegen scherm. De locatie kan de gebruiker invoeren, zodat er van de navigatie gebruik gemaakt kan worden. De voorkeurstijd kan ingevoerd worden zodat de standaard aanvangstijd in de applicatie verwerkt kan worden. Toevoegen voegt het team toe aan de database.

Poule Programma • • •

In het poule-scherm kan er geschakeld worden tussen de stand en het programma. In het programma scherm is een overzicht te zien van de wedstrijd die nog gaan komen. Door op het plusje te klikken kan het programma worden aangepast of ingevoerd.

54

Wedstrijd invoeren • • •

De gebruiker kan de datum van de wedstrijd instellen door van de schakelaars gebruik te maken. De teams stelt de gebruiker op dezelfde manier in. Vervolgens zal de applicatie het tijdstip zelf invullen, maar mocht dit afwisselen van de standaardtijd kan de gebruiker deze zelf aanpassen.

Speler • • •

In  het  speler  scherm  kan  de  speler  zijn  of  haar  aanwezigheid  doorgeven.   Daarnaast  kan  hij  of  zij  doorgeven  of  er  rechtstreeks  wordt  gegaan  of  er  een  auto   beschikbaar  is.   Met  behulp  van  edit  kan  een  speler  zijn  gegevens  aanpassen.  

55

Gegevens aanpassen • • •

De gebruiker kan zijn gegevens aanpassen in het speler scherm. Alle gegevens staan op hun huidige status op het moment dat de speler naar het scherm navigeert. Door op verzenden te klikken worden de gegevens aangepast.

Team • •

In het teamscherm is de aanwezigheid van het gehele team zichtbaar. Daarbij is een overzicht van diegenen die rechtstreeks gaan een auto beschikbaar hebben en diegene die de was heeft.

56

Speler toevoegen • •

Gebruikers die daarvoor toestemming hebben kunnen een speler toevoegen. Alle gegevens moeten worden ingevuld en door op verzenden te drukken krijgt de speler een mailtje dat hij toegevoegd is tot het team.

Chat • • •

De meest recente berichten zijn te zien. De tekst, schrijver en datum van schrijven worden weergegeven. De nieuwste berichten komen bovenaan, oudere berichten kunnen geladen worden. Bericht toevoegen gebeurt door op de grote + te drukken in een apart venster.

57

Invoerscherm chat • •

De speler vult de tekst in en klikt op verzenden. Er is een maximaal aantal karakters vastgesteld. Het systeem laat niet toe om meer te typen. De gebruiker klikt op verzenden om het bericht te plaatsen.

Wachtwoord vergeten •

•

Gebruiker kan e-mailadres invoeren en op versturen drukken om het wachtwoord wat met het ingevoerde e-mailadres is gekoppeld te laten mailen naar het ingevoerde e-mailadres. De terug knop brengt de gebruiker terug naar het inlogscherm.

58

6.  HET  PROJECT  KLEUR  GEVEN   Het achtste hoofdstuk beschrijft de laatste fase van de methode van Jesse James Garrett. Hierin staat de buitenste schil van het project centraal, ‘de surface’. Door het lezen van dit hoofdstuk komt de lezer te weten hoe ik al het hiervoor beschreven werk tot uiting heb gebracht.

59

60

61

62

63

6.1.  Ontwerp  specificeren   Ik heb voor dit ontwerp gekozen omdat ik van mening ben dat het heel goed aansluit op de doelgroep. In het hoofdstuk waar de doelgroep is beschreven staat dit verder uitgewerkt. Ik ben van mening dat de doelgroep mannen van de leeftijd 16 tot 50 jaar op zoek is naar een minimalistisch en strak design. Weinig toeters en bellen en een duidelijke interface met vooral veel basis kleuren. De interactiemogelijkheden zijn talrijk in deze applicatie. Een gebruiker kan een groot aantal pagina’s bekijken en tal van interacties uitvoeren op deze pagina’s. De applicatie bestaat voor een groot gedeelte uit een omvangrijke database waar vrijwel alle gegevens in aangespast en toegevoegd kunnen worden door de gebruiker als hij of zij daar rechten toe heeft. Al deze mogelijkheden maken de applicatie zeer goed bruikbaar en prettig in gebruik. Het doel van de applicatie is om spelers van een team gezamenlijk informatie te laten delen. De applicatie zal spelers daarbij leiden en de informatie op een overzichtelijke en duidelijke manier de spelers aanbieden. De informatie die de speler nu in deze applicatie allemaal kan zien wordt momenteel op verschillende plekken verstrekt. Doordat deze applicatie het allemaal naar één plek toebrengt zullen spelers van een amateurteam het met veel plezier gebruiken. Het kleurgebruik in de applicatie is vrij sober. Er zijn door de gehele applicatie slechts grijstinten, blauw en geel gebruikt. Geel wordt in de applicatie gebruikt als een ‘pas-op’ kleur en blauw als een ‘goed’ kleur. Het weinige gebruik van kleuren sluit goed aan op de doelgroep, aangezien ze graag kleuren met een functie zien. De compositie van de applicatie is helder en ondersteunend aan de functionaliteiten die uitgevoerd moeten en kunnen worden. Het maakt de spelers duidelijk wat knoppen zijn en waarom die op die plaats in de applicatie zijn gesitueerd. De verhouding tussen ornament en functioneel is heel duidelijk binnen deze applicatie. Er is vrijwel geen ornament aanwezig, het is voor losjes gezegd 95% puur functioneel. De vormen die aangebracht zijn zoals rondingen om de content heen is om de gegevens te groeperen. Deze rondingen bijvoorbeeld maken het geheel mooier, maar ondersteunen daarnaast ook functioneel gezien de applicatie. De applicatie heeft een professioneel uiterlijk gekregen, doordat alles er strak en goed uitgelijnd uitziet. Nergens is er sprake van afwijkingen van de overige pagina’s. Het ontwerp is in de applicatie uitermate consequent doorgevoerd. Alle pagina’s volgen de zelfde ontwerprichtlijnen en visuele ondersteuningen.

64

7.  DE  REFLECTIE   Er zijn nog een aantal zaken die nog verbetering nodig hebben. Zo zijn er een aantal elementen binnen het interaction design die nog verbetering kunnen gebruiken. Zo zal een nog betere en duidelijke feedback op de gebruiker altijd een welkome aanvulling zijn. Daarnaast zijn er nog een lijst met functionaliteiten die ik in de toekomst mogelijk zou kunnen toevoegen, maar die in de huidige situatie niet worden toegepast in verband met tijdgebrek. Ik focus me nu alleen op de essentiële zaken. De volgende elementen zijn voor de toekomst: • • •

Aanmaken en registreren van een nieuw team. Meer funtioninaliteiten en statistieken. Beter en strakker design.

Over het algemeen ben ik zeer tevreden over de gang van zaken en vind ik dat ik een compleet rapport heb aangeleverd. Enkel de laatste plane zal gedurende het verloop van dit project nog completer worden. Ik heb ervoor gekozen om de visuele mockups nog niet in dit document te verwerken, omdat ik hier gedurende het bouwen nog graag in wil sleutelen. Qua functionaliteiten en basis designaspecten wil ik geen zaken meer aanpassen, maar in het algehele ontwerp wil ik graag nog ruimte laten voor nieuwe ideeën.  

65