Jonathan
De iPhone Alleycat applicatie
De iPhone Alleycat applicatie is gebaseerd op de traditionele Alleycat races. Deze fietsrace moet via verschillende checkpoints worden afgelegd naar de finish. De route tussen deze checkpoints mag de racer zelf bepalen. Om deze race zo goed mogelijk af te leggen is niet alleen snelheid, maar ook de creativiteit en de navigatievaardigheid van de fietser belangrijk.
Dit artikel moet een beeld vormen van mijn flow/interactie ontwerp voor de iPhone Alleycat app. Onderaan dit artikel is er een link naar een clickable mockup.
Met dank aan Sara Kolster en Maarten Wolzak.
Hoe werkt het?
Wanneer de Alleycat iPhone app wordt opgestart, zal er eerst om toestemming worden gevraagd om jouw huidige locatie te mogen bepalen. De app heeft deze namelijk nodig om een lijst te kunnen genereren van dichtstbijzijnde Alleycats en jouw locatie te bepalen op de kaart.
Nadat je hebt toegestemd met het gebruik van jouw locatie zal de app een lijst genereren met de dichtstbijzijnde Alleycats. Elke Alleycat in de lijst zal worden weergegeven met de naam van de Alleycat , het startpunt, de snelste tijd die momenteel gereden is van de desbetreffende Alleycat en de rating. Races die je al een keer hebt gereden worden weergegeven met een vlaggetje. Als je op het vlaggetje drukt kom je op jouw persoonlijke detailpagina van de desbetreffende race met jouw persoonlijke racegegevens. Onderin het scherm zijn er nog twee weergave/filter opties, namelijk “coolest”en “done races”.
Onder het “coolest” tabje staan alle best beoordeelde Alleycats (gebaseerd jouw locatie). De Alleycats kunnen worden beoordeeld door de gebruikers. Best beoordeelde Alleycats komen bovenin in de lijst te staan. De eerste drie plekken zijn gereserveerd voor de Mediamatic Alleycats. Dit zijn speciaal beoordeelde en/of ontworpen Alleycats door Mediamatic die zij graag onder de aandacht van de gebruikers willen brengen.
Onder het “Done races” tabje staan alle races die je hebt behaald. Het aantal uren, minuten en/of seconden die je te kort komt voor de snelste tijd worden tevens in deze lijst weergegeven. Als je op één van deze Alleycats drukt ga je naar jouw persoonlijke detailpagina van die race met jouw persoonlijke race gegevens.
Als je in de “near you” lijst op Alleycat1 zouden drukken komen we op dit scherm. Dit is de detailpagina van de Alleycat. Bovenin staat de snelste gereden tijd voor deze Alleycat, door wie deze is behaald en op welke datum. Daaronder staat een kaart met het startpunt, de checkpoints en het finishpunt. In het balkje “Reviews” wordt de rating weergegeven en door hoeveel mensen deze race is beoordeeld. Als je op het balkje drukt kom je in een scherm terecht waar je alle reviews van deze race kunt bekijken. Door op “Leaderboard” te drukken kom je in het leaderboard scherm. Hier staan de gedeelde tijden van de gebruikers van deze race. Als het ware dus een soort scorebord. Als je besluit dat je deze race wilt rijden druk je op “Do this race”.
Na op ”Do this race” te hebben gedrukt kom je op dit scherm terecht. Dit is een kaart met het overzicht van de race en jouw locatie(weergegeven als een blauw rondje). Om de race te beginnen moet er op de startknop worden gedrukt. Deze kan echter pas ingedrukt (geactiveerd) worden wanneer je je bij het startpunt begeeft. Je zult dus eerst naar het startpunt toe moeten fietsen.
Zodra je bij het startpunt bent wordt de startknop geactiveerd. Druk nu op start op te beginnen met de race.
Zodra je op start hebt gedrukt, telt de app vijf tellen af zodat je je gereed kunt maken voor de race.
Na het aftellen start de race en begint de tijd te lopen. Met het knopje linksonder kun je je locatie opnieuw bepalen. Onder het knopje rechtsonder zit de stopknop om de race te stoppen. Tijdens het racen is het scherm vergrendeld, je kunt dus niet zomaar terug naar het begin scherm. Je zal dan eerst op de stopknop moeten drukken.
Omdat het niet handig is om continu op het scherm van de iPhone te kijken tijdens het racen, zal er doormiddel van geluid feedback worden gegeven. Dit zal het beste werken met oordopjes. Via je oordopjes kan auditief informatie worden gegeven bijvoorbeeld over de afstand tot een checkpoint, wanneer je een checkpoint of race hebt behaald (ondersteunt met de trilfunctie).
Misschien voor versie 2?
Jouw gereden tijd opvraagbaar tijdens de race via de remote op de Iphone oordopjes, druk het knopje in en je krijgt jouw gereden tijd te horen.
Visuele weergave tijdens de race tussen jouw gereden tijd en de snelst gereden tijd.
Uitdagen van andere gebruikers.
Tijdens de race
Tijdens het rijden is het natuurlijk niet handig om de Iphone in de hand te hebben. Gelukkig zijn er een aantal Iphone houders op de markt die een alternatief bieden. Zoals de arm/pols- houders en de fietshouders .
The WristOffice Mobile Phone Holder
Bicio-GoRide-iPhone Holder
Iphone Alleycat app. scherm 10
Als je op het knopje rechtsonder drukt zal er een rode stopknop verschijnen waarmee de race gestopt kan worden. Zodra er op de stopknop wordt gedrukt zal er een popup scherm verschijnen die zal vragen of je zeker weet of je de race wilt stoppen.
Iphone Alleycat app. scherm 11
Tijdens de race zal de app jouw locatie en afgelegde route bijhouden en weergeven op de kaart. Wanneer je naar een checkpoint fietst zal deze worden afgevinkt op de kaart en staat deze geregistreerd als behaald. Onder in het scherm wordt jouw racetijd bijgehouden.
Wanneer je alle checkpoints hebt behaald en bent aangekomen bij de finish heb je de race succesvol afgerond. Er zal een pop-up verschijnen met een bevestiging en welke plaats je hebt gehaald op de leaderboard. Als je op “close” drukt sluit je de pop-up en ga je terug naar de kaart, als je op “view results” drukt ga je naar jouw persoonlijke detailpagina met jouw race gegevens. Omdat je de race succesvol hebt behaald zal deze nu in de Alleycat lijst (in het eerste scherm) met een vlaggetje worden weergegeven en vermeld worden in de “Done races” lijst.
Iphone Alleycat app. scherm 13
Dit is jouw persoonlijke detailpagina van de race die jij hebt gereden. Bovenin staat jouw behaalde racetijd en de datum wanneer deze race is gereden. Daaronder staat een kaart met een overzicht van jouw gereden route. Onder het balkje “Review” kun je een review schrijven voor deze Alleycat. Onder het balkje “View leaderboard & share score” Kun je jouw gereden tijd vergelijken met andere gebruikers op de leaderboard die deze race hebben behaald. Tevens kun je ervoor kiezen om jouw gereden tijd te gaan delen. Jouw gedeelde racetijd zal dan zichtbaar zijn voor de andere gebruikers op de leaderboard (zowel in de app als op de Mediamatic website). Als je een Mediamatic profiel hebt kunnen jouw race gegevens en reviews ook op jouw persoonlijk Mediamatic profiel worden weergegeven.
Iphone Alleycat app. scherm 14
Het geven van een review en rating. Het rating systeem bestaat uit het geven van sterren. Vijf sterren als hoogste beoordeling, geen sterren als laagste. Door over de sterren te sweepen kun je het gewenste aantal sterren opgeven.
Iphone Alleycat app. scherm 15
Als je op het balkje “View leaderboard & share score” in jouw persoonlijke detailpagina drukt kom je in dit scherm terecht. Hier kun je jouw score vergelijken met andere gebruikers en deze delen. Jouw tijd wordt onder in het scherm weergegeven. Op deze manier kun je door de leaderboard navigeren en jouw tijd makkelijk vergelijken met de andere gebruikers omdat deze immers in beeld blijft. In dit geval heb je de tiende plek behaald, wanneer je naar beneden zou scrollen in de leaderboard zou dit betekenen dat op de tiende plek jouw racetijd zou moeten staan. Wanneer jouw plek zichtbaar is in de leaderboard zal de balk met jouw tijd onder in het scherm verdwijnen (de balk zal met een animatie effect de leaderboard in worden geplaatst). Op deze manier wordt niet tweemaal dezelfde informatie weergegeven in hetzelfde scherm. Zodra je weer verder gaat scrollen en jouw tijd niet meer zichtbaar is in de leaderboard zal de balk onder in het scherm weer terugkomen. Om jouw racetijd te delen druk je op de balk onder in het scherm.
Iphone Alleycat app. scherm 16
Als je hebt besloten jouw racetijd te gaan delen kom je in dit scherm terecht. Er zijn twee opties om te delen. Via jouw Mediamatic log-in (voor gebruikers met een Mediamatic account) of via een nickname. Als je een Mediamatic account hebt en kiest voor de Mediamatic log-in zullen jouw racegegevens gekoppeld worden aan jouw online Mediamatic profiel. De app zal tevens jouw Mediamatic log-in gegevens locaal opslaan zodat je de volgende keer niet nogmaals hoeft in te loggen.
Iphone Alleycat app. scherm 17
Als je ervoor kiest om met jouw Mediamatic log-in te gaan delen moet je in dit scherm jouw log-in gegevens invoeren. Mocht je je log-in gegevens zijn vergeten kun je op “Lost your password?”drukken. Je krijgt dan een scherm waar je jouw e-mailadres moet invoeren zodat jouw log-in gegevens daarheen kunnen worden gestuurd.
Iphone Alleycat app. scherm 18
Lost your password?
Iphone Alleycat app. scherm 19
Nadat de gegevens zijn ontvangen per e-mail kunnen deze hier worden ingevoerd.
Iphone Alleycat app. scherm 20
Als je ervoor kiest om met een nickname te delen kun je deze hier invoeren.
Iphone Alleycat app. scherm 21
Bij het succesvol delen via de Mediamatic log-in zal jouw racetijd worden weergegeven in de leaderboard met jouw Mediamatic profielnaam en foto in de vorm van een avatar. Tevens zijn jouw racegegevens nu gekoppeld aan jouw Mediamatic profiel. Met het tabje “ All/You”onder in het scherm kun je filteren op de gedeelde racetijden van jouw en andere gebruikers of alleen jouw racetijden.
Iphone Alleycat app. scherm 22
Bij het succesvol delen via een nickname zal jouw racetijd worden weergegeven met de jouw ingevoerde nickname en een anonieme avatar.
Bekijk mockup
Bijdragen
Emina
ArjanReacties
Sara