Casus 1 ‘ iQueen app’ | Principles and designframeworks In dit bestand vind je de individuele opdrachten van David Hutten en de complete documentatie rondom casus 1. Deze opdrachten is gemaakt door: David Hutten & Dave van Hoorn
In opdracht van Hans Kemp Utrecht, September 2012
Deelopdracht 1 | Herkenning (mobile) Patterns Door: David Hutten
Tekst Clear Button Goed toegepast: hierdoor kun je makkelijker een nieuwe zoek opdracht intoetsen zonder het letter voor letter weg te hoeven halen.
9292OV
Loading Indicator
De app die ik gekozen heb om te analyseren binnen deze opdracht is 9292OV. Omdat dit een applicatie is die meer functies heeft dan op het eerste oog opvalt.
Goed toegepast: Hierdoor heb je het gevoel dat de app bezig is met het laden van je reisopties en dergelijke. Hierdoor lijken de wachttijden minder lang
Bottom Navigation Goed toegepast: Omdat de bovenkant van het scherm de belangrijkste informatie moet bevatten. Onderin is een geschikte ruimte voor navigatie omdat deze hier makkelijk aan te klikken zijn.
Richly Connected Apps Goed toegepast: Bij de opties Feedback en Bel wordt je meteen doorgeschakelt naar je mail of je telefoon app. Maakt tevens ook gebruik van google maps en navigatie om locaties aan te geven.
Thumbnail and Text List Redelijk toegepast: Ze hebben deze onder het kopje ‘meer’ toegevoegd. Met de pictogram zie je een beter onderscheid tussen de opties en dit navigeert makkelijker. Ze hadden misschien voor nog meer verheldering ook nog kleur kunnen geven.
Streamlined Branding Generous Borders Goed toegepast: het touch gedeelte van de knoppen zijn hierdoor groot genoeg om makkelijk te kunnen navigeren met je vingers
2012
Opdrachten en cases voor ‘Principles & designframeworks
Goed toegpast: Door Het gebruik van het logo en de kleuren heeft het de zelfde look en feel als de site. Het past dus binnen de huisstijl.
3
Data Tips Goed toegepast hierdoor weet je meteen welke halte het is en kun je ook meteen zien welke bussen daar langs komen.
Deelopdracht 2 | Concept schetsen ‘iQueen app’ Door: David Hutten
Inleiding Fill in the Blanks Goed toegepast: Door ‘van’ en ‘naar’ voor de invul velden te zetten is het duidelijk wat er moet komen in de vakken.
Auto completion Goed toegepast: als je zoekt naar een gewenste reis locatie geeft de app daaronder aan welke straten of stations het kunnen zijn. Hierdoor hoef je niet alles onnodig in te tikken.
Aan de hand van de opdracht en het bijgeleverde onderzoek ben ik met de volgende concepten gekomen.
Concept 1: Navigatie systeem Doel De app moet helpen bij het navigeren in de drukte en het duidelijk maken waar wat er te doen is. Zonder hierbij gebruik te hoeven maken van het mobiele netwerk
Werking Het werkt als volgt. In de app zal een kaart zitten waar alle podia en evenementen worden aangegeven. Hierop zal tevens aangegeven zijn waar jij bent, doormiddel van navigatie op je telefoon. Wat zijn de main features: Bij elk podia of evenement kun je het programma vinden. Je kunt de artiesten en activiteiten waar je heen wil opslaan in je agenda. Doormiddel van de navigatie vind je altijd de weg (ook om de drukte te omzeilen.) Aan de hand van een lijst van korte vragen of het nachecken van je iTunes kan er een voorstel gedaan worden voor podia en artiesten. Vind gemakkelijk de dichtstbijzijnde wc’s cafe’s, ehbo- posten enz. Aanduiding waar de verwachten hotspots zijn en waar de meeste drukte wordt ver wacht.
Benodigdheden Smartphone met navigatie Internet om de app te downloaden. Daarna niet meer nodig wat er voor zorgt dat het beter werkt in de drukte.
2012
Opdrachten en cases voor ‘Principles & designframeworks
5
Concept 2: Sociale indicator Doel Doormiddel van social media en deze app De leukste locaties vinden voor jou persoonlijk.
Werking Met deze app blijf je in contact met je vrienden doormiddel van social media. Het zorgt ervoor dat ja altijd up-to-date bent en binnen no-time weet waar je vrienden zijn en waar de leukste feesten zijn. Wat zijn de main features: Je kunt met deze app je Koninginnedag ervaring delen met je vrienden. Deel je foto’s, locatie en waardeer de sfeer en drukte bij verscheidene locaties. Volg de live webcams om te zien hoe het is op elke belangrijke locatie. Blijf de gehele dag up to date wat de mensen zelf oordelen over artiesten, de drukte op een locatie en de sfeer op een locatie. Link je facebook account om makkelijker je vrienden te kunnen volgen in hun Koninginnedag ervaring
Benodigdheden Smartphone met internet connectie Facebook account
Concept 3: Planner Doel Kijk van te voren wat er allemaal te doen is op Koninginnedag en stel je eigen schema vast. Werking Doormiddel van een schema per locatie kun je je eigen schema vast leggen.
Wat zijn de main features: Kies naar welke optredens je wilt en hoe lang Zet ze met een simpele druk op de knop in je agenda De app geeft zelf aan hoe je het makkelijkst van locatie naar locatie kunt reizen. Selecteer de bands aan de hand van muziekstijl, podium of tijden De agenda laat automatisch weten wanneer het tijd is om naar het volgende podia te lopen om daar op tijd aan te komen.
Benodigdheden Smartphone Internet om de app te downloaden. Daarna niet meer nodig wat er voor zorgt dat het beter werkt in de drukte.
2012
Opdrachten en cases voor ‘Principles & designframeworks
Deelopdracht 3 | Wireframes iQueen Door: David Hutten & Dave van Hoorn Inleiding
Deze opdracht heb ik in samen werking gedaan met Dave van Hoorn. Het concept waar we voor gekozen hebben om mee verder te gaan is een variatie op concept een & twee van mij geworden en een concept van hem.
Concept: iQueen app Doel De app heeft als doelgroep koninginnedag bezoekers die niet van te voren willen plannen waar ze naar toe gaan. Maar juist op het moment willen beslissen waar het leukste feestje is. Dit doen we door middel van de volgende opties: live feed, nu&straks, in de buurt, kaart. Met deze optie kun je in een oogwenk bepalen waar je naar toe wilt of waar bepaalde voorzieningen zijn te vinden in jouw omgevingen. Werking Kaart zal de mainfeature van de app zijn. Hier kun je zien waar jij je op het moment bevindt en waar de stages zijn. Als je op een van de stages klikt, dan krijg je een klein overzicht met nu&straks, livefeed en navigeer naar.
Bij Nu&Straks kun je een lijst zien van de podia en wat de drie aankomende acts zijn. Zo kun je makkelijk zien waar de artiesten spelen die jij leuk vindt.
Live feed is de optie om te beoordelen hoe de locatie is waar je op het moment bent, maar ook kun je zien wat andere van de andere locaties vinden. Het zal beoordeeld worden aan de hand van de artiest, de sfeer en de drukte In de buurt zal een scala aan voorzieningen bevatten, zoals wc, cafetaria en dergelijke. Dan krijg je op de kaart een overzicht waar de dichstbij zijnde zijn. ~En kun je hier gemakkelijk naar toe navigeren.
Benodigdheden Smartphone met navigatie Internet om de app te downloaden. (Daarna alleen nog maar nodig voor de livefeed, dus de belangrijkste opties zullen geen behoefte hebben aan internet wat door drukte misschien niet aanwezig is.)
7
iQueen app
Kaart
Nu & straks
Live feed
In de buurt
Sitemap iQueen app Info pop up
navigeer naar
Legenda
Stage info
Lijst podia info
3FM stage
Terug
Qmusic stage Enz.
In de buurt
Live feed
lijst podia Slider score
navigatie op kaart
navigeer naar
Stage info
Nu & Straks
kaart
Op de pagina hiernaast vind je de sitemap van de iQueen app. Omdat de app aangestuurd wordt door bottom navigation zit bij elke onderdeel van de applicatie de mogelijkheid om ergens anders naartoe te navigeren.
Artiesten info Live feed
Keuze stage voor score
Info stage
zo vind ik het hier
Wc’s
kaart met relevante iconen
Vrienden
pop up info
Cafetaria
navigeer naar
Kaart navigatie
Enz.
2012
Opdrachten en cases voor ‘Principles & designframeworks
9
Wireframes ‘iQueen app’ Kaart 1. Legenda Door op het vraagteken te drukken komt er een legenda te voorschijn. dit zorgt ervoor dat de kaart verduidelijkt wordt als het in eerste opzicht voor de gebruiker nog niet duidelijk was.
2. Kaart Uit onderzoek is gebleken dat navigatie door de menigte en de stad een van de knelpunten was, Dus door middel van een overzichtelijke kaart met de bezoekers eigen locatie erop kan hij makkelijk vinden waar hij is en waar hij heen wilt. Door verschillend vormgegeven pinpoint kun je makkelijke zien waar de belangrijkste stages, parken en andere evenementen zijn. 3. Menu-item ‘Kaart’ Dit scherm is the zien zodra je de button ‘Kaart’ selecteert.
Kaart & Info 1. Kaart Uit onderzoek is gebleken dat navigatie door de menigte en de stad een van de knelpunten was, Dus door middel van een overzichtelijke kaart met de bezoekers eigen locatie erop kan hij makkelijk vinden waar hij is en waar hij heen wilt.
2. Info pop-up Om makkelijk te kunnen navigeren naar de volgende stage kan de bezoeker in de app de pinpoints van de stages aan klikken om de belangrijkste informatie van deze stage te zien. Hier heb je ook de optie om door te gaan naar het info scherm van deze stage of je hier heen te laten navigeren. Het pattern wat je hier voor gebruikt is ‘Data tips’ Dit pattern maakt het makkelijk om informatie over je pinpoints te krijgen. 3. Menu-item ‘Kaart’ Dit scherm is the zien zodra je de button ‘Kaart’ selecteert.
2012
Opdrachten en cases voor ‘Principles & designframeworks
Wireframes ‘iQueen app’ Nu & Straks 1. Agenda voor nu en straks / Thumbnails en text Onderzoek wees uit dat veel mensen pas uitzoeken waar ze naar toe willen als ze al in Amsterdam zijn. Hierdoor hebben we gekozen voor een overzichtelijke lijst van podia en welke artiesten daar nu en straks spelen, zodat je snel kunt kiezen wat voor jou de beste locatie is.
2. Nu & straks schema stage. De bezoeker ziet hier een lijst van de eerste drie acts per podium. Hierdoor heb je een goed idee van wat er te zien is de aankomende 2 a 3 uur. Dit zorgt ervoor dat je altijd genoeg van te voren weet wat er komen gaat. Als je op de pijl drukt dan zul je verder gaan naar de informatie pagina van de stage. Hier kun je het hele schema zien of zeggen dat je hierheen wil navigeren. 3. Menu-item ‘Nu & Straks’ Dit scherm is the zien zodra je de button ‘Nu & Straks’ selecteert. In de menu balk wordt gebruik gemaakt van het patroon ‘Bottom Navigation’. Dit zorgt ervoor dat je makkelijk en snel kunt navigeren door de verschillende functies van de applicatie en meer ruimte hebt aan de bovenkant voor belangrijke informatie.
Info screen 1. Info over stage Als de bezoeker op de informatie knop van de stage drukt dan krijgen ze dit scherm te zien waar je de rating, omschrijving en het schema van een stage kan zien. 2. Navigatie en Rating button Om de stappen zo kort mogelijk te houden hebben we hier twee knopen met een ‘ Generous border’ geplaats zodat, zodra de bezoeker weet wat er te doen is hij ook meteen kan navigeren naar de stage of zijn menig kan geven over de line-up.
3. Line-up hier kan de bezoeker de complete line-up van een stage vinden en makkelijk door de ‘Infinite List’ bestaande uit ‘ Thumbnail & Text’ scrollen om te zien welke artiesten er zullen komen.
11
Wireframes ‘iQueen app’
Wireframes ‘iQueen app’
Live Feedback 1. Statistieken invoeren Uit onderzoek is gebleken dat bezoekers van Koninginnedag willen weten hoe het op andere stages / podia / festivals in de buurt is. Om deze bezoekers tegemoet te komen d.m.v. de app worden er live statistieken weergegeven. Deze statistieken vullen de bezoekers zelf in door in de drie sliders weer te geven wat ze van de Muziek, Sfeer en Drukte vinden. Terwijl ze de slider bewegen zal het cijfer real-time veranderen zodat ze makkelijker kunnen zien hoe ze het thema waarderen. 2. Royale beoordeel / submit button Deze button springt de gebruikers direct in het oog. Herkenbare patronen zijn ‘Generous Borders’ en ‘Prominent Done Button’. het laatste patroon zorgt voor herkenbaarheid en duidelijkheid; hiermee is het invullen van de data klaar en de actie beëindigd. 3. Meer stages, shows en parken: infinite list De bezoeker moet de mogelijkheid hebben alle (grotere) party’s van Amsterdam te checken. Dit wordt gedaan door de patronen ‘Infinite List’ en ‘Thumbnail-and-List’ te combineren. Gebruikers kunnen eindeloos doorscrollen en voor zichzelf bepalen wat het leukste feest is door te mini-statistieken bij 3B te checken. Door op de Arrow bij 3C te drukken 4. Menu-item ‘Live Feed’ Dit scherm is the zien zodra je de button ‘Live Feed’ selecteert.
Kaart voorzieningen 1. Geeft huidige locatie aan Op de kaart wordt je huidige locatie aangegeven doormiddel van een indicator zoals bekent uit andere navigatie systemen. 2. Geeft voorziening locatie aan Op de kaart laten iconen zien waar de dichtstbijzijnde geselecteerde voorzieningen te vinden zijn. In dit geval zijn dat je vrienden uit de omgeving die ook gebruik maken van de applicatie. 3. Pop-up scherm Als je het gewenste doel selecteert geeft de pop-up extra informatie over de bestemming en een navigatie optie doormiddel van een knop.
Navigatie In de navigatie pagina wordt er op de kaart getoond hoe je moet lopen om bij de aangegeven locatie aan te komen. Dit is in de vorm van een simpele lijn die de kortste route aangeeft hoe je moet lopen.
Voorzieningen
1. Verschillende diensten dichtbij de user De bezoeker kan het menu-item ‘In de buurt’ selecteren om diensten te zoeken die zich dicht bij hem of haar bevinden. Het menu is ingedeeld in een aantal belangrijke (zie onderzoek) subcategorieën zoals Fastfood (McDonalds), Drank (Bier) en pinautomaten. Ook het vinden van vrienden kwam bij sommige geïnterviewden naar voren, dit kan in de ‘vriendenzoeker’. Het patroon wat wordt gebruikt voor de icons kan het ‘Grid of Equals’ zijn. Voordeel van dit patroon is dat je aan de gebruiker laat zien dat er meerdere (gelijkwaardige) opties zijn om uit te kiezen. 2012
Opdrachten en cases voor ‘Principles & designframeworks
13
