Alleen wireframes

13
1. Create button, deze knop zorgt ervoor dat de gebruiker de pagina kan openen voor het aanmaken van een nieuw account. 2. Dit is de banner met het logo van Grolsch erin. 3. De invoerbalken voor username en password. Zodra deze aangetikt worden verschijnt het toetsenbord zodat de gegevens ingevuld kun- nen worden. 4. Met de schuifknop kan de gebruiker bepa- len of de login gegevens onthouden moeten worden of juist niet. 5. De login knop, zodra de gebruiker op deze knop klikt wordt er gekeken of de gebruiker de juiste gegevens ingevuld heeft, mocht de gebruiker geen volledige of foutieve gegevens heeft ingevoerd wordt dit gemeld en kan de gebruiker het opnieuw proberen. 6. De ga knop, zodra iets is ingevoerd moet deze knop ervoor zorgen dat er naar het volgende invulscherm gegaan wordt. Zijn er echter geen tekstvelden meer om in te vullen dan ver- dwijnt het toetsenbord en wordt er ingelogd. Inlogscherm AT&T AT&T 12:34 PM 12:34 PM Remember Login Grolsch Fixit Grolsch Fixit Cancel Cancel Create Create Username Wachtwoord Login ON ON Q W E R T Y U I O A S D F G H J Z X . / .com .com Go Go @123 @123 C V B N M K L P 1 2 4 5 3 6

description

De wireframes van de Iphone app

Transcript of Alleen wireframes

Page 1: Alleen wireframes

1. Create button, deze knop zorgt ervoor dat de gebruiker de pagina kan openen voor het aanmaken van een nieuw account.

2. Dit is de banner met het logo van Grolsch erin.

3. De invoerbalken voor username en password. Zodra deze aangetikt worden verschijnt het toetsenbord zodat de gegevens ingevuld kun-nen worden.

4. Met de schuifknop kan de gebruiker bepa-len of de login gegevens onthouden moeten worden of juist niet.

5. De login knop, zodra de gebruiker op deze knop klikt wordt er gekeken of de gebruiker de juiste gegevens ingevuld heeft, mocht de gebruiker geen volledige of foutieve gegevens heeft ingevoerd wordt dit gemeld en kan de gebruiker het opnieuw proberen.

6. De ga knop, zodra iets is ingevoerd moet deze knop ervoor zorgen dat er naar het volgende invulscherm gegaan wordt. Zijn er echter geen tekstvelden meer om in te vullen dan ver- dwijnt het toetsenbord en wordt er ingelogd.

Inlogscherm

AT&TAT&T 12:34 PM12:34 PM

Remember Login

Grolsch FixitGrolsch FixitCancelCancel CreateCreate

Username

Wachtwoord

Login

ONON

QQ WW EE RR TT YY UU II OO

AA SS DD FF GG HH JJ

ZZ XX

.. // .com.com GoGo@123@123

CC VV BB NN MM

KK LL

PP

1

2

4

5

3

6

Page 2: Alleen wireframes

1. Zodra er op de gevraagde gegevens geklikt wordt, opend een invoerscherm waar de gevraagde informatie ingevuld kan worden. Zodra de gegevens ingevuld zijn worden deze getoond naast bijv. username of e-mail. Dit geldt echter niet voor password.

2. Bankgegevens worden gevraagd omdat er met deze applicatie betaald kan worden via de eigen bankrekening. Wanneer deze gegevens ingevoerd worden, worden er een aantal din-gen gevraagd en nagekeken. Wanneer de gegevens kloppen krijgt de ge-bruiker een eigen unieke code (soort pincode) die elke keer opgevraagd wordt mocht de gebruiker via afschrijven willen betalen.

3. Wanneer alle gegevens kloppen en de user-name uniek in zijn soort is, wordt het account aangemaakt en wordt er een mail naar de gebruiker gestuurd met een link om zijn/haar account te activeren.

4. Mocht de gebruiker per ongeluk de create but-ton aangeraakt hebben of komt de gebruiker erachter dat hij/zij toch wel een account bezit dan kan de gebruiker op deze knop klikken en die voert hem weer terug naar het login scherm.

Aanmeldscherm

AT&TAT&T 12:34 PM12:34 PM

Username

Password

Con�rm password

E-mail

Bankgegevens

Grolsch FixitGrolsch Fixit

* Heb je al een Grolsch account?

Sign In

Account aanmaken

BackBack

1

2

4

3

Page 3: Alleen wireframes

1. Deze button zorgtr ervoor dat je uitlogt.

2. Dit is de banner met het logo van Grolsch erin.

3. Op bestellen is de button die je doorvoerd naar het bestellingsysteem. Zodra de gebruiker deze functie gebruikt kan hij/zij de gewenste drankjes gaan bestellen.

4. Op proosten gaat over de dingen die je zou kunnen doen tijdens het bier drinken. Van spelletjes spelen tot nieuwe vrienden maken.

5. Op vrienden is een overzicht van vrienden die je gemaakt het tijdens een spel in het op proos-ten gedeelte. Ook kan je je vrienden berichten sturen uitnodigen om een spel te spelen of wat te komen drinken.

6. Op overzicht is een functie die alle overzichten op een rij zet. Van alle gemaakte bestellingen tot de hoeveelheid munten of geld je hebt uitgegeven.

7. Een pagina die je terug voert naar home, hoe werkt het is een functie die laat zien hoe je be-paalde functies moet uitvoeren mocht dit nog niet duidelijk zijn, Settings je account aanpas-sen en gegevens toevoegen en/of verwijderen uit je profiel.

Hoofdmenu

AT&TAT&T 12:34 PM12:34 PM

Grolsch FixitGrolsch FixitLogoutLogout

Op Bestellen

Op Vrienden Op Overzicht

Op Proosten

Home Hoe werkt dit? Settings

1

2

4

5

3

6

7

Page 4: Alleen wireframes

1. De knop om terug te gaan naar het hoofd-menu.

2. Via deze button kan je gaan beginnen met het bestellen van de drankjes.

3. Lokaties bar laat op een plattegrond zien waar de bars zijn. Ook kan de gebruiker bepalen of hij/zij de drankjes altijd wil ophalen bij een be-paalde bar of dat de applicatie altijd de dichts-bijzijnde bar moet vinden en daar de bestelling naartoe mot sturen.

4. Laatste bestelling geeft een inzicht in wat er de vorige keer besteld is. Als de bestelling overeenkomt met de nieuwe bestelling die de gebruiker wil maken kan de gebruiker simpelweg via deze weg zijn/haar bestelling opnieuw bestellen zonder alles weer opnieuw in te voeren.

5. Berichten. Hierin ontvang je al je berichten die te maken hebben met je bestellingen. Mocht er een bar bijv. gesloten zijn of juist erg druk bezocht zijn dan kan de gebruiker er bericht over krijgen. Verder krijgt de gebruiker via de berichten zijn/haar bestelnummer en barnum-mer door via de brichten.

Bestelling 1

AT&TAT&T 12:34 PM12:34 PM

Grolsch FixitGrolsch FixitBackBack

Home Hoe werkt dit? Settings

BestellingenBestellingen

Lokaties barLokaties bar

Laatste bestellingLaatste bestelling

BerichtenBerichten

1

2

4

5

3

Page 5: Alleen wireframes

1. Een tabfunctie die de gebruiker een mogeli-jkheid tot overzicht geeft. Zo kan er alleen al-cohol of frisdrank geselecteerd worden maar het is ook mogenlijk om een overzicht van alle dranken die geschonken worden te krijgen.

2. De dranken die geschonken worden op het terrein. Door er op te drukken kan de gebruiker zijn/haar drank select-eren en wordt hij/zij doorgestuurd naar bestelpagina van de geselecteerde drank.

3. Wanneer de persoon klaar is met het select-eren van de dranken kan er op bestellen gek-likt worden en wordt de gebruiker naar een overzicht gebracht waarna hij/zij een beta- lingskeuze kan selecteren.

Bestelling 2

AT&TAT&T 12:34 PM12:34 PM

Grolsch FixitGrolsch FixitBackBack

Home Hoe werkt dit? Settings

AlcoholAlcohol Alle drankenAlle drankenFrisdrankFrisdrank

Bier

Bacardi Cola

Mojito

Drink InformationDrink Information

BestellenBestellen

Wijn

1

2

3

Page 6: Alleen wireframes

1. De terug knop die je terug brengt naar het drankoverzicht.

2. De min knop kan het aantal drankjes terug brengen.

3. De plus knop kan het aantal drankjes op laten lopen tot het gewenste aantal.

4. De rode knop met de min erop wil zeggen dat de bestelling nog gewist kan worden.

5. De groene knop wordt gebruikt als de ge-bruiker het aantal biertjes van 5 wilt toevoegen aan zijn/haar bestelling.

6. Wanneer de gebruiker klaar is met het bestel-len van het bier klikt hij/zij op voeg toe en de bestelling wordt toegevoegt aan het bestel formulier.

Bestelling 3

AT&TAT&T 12:34 PM12:34 PM

BierBierBackBack

BierBierHoeveel?Hoeveel?

Voeg toeVoeg toe

Groot

Middel

10 stuks

Klein

Grootte van het bier:Grootte van het bier:

Home Hoe werkt dit? Settings

1

2

4

5

3

6

Page 7: Alleen wireframes

1. Overzicht van het aantal drankjes. Hier komt men elke keer terug tot de gebruiker stap 2 in acht neemt. Bij elke nieuwe toevoeging van een bestelling wordt dit hier zichtbaar.

2. Wanneer klaar is met het selecteren van de drankjes kan men op deze knop klikken waar-na men doorgevoerd word naar betalingswijze.

Bestelling 4

AT&TAT&T 12:34 PM12:34 PM

Grolsch FixitGrolsch FixitBackBack

Home Hoe werkt dit? Settings

AlcoholAlcohol Alle drankenAlle drankenFrisdrankFrisdrank

Bier

Bacardi Cola

Mojito

Drink InformationDrink Information

BestellenBestellen

Wijn

1

2

L = 10 M= 5

R = 10 W= 5

Page 8: Alleen wireframes

1. Mocht de gebruiker toch iets vergeten zijn kan hij via de add knop nog een drankje toevoegen aan de lijst.

2. Overzicht van de dranken die de gebruiker besteld heeft.

3. De logo’s/ merken van de producten die besteld zijn.

4. het totaal bedrag wat er afgerekend moet worden. Deze is variabel, dit ligt eraan wat de persoon in stap 5 selecteerd.

5. Als de gebruiker bepaald dat hij met munten af wilt rekenen dan krijgt hij te zien hoeveel munten de bestelling is. Dit wordt ook naar de bar doorgestuurd waar hij/zij de bestelling op komt halen en daar wordt de betaling dan voldaan.

6. Bij afschrijven wordt het bedrag in euro’s ge-toond. Als men voor deze optie gaat wordt het bedrag direct van de rekening afgeschreven. Echter moet men wel eerst een code intoetsen. Klopt de code en staat er genoeg geld op de rekening dan wordt de bestelling doorgestu-urd naar de bar.

7. Waarna de betalingswijze gekozen is kan de bestelling verzonden worden via deze knop.

Bestelling 5

AT&TAT&T 12:34 PM12:34 PM

BierBierBackBack AddAdd

VerzendenVerzenden

Home Hoe werkt dit? Settings

Bier L = 10

Wijn

Fanta

Totaal:

M= 5

R = 10 W= 5

L = 1

Munten: 35 st

MuntenMunten AfschrijvenAfschrijven

1

2

4

5

3

6

7

Page 9: Alleen wireframes

1. Als de bestelling verzonden is ontvangt men automatisch een bericht met het barnummer, bestelnummer en de tijd die men heeft om de bestelling op te halen.

Bestelling 6

AT&TAT&T 12:34 PM12:34 PM

Grolsch FixitGrolsch Fixit Back Back

Home Hoe werkt dit? Settings

1

Lopende bestellingenLopende bestellingen

Lokaties barLokaties bar

Laatste bestellingLaatste bestelling

BerichtenBerichten

1

Page 10: Alleen wireframes

1. Een tabblad met een overzicht van berichten.

2. bestelgegevens, deze kunnen eventueel inge-laden worden.

3. Als de gebruiker ervoor kiest om de bestelling in te laden in bump moet hij/zij “proosten” met de telefoon tegen een apparaat van het barpersoneel en zo worden de gegevens dan overgegeven.

4. Men kan er ook voor kiezen om gewoon het bestelnummer mondeling door te geven aan de bar.

Bestelling 7

AT&TAT&T 12:34 PM12:34 PM

BerichtenBerichtenBackBack

Home Hoe werkt dit? Settings

NieuwNieuw PrullenbakPrullenbakBewaardBewaard

Bedankt voor uw bestelling.U kunt uw drankjes nu ophalen bij stand 3 vergeet niet uw 35 muntjes te betalen. Bestelnummer: 2346

Inladen in bumpInladen in bump

Mondeling doorgevenMondeling doorgeven

Sending…Sending…

1

2

4

3

Page 11: Alleen wireframes

1. Dit is een spel om nieuwe contacten te leggen. Je kan deze aanzetten en dan met de telefoon proosten bij nieuwe onbekende mensen. Dit zorgt voor leuke interactie en een speels ele-ment binnen deze applicatie.

2. Dit geeft een idee wat voor kroegspellen er zijn. Sommige spellen kun je met behulp van de telefoon spelen bijv. truth or dare of mexi-canen, maar deze functie zou ook spellen kun-nen uitleggen als een soort handleiding.

3. Proost op het onbekende. Niets is leuker dan nieuwe dingen ontdekken. Dit is een soort zoektocht met een radar en dan kan er naar een logo vaan Grolsch gezocht worden elke keer zal deze ergens anders verschijnen hier worden dan kleine dingen weggegeven als sleutelhangers enz.

4. Proost op het delen stelt de gebruiker in de gelegenheid foto’s en andere dingen direct te delen via social media als facebook twitter enz.

Op proosten

AT&TAT&T 12:34 PM12:34 PM

Op proostenOp proostenBackBack

Home Hoe werkt dit? Settings

Proost op nieuwe vriendenProost op nieuwe vrienden

Proost op spelletjesProost op spelletjes

Proost op het onbekendeProost op het onbekende

Proost op het delenProost op het delen

1

2

4

3

Page 12: Alleen wireframes

1. Een tabblad die de gebruiker in de gelegeheid stelt een selectie te maken binnen het overzicht van gemaakte vrienden.

2. Een zoekfunctie als de gebruiker naar een specifiek iemand zoekt.

3. Alfabetisch overzicht van de vrienden die gemaakt zijn via deze app.

Op vrienden 1

AT&TAT&T 12:34 PM12:34 PM

Afaina Goud

Alexandra Scheerman

Anouk Rodenburg

Alkenah Wansing

Allysa Bol

Op VriendenOp VriendenBackBack

IedereenIedereen OnlineOnlineGroepGroep

ABCDEFGHIJKLMNOPQRSTUV

Home Hoe werkt dit? Settings

1

2

3

Page 13: Alleen wireframes

1. Avatar van de gebruiker, dit kan een foto of illustratie zijn.

2. Bericht sturen naar vrienden.

3. Vriend uitnodigen om een spel te spelen.

4. Vriend uitnodigen om een biertje te komen drinken. Denk er wel om dat bij vrienden het om vrienden gaat die de gebruiker tijdens het “proosten” heeft gevonden en deze personen ook heeft gezien. Het is niet mogelijk zijn hele facebook virendenli-jst in te laden.

Op vrienden 2

AT&TAT&T 12:34 PM12:34 PM

Anouk Rodenburg

Op VriendenOp VriendenBackBack

Home Hoe werkt dit? Settings

1 2 43