Proxi-Matey. Wireframes. Mike Broere CMD4A

Transcriptie

1 Proxi-Matey Wireframes Mike Broere CMD4A

2 Wireframe 1: Algemene Wireframe Dit wireframe duidt elementen aan die in meerdere wireframes terugkomen. Hieronder vallen onder andere de elementen in de action bar en de elementen die er door het operating system (in dit geval Android) worden toegevoegd Dit is de notificatiebalk van Android. Deze kan naar beneden worden getrokken om notificaties te openen of om toegang te verkrijgen tot de algemene instellingen van het toestel.. Hier komt het logo van de applicatie, welke nu nog niet definitief is. Door op het logo te drukken belandt de gebruiker op de startpagina. 3. Hier staat in het klein de profielfoto van de gebruiker die momenteel is ingelogd. Door op de foto te drukken, komt de gebruiker op zijn/haar profielpagina terecht. 4. Hiermee komt de gebruiker bij de opties terecht. 5. Dit is een menu met overige opties. Hieronder valt onder andere het gedeelte over de app en een shortcut naar de Play Store om een recensie achter te laten. 6. Dit zijn standaard Android on-screen softkeys, welke standaard onder elke applicatie horen te staan. Van links naar rechts zijn de knoppen vorige, home en task switcher.

3 1 Wireframe : Welkomstscherm Dit scherm is het eerste scherm wat de gebruiker van de app zal zien. 1. Dit is het logo van Proxi-Matey. Door op deze knop te drukken, kan de gebruiker direct inloggen in de app. 3. Met deze knop kan de gebruiker beginnen met het aanmaken van een Proxi-Matey profiel. 3

4 Wireframe 3: Profiel aanmaken 1 Als de gebruiker bij wireframe aangeeft nog geen profiel te hebben, komt hij/zij hier terecht. Hier kunnen zij een eenvoudig profiel opzetten met een naam, profielfoto en adres Door op deze plus te drukken, komt er een pop-up naar voren waarin de gebruiker een profielfoto kan kiezen en bijsnijden.. In dit tekstveld dient de gebruiker zijn/haar naam in te voeren. Het toetsenbord komt tevoorschijn wanneer de gebruiker het tekstveld indrukt. 3. In dit tekstveld dient de gebruiker zijn/haar adres in te voeren. Het toetsenbord komt tevoorschijn wanneer de gebruiker het tekstveld indrukt. 4. Met deze knop kan de gebruiker het profiel registreren. Pas wanneer alle velden zijn ingevuld, wordt deze knop klikbaar. 4

5 1 Wireframe 4: Fotokiezer Hier kiest de gebruiker zijn/haar profielfoto Door op het kruisje te drukken, sluit de gebruiker het dialoogvenster.. Dit dient als een knop waarmee de gebruiker een foto kan maken. 3. Met deze knop kan de gebruiker een afbeelding kiezen van lokale- of cloudopslag.

6 Wireframe 5: Foto bijsnijden Hier snijdt de gebruiker de gekozen foto bij om in de cirkel te passen De gebruiker kan de gekozen foto in-en uitzoomen. Ook kan hij/zij met veegbewegingen de foto verplaatsen. Alleen het gedeelte in de cirkel wordt uiteindelijk zichtbaar op het profiel.. Met deze knop bevestigt de gebruiker de bewerking en wordt de huidige foto ingesteld. 3. Met deze knop kan de gebruiker een stap terug om een andere foto uit te kiezen.

7 1 Wireframe 6: Voorbeeld ingevuld profiel Zo ziet het profiel er uit wanneer alle gegevens correct zijn ingevuld. 1. De gebruiker kan de foto nog wijzigen door op de huidige gekozen foto te drukken. Dan begint het proces van het kiezen van een foto opnieuw.. De knop is nu actief en kan worden ingedrukt om het profiel te registreren.

8 Wireframe 7: Registreren/Aanmelden succesvol Als de gebruiker succesvol is ingelogd, komt deze hier terecht De gebruiker kan een tour volgen, waarin de diverse aspecten van de app worden toegelicht.. De gebruiker kan met deze knop direct naar het startscherm.

9 1 Wireframe 8: Startscherm Het startscherm draait puur om de zoekknop, waarmee de gebruiker zijn speler kan vinden om te beginnen met gamen. 1. Hier staat hoeveel gebruikers momenteel actief zijn in de stad waarin de gebruiker zich bevindt.. Met deze zoekknop kan de gebruiker een persoon in de directe omgeving opzoeken om mee te gamen.

10 Wireframe 9: Zoekscherm Dit scherm krijgt de gebruiker te zien wanneer de app op zoek is naar andere spelers Met deze knop kan de gebruiker het zoeken afbreken. Dan belandt hij/zij weer terug bij het startscherm.. Dit zijn kleine feitjes die de gebruiker tijdens het wachten kan lezen.

11 1 Wireframe 10: Speler gevonden 3 4 Als het zoeken succesvol tot een einde is gebracht, maakt de gebruiker hier kennis met de tegenstander. 1. Dit is de profielfoto van de tegenstander.. Dit zijn de gegevens van de tegenstander. De naam, het aantal keer gespeeld en het aantal keer gewonnen staan hier. 3. Met deze knop bevestigt de gebruiker dat hij met deze tegenstander wil spelen. 4. Met deze knop begint de app opnieuw met zoeken.

12 1 Wireframe 11: Spelspinner Hier wordt er willekeurig een spel uitgekozen wat de gebruiker met zijn tegenstander zal spelen. 1. Dit zijn iconen/previews van spellen; in dit scherm rouleren de spellen snel als een carroussel.. De namen van de spellen rouleren synchroon met de iconen/ previews.

13 Wireframe 1: Spel gekozen 1 Het spel is willekeurig geselecteerd. Hier krijgt de gebruiker te zien welk spel het is en indien nodig snel informatie opvragen Dit is een icoon/preview van het gekozen spel.. Dit is de titel van het gekozen spel. Ook de verantwoordelijke developer wordt hier getoond. 3. Met deze knop kan de gebruiker een pop-up venster tevoorschijn halen om informatie te winnen over het spel. 4. Dit is de timer. Deze telt af vanaf dertig seconden. 5. Door op deze knop te drukken, geeft de gebruiker aan te willen beginnen. Als beide spelers deze knop hebben ingedrukt op hun toestel, springt de timer direct terug naar 3.

14 1 Wireframe 13: Spel Info Door op het vraagtekentje in wireframe 1 te drukken, opent de gebruiker dit pop-upvenster Door op het kruisje te drukken, sluit de gebruiker het venster.. De titel en een globale uitleg van het spel staan hier. 3. Hier staan spelinstructies.

15 1 Wireframe 14: Na het spel Na het spel krijgt de gebruiker dit scherm te zien Afhankelijk van winst of verlies staat hier gefeliciteerd! of jammer!. Dit is de profielfoto van de tegenstander. 3. Met deze knop kan de gebruiker een kort berichtje sturen naar de tegenstander. Er is een klein arsenaal aan korte berichtjes die de gebruiker kan toepassen; zelf typen hoeft dus niet. Het berichtje verschijnt naast de profielfoto op het scherm van de tegenstander. 4. Met deze knop begint een zoektocht naar een nieuwe tegenstander. 5. Met deze knop keert de gebruiker terug naar het startscherm.

16 Wireframe 15: Instellingen Dit scherm is bereikbaar met het tandwiel in de action bar. 1. Bluetooth kan hier aan of uit worden gezet. BlueTooth moet aanstaan, omdat de app anders niet de directe omgeving kan afspeuren. Standaard staat BlueTooth uit.. Door op dit deel te drukken, opent een standaard Android pop-up met daarop drie opties: 3 meter, 5 meter en 7 meter. 5 Meter is hier standaard. 3. Door dit aan te vinken geeft de gebruiker aan niet meerdere keer tegen dezelfde tegenstander te willen spelen. Staat standaard aan. 4. De gebruiker kan hier de tekstgrootte bepalen. Opties zijn klein, normaal, groot en extra groot. Normaal is hier standaard.