Wireframes. I-phone App. Chantal Aafjes CMD2b. Chantal Aafjes CMD 2 b Interaction Design Opdracht 2

Transcriptie

1 Wireframes I-phone App Chantal Aafjes CMD2b

2 Inhoudsopgave Opdracht Conclusie Paper prototyping Schetsen Wireframes Pag. 3 Pag. 4 Pag. 5 Pag. 2

3 Opdracht Stel dat Grolsch zou willen dat je via een app alvast drinken kan bestellen en dat je niet in de rij hoeft te staan om iets door te geven. Er is meer dan alleen bier te bestellen, ook frisdranken, wijn, mix-drankjes als Baco en Mochito etc. (verder wordt er geen sterke drank geschonken op lowlands). Je moet je inloggen en vervolgens zo efficiënt mogelijk een keuze maken en dan bestellen. We houden even geen rekening met veiligheid of hoe er betaald moet worden. Ook cybervandalisme (bestellen voor iemand anders, niet komen ophalen etc) hoeft geen rekening mee gehouden te worden. 3

4 Conclusie Paper Prototyping Na het testen van mijn Paper prototype kwam ik tot de conclusie dat er een aantal dingen anders moesten. Zo zaten er kleine foutjes in als selectieknoppen die radio buttons moesten zijn. Zo werd ook bijv. nergens aangegeven waar je je drankjes op kon halen en/of hoe je het precies op moets halen. Ik heb later ook nog feedback gevraagd op mijn eerste versie wireframes die ik in had geleverd. De feedback was als volgt: - Je gebruikt teveel overlays over je schermen. Probeer je flow beter te verwerken in volledige pagina s. Hoe minder ruimte je voor bepaalde interactie gebruikt hoe onduidelijker het wordt. - Het beheren en toevoegen van vrienden heeft in jouw uitwerking weinig te maken met het bestellen van je drankjes. Laat dit voor wat het is of ontwerp schermen waarin het duidelijk wordt hoe dit in verbinding met elkaar staat. - Hoe kan ik zien waar ik mijn bestelling kan afhalen? Moet ik aan de kassa nog iets laten zien, etc? - Gebruik in het vervolg een ander programma om wireframes te maken. Of kies een andere stijl. Het leest niet lekker en het niet de gebruikelijke manier waarop je wireframes opzet en verkoopt. (office Visio, photoshop, Axure, etc) Ik heb nog eens goed naar mijn wireframes gekeken en de feedback ernaast gelegd en heb geprobeert de feedback zoveel mogelijk te verwerken in mijn wireframes. Ik heb echter het punt van de vrienden gelaten voor wat het was en niet direct uitgewerkt omdat ik nog eens goed moet bedenken wat ik met deze pagina allemaal kan. Ik heb al mijn wireframes opnieuw gemaakt. Dit omdat ik het nu wel meteen goed wilde doen. Omdat ik aan een redesign begon, heb ik ook nog eens duidelijker naar mijn wireframes gekeken en zeker de bestellingpagina zo breed mogelijk uitgewerkt. Ik heb ook gekeken of ik eventueel speel elementen in de applicatie kon gaan verwerken. Dit is ook gebeurd uitwerking is nog niet daar waar ik het hebben wilde maar het idee kan duidelijk en helder mschreven worden. 4

5 Schetsen Voordat ik aan mijn nieuwe wireframes begon ben ik gaan kijken welke elementen beter uitgewerkt konden worden uit versie. Ik heb ernaar gekeken en ben toen een beetje grofweg wat schetsen gaan maken als houvast. 5

6 Schetsen 6

7 Schetsen 7

8 Schetsen 8

9 Schetsen 9

10 Schetsen 0

11 Wireframes

12 Inlogscherm 2 Cancel Username Wachtwoord Remember Login 5 2:34 PM Login ON Create Q W E R T Y U I O A S D F G H J K 4 3 L P. 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 kunnen worden. 4. Met de schuifknop kan de gebruiker bepalen 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 verdwijnt het toetsenbord en wordt er ingelogd. Z X C V B N /.com Go 6 2

13 Aanmeldscherm Back 2:34 PM. 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 . Dit geldt echter niet voor password. Username Password Confirm password Bankgegevens Account aanmaken * Heb je al een Grolsch account? Sign In Bankgegevens worden gevraagd omdat er met deze applicatie betaald kan worden via de eigen bankrekening. Wanneer deze gegevens ingevoerd worden, worden er een aantal dingen gevraagd en nagekeken. Wanneer de gegevens kloppen krijgt de gebruiker 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 username 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 button 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. 3

14 Hoofdmenu Logout 2:34 PM 2. 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. Op Bestellen 3 Op Proosten 4 5. Op vrienden is een overzicht van vrienden die je gemaakt het tijdens een spel in het op proosten 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. Op Vrienden 5 Op Overzicht 6 7. Een pagina die je terug voert naar home, hoe werkt het is een functie die laat zien hoe je bepaalde functies moet uitvoeren mocht dit nog niet duidelijk zijn, Settings je account aanpassen en gegevens toevoegen en/of verwijderen uit je profiel. Home Hoe werkt dit? Settings 7 4

15 Bestelling 2:34 PM. De knop om terug te gaan naar het hoofdmenu. Back 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 bepaalde bar of dat de applicatie altijd de dichtsbijzijnde bar moet vinden en daar de bestelling naartoe mot sturen. Bestellingen Lokaties bar Lokaties bar Laatste bestelling Laatste bestelling Berichten 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 barnummer door via de brichten. Home Hoe werkt dit? Settings 5

16 Bestelling 2 Back 2:34 PM. Een tabfunctie die de gebruiker een mogelijkheid tot overzicht geeft. Zo kan er alleen alcohol of frisdrank geselecteerd worden maar het is ook mogenlijk om een overzicht van alle dranken die geschonken worden te krijgen. Alcohol Drink Information Bier Frisdrank 2 Alle dranken Alle dranken 2. De dranken die geschonken worden op het terrein. Door er op te drukken kan de gebruiker zijn/haar drank selecteren en wordt hij/zij doorgestuurd naar bestelpagina van de geselecteerde drank. 3. Wanneer de persoon klaar is met het selecteren van de dranken kan er op bestellen geklikt worden en wordt de gebruiker naar een overzicht gebracht waarna hij/zij een betalingskeuze kan selecteren. Bacardi Cola Mojito Wijn Bestellen 3 Home Hoe werkt dit? Settings 6

17 Bestelling 3 Back Bier Hoeveel? 2:34 PM Bier. 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. 4 2 Grootte van het bier: Groot 0 stuks 3 5. De groene knop wordt gebruikt als de gebruiker het aantal biertjes van 5 wilt toevoegen aan zijn/haar bestelling. 6. Wanneer de gebruiker klaar is met het bestellen van het bier klikt hij/zij op voeg toe en de bestelling wordt toegevoegt aan het bestel formulier. 5 Middel Klein Voeg toe Voeg toe 6 Home Hoe werkt dit? Settings 7

18 Bestelling 4 Back 2:34 PM. 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 waarna men doorgevoerd word naar betalingswijze. Alcohol Frisdrank Alle dranken Alle dranken Drink Information Bier Bacardi Cola Mojito Wijn L = 0 M= 5 R = 0 W= 5 Bestellen 2 Home Hoe werkt dit? Settings 8

19 Bestelling 5 Back 2:34 PM Bier Add. 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 Bier Wijn Fanta Totaal: Munten 5 L = 0 M= 5 R = 0 W= 5 L = 2 Munten: 35 st Afschrijven 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 getoond. 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 doorgestuurd naar de bar. Verzenden 7 7. Waarna de betalingswijze gekozen is kan de bestelling verzonden worden via deze knop. Home Hoe werkt dit? Settings 9

20 Bestelling 6 Back 2:34 PM. 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. Lopende bestellingen Lopende bestellingen Lokaties bar Lokaties bar Laatste bestelling Laatste bestelling Berichten Home Hoe werkt dit? Settings 20

21 Bestelling 7 Back Nieuw 2:34 PM Berichten Bewaard Prullenbak. Een tabblad met een overzicht van berichten. 2. bestelgegevens, deze kunnen eventueel ingeladen 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. Bedankt voor uw bestelling. U kunt uw drankjes nu ophalen bij stand 3 vergeet niet uw 35 muntjes te betalen. Bestelnummer: Men kan er ook voor kiezen om gewoon het bestelnummer mondeling door te geven aan de bar. Sending Inladen in bump Inladen in bump Mondeling doorgeven Mondeling doorgeven 3 4 Home Hoe werkt dit? Settings 2

22 Op proosten Back 2:34 PM Op proosten Op proosten. 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 element binnen deze applicatie. Proost op nieuwe vrienden Proost op nieuwe vrienden Proost op spelletjes Proost op spelletjes Proost op het onbekende Proost op het onbekende Proost op het delen Proost op het delen Dit geeft een idee wat voor kroegspellen er zijn. Sommige spellen kun je met behulp van de telefoon spelen bijv. truth or dare of mexicanen, maar deze functie zou ook spellen kunnen 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. Home Hoe werkt dit? Settings 22

23 Op vrienden Back Iedereen 2:34 PM Op Vrienden Op Vrienden Groep Online. 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. 2 Afaina Goud Alexandra Scheerman Anouk Rodenburg Alkenah Wansing Allysa Bol 3 A B C D E F G H I J K L M N O P Q R S T U V Home Hoe werkt dit? Settings 23

24 Op vrienden 2 Back 2:34 PM Op Vrienden Op Vrienden Anouk Rodenburg. 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 virendenlijst in te laden. Home Hoe werkt dit? Settings 24