Functioneel ontwerp voor Full House Mobile
23 september 2010
FUNCTIONEEL ONTWERP VOOR FULL HOUSE MOBILE (VISION VERSIE)
Datum:
29-09-2010
Auteur:
Dairo Bosschart
Versie:
1.0
Document:
Functioneel_ontwerp (vision versie).docx
Functioneel ontwerp voor Full House Mobile
23 september 2010
INHOUDSOPGAVE Inleiding .................................................................................................................................................................................3 Doel van dit document ................................................................................................................................................3 Opdracht ...........................................................................................................................................................................3 Invulling opdracht ........................................................................................................................................................3 Document Historie ........................................................................................................................................................4 Achtergrond .........................................................................................................................................................................5 Analyse Full House Mobile .............................................................................................................................................6 sitemap ...................................................................................................................................................................................7 FlowChart’s ...........................................................................................................................................................................8 schermopbouw ................................................................................................................................................................ 13 Wireframes ........................................................................................................................................................................ 15
Functioneel ontwerp voor Full House Mobile
23 september 2010
INLEIDING DOEL VAN DIT DOCUMENT Dit document is bedoeld voor Wizzix om een beeld te kunnen vormen van de functionaliteit welke ik in gedachten heb voor het bouwen van de mobiele toepassing. Ook dient dit document als handleiding om de functionaliteit van het te bouwen system te kunnen inzien.
OPDRACHT WiZZiX wil naast de webvariant ook functionaliteit beschikbaar stellen via mobiele toepassingen. Om deze vernieuwing en innovatie te bewerkstelligen wil WiZZiX prototypes van mobiele toepassingen ontwikkelen met als doelen: Een beeld te krijgen van de belangrijkste verschillen tussen 1 uniforme mobiele website en specifieke mobiele applicaties.
Een beeld te krijgen van de technische (on)mogelijkheden van een dergelijke mobiele toepassing. Is het technisch haalbaar om voor verschillende platforms (Android, Windows Mobile, IPhone) verschillende applicaties te ondersteunen zowel qua kennis als kosten.
Een beeld te krijgen van de verschillen in het productieproces (ontwerp, usability, testen, debuggen).
Een goed beeld te krijgen van de ondersteuning voor een mobiele applicatie in de toekomst. Hoe kan WiZZiX het beste om gaan met nieuwe versies van platforms en nieuwe mogelijkheden van telefoons.
Een goed beeld te krijgen hoe WiZZiX een dergelijke toepassing het beste kan distribueren.
INVULLING OPDRACHT Voordat er prototypes gerealiseerd konden worden heb ik eerst onderzoek verricht naar de mogelijkheden voor ontwikkeling en deployment. Al vanaf een vroeg stadium kon worden vastgesteld dat het schrijven van een applicatie in verschillende programmeertalen een hoop tijd zal gaan kosten. Gezien het feit date en applicatie ook geupdate moet worden zal dit ook per platform moeten gebeuren. Omdat deze oplossing al vroeg werd uitgesloten heb ik besloten om onderzoek te verrichten naar het principe “write once, run everywhere”. Uit dat onderzoek bleek dat er en aantal oplossingen, zoals PhoneGap en Appcelerator Titanium, de mogelijkheid te bieden om met alleen de kennis van html, css en javascript een applicatie te schrijven. Het project kon dan via de oplossing gegenereerd worden naar native code. Dit zou betekenen dat een aanpassing maar eenmalig hoeft worden uitgevoerd en deze zal op alle platformen aangepast zijn. Gezien deze oplossing qua kosten, tijd en kennis positief was, heb ik onderzoek verricht naar de mogelijke deployment van mobiele applicaties per platform. Uit dat onderzoek is gebleken dat het voor de applicatie Full House Mobile onnodig veel kosten met zich meebrengt, zowel per developer account als kosten per update per platform. Een andere mogelijkheid waar ik onderzoek naar heb gedaan is het realiseren van een mobiele webapplicatie. De voordelen hiervan zijn: lage kosten, makkelijk te updaten, ook voor tablet pc’s, zoals de iPad. Na al de oplossingen te hebben afgewogen blijkt een mobiele webapp, met behulp van html5 en css3 de beste oplossing. Deze oplossing zal Full House Mobile gaan heten. De content zal zich automatisch aanpassen aan de grootte van het scherm.
Functioneel ontwerp voor Full House Mobile
23 september 2010
DOCUMENT HISTORIE Datum 23-09-2010 27-09-2010
Versie 0.1 0.2
28-09-2010
0.3
29-09-2010
0.4
Wijziging Draft Toevoeging flowcharts Toevoeging wireframes Toevoeging Tekst aan wireframes
Auteur Dairo Bosschart Dairo Bosschart Dairo Bosschart Dairo Bosschart
Functioneel ontwerp voor Full House Mobile
23 september 2010
ACHTERGROND Full House Client Server bestaat al een tijd en Wizzix wil klanten nu de mogelijkheid bieden om via een mobiel apparaat informatie te raadplegen rechtstreeks vanuit Full House Client Server. Zo zal een organisator niet telkens hoeven bellen om te kijken of een bepaalde zaal rond een bepaalde datum al is verhuurd en zal hij direct op zijn apparaat bij de klant een reservering kunnen plaatsen. Om dit gemak te kunnen realiseren
Functioneel ontwerp voor Full House Mobile
23 september 2010
ANALYSE FULL HOUSE MOBILE Wat de echte wensen van de gebruikers zijn is niet bekend, omdat de gebruikers niet op het idee kwamen voor een mobiele oplossing. Wat wij wel weten is dat evenementenorganisatoren vaak veel over en weer moeten bellen, omdat zij niet altijd binnen het bereik zijn van een computer met Full House Client Server. Om deze rompslomp te verkleinen zou een mobiele versie van Full House, deze organisatoren het werk wat gemakkelijker kunnen maken. De gebruikers willen in ieder geval van elke locatie waar zij zich bevinden hun evenementen kunnen inzien en deze eventueel bijwerken of aanpassen. Ook zouden deze gebruikers een koppeling kunnen hebben met hun taken, zodat ze op hun smartphone direct kunnen zien welke afspraken er nog openstaan. Er zal een prototype worden gerealiseerd die ik door de eindgebruikers laat testen. Uit hun eventuele feedback kunnen wensen worden gevormd. Zie onderzoeksrapport.
Functioneel ontwerp voor Full House Mobile
SITEMAP 1. Login Scherm 2. Hoofd Scherm 2.1. Evenementen Scherm 2.1.1.Evenement Scherm 2.1.1.1. Activiteit Scherm 2.1.1.1.1. Taak Scherm 2.2. Agenda Scherm 2.2.1.AgendaDagView 2.2.2.AgendaWeekView 2.2.3.AgendaMaandView 2.3. Verhuurscherm 2.3.1.Verhuurartikel Scherm 2.4. Contacten Scherm 2.4.1.Contact Scherm 2.5. Uitloggen
23 september 2010
Functioneel ontwerp voor Full House Mobile
23 september 2010
FLOWCHART’S Main FlowChart
In de MainChart staan de stappen beschreven die de gebruiker doorloopt om naar een bepaald onderdeel van de applicatie te kunnen komen. De gebruiker moet eerst inloggen om van de applicatie gebruik te maken. De gebruiker verschijnt vervolgens in het hoofdscherm waar hij deze keuze heeft om naar het evenementendeel, agendadeel, verhuurdeel of contactendeel te gaan. De Flowcharts van die delen zijn te vinden op de volgende bladzijden.
Functioneel ontwerp voor Full House Mobile
23 september 2010
FlowChart Evenementen
In de Evenementen Chart staan de stappen beschreven die de gebruiker doorloopt om een evenement toe te voegen, om een evenement te wijzigen en om een evenement te verwijderen.
Functioneel ontwerp voor Full House Mobile
23 september 2010
FlowChart Agenda
In de Agenda Chart staan de stappen beschreven die de gebruiker doorloopt om de agenda in dag-, week- of maandview te bekijken. Ook kan een gebruiker een bepaalde afspraak of taak lezen die in de agenda staat.
Functioneel ontwerp voor Full House Mobile
23 september 2010
FlowChart Verhuur
In de Agenda Chart staan de stappen beschreven die de gebruiker doorloopt om de agenda in dag-, week- of maandview te bekijken. Ook kan een gebruiker een bepaalde afspraak of taak lezen die in de agenda staat.
Functioneel ontwerp voor Full House Mobile
23 september 2010
FlowChart Contacten
In de Contacten Chart staan de stappen beschreven die de gebruiker doorloopt om de gegevens van een bepaalde contactpersoon in te zien.
Functioneel ontwerp voor Full House Mobile
SCHERMOPBOUW 1. LoginScherm Gebruikersnaam Wachtwoord
2. SplashScreen Preloader
3. Hoofdscherm Evenementenscherm Icoon Agendascherm Icoon Verhuurscherm Icoon Contactenscherm Icoon Uitlog Icoon 4. Evenementen Lijst met evenementen “Voeg evenement toe” knop 4.1. Evenement Detailscherm Evenementnaam Evenementenbeschrijving Evenementendata Activiteitenlijst “Wijzig Evenement”-knop “Verwijder Evenement”-knop “Voeg Activiteit toe”-knop 4.1.1. Activiteit Detailscherm Activiteitnaam Activiteitbeschrijving ActiviteitData Takenlijst “Wijzig Activiteit”-knop “Verwijder Activiteit”-knop “Voeg taak toe”-knop 4.1.1.1. Taakscherm Taaknaam Taakbeschrijving “Wijzig Taak”-knop “Verwijder Taak”-knop “Koppel gebruiker aan taak”-knop
23 september 2010
Functioneel ontwerp voor Full House Mobile 5. Agenda Dag/maand/weekview “Dag/week/maand”-toggle Afspraken Taken 6. Contacten Toggle Personeel/Klanten Contactenlijst “Voeg Contact toe”- knop 7. Uitloggen
23 september 2010
Functioneel ontwerp voor Full House Mobile
23 september 2010
WIREFRAMES 1. LoginScherm
Voordat de gebruiker van het systeem gebruik kan maken dient hij eerst in te loggen. Dit doet hij door een gebruikersnaam en een wachtwoord in te vullen. Vervolgens drukt de gebruiker op de login knop.
2. SplashScreen
Het splashscreen wordt getoond tijdens het laden van het mainscreen. Op het mainscreen zullen alleen de knoppen worden getoond die voor de desbetreffende gebruiker van toepassing zijn.
Functioneel ontwerp voor Full House Mobile
23 september 2010
3. Hoofdscherm
Het hoofdscherm bestaat uit het logo van de mobiele applicatie van full house. Dit om de gebruiker het gevoel te geven dat hij echt in full house is. Onder het logo bevinden de desbetreffende knoppen die voor de gebruiker gelden. In mijn wireframe de knoppen evenementen, agenda, verhuur en contacten. Voor elke gebruiker moet het mogelijk zijn om uit te loggen, dus er is altijd een uitlogknop aanwezig.
Functioneel ontwerp voor Full House Mobile
23 september 2010
4. Evenementen
Wanneer de gebruiker in het hoofdmenu klikt op evenementen dan komt hij terecht op de evenementenpagina. Op de evenementenpagina is een lijst van evenementen te zien die zich deze maand afspelen. Wil de gebruiker een maand verder kijken, dan klikt de gebruiker op de knop “volgende maand”, welke zich naast de maandnaam bevindt. Wil de gebruiker een maand terugkijken dan kan de gebruiker op “vorige maand” klikken. Wil de gebruiker terugkeren naar het hoofdscherm, dan kan de gebruiker klikken op menu en dan op de “terug” of “home” knop. Wil de gebruiker een evenement bekijken dan klikt de gebruiker op het evenement uit de lijst. De gebruiker wordt dan doorgestuurd naar de evenementen detailpagina (zie 4.1 Evenement Detailscherm) Wil de gebruiker een evenement toevoegen, dan klikt de gebruiker op menu. Vervolgens klikt hij op nieuw evenement. De gebruiker komt dan op een evenement Detailpagina terecht met invoermogelijkheden (zie 4.1 Evenement Detailscherm).
Functioneel ontwerp voor Full House Mobile
23 september 2010
4.1. Evenement Detailscherm
Op het evenementen detailscherm kan de gebruiker meer details bekijken over het evenement waar hij eerder op geklikt had. Een evenement heeft een begin en eindtijd. Aan een evenement hangen meerdere activiteiten. Deze activiteiten zijn in een lijst weergegeven. Wil de gebruiker het evenement wijzigen, dan klikt de gebruiker op menu en vervolgens op wijzig evenement. De gebruiker kan nu de content veranderen van het evenement. Wil de gebruiker een nieuwe activiteit toevoegen aan het evenement, dan klikt de gebruiker op “nieuwe activiteit toevoegen” onderaan de activiteitenlijst. De gebruiker komt dan terecht op het “Activiteit Detailscherm”. (zie 4.1.1 Activiteit Detailscherm). Wil de gebruiker een activiteit inzien, dan klikt hij op de desbetreffende activiteit en komt dan terecht op het “Activiteit Detailscherm”. (zie 4.1.1 Activiteit Detailscherm).
Functioneel ontwerp voor Full House Mobile
23 september 2010
4.1.1. Activiteit Detailscherm
Op het activiteit detailscherm kan de gebruiker meer details bekijken over de activiteit waar hij eerder op geklikt had. Een activiteit heeft een begin en eindtijd. Aan een activiteit hangen meerdere taken. Deze taken zijn in een lijst weergegeven. Wil de gebruiker het activiteit wijzigen, dan klikt de gebruiker op menu en vervolgens op wijzig activiteit. De gebruiker kan nu de content veranderen van de activiteit. Wil de gebruiker een nieuwe taak toevoegen aan de activiteit, dan klikt de gebruiker op “nieuwe taak toevoegen” onderaan de takenlijst. De gebruiker komt dan terecht op het “Taak Detailscherm”. (zie 4.1.1.1 Taak Detailscherm). Wil de gebruiker een taak inzien, dan klikt hij op de desbetreffende taak en komt dan terecht op het “Taak Detailscherm”. (zie 4.1.1 Taak Detailscherm).
Functioneel ontwerp voor Full House Mobile
4.1.1.1.
23 september 2010
Taak Detailscherm
Op het taak detailscherm kan de gebruiker meer details bekijken over de taak waar hij eerder op geklikt had. Een taak heeft een begin en eindtijd. Aan een taak kan/kunnen één of meerdere personen worden gekoppeld. Wil de gebruiker de taak wijzigen, dan klikt de gebruiker op menu en vervolgens op wijzig taak. De gebruiker kan nu de content veranderen van de taak. Wil de gebruiker een (nieuw) persoon koppelen aan een taak dan klikt deze op “koppel nieuw persoon”.
Functioneel ontwerp voor Full House Mobile
23 september 2010
5. Agenda
De gebruiker kan zijn agenda voor vandaag bekijken door in het hoofdscherm op agenda te klikken. De gebruiker komt meteen in het agenda overzicht van vandaag. Door een bepaalde afspraak te bekijken, klikt de gebruiker op de desbetreffende afspraak. Wil de gebruiker een nieuwe afspraak plaatsen, dan klikt de gebruiker op menu. Vervolgens op “nieuwe afspraak”. Er verschijnt dan een popup waar de gebruiker de afspraak/taakgegevens in kan vullen.(In de popup is het mogelijk om aan te geven of het om een afspraak, taak of iets privé ’s is. Elke categorie heeft zijn eigen kleur, zodat het voor de gebruiker duidelijk is waar het agendapunt over gaat) Wil de gebruiker een dag later kijken, dan klikt de gebruiker op “volgende dag”, naast de dag en datum. Om snel een bepaalde dag te bekijken kan de gebruiker op “maandview” klikken. Er verschijnt dan een maandview van deze maand. Door op een bepaalde dag te klikken gaat de gebruiker naar de dagview van die specifieke dag.
Functioneel ontwerp voor Full House Mobile 6. Contacten
7. Verhuur WORDT AAN GEWERKT!!!! 8. Uitloggen
23 september 2010
