IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 1 Appnaam: Iking Brainstorm Na de briefing van de opdracht zijn we begonnen met een brainstormsessie waarbij we met drie personen hebben nagedacht over de functies van de Iking App. Waar zou men behoefte aan hebben? Daaruit ontstond er een lijst met meerdere ideeĂŤn en functies zoals: - - - - - - - - - - - -
Een plattegrond van Amsterdam met GPS functie Tickets kopen voor feesten Route beschrijving van A naar B Openbaar vervoer informatie (kaartje kopen) Alcohol verkoop plekken Soorten muziek en plaats. Welke wegen zijn dicht Drukte meter door middel van kleur Voorkeuren aangeven qua muziek WC spots Wifi spots Delen van foto’s en ervaringen
Maar is het mogelijk om die functies in een App te proppen? Misschien wel helemaal niet. We hebben namelijk na deze brainstorm een selectie gemaakt wat te gebruiken. Na deze selectie zijn we verder gegaan met schetsen.
Ontwikkeling: Bart van den Brink Feike Mijwaart Klas: UXD01
IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 2 Appnaam: Iking Schetsen Na de brainstorm zijn we individueel aan de slag gegaan met het schetsen van de App. Even de ideeÍn los van elkaar laten gaan en kijken of je tot nieuwe inzichten komt door los van elkaar te tekenen. Op deze twee pagina’s hebben we een aantal van de wireframe schetsen verzameld en weergegeven. Op basis van deze schetsen hebben we de uiteindelijke witeframes gemaakt. 1 ding was direct duidelijk. De App bevat een kaart!
IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 3 Appnaam: Iking Schetsen
IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 4 Appnaam: Iking Scenario: 1 Openen app - keuzemenu selecteer gewenste functies (belangrijk is de online / offline knop) 2 Gaat naar de kaart GPS zoekt en laad locatie van de gebruiker - De gebruiker gaat naar wifi hotspot om alle functies van de App te benutten. -De gebruiker zet in het drop down menu online modus aan. 3 De gebruiker gebruikt de knop wandelroute en kiest de route naar de gewenste locatie 4 App laat de wandelroute zien in het menu - Gebruiker gebruikt de druktemeter om te zien welke festivals rustig zijn. 5 De gebruiker kiest op basis hiervan een festival en gaat in het menu naar festivals 6 De gebruiker zoekt meer informatie en koopt kaartjes. - De gebruiker gebruikt de routeplanner om bij het festival te komen - De gebruiker is op het festival 7 Op het festival is Wifi dus de gebruiker deelt een foto in het foto menu 8 Echter kan hij de foto pas delen als deze functie aan word gezet in de uitgebreide instellingen. (knop in de menubalk)
Ontwikkeling: Bart van den Brink Feike Mijwaart Klas: UXD01
IKing App, wireframe schetsen
1
Datum: 27 September 2013 Bladnummer: 5 1
Schermnaam: Snelle instellingen
1
Keuze selectie. (Snelle keuzes) De volgende opties zijn in dit drop down te kiezen. - Offline / Online - Feesten - WC spots - Bel & Wifi spots - Drukte meter - OV-haltes
2
Knop om het drop down menu te bedienen (Schuift open en dicht)
3
De kaart van Amsterdam op de achtergrond (Dit is de uiteindelijke interface van de App)
2
Schermnaam: Home interface
1
Knop om het drop down menu te bedienen (Schuift op en dicht)
2
Knoppenbalk voor verschillende App functies - Feesten - Foto maken/delen - Wandel route - Uitgebreide App instellingen (Deze schuift omhoog bij het sluiten van het drop down menu)
3
De kaart van Amsterdam Op deze kaart zijn de spots die zijn “aangezet� in het drop down menu te zien. De gebruiker kan door middel van GPS zijn of haar positie vinden. (De App zoekt deze automatisch op.)
1 Offline / Online Feesten WC spots Bel spots Wifi spots Drukte meter OV-haltes
2 3
2 1
3
(Bevat een zoom en schuiffunctie)
2
Legenda: Geeft het schermnummer en schermnaam aan Geeft de verschillende posities van de omschrijving aan. - Teksen bij een streepje, omschrijven een keuze of keuzemenu ( ) Teksten tussen haakjes, omschrijven een animatie of beweging
IKing App, wireframe schetsen
3
Datum: 27 September 2013 Bladnummer: 6 3
Schermnaam: Wandelroute kiezen
1
Vertrekpunt keuze Kies in dit vak het vertrekpunt - GPS locatie - Straatnaam - Station (In dit vak kan de gebruiker typen)
2
Eindbestemming keuze Kies een eindpunt - Feest - Spots, zie scherm snelle instellingen - Straatnaam (In dit vak kan de gebruiker typen, verdwijnt na bevestiging)
3
Bevestig de route met deze knop (Knop verdwijnt na bevestiging)
4
De kaart van Amsterdam (Zoomt in op de gekozen route)
5
Knoppenbalk voor verschillende App functies - Feesten - Foto maken/delen - Terug naar home - Uitgebreide App instellingen
4
Schermnaam: Wandelroute navigatie
1
Navigatie aanwijzingen - Teksten zoals: Over 50 meter links (Dit vak geeft de eest volgende aanwijzing)
2
De kaart van Amsterdam (Geeft de route weer)
3
Knoppenbalk voor verschillende App functies - Feesten - Foto maken/delen - Terug naar home - Uitgebreide App instellingen
1 2 3
4 5
4 1
2 3
Over 50 meter rechtsaf slaan
Legenda: Geeft het schermnummer en schermnaam aan Geeft de verschillende posities van de omschrijving aan. - Teksen bij een streepje, omschrijven een keuze of keuzemenu ( ) Teksten tussen haakjes, omschrijven een animatie of beweging
IKing App, wireframe schetsen
5
Datum: 27 September 2013 Bladnummer: 7 5
Schermnaam: Festival menu
1
Lijst met beschikbare festivals Door middel van iconen word aangegeven of het festival betaald of gratis is. Elk festival heeft een optie meer info. - Betaalde festivals - Gratis festivals (Lijst word weergegeven als een vertical stack)
2
Knoppenbalk voor verschillende App functies - Terug naar home - Foto maken/delen - Wandel route - Uitgebreide App instellingen
1 Radio 538 feest Met o.a. Jan Smit en DJ Chuckie
Slam FM party Met o.a. Armin van Buren
Holland feest Met o.a. Nick & Simon en Nilson
2
Loveland festival Met o.a. Remundo en DJ Jaap en frends
6.1 6.1
1
2 3
4 Radio 538 feest Met o.a. Jan Smit en DJ Chuckie Dit jaar zijn we weer te vinden op het museumplein. Helaas kunnen er dit jaar maar 3000 mensen komen. Dus koop je kaartje snel voor dit geweldige koningsfeest.
5
Schermnaam: Festival info
1
Icoon van het festival
2
Terug knop naar het Festival menu
3
Optie om kaarten te kopen, mits beschikbaar
4
Informatie over het festival - Lineup - Genre - Kosten
5
Knoppenbalk voor verschillende App functies - Terug naar home - Foto maken/delen - Wandel route - Uitgebreide App instellingen
Legenda: Geeft het schermnummer en schermnaam aan Geeft de verschillende posities van de omschrijving aan. - Teksen bij een streepje, omschrijven een keuze of keuzemenu ( ) Teksten tussen haakjes, omschrijven een animatie of beweging
IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 8 6.2
6.2
1
Betaal opties - Creditcard - IDeal
2
Annuleer/terug knop
3
Bevestig en ga door naar betalen (externe website/pagina)
2
1
Schermnaam: Kaartjes kopen
kies uw bank
3
7.1 7.1
1
2 3
4
Schermnaam: Foto maken of kiezen
1
Foto scherm
2
Maak een foto om te delen
3
Kies een gemaakte foto om te delen
4
Knoppenbalk voor verschillende App functies - Feesten - Terug naar home - Wandel route - Uitgebreide App instellingen
Maak foto Kies bestaande
Legenda: Geeft het schermnummer en schermnaam aan Geeft de verschillende posities van de omschrijving aan. - Teksen bij een streepje, omschrijven een keuze of keuzemenu ( ) Teksten tussen haakjes, omschrijven een animatie of beweging
IKing App, wireframe schetsen
Datum: 27 September 2013 Bladnummer: 9 7.2
7.2
2 1
3
Schermnaam: Foto delen
1
Overzicht van beschikbare foto’s om te delen
2
Annuleer/terug
3
Mogelijkheden om te delen - Facebook - Google + - Twitter - Instagram - Email
8
Schermnaam: Uitgebreide instellingen
1
Instellingen - GPS instellingen - Online/Ofline - Verder opties (Lijst word weergegeven als een vertical stack)
2
Knoppenbalk voor verschillende App functies - Feesten - Foto maken/delen - Wandel route - Terug naar home
8 1 Toegang tot GPS Toegang tot foto’s Toegang tot contacten Toegang tot agenda Toegang tot Itunes Push berichten Feest advies Geluiden Toegang tot kompas
2
Legenda: Geeft het schermnummer en schermnaam aan Geeft de verschillende posities van de omschrijving aan. - Teksen bij een streepje, omschrijven een keuze of keuzemenu ( ) Teksten tussen haakjes, omschrijven een animatie of beweging