Informatie Architectuur Sanne Schouten Studentnummer: Klas: V1-07 Datum:

Transcriptie

1 Informatie rchitectuur Sanne Schouten Studentnummer: Klas: V1-07 Datum:

2 Inhoud Debriefing Plan van aanpak Lowlands Sitemap - Low fidelity wireframes - Gedetailleerde wireframes Oor - Sitemap - Low fidelity wireframes - Gedetailleerde wireframes Sanne Schouten v1-07 2

3 Debriefing De opdracht is het ontwerpen van een applicatie voor Lowlands festival en een website voor muziekblad Oor. Lowlands heeft het muziekblad Oor gekocht, met deze actie hopen ze meer muziekliefhebbers naar het festival te trekken. Het is de bedoeling dat zowel Oor iets aan Lowlands heeft als andersom. De applicatie en de website moeten genoeg kruisbesmetting van de beide bedrijven bevatten. an de opdracht zijn een aantal doelen (business goals) verbonden, deze worden uitgelegd door middel van schetsen. usiness goals: Lowlands: - ekend worden als specialist van nieuwe opkomende muziek - Gebruikers het hele jaar binden aan Lowlands - Gebruikersinput inzetten voor een breed gedragen artiestenselectie Oor: - Verkopen van abonnementen - Eerste voorzichtige stapjes richting betaalde content - Verkoop potentieel verjongen Sanne Schouten v1-07 3

4 Plan van aanpak Voor zowel de applicatie als de website heb ik een sitemap gemaakt, deze schept duidelijkheid over hoe de applicatie of website in elkaar steekt. Voor mijn proces tot een goed ontwerp zal ik voor iedere pagina in de applicatie of website, twee low fidelity wireframes maken, dit om uit- te- proberen wat het beste werkt en aansluit bij de gegeven business goals. De beste low fidelity wireframe zal ik dan uitwerken tot een gedetailleerde wireframe. ij alle low fidelity wireframes maak ik gebruik van symbolic content, dit alleen om aan te duiden wat voor soort content er komt te staan. In de gedetailleerde wireframes zal ik dummy content gebruiken, zodat er duidelijkheid word geschept in wat voor soort tekst er verwacht kan worden in de daadwerkelijke applicatie of website. De organisatieschema s die in toe pas in de applicatie en website zullen worden aangegeven in de low fidelity wireframes. ij alle wireframes zowel low fidelity als gedetailleerd zal ik uit leg en informatie geven naast de schets. Sanne Schouten v1-07 4

5 Lowlands pplicatie Sanne Schouten v1-07 5

6 Sitemap Lowlands applicatie Home Nieuws Events rtiesten genda Informatie Nieuwsdetail Eventdetail rtiestdetail Sanne Schouten v1-07 6

7 Low fidelity wireframe Homepagina Lowlands applicatie Organisatieschema:. Chronologisch. Taak Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat de gebruiker op de homepagina maar 1 ding wil, zo snel mogelijk naar het onderdeel komen wat hij zoekt. Op deze 2 e lofi zijn de keuze s duidelijk en groot aangegeven waardoor dit makkelijker gaat. * Sanne Schouten v1-07 7

8 Gedetailleerde wireframe Homepagina Lowlands applicatie Paginauitleg: 1. Dit zijn de navigatie opties van de applicatie. ij klik gaan ze naar de pagina met het desbetreffende onderwerp. Sanne Schouten v1-07 8

9 Low fidelity wireframe Nieuwspagina Lowlands applicatie Organisatieschema:. Chronologisch. Taak * Keuzeargumentatie: Ik heb gekozen voor de 1 e lofi, deze geeft duidelijk overzicht van de berichten zonder te veel (overbodige) toepassingen. Deze toepassingen zijn in dit scherm overbodig omdat niet iedereen geïnteresseerd is in ieder bericht. ls de gebruiker meer van het bericht wil weten kan hij op meer drukken om naar de detailpagina van het bericht te gaan. Sanne Schouten v1-07 9

10 1 2 Gedetailleerde wireframe Nieuwspagina Lowlands applicatie 3 Paginauitleg: 1. fbeelding van het nieuwsbericht 2. Titel en inleidende tekst van het nieuwsbericht 3. ij klik op meer gaat de gebruiker naar de detailpagina van het nieuwsbericht 4. Hoofdnavigatie Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 4 Sanne Schouten v

11 Low fidelity wireframe Nieuwsdetailpagina Lowlands applicatie Organisatieschema:. Taak. Onderwerp Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze overzichtelijker is. Er is een gemakkelijke terug naar overzicht knop en er worden handige gerelateerde berichten weergegeven onder het nieuwsbericht. * Sanne Schouten v

12 1 Gedetailleerde wireframe Nieuwsdetailpagina Lowlands applicatie 2 3 Paginauitleg: 1. Knop die uitgang terug naar overzicht bied 2. fbeelding van het nieuwsbericht 3. Titel en tekst van het nieuwsbericht 4. Links voor social media 5. Gerelateerde berichten van dit nieuwsbericht, bij klik gaat gebruiker naar de detailpagina van dit bericht. 6. Hoofdnavigatie 4 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 5 6 Sanne Schouten v

13 Low fidelity wireframe Eventpagina Lowlands applicatie Organisatieschema:. Onderwerp. Chronologisch C. Taak C C * Keuzeargumentatie: Ik heb voor de 1 e lofi gekozen omdat deze overzichtelijker is, en beter werkt op een applicatie dan allemaal kleine drukke berichten naast elkaar. Tevens behoud deze lofi meer consistentie in de applicatie is wat fijn is voor de gebruiker omdat hij dit al gewent is. Sanne Schouten v

14 1 Gedetailleerde wireframe Eventpagina Lowlands applicatie 2 3 Paginauitleg: 1. Keuze tussen lowlandsavonden overzicht en festival overzicht 2. fbeelding van het evenement 3. Titel en inleidende tekst evenement 4. Voorproefje luisteren evenement 5. Ga naar de evenementdetailpagina 6. Hoofdnavigatie 4 5 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 6 Sanne Schouten v

15 Low fidelity wireframe Eventdetailpagina Lowlands applicatie Organisatieschema:. Onderwerp. Taak Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze overzichtelijker en rustiger werkt op de gebruiker. Sanne Schouten v

16 1 Gedetailleerde wireframe Eventdetailpagina Lowlands applicatie Paginauitleg: 1. Slider met sfeerafbeeldingen van evenement 2. Titel en tekst over evenement 3. Lijst van aanwezige artiesten op evenement 4. Hoofdnavigatie 2 3 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 4 Sanne Schouten v

17 Low fidelity wireframe rtiestenpagina Lowlands applicatie Organisatieschema:. Chronologisch. Taak * Keuzeargumentatie: Ik heb voor de 1 e lofi gekozen omdat deze overzichtelijker is. De berichten hebben al een korte introductie wat fijn is voor de gebruiker. Tevens word er in deze lofi meer consistentie gemaakt met de andere pagina s, wat fijn is voor de gebruiker omdat hij dit al gewent is. Sanne Schouten v

18 Gedetailleerde wireframe rtiestenpagina Lowlands applicatie 1 2 Paginauitleg: 1. fbeelding van artiest 2. rtiestnaam en korte introductie 3. Ga naar artiestdetailpagina 4. Hoofdnavigatie 3 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 4 Sanne Schouten v

19 Low fidelity wireframe rtiestendetailpagina Lowlands applicatie Organisatieschema:. Onderwerp. Chronologisch C. Taak C C Keuzeargumentatie: Ik heb gekozen voor de 2 e lofi omdat deze overzichtelijker is. Er word een gemakkelijke terug knop gegeven. Ook is het relevanter om de geplande concerten van de desbetreffende artiest te laten zien in plaats van ander nieuws over deze artiest. Sanne Schouten v

20 1 3 Gedetailleerde wireframe rtiestendetailpagina Lowlands applicatie Paginauitleg: 1. Knop die uitgang naar artiestoverzicht biedt 2. Slider artiestafbeeldingen 3. rtiestennaam en verhaal over artiest 4. Voorproefje muziek van deze artiest 5. Overzichtje geplande concerten van deze artiest 6. Hoofdnavigatie 2 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor Sanne Schouten v

21 Low fidelity wireframe gendapagina Lowlands applicatie Organisatieschema:. Chronologisch. Onderwerp C. Taak C C Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze wederom overzichtelijker is. Het is voor de gebruiker van de lowlandsapplicatie relevanter om te kunnen kiezen tussen de lowlands avonden en het festival zelf. Ook is het gemakkelijker omdat er waarschijnlijk maar één lowlands avond per maand is en meerdere rond de festival tijd. De avonden zullen wel worden weergeven op de blokmanier zoals in lofi 1. Sanne Schouten v

22 Gedetailleerde wireframe gendapagina Lowlands applicatie Paginauitleg: 1. Keuze tussen lowlands avonden of festival 2. Keuze tussen de 3 dagen van het festival 3. Tijden 4. Podia op het festival 5. Evenement bij klik ga je naar evenementendetail 6. Hoofdnavigatie Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 6 Sanne Schouten v

23 Low fidelity wireframe Informatiepagina Lowlands applicatie Organisatieschema:. Onderwerp. Taak Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat het voor de gebruiker relevant is om meteen instellingen te kunnen veranderen. Tevens is deze lofi overzichtelijker. Sanne Schouten v

24 1 Gedetailleerde wireframe Informatiepagina Lowlands applicatie Paginauitleg: 1. Instellingen voor de applicatie 2. Veelgestelde vragen met antwoorden 3. Sponsoren 4. Hoofdnavigatie 2 3 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 4 Sanne Schouten v

25 Oor Website Sanne Schouten v

26 Sitemap Oor website Home bonneer Inloggen Nieuws Reviews genda Over Oor Mijn Oor Nieuwsdetail Reviewdetail Evenementdetail Sanne Schouten v

27 Low fidelity wireframe Homepagina Oor website Organisatieschema:. Onderwerp. Chronologisch Keuzeargumentatie: Ik heb voor de eerste lofi gekozen omdat hier meer rust in de pagina word gecreeerd. De oor playlist zal alleen toegankelijk zijn voor gebruikers met een online abonnement dus deze hoeft niet zo groot. Tevens denk ik dat het leuk is om een stukje van de opkomende agenda te laten zien. Sanne Schouten v

28 Gedetailleerde wireframe Homepagina Oor website Pagina uitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Slider met laatste nieuws 4. Oorplaylist (alleen online abonees) 5. Nieuwsberichten 6. genda Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

29 Low fidelity wireframe Nieuwspagina Oor website Organisatieschema:. Onderwerp. Chronologisch Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze overzichtelijker is, ook is het handig dat er in de zijkant een kort overzicht is van alle berichten. Sanne Schouten v

30 Gedetailleerde wireframe Nieuwspagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Lijst van nieuwsberichten 4. fbeelding nieuwsbericht 5. Titel en inleiding nieuwsbericht 6. Ga naar nieuwsberichtdetail 6 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

31 Organisatieschema:. Onderwerp. Chronologisch Low fidelity wireframe Nieuwsdetailpagina Oor website Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze overzichtelijker is. Het is makkelijk om de alle nieuwsberichten te kunnen zien aan de zijkant, hiermee word ook consistentie in de website bewaard. Gerelateerde berichten kunnen onder het nieuwsbericht worden weergeven. Sanne Schouten v

32 Gedetailleerde wireframe Nieuwsdetailpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Overzicht van nieuwsberichten 4. fbeelding nieuwsbericht 5. Titel en nieuwsbericht 6. Social media links 7. Reclame abonneren 8. Gerelateerde nieuwsberichten 6 7 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 8 Sanne Schouten v

33 Low fidelity wireframe Reviewpagina Oor website Organisatieschema:. Onderwerp. Chronologisch Keuzeargumentatie: Ik heb voor de 1 e lofi gekozen omdat deze overzichtelijker is. Het is makkelijk om alle reviewberichten aan de zijkant te kunnen zien. Ook is het beter om het ene reviewbericht niet meer aandacht te geven dan de ander want je weet niet wat de gebruiker belangrijker vind. Tevens word met deze pagina meer consistentie in de website bewaard. Sanne Schouten v

34 Gedetailleerde wireframe Reviewpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Overzicht reviewberichgen 4. fbeelding reviewbericht 5. Titel en inleiding reviewbericht 6. Ga naar reviewberichtdetail 5 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 6 Sanne Schouten v

35 Organisatieschema:. Onderwerp. Chronologisch Low fidelity wireframe Reviewdetailpagina Oor website Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze rustiger is. Tevens word er hier meer consistentie bewaard in de website, wat fijn is voor de gebruiker omdat hij het al gewent is. Sanne Schouten v

36 Gedetailleerde wireframe Reviewdetailpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Overzicht reviewberichten 4. Titel en tekst review 5. Reviewafbeelding/filmpje 6. Social media links 7. Reclame abonneren 6 7 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

37 Low fidelity wireframe gendapagina Oor website Organisatieschema:. Onderwerp. Chronologisch Keuze argumentatie: Ik heb gekozen voor de 1 e lofi omdat deze duidelijker en rustiger is. De vele vlakjes bij de 2 e lofi scheppen onrustigheid. Ook kan bij de 1 e lofi meer en informatie over het evenement worden gegeven. Sanne Schouten v

38 Gedetailleerde wireframe gendapagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Filter voor agenda 4. Datum en evenementdetail Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

39 Low fidelity wireframe Evenementendetailpagina Oor website Organisatieschema:. Onderwerp. lphabetisch Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze een duidelijk overzicht geeft van gerelateerde evenementen en een korte review over een voorgaand gerelateerd evenement. Tevens bewaard deze lofi meer consistentie in de website. Sanne Schouten v

40 Gedetailleerde wireframe Evenementedetailpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Gerelateerde evenementen 4. fbeelding evenement 5. Titel en tekst evenement 6. Social media links 7. Voorproefje luisteren 8. Review voorgaand evenement 6 Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. 7 8 Sanne Schouten v

41 Low fidelity wireframe OverOorpagina Oor website Organisatieschema:. Onderwerp Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze meer ruimte geeft voor Verschillende onderwerpen en dit van toepassing is op de over pagina. Sanne Schouten v

42 Gedetailleerde wireframe OverOorpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Tekst over Lowlands en Oor 4. Voorwaarden van de website 5. Colofon en contact Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

43 Low fidelity wireframe MijnOorpagina Oor website Organisatieschema:. Onderwerp. Chronologisch Keuzeargumentatie: Ik heb voor de 2 e lofi omdat hier meer ruimte word gegeven voor de verschillende onderwerpen. Ook is dit overzichtelijker voor de gebruiker. Tevens word met deze lofi meer consistentie gesuggereerd met de rest van de website. Sanne Schouten v

44 Gedetailleerde wireframe MijnOorpagina Oor website Paginauitleg: Deze pagina is alleen beschikbaar voor Gebruikers met online abonnement 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Exclusief mijn oor nieuws 4. Ga naar detail 5. Exclusieve mijn oor acties 6. Ga naar detail 7. Exclusief oor playlist Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v

45 Low fidelity wireframe bonneerpagina Oor website Organisatieschema:. Onderwerp Keuzeargumentatie: Ik heb voor de 2 e lofi gekozen omdat deze overzichtelijker is. In mijn gedetailleerde wireframe heb ik er 3 blokken van gemaakt omdat ik één onderwerp te kort kwam en hiermee word dan weer meer consistentie in de website bewaard. Sanne Schouten v

46 Gedetailleerde wireframe bonneerpagina Oor website Paginauitleg: 1. Inloggen (alleen online abonnees) 2. Hoofdnavigatie 3. Informatie magazine abonnement 4. Informatie online abonnement 5. Informatie ll- In abonnement Dummycontent: De tekst die ik heb gebruikt om aan te duiden wat voor tekst de gebruiker kan verwachten in de applicatie, deze tekst komt van de website van Oor. Sanne Schouten v