"WE ZIJN HIER, GETUIMELD DOOR DE SCHACHT, BIJ DE BRON, IN HET GEZONKEN BOS, ALLES LOS! WAAR JE BENT WIE JE BENT, WANNEER NIEMAND JE KAN ZIEN.

Transcriptie

1 "WE ZIJN HIER, GETUIMELD DOOR DE SCHACHT, BIJ DE BRON, IN HET GEZONKEN BOS, ALLES LOS! WAAR JE BENT WIE JE BENT, WANNEER NIEMAND JE KAN ZIEN." Bron: downtherabbithole.nl Ramon Kagie DELFT DOWN THE RABBIT HOLE INFORMATIE ARCHITECTUUR PROPEDEUSE DOCENT VALINA CONVENT

2 INHOUDSOPGAVE Inhoudsopgave... 2 Inleiding... 3 De sitemap... 4 Sitemap & affinity diagram... 5 DTRH APP Homepage Avonden Avondpagina (amsterdam) Artiesten Artiesten Aandragen Artiesten beoordelen Tickets Bron: downtherabbithole.nl IA DTRH RAMON KAGIE DELFT V1.0 2

3 INLEIDING Voor het vak Informatie Architectuur hebben wij, studenten van de opleiding CMD, een eindopdracht gekregen om een mobiele applicatie te ontwerpen voor Down The Rabbit hole. DTRH is een festival wat jaarlijks plaatsvindt. Naast dit festival willen ze graag avonden organiseren met muziek en andere leuke activiteiten. Nu is het aan ons om een mobiele applicatie te ontwerpen die de avonden gaat ondersteunen. Zodat mensen snel hun gewenste avond kunnen vinden, zien welke artiesten er staan en last but not least, kaartjes kopen. Hierna kunnen de gebruikers de artiesten beoordelen, en de goed beoordeelde artiesten zullen op het festival komen. Ook is er een mogelijkheid om artiesten voor een avond aan te dragen. Gebruikers Doelen De gebruiker wil een leuke Rabb-it avond vinden Op thema (area), artiest, tijd, aantal tips, plaats en/of genre Bekijken van aanbevolen artiesten/avonden Aandragen van artiesten vooraf Beoordelen van artiesten achteraf Ondersteunen van verschillende gebruikers en contexten, dus gebruik een combinatie van zoeken en van surfen DTRH Doelen Merkbekendheid DTRH creëren er voor zorgen dat het publiek bekend wordt met het concept In de app het verkopen van kaartjes, de mensen die de Rabb-it avonden bezoeken moeten in de applicatie E tickets kunnen kopen. IA DTRH RAMON KAGIE DELFT V1.0 3

4 De sitemap De sitemap is uitgewerkt met de essentiële pagina s die nodig zijn voor een mobiel ontwerp. De pagina s zijn bedacht om de Down the Rabbit Hole avonden te ondersteunen. De applicatie zit heel minimalistisch, doch uitgebreid in elkaar. Bron: downtherabbithole.nl IA DTRH RAMON KAGIE DELFT V1.0 4

5 SITEMAP & AFFINITY DIAGRAM 1.0 Homepage SITEMAP AFFINITY DIAGRAM 2.0 Avonden 3.0 Artiesten 4.0 Tickets 5.0 Over DTRH 2.1 Amsterdam 3.1 Beoordelen 2.2 Eindhoven 3.2 Aandragen 2.3 Rotterdam 2.4 Utrecht 2.5 Nijmegen Legenda Hoofdmenu/homepage Menu items/navigatie op hoofdpagina Onderliggende pagina s Structuur De structuur van de sitemap is erg minimalistisch. Het heeft de homepage, en hieronder vier navigatie items. De navigatie 2.0 en 3.0 bevatten onderliggende pagina s. Deze zijn alleen te bereiken vanuit hun hoofd item. Alle pagina s zijn uitgewerkt behalve 5.0. Van de stacks van avonden is alleen 2.1 uitgewerkt. Doelen De doelen van de gebruiker zijn het vinden van een leuke avond. Daarom staan de avonden centraal. Ook de artiesten erg belangrijk. Dit omdat de gebruiker hun graag wil beoordelen en eventueel nieuwe artiesten aandragen. Deze twee opties zijn snel te vinden onder de lijst van artiesten. Tickets kunnen met een druk op de knop aangeschaft worden. Een winwin situatie voor de gebruiker en organisator. Link met Affinity Diagram. Allereerst wil de gebruiker zien of ze kunnen, en of de datum uitkomt. Daarom is de eerste pagina van de navigatie: de avonden. De gebruiker kan direct zien of het hem of haar uitkomt. Ook staat hier direct meer informatie zoals locatie en thema. Als tweede vinden mensen festivalgangers het belangrijk om te weten welke artiesten er komen. Hier is slim op ingespeeld om de artiesten pagina als tweede optie te kiezen. De gebruikers willen artiesten beoordelen en aandragen. Dit is een van de hoofdfuncties van de app. Daarom staat dit als navigatie op de bovenste rij. Tickets kopen gebeurt als laatste stap. Je kunt de tickets kopen via de desbetreffende Avond pagina. Maar ook met een directe menu link naar de ticket shop. IA DTRH RAMON KAGIE DELFT V1.0 5

6 DTRH APP Down The Rabbit Hole. Een festival wat nu avonden wil gaan organiseren om hun leuke concept voort te zetten. De avonden vinden plaats in verschillende steden en er komen een of twee artiesten. Gebruikers kunnen meedenken om zo de artiesten die bij hun in de smaak vallen te kiezen voor het festival. In de volgende pagina s is het ontwerp van elke pagina geschetst in een Lo- en Hi-Fi ontwerp. Het ontwerp is gebaseerd op een native app zonder login functionaliteit. Bron: downtherabbithole.nl IA DTRH RAMON KAGIE DELFT V1.0 6

7 1.0 HOMEPAGE Lo-Fi Hi-Fi Annotaties 1. Logo een titel van de applicatie 2. Opkomende avonden. Laat meteen content zien waar de gebruiker om vraagt. 3. De icons met koppelingen naar pagina s: Avonden, Artiesten, Tickets & Over DTRH 4. Instellingen, hier kun je push meldingen aan/uit zetten. 1. Uitschuif menu, pagina schuift naar rechts 2. Header met foto van DRTH 3. Knop naar instellingen om push meldingen aan/uit te zetten. Hiernaast zit een meldingen knop. Deze geeft meldingen weer als: (Kaarten voor bijna uitverkocht) 4. Tekst knoppen met navigatie naar volgende pagina s: Avonden, Artiesten, Tickets & Over DTRH. 5. Image buttons, met navigatie naar volgende pagina s: Avonden, Artiesten, Tickets & Over DTRH. Interactie Native app Uitschuifbaar menu Grote sfeer foto Geen content waar de gebruiker voor komt op pagina. KEUZE Plaatjes als navigatie opties Eye catcher Geen content waar de gebruiker voor komt op pagina. De homepage is overzichtelijk, minimalistisch en heeft een flat design. De gebruiker wilt (Uit onderzoek gebleken, zie affinity map) als aller eerst zien wanneer en wat het evenement is. De homepage laat daarom direct zien waar de gebruiker voor komt. De menu opties (Icons) zorgen voor een duidelijke keuze van menu items en laat middels plaatjes zien welke opties er beschikbaar zijn. Onderin kun je in de instellingen wijzigen om push meldingen aan/uit te zetten. Ook kun je direct naar hun instagram, Facebook & Twitter account. Dit is goed voor de naamsbekendheid. Er is gekozen om een login functie buiten spel te zetten. De toevoeging is voor DTRH van minimale winst. De app vertoont namelijk meer informatie dan het opslaan van gebruiker gegevens. De keuze is een combinatie van beide LoFi ontwerpen. Het menu is uiteindelijk weggelaten en vervangen voor de buttons. Er zijn vier hoofd navigatie onderdelen en daarom redelijk overbodig om een menu te maken. De vier plaatjes zijn icons, en hierdoor zie je direct welke pagina je nodig hebt zonder de tekst te lezen. IA DTRH RAMON KAGIE DELFT V1.0 7

8 2.0 AVONDEN Lo-Fi Hi-Fi Annotaties 1. Terug knop, gaat naar de homepage 2. Zoek knop, hier kun je een zoekopdracht invoeren. Zoeken kan op thema, plaats, artiest en genre. Er verschijnt dan een zoekveld boven sorteren. 3. Hier kan je de pagina sorteren. Op thema, plaats, tijd, artiest en genre. 4. Dit veld geeft de informatie over de avond. Wat voor thema het is, wanneer en waar. Hierop kan gedrukt worden en dan komt de gebruiker op de pagina van de aangeklikte avond. 5. Informatie van de avond. 6. Countdown timer, hoeveel dagen/uren/minuten/sec nog. 7. Verder omlaag scrollen Lijst met alle avonden. Gebruiker ziet direct alle avonden. Optie om te sorteren. Weinig informatie zichtbaar per avond, dient op geklikt te worden Veel overzichtelijkere lijst met foto + avonden. Countdown timer voor avonden Andere avonden vallen weg Interactie 1. Terugknop, gaat terug naar de homepage. 2. Zoekfunctie, hier kan een zoekopdracht ingevoerd worden. Er verschijnt dan een veld onder avonden. Er kan gezocht worden op thema, plaats, artiest en genre. 3. Hier kan de pagina content gesorteerd worden. Dit is een dropdown en de functies zijn: plaats, tijd en genre. 4. Een veld die compact de belangrijke informatie weergeeft. Een (blurred) foto op de achtergrond met de titel en het thema. 5. Een countdown timer die laat zien hoeveel dagen/uren/minuten/seconden voor de avond begint. 6. Een datum veld wat snel in een opzicht laat zien wanneer de avond plaatst vind. Op deze pagina s zijn de verschillende avonden weergegeven. De aanbevolen avonden op basis van vrienden en klikgedrag wordt bovenaan gesorteerd. Er kan ook op verschillende manieren worden gesorteerd. Op thema, plaats, artiest en genre. De gebruiker wil graag een gemakkelijk overzicht hebben van de georganiseerde avonden. Als er op een veld wordt gedrukt, dan springt de app naar de pagina van de desbetreffende avond. Een countdown timer zorgt er voor dat er in een opzicht gezien kan worden hoelang het nog duurt voordat de avond begint. KEUZE Bij de pagina voor de avonden is er voor gekozen om het rechter ontwerp te kiezen. De gebruiker wilt snel kunnen zien waar de avond is en wanneer. Ook laat de countdown timer precies zien over hoeveel tijd de avond plaatst vind. De sorteer optie uit het eerste ontwerp is gekozen om de mogelijkheid te geven om te sorteren op thema, plaats, tijd, artiest en genre. IA DTRH RAMON KAGIE DELFT V1.0 8

9 2.1 AVONDPAGINA (AMSTERDAM) Lo-Fi Hi-Fi Annotaties 1. Terug knop, gaat naar de pagina avonden. 2. Een sfeer impressie van de avond in Amsterdam. (foto) 3. Informatie over de avond. Thema, datum, plaats, artiesten. 4. Activiteiten die te doen zijn op dat festival. 5. Countdown van het evenement. Ook beschreven in 2.0 Interactie 1. Terug knop, gaat naar de pagina: avonden. 2. Een sfeer impressie van de avond (Amsterdam) foto 3. Mogelijkheid om evenement te delen op facebook. 4. Countdown timer die laat zien over hoe veel tijd de avond begint. 5. De line up, artiesten die komen op de avond. Als er op een artiest gedrukt wordt, dan verschijnt de artiest pagina van de desbetreffende artiest. Als je omlaag scrolt krijg je de activiteiten te zien. 6. Laat de activiteiten zien die mogelijk zijn op de avond. 7. Mogelijkheid om tickets te kopen voor deze avond. Gaat direct naar het betaal proces. Grote sfeer foto. Activiteiten en artiesten staan naast elkaar, Tickets kopen valt weg. KEUZE Countdown timer Tickets kopen staat centraal (Belang DTRH) Activiteiten valt weg op pagina. De gebruiker wilt in een opslag direct alle essentiële informatie kunnen vinden op de pagina van een DTRH avond. Ook is er een afbeelding toegevoegd om te laten hoe zo n avond eruit ziet. Deze informatie, zoals plaats, datum artiesten en activiteiten staan simpel op het ontwerp. De mogelijkheid om direct tickets te kopen is er ook. Als er op de knop tickets wordt gedrukt dan gaat de gebruiker direct naar het afrekenproces van de tickets. Natuurlijk is het belangrijk om te zien welke artiesten er die avond zijn. Daarom zijn de namen weergegeven en kan er op gedrukt worden voor meer informatie. De pagina van de artiest opent vervolgens. De rechter pagina is hier de belangrijkste factor geweest. De pagina is ruimer ingericht en is daardoor overzichtelijker. Bij het linker ontwerp is er veel informatie geclusterd, dan waar er rechts de content gestructureerder is. Tevens is er gekozen voor een kleine afbeelding om de sfeer uit te beelden in plaats van een header. Dit scheelt ruimte. IA DTRH RAMON KAGIE DELFT V1.0 9

10 3.0 ARTIESTEN Lo-Fi 1. Terug knop, gaat naar de homepage. 2. Zoek knop, zorgt ervoor dat er een zoekveld verschijnt er daar een artiestennaam ingevuld kan worden. 3. De koppeling om een artiest aan te dragen. Gaat naar pagina De koppeling om een artiest te beoordelen. Gaat naar pagina De lijst met artiesten die op de DTRH avonden hebben gespeeld. 6. De optie om met gestures over het alfabet te gaan om de desbetreffende voorletter te selecteren. Hi-Fi Annotaties 1. Terug knop, gaat naar de homepage 2. De koppeling/knop om een artiest aan te dragen. Gaat naar pagina De koppeling/knop om een artiest te beoordelen. Gaat naar pagina Een zoekveld waar de naam van een artiest ingevuld kan worden. Hier verschijnen alleen de artiesten die hebben gespeeld op DTRH. Alle andere namen die niet met de gekozen letter beginnen verdwijnen dan uit de lijst. 5. D.M.V. gestures kan er gemakkelijk een letter uit het alfabet worden geselecteerd. 6. Een profielfoto met de naam van de artiest. Bij klikken gaat de gebruiker naar de pagina van de artiest. Foto s bij artiesten, Artiestenlijst kan overzichtelijker. Zoekfunctie ver weg. (Belangrijk) KEUZE Plaatjes als navigatie maakt duidelijk dat er twee keuze s zijn, Alfabet naast artiestenlijst. Zoek functie ver weg. (Belangrijk) Zoals de homepage heb ik uiteindelijk gekozen voor de iconen als koppeling naar de twee pagina s om artiesten aan te dragen en te beoordelen. Dit is in een opslag te zien en maakt het extra duidelijk dat er nog twee pagina s zijn. De lijst voor artiesten is gekozen uit het rechter ontwerp. Er is gemakkelijk te sorteren op alfabet en te zien welke artiesten daar bij horen. De minpunten van het linker ontwerp zijn dat het veel drukker oogt en daardoor een Times Square effect creëert. Interactie De gebruiker wilt op een eenvoudige manier een artiest aandragen of beoordelen. Er is op de artiesten pagina direct te zien voor welke optie ze willen gaan. Een plaatje maakt meteen duidelijk wat de optie inhoudt. De artiesten die op DTRH hebben gespeeld staan in deze lijst. Er kan simpel gezocht worden op artiest en de app geeft een rustige lijst met artiesten weer. Met de gestures is er snel te kiezen om een een artiest op alfabet te vinden. IA DTRH RAMON KAGIE DELFT V1.0 10

11 3.1 ARTIESTEN AANDRAGEN Lo-Fi Hi-Fi Annotaties 1. Terug knop, gaat naar de pagina artiesten. 2. Een korte introductie over wat artiest aandragen precies inhoudt. 3. Een header, met een plaatje van een artiest die gekozen is met dit systeem. Om zo de pagina meer dynamiek te geven. 4. Een invul veld waar je de naam kunt invullen van de artiest die je graag wilt zien op een van de avonden. 5. Een invul veld waar je de artiest precies wilt zien. 6. Een invul veld met korte uitleg waarom je deze artiest wilt zien en waarom deze past bij DRTH 7. Een poll waar mensen kunnen stemmen welke artiest ze willen zien. Ruimte voor inleiding Focus ligt meer op aandragen dan stemmen voor artiest, gebruiker dient naam te kennen van artiest. KEUZE Poll in het midden van de pagina. (Focus ligt daar op) Gebruiker dient naam te kennen van artiest. De rechterpagina is gekozen als final design met een aantal tweaks. Het is belangrijk dat de gebruikers kunnen stemmen welke artiest ze graag zien op het festival. Daarom heb ik dit boven aan gezet. De gebruikersstem is immers het belangrijkste, daarom ligt de focus op het midden van de pagina met een pol waar gestemd kan worden. Een afbeelding(header) laat zien wie de artiest is geworden van de laatste stemronde. Zo wordt er naar de gebruiker gecommuniceerd dat het systeem nageleefd wordt. Poll De namen die worden ingevoerd, worden in een database gestopt. De meeste ingevoerde namen verschijnen in de pol. Deze ververst elke 2 weken. De artiest waar het meest op gestemd wordt, komt op het festival. (Dient nog goed uitgewerkt te worden) Interactie 1. Terug knop, gaat naar de pagina artiesten 2. Header, laat zien wie de artiest is geworden met de vorige stemronde. 3. De poll, hier kan gestemd worden d.m.v. radio buttons wie het publiek graag ziet op de DTRH avonden. 4. Knop om stem te versturen. Laat vervolgens puntje (8) zien in plaats van de pol. 5. Invul veld waar de naam ingevuld kan worden van de artiest die jij graag zou willen zien op DTRH. 6. Dit staat gelinkt met Facebook, hier dient de gebruiker de naam in te typen en vervolgens komen alleen de artiestenpagina s van artiesten omhoog. Om te voorkomen dat je iedereen z n naam in kunt voeren. (Dient nog goed uitgewerkt te worden) 7. Verzoek versturen. 8. De resultaten van de poll. De focus ligt op het midden van het scherm. De gebruikers kiezen immers de artiesten die zij willen zien op de DTRH avonden. Daarom wordt er een poll aangemaakt met de artiesten die het meest worden verzocht met het systeem waar je artiesten kunt aandragen. De winner hieruit wordt gecontacteerd door DTRH. Onderin het scherm kun je je verzoek artiest invullen. Een veld met de naam van de artiest/band en de locatie waar je de artiest wilt zien dient ingevuld te worden. Vervolgens kunnen de gegevens met een druk op de knop verstuurd worden naar de database. IA DTRH RAMON KAGIE DELFT V1.0 11

12 3.2 ARTIESTEN BEOORDELEN Lo-Fi Hi-Fi Annotaties 1. Terug knop, gaat naar de pagina artiesten 2. Zoekveld, hier kan de naam van de artiest of plaats worden ingevuld. De andere opties worden er vervolgens uitgefilterd. 3. Naam van de locatie waar de avond heeft plaatsgevonden. 4. Naam van de artiest die op die avond heeft gespeeld. 5. De mogelijkheid om sterren te geven door er op te tappen. Links geeft aan hoeveel sterren er geselecteerd zijn. 6. De velden worden uitgeklapt zodra er een avond wordt aangeklikt. 7. Het veld om een artiest te beoordelen kan hier worden uitgeklapt. 1. Terug knop, gaat naar de pagina artiesten. 2. Zoekfunctie. Hier kan de naam van de artiest ingevuld worden maar ook de stad waar de avond is geweest. 3. De naam van de locatie waar de avond is geweest. 4. De naam van de artiest die op die locatie gespeeld heeft. Bij klikken verschijnt de beoordeling. 5. De beoordeling die gekozen kan worden door op het aantal sterren te drukken. 6. Mogelijkheid om naam van artiest in te vullen. Zoekt vervolgens de database. 7. Waar de artiest heeft gespeeld. 8. Verstuur verzoek. 9. De eerder beoordeelde artiesten. Overzichtelijke structuur, uitklapbaar Je moet precies weten op welke avond welke artiest heeft gestaan. KEUZE Geen timessquare effect, oogt rustig. De naam van de artiest dient ingevuld te worden. De gebruiker moet deze dan nog wel kennen. Het linker design is uiteindelijk de final geworden. De mogelijkheid om te zoeken op artiest is handig. Maar toch onhandig voor als je niet meer weet welke artiest het precies was, of op welke avond. Je moet de data specifiek weten. Bij het linker ontwerp is dit allemaal gemakkelijk terug te vinden. Interactie Pop-up Als je je gps aan hebt, registreert de app of je op een avond bent geweest. Vervolgens krijg je op je telefoon na afloop een pop-up. Met de vraag of je de artiesten wilt beoordelen. Druk je hierop, dan kom je op de pagina om artiesten te beoordelen. Na een avond heeft de gebruiker de behoefte om een artiest te beoordelen. Als de avonden zijn geweest verschijnen deze in de lijst waarbij de artiesten per avond zijn opgesomd. Zo kun je op een artiest drukken (Veld schuift uit) en kan je deze maximaal 5 sterren geven en minimaal 1. Hierdoor is het gemakkelijk om alle artiesten te beoordelen die hebben opgetreden. Ook als je even niet meer weet hoe de artiest precies heet zie je deze in de lijst staan. Met zoeken kan er een avond of artiest worden ingevuld. Overige opties die niet aan de zoekopdracht voldoen worden weg gefilterd. IA DTRH RAMON KAGIE DELFT V1.0 12

13 4.0 TICKETS Lo-Fi Hi-Fi Annotaties 1. Terug knop, gaat naar de pagina homepage. 2. Eyecatcher/sfeerfoto 3. Drop down met de keuze om de avonden te kiezen. 4. Drop down met de keuze om tot maximaal 9 kaarten te bestellen. 5. Totale prijs voor het geselecteerde aantal. 6. Doorgaan naar volgende pagina. 1. Terug knop, gaat naar de pagina homepage. 2. Eyecatcher/sfeerfoto 3. Drop down met de keuze om avonden te kiezen. 4. Drop down met de keuze voor het aantal kaartjes. gekozen kan worden door op het aantal sterren te drukken. 5. Verstuurknop, gaat naar pagina afrekenen 6. Totale prijs. Eyecatcher/sfeerfoto Basic, to the point. Consistentie mist Interactie Voor de avonden dienen uiteraard kaartjes gekocht te worden. Deze pagina zorgt er voor dat er direct vanuit de applicatie kaarten kan worden gekocht. Wel wordt de gebruiker na deze pagina doorgelinkt naar externe betaalwebsite. Een gemakkelijk ontwerp zorgt voor een keuze tussen de avond en het aantal kaarten. KEUZE Een keuze van beide ontwerpen is het final design geworden. Een mooie sfeerfoto vult de lege pagina deels op. De drop downs zijn beide gekozen voor het kiezen van de locatie en het aantal kaarten. Op mobile design is het gebruik van drop downs gebruiksvriendelijker. Het eindbedrag is te zien wat de klant dient af te rekenen. IA DTRH RAMON KAGIE DELFT V1.0 13

14 DOWN THE RABBIT HOLE I N F O R M A T I E A R C H I T E C T U U R P R O P E D E U S E H V A C M D R A M O N K A G I E IA DTRH RAMON KAGIE DELFT V1.0 14