Wireframe #1 PTA Home

Transcriptie

1 Wireframe #1 PTA Home 1. Dit is de header van de PTA applicatie onder de tekst Personal Travel Assistant zie je waar je je bevindt aan de hand van nog een tekst (home / stationsoverzicht / ontspanning) de header dient tevens als link om terug naar de begin pagina te gaan, dit gebeurt door erop te klikken. 2. Dit is een grote button met de tekst Stationsoverzicht, deze button dient als link om naar de pagina stationsoverzicht te gaan, je doet dit door er simpelweg op te klikken. Binnen de grote button zitten kleine icoontjes, dit is voor de gebruikers die al weten waar ze moeten zijn. De icoontjes stellen het volgende voor: voorziening overzicht per station, eetgelegenheden, slaapmogelijkheden. Ook deze icoontjes dienen als link je gaat naar de pagina door op het icoontje te klikken. 3. Dit is een grote button met de tekst Ontspanning, deze button dient als link om naar de pagina ontspanning te gaan, je doet dit door er simpelweg op te klikken. Binnen de grote button zitten kleine icoontjes, dit is voor de gebruikers die al weten waar ze moeten zijn. De icoontjes stellen het volgende voor: sport, vecht, kaart, puzzel en race. Ook deze icoontjes dienen als link, je gaat naar de pagina door op het icoontje te klikken. 4. Dit is een informatief tekstvak met de tijd en de datum. Je kan niks met dit vak, het is puur voor informatie over de tijd en de datum.

2 Wireframe #2 PTA ontspanning 1. Dit is de header van de PTA applicatie onder de tekst Personal Travel Assistant zie je waar je je bevindt aan de hand van nog een tekst, in dit geval is dat ontspanning. Beide teksten in de header dienen als 2 aparte links, door op de tekst Personal Travel Assistent te klikken keer je terug naar de basis van de PTA applicatie (wireframe1). Door op de tekst Ontspanning te klikken keer je terug naar de startpagina van Ontspanning (huidig wireframe) 2. Hier komt een overzicht van buttons van allerlei verschillende categorieën games. De buttons beschikken over een icoon dat kenmerkend is voor de gametype (bal voor sportgames), daarachter staat de tekst en daarachter (hier gemarkeerd met vraagteken) staat hoeveel games jij van die categorie heb. 3. Knop van de scrollbalk om mee te scrollen. Grootte van de knop hangt af van de lengte van de lijst met categorieën. Om te scrollen houdt je je pennetje op de scroll-knop, je zult zien dat hij wat donkerder wordt, hieruit is op te maken dat je hem beet hebt. Om vervolgens te scrollen beweeg je simpelweg het pennetje omhoog of omlaag waar jij naartoe wil. 4. Dit is een informatief tekstvak met de tijd en de datum. Je kan niks met dit vak, het is puur voor informatie over de tijd en de datum.

3 Wireframe #3 PTA ontspanning keuze 1. Als je een categorie aanklikt krijg je te zien wat die categorie te bieden heeft aan games, in deze wireframe zie je dat we Cardgames hebben aangeklikt. Als je een categorie aanklikt klapt de button open en komen er verschillende keuzes tevoorschijn. 2. Als een categorie wordt aangeklikt wordt de lijst groter, je ziet hier dat de balk om mee te scrollen kleiner wordt.

4 Wireframe #4 PTA stations overzicht 1. Dit is de header van de PTA applicatie onder de tekst Personal Travel Assistant zie je waar je je bevindt aan de hand van nog een tekst, in dit geval is dat stationsoverzicht. Beide teksten in de header dienen als 2 aparte links, door op de tekst Personal Travel Assistent te klikken keer je terug naar de basis van de PTA applicatie (wireframe1). Door op de tekst Ontspanning te klikken keer je terug naar de startpagina van Stationsoverzicht (huidig wireframe) 2. Dit is een grote button met een plaatje van een trein en de tekst per station. Door op deze button te klikken ga je naar een nieuwe pagina waarin je per station kan zoeken naar de voorzieningen op dat station. Je doet dit door in te voeren van welk station je het overzicht wil zien. Vervolgens klik je op zoek en komen alle voorzieningen van dat station tevoorschijn op je scherm. 3. Dit is een grote button met een plaatje van een voorziening en de tekst per voorziening. Als je op de button klikt ga je naar een nieuwe pagina. Hier komen categorieën te staan van voorzieningen die verder buiten het station zijn te vinden.

5 Wireframe #5 PTA stations overzicht per station 1. Hier staat een tekstvak met een plaatje en de tekst per station dit is gewoon informatief ter herinnering waar je zit. 2. Hier staat een zoekbalk, hier voer je het station in waarop je voor voorzieningen wil zoeken. Nadat je het heb ingevoerd druk je op de pijl rechts in het vak om te gaan zoeken. ¾ Hier komen de zoekresultaten van het station wat je hebt ingevoerd. De voorzieningen van het station komen er te staan met een klein logo en tekst (bijvoorbeeld wc logo en tekst W.C). Automatisch worden voorzieningen al een beetje gesorteerd op categorie. Zo zie je hier dat de eet en drink voorzieningen apart worden vermeld van het stationsoverzicht. 5. Hier komt een scrollbalk, als de lijst met voorzieningen langer wordt dan de pagina wordt de scrollbalk kleiner. Je gebruikt de scrollbalk door je pennetje erop te houden en simpelweg naar boven of beneden te bewegen.

6 Wireframe #6 PTA stations overzicht menu 1. Hier kom je in een categoriekeuzemenu terecht, nadat je heb geklikt op per voorziening bij stationoverzicht (zie wireframe4). Hier komen categorieën te staan waaruit je kan kiezen. Je kunt ze activeren door erop te klikken. Dan zul je naar een nieuwe pagina gaan waar je per station op jou gekozen categorie kan zoeken (zie volgende wireframe).

7 Wireframe #7 PTA stations overzicht per voorziening 1.. Hier staat een tekstvak met een plaatje en de tekst per station dit is gewoon informatief ter herinnering waar je zit. 2. Hier staat een zoekbalk, hier voer je het station in waarop je voor voorzieningen wil zoeken. Nadat je het heb ingevoerd druk je op de pijl rechts in het vak om te gaan zoeken. 3. Hier komen alle zoekresultaten te staan waarop jij heb gezocht, aangezien dit een meer gedetailleerde zoekactie is krijg je hier wat meer info. Bijvoorbeeld een groter plaatje, de afstand in minuten en meters en de looprichting etc.

8