Wat is jouw footprint?

Transcriptie

1 Wat is jouw footprint? Projectdossier Design details and realise CMD C PR 01 Begeleiders: B. Reurings en D. Mast Opdrachtgever: Klas 1f groep 23

2 Wat is jouw footprint? Projectdossier Monster, 9 april 2014 Versie 1.0 Design details and realise CMD C PR 01 Begeleiders: B. Reurings en D. Mast Opdrachtgever: Klas 1f groep 23

3 Inhoudsopgave 1.0 Richtlijnen Geprioriteerde eisen 1.2 Beperkingen 1.3 Ontwerpprincipes Content Sitemap 2.2 Content requirements Handelingen en feedback Navigatiemodel 3.2 Concrete scenario's 3.3 Flowchart 3.4 Schets visueel ontwerp 3.5 Wireframes 3.6 Interactie Presentatie Style tile 4.2 Uitwerking visueel ontwerp Bijlagen 55 A Schetsen B Checklist projectdossier C Projectplan

4 1 1.0 Richtlijnen Richtlijnen bepalen de kaders waarin het project uitgevoerd dient te worden. Naast de beperkingen van richtlijnen, beschreven in paragraaf 1.2, wordt de positieve kant ook belicht in dit hoofdstuk. Zo zijn geprioriteerde eisen en ontwerpprincipes opgesteld, beschreven in respectievelijk paragraaf 1.1 en paragraaf 1.3, voor de nodige houvast. 1.1 Geprioriteerde eisen Must have 1.0 Functionele eisen 1.1 Het systeem moet het mogelijk maken om te navigeren binnen de micro website 1.2 Het systeem moet het mogelijk maken om video s weer te geven Het systeem moet het mogelijk maken om een video automatisch te kunnen afspelen Het systeem moet het mogelijk maken om een video te kunnen pauzeren Het systeem moet het mogelijk maken om een video te kunnen doorspoelen Het systeem moet het mogelijk maken om een video te kunnen terugspoelen 1.3 Het systeem moet het mogelijk maken om deeplinken te plaatsen 1.4 Het systeem moet het mogelijk maken om bestanden te uploaden 1.5 Het systeem moet het mogelijk maken om invoervelden van een formulier in te vullen 1.6 Het systeem moet het mogelijk maken om een formulier te versturen 1.7 Het systeem moet het mogelijk maken om het scoreoverzicht via sociale media te delen 1.8 Het systeem moet het mogelijk maken om de micro website via sociale media te delen 2.0 Niet functionele eisen 2.1 Interface eisen De interface toont op elke pagina het logo van het De interface toont op elke pagina de titel van de pagina De interface maakt onderscheid tussen belangrijke en minder belangrijke content De interface is gebaseerd op de minimalistische ontwerpstijl De interface toont bij elke sectie een verschillende steunkleur De interface maakt gebruik van afgeronde rechthoeken ter verduidelijking van content De interface toont op elke pagina de globale navigatie De interface maakt gebruik van fullscreen afbeeldingen De interface maakt gebruik van affordances De interface is gebaseerd op een grid voor desktop De interface is gebaseerd op een grid voor tabled De interface is gebaseerd op een grid voor mobiel 2.3 Performance eisen Het systeem bevat jpg bestanden van maximaal 2,5mb per bestand Het systeem bevat png bestanden van maximaal 100kb per bestand Het systeem bevat gif bestanden van maximaal 100kb per bestand 2.4 Operationele eisen Het systeem moet geschreven zijn in semantisch correcte HTML Het systeem moet geschreven zijn in syntactisch correcte HTML Het systeem moet geschreven zijn in semantisch correcte CSS Richtlijnen

5 Het systeem moet geschreven zijn in syntactisch correcte CSS Het systeem moet geschreven zijn in syntactisch correcte Javascript Het systeem moet geschreven zijn in syntactisch correcte JQuery 2.5 Technische eisen Het systeem moet draaien op versie van Google Chrome Het systeem moet de status van de game tot 10 minuten na het afsluiten onthouden Het systeem moet de gemaakte keuzes van de game tot 10 minuten na het afsluiten onthouden 3.0 Content eisen ¹ 3.1 Het systeem moet informatie bevatten over het nieuwe 3.2 Het systeem bevat informatie over het thema beschermen 3.3 Het systeem moet de bezoeker aanzetten tot een museumbezoek 3.4 Het systeem moet de gebruikers doormiddel van cocreatie de mogelijkheid geven om het ontwerp van de micro website inhoudelijk aan te passen 3.5 Het systeem moet de gebruiker een belevenis bieden die identiek is aan de belevenis in het museum 3.6 Het systeem moet het mogelijk maken om contactgegevens weer te geven 3.7 Het systeem moet het mogelijk maken om de openingstijden weer te geven 3.8 Het systeem moet het mogelijk maken om entreeprijzen weer te geven Should have 1.0 Functionele eisen 1.9 Het systeem moet het mogelijk maken om een zoekfunctie uit te voeren 1.10 Het systeem moet het mogelijk maken om de content van de website om te zetten in het Engels 2.0 Niet functionele eisen 2.2 Integriteits eisen Het systeem moet schaalbaar zijn om wisselende bezoekersaantallen op te vangen 2.3 Performance eisen Het systeem moet zoekopdrachten binnen één seconde uitvoeren Het systeem moet het mogelijk maken om binnen een halve seconde een pagina te laden Could have 2.0 Niet functionele eisen 2.4 Operationele eisen Het systeem wordt onderhouden door een systeembeheerder die ervaring heeft met HTML Het systeem wordt onderhouden door een systeembeheerder die ervaring heeft met CSS Het systeem wordt onderhouden door een systeembeheerder die kennis heeft van Javascript Het systeem wordt onderhouden door een systeembeheerder die kennis heeft van JQuery Would have 2.0 Niet functionele eisen 2.5 Technische eisen Het systeem moet gebouwd worden op basis van een CMS ¹ ¹ Ongeprioriteerde eisen: projectplan, definiëring blz Geprioriteerde eisen

6 3 1.2 Beperkingen Benodigde tijd Het project loopt gedurende een periode van tien weken. Het geschatte aantal te besteden uren is 160, waarvan 38 uur is ingeroosterd. De resterende uren zijn zelfstudie waarin zelfstandig gewerkt wordt aan het project. De tien weken staan vast, maar van de geschatte te besteden uren kan afgeweken worden. In week 8 is het projectdossier en het logboek afgerond en dient dit ingeleverd te worden. In week tien is de website afgerond en dient deze ingeleverd te worden. Technologie De micro website wordt gecodeerd door middel van semantisch en syntactisch correcte HTML 5.0, CSS 3.0, Javascript en JQuery. Daarnaast dient het ontwerp volledig te functioneren op de recentste versie van Google Chrome. Overige browsers, zoals bijvoorbeeld Internet Explorer, Mozilla Firefox en Opera worden bij de uiteindelijke beoordeling van het project buiten beschouwing gelaten. Business needs Eisen de micro website moet informatie bevatten over het nieuwe. de micro website bevat informatie over het thema 'beschermen'. de micro website moet een voorbeeld geven van hoe de bezoeker kan leren in het. de micro websitemoet potentiële bezoekers aanzetten tot een bezoek. de micro website moet de gebruikers, doormiddel van cocreatie, de mogelijkheid geven om het ontwerp van de microsite inhoudelijk aan te passen. Wensen de doelgroep informeren dat het ingrijpend verandert. de doelgroep kenbaar maken dat bezoekers op een belevingsrijke en participerende manier worden geïnformeerd over belangrijke mondiale thema s en waar het begrip wereld burgerschap een plek krijgt. de doelgroep op de microsite laten beleven hoe het is om een bezoek aan het te brengen. de doelgroep informeren over een onderwerp (thema) waarover zij iets kunnen leren op een manier die aansluit bij de wijze waarop bezoekers in het leren. de doelgroep actief stimuleren om het te bezoeken. de doelgroep middels cocreatie een eigen inhoudelijke bijdrage laten leveren aan het onderwerp van de microsite. User needs In het ontwerp voor de micro website moet een balans gevonden worden tussen de behoeften van kinderen en ouders. Voor beide moet het ontwerp uitdagend zijn en aanspreken. Ook is uit het onderzoeksrapport gebleken dat de bezoeker de behoefte heeft omt e weten wat hij in het museum kan aantreffen. Hij of zij wil eigenlijk een een klein voorproefje. Het moet de potentiële bezoeker duidelijk worden wat hem of haar te wachten staat bij een museumbezoek aan het. Daarnaast zijn consistentie, logische indelingen, vindbaarheid en begrijpbare taal ook user needs welke meegenomen zullen worden in het ontwerp voor de micro website. De context De interface zal voornamelijk gezamenlijk, een ouder met zijn of haar kind, thuis op een computer bekeken worden. Daarnaast is het goed mogelijk dat het kind als eerst via zijn smartphone de micro website bezocht heeft. Het ontwerp dient dus voor diverse apparaten ontworpen te worden, zonder verlies van bruikbaarheid. Beschikbare middelen Adobe InDesign wordt gebruikt om het projectplan en dossier op te maken. Adobe Illustrator zal gebruikt worden om de gemaakte schetsen te digitaliseren. Waar nodig zal Adobe Photoshop gebruikt worden om afbeeldingen op een correcte manier op 1.0 Richtlijnen

7 4 te slaan zodat deze gebruikt kunnen worden in de uiteindelijke realisatie. Uiteraard zal zoveel mogelijk, voor zover realiseerbaar is, met CSS opgelost worden, wat weer afbeeldingen en daardoor laadtijd scheelt. Voor het coderen van de website zullen Notepad++ en Aptana gebruikt gaan worden, waar de nadruk op de laatste zal liggen. Het team Het realiseren van de micro website is een individueel project. Dit betekend dat de opdrachtnemer zelf van begin tot het eind de regie heeft zonder te hoeven overleggen met eventuele teamgenoten. Wel maakt de opdrachtnemer onderdeel uit van een team, ofwel peergroep genoemd. Binnen dit team kunnen vraagstukken aan elkaar voorgelegd worden waardoor er ineens acht ogen naar bijvoorbeeld een ontwerp kijken in plaats van twee, gezamenlijk sta je altijd sterker dan wanneer je alleen bent. Eigenschappen Een sterk punt is dat ik gevoel, kennis en verstand heb van vormgeving, zowel voor print als digitaal. Daarnaast ben ik gemotiveerd en perfectionistisch. Het van de grond af aan opbouwen van een website, het coderen, daarentegen is een minder sterk punt. Daarnaast gaat het omzetten van de interactie in bijvoorbeeld Javascript of JQuery ook de nodige moeite en problemen opleveren. Het laatst genoemde sterke punt, perfectionistisch, heeft in mijn geval altijd twee kanten, ik moet mijzelf niet verliezen in een onderdeel waardoor er minder tijd over is voor andere belangrijke zaken. Door het maken, en houden aan, de gemaakte planning kan dit laatste enigszins beperkt worden. Daarnaast moeten er nou eenmaal keuzes gemaakt worden. Ook de nog beperkte kennis van onder andere Javascript en JQuery zal ik moeten uitbreiden om de nodige interactie in de micro website te kunnen verwerken. ¹ 1.3 Ontwerpprincipes 1. Behoeften zijn het beginsel Voorafgaand aan elk ontwerp moet er onderzocht worden wat de behoeften zijn van de gebruiker. Niet zomaar dingen aannemen, maar het oprecht zoeken en willen begrijpen waar behoefte aan is. 2. Wat gevraagd wordt is niet altijd nodig De behoeften waar een gebruiker om vraagt is niet altijd wat ze nodig hebben, wat een belangrijke aanvulling is op het eerste ontwerpprincipe. Onderzoek en test of de behoefte door middel van een andere ontwerpoplossing verbeterd kan worden. 3. Als je denkt dat je er bent, denk dan nog eens Het meerdere malen doorlopen van de verschillende fases binnen een project voorkomt een ongewenste tunnelvisie. Weeg keuzes af, overdenk en test deze. Iteratie is de sleutel tot een succesvolle oplossing. 4. Ontwerp minimalistisch Visueel gezien heeft een minimalistisch ontwerp een schone en nette uitstraling. Daarnaast geeft het een bepaalde mate van rust, waardoor nadruk gelegd kan worden op de belangrijke zaken binnen het ontwerp. Verwijder wat niet van belang is, om meer ruimte te creëren voor wat wel van belang is. 5. Op weg naar eenvoud De gebruiker moet de controle hebben. Maak het de gebruiker niet onnodig moeilijk om een interface te gebruiken, bedenk juist manieren om het te vergemakkelijken, te vereenvoudigen. ² ¹ Projectplan, succesfactoren blz. 11 ² Projectplan, succesfactoren blz Beperkingen

8 5 2.0 Content Na het bepalen van de richtlijnen dient de structuur van de micro website bepaald te worden alsmede het vastleggen van alle inhoud. De structuur wordt beschreven in paragraaf 2.1. De inhoud, oftewel de content, beschreven in paragraaf 2.2, bevat elk relevant element van de micro website. 2.1 Sitemap De micro website bestaat uit één pagina, oftewel een single page. Om meer duidelijkheid te geven is besloten om de overige pagina's ook in de sitemap op te nemen. De single page is door een stippellijn omkaderd, dit ter verduidelijking, zie afbeelding 21. De game bestaat uit vier vragen en vier keuzemogelijkheden. De gebruiker krijgt het eerste filmpje te zien wanneer hij of zij de game start, vervolgens moet een vraag met betrekking tot dat filmpje beantwoord worden en zal de gebruiker automatisch doorgaan naar het tweede filmpje, enzovoorts. Wanneer deze vragen zijn beantwoord komt de gebruiker terecht op de pagina met het scoreoverzicht welke ingaat op de gegeven antwoorden van de gebruiker. Aan het onderwerp 'milieu', zoals al eerder beschreven in het projectplan, zijn vier landen gekoppeld, te weten: Nederland, Beijing, Shenzhen en Brazilië. Elk van deze landen heeft respectievelijk een introductie en een vervolgpagina. Op de introductiepagina komt een aan het onderwerp gerelateerde fullscreen afbeelding alsmede de naam van het land en het betreffende onderwerp. De content en afbeeldingen met betrekking tot het onderwerp en de tentoonstelling komen op de vervolgpagina. Hiervoor is gekozen om de gebruiker niet te overladen met informatie waar hij niet om gevraagd heeft. Wanneer hij geïnteresseerd is in een onderwerp, kan hij of zij zelf kiezen om naar de vervolgpagina te gaan om daar meer informatie over het onderwerp te vinden. Card sorting Tijdens het vorige project is er al nagedacht over de indeling van de micro website. Deze structuur en indeling heb ik voor dit project overgenomen. Het betreft hier de volgende onderdelen: de game, Nederland met bijbehorend onderwerp, Beijing met bijbehorend onderwerp, Shenzhen met bijbehorend onderwerp, Brazilië met bijbehorend onderwerp en bezoek. De content van dit laatste is wel uitgebreider geworden, zo moeten er onder andere ook de openingstijden en prijzen te vinden zijn. De volgende kaartjes zijn gemaakt om de indeling van de micro website te testen met twee personen (de indeling is bedacht zoals ik die op dat moment goed vond werken): game: game, video Nederland, vraag Nederland, video Beijing, vraag Beijing, video Shenzhen, vraag Shenzhen, video Brazilië, vraag Brazilië en score game onderwerpen: Nederland, informatie Nederland, Beijing, informatie Beijing, Shenzhen, informatie Shenzhen, Brazilië en informatie Brazilië bezoek: bezoek, expositie recyclekunst, jij bepaalt het volgende thema, bezoek het vernieuwde, stuur jouw recyclekunstwerk in, volg de workshop recyclen en bezoekersinformatie Tijdens de sessie vielen de volgende punten op: de 'video' kaartjes werden bij het onderwerp gelegd, de game bestaat enkel uit vragen 'expositie recyclekunst', 'volg nu de workshop recyclen' en 'bezoek het vernieuwde ' werden niet geassocieerd met de bezoekpagina, er werd meer gedacht aan een 'over het ' pagina de werking van 'Nederland' en 'informatie Nederland' was duidelijk genoeg Nadat ik de werking van de game had laten zien begrepen de testpersonen dat de 'video' kaartjes hoorde bij de game en niet bij het desbetreffende land. Door dit resultaat heb ik besloten om de indeling van de micro website is dus niet aan te passen. 2.0 Content

9 6 x 4 game video 'land' ¹ keuze 'land' ² overzicht intro 'Nederland' vervolg 'Nederland' intro 'Beijing' vervolg 'Beijing' intro 'Shenzhen' vervolg 'Shenzhen' intro 'Brazilië' vervolg 'Brazilië' bezoek Afbeelding 21. Sitemap ¹ vervang 'land' respectievelijk door: Nederland, Beijing, Shenzhen en Brazilië ² vervang 'land' respectievelijk door: Nederland, Beijing, Shenzhen en Brazilië 2.1 Sitemap

10 7 2.2 Content requirements Content item Plaats Contenttype Eigenschappen logo museon global navigation global navigation global navigation global navigation global navigation global navigation achtergrond afbeelding titel onderwerp button speel de game local navigation local navigation hover button play button pause button sound button mute video nederland video beijing video shenzhen video brazilië titel onderwerp keuze één keuze twee button één button twee titel onderwerp titel onderwerp klaar afbeelding nederland afbeelding beijing afbeelding shenzhen afbeelding brazilië antwoord nederland toelichting antwoord goed of niet goed titel resultaat delen facebook delen twitter icoon delen facebook icoon delen facebook hover icoon delen twitter header header > nav header > nav header > nav header > nav header > nav header > nav game > intro game > intro game > intro game > intro (x2) game > intro (x2) game > video (x4) game > video (x4) game > video (x4) game > video (x4) game > video nederland game > video beijing game > video shenzhen game > video brazilië game > keuze (x4) game > keuze (x4) game > keuze (x4) game > keuze (x4) game > keuze (x4) game > overzicht game > overzicht game > overzicht game > overzicht game > overzicht game >overzicht game > overzicht (x4) game > overzicht (x4) game > overzicht (x4) game >resultaat game >resultaat game >resultaat game > resultaat game > resultaat game > resultaat foto afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding video video video video foto > screenshot video foto > screenshot video foto > screenshot video foto > screenshot video afbeelding afbeelding afbeelding '' 'Game' 'Nederland' 'Beijing' 'Shenzhen' 'Brazilië' 'Bezoek' gif 1280 x 420px 'Welke [...] aarde?' Speel de game png 55 x 55px png 55 x 55px png 35 x 35px png 35 x 35px png 35 x 35px png 35 x 35px 720p 720p 720p 720p 'Wat zou jij doen?' maximaal 3 woorden maximaal 3 woorden 'A' 'B' 'Klik op [...] te bekijken' 'Scroll naar [...] te zien' jpg 150 x 150px jpg 150 x 150px jpg 150 x 150px jpg 150 x 150px maximaal 4 woorden maximaal 30 woorden 'Je antwoord is goed/fout' maximaal 20 woorden 'Deel op FaceBook' 'Deel op Twitter' 55 x 68px 55 x 68px 55 x 68px 2.0 Content

11 8 Aan te leveren Bron Auteursrecht Omzetten nodig Status 1 (zie blz. 11) Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier Projectdossier 2 (zie blz. 11) 2 (zie blz. 11) 3 (zie blz. 11) Dali Facebook Facebook Twitter animeren afmetingen afmetingen afmetingen afmetingen afmetingen afmetingen schrijven schrijven afmetingen afmetingen afmetingen afmetingen schrijven schrijven afmetingen afmetingen afmetingen 2.2 Content requirements

12 9 Content item Plaats Contenttype Eigenschappen icoon delen twitter hover achtergrond afbeelding local navigation local navigation hover titel onderwerp subtitel onderwerp onderwerp button bezoek het museon afbeelding galerij afbeelding galerij achtergrond afbeelding local navigation local navigation hover titel onderwerp subtitel onderwerp onderwerp button bezoek het museon afbeelding galerij afbeelding galerij achtergrond afbeelding local navigation local navigation hover titel onderwerp subtitel onderwerp onderwerp button bezoek het museon afbeelding galerij afbeelding galerij achtergrond afbeelding local navigation local navigation hover titel onderwerp subtitel onderwerp onderwerp button bezoek het museon afbeelding galerij afbeelding galerij titel onderwerp onderwerp afbeelding galerij game > resultaat nederland > intro nederland > intro (x2) nederland > intro (x2) nederland > intro (x2) nederland > intro (x2) nederland > vervolg nederland > vervolg nederland > vervolg nederland > vervolg (x2) beijing > intro beijing > intro (x2) beijing > intro (x2) beijing > intro (x2) beijing > intro (x2) beijing > vervolg beijing > vervolg beijing > vervolg beijing > vervolg (x2) shenzhen > intro shenzhen > intro (x2) shenzhen > intro (x2) shenzhen > intro (x2) shenzhen > intro (x2) shenzhen > vervolg shenzhen > vervolg shenzhen > vervolg shenzhen > vervolg (x2) brazilië > intro brazilië > intro (x2) brazilië > intro (x2) brazilië > intro (x2) brazilië > intro (x2) brazilië > vervolg brazilië > vervolg brazilië > vervolg brazilië > vervolg (x2) bezoek > expo recyclekunst bezoek > expo recyclekunst bezoek > expo recyclekunst afbeelding foto afbeelding afbeelding foto foto foto afbeelding afbeelding foto foto foto afbeelding afbeelding foto foto foto afbeelding afbeelding foto foto foto 55 x 68px jpg 1680 x 1260px png 55 x 55px png 55 x 55px 'Nederland' 'Plastic soep in de Noordzee' maximaal 100 woorden 'Bezoek het ' jpg 900 x 640px jpg 900 x 640px jpg 1680 x 1260px png 55 x 55px png 55 x 55px 'Beijing' 'Het gevecht tegen smog' maximaal 100 woorden 'Bezoek het ' jpg 900 x 640px jpg 900 x 640px jpg 1680 x 1260px png 55 x 55px png 55 x 55px 'Shenzhen' 'De mobiele telefoon' maximaal 100 woorden 'Bezoek het ' jpg 900 x 640px jpg 900 x 640px jpg 1680 x 1260px png 55 x 55px png 55 x 55px 'Brazilië' 'Ontbossing door soja' maximaal 100 woorden 'Bezoek het ' jpg 900 x 640px jpg 900 x 640px 'Expositie recyclekunst' maximaal 120 woorden jpg 600 x 450px 2.0 Content

13 10 Aan te leveren Bron Auteursrecht Omzetten nodig Status 3 (zie blz. 11) 4 (zie blz. 11) Projectdossier 5 (zie blz. 11) 6 (zie blz. 11) Projectdossier 7 (zie blz. 11) 8 (zie blz. 12) Projectdossier 9 (zie blz. 12) 10 (zie blz. 12) Projectdossier 11 (zie blz. 12) Twitter Externe partij Externe partij Externe partij Externe partij Externe partij Externe partij Externe partij Externe partij afmetingen afmetingen, rgb, 72 dpi schrijven afmetingen, rgb, 72 dpi afmetingen, rgb, 72 dpi schrijven afmetingen, rgb, 72 dpi afmetingen, rgb, 72 dpi schrijven afmetingen, rgb, 72 dpi afmetingen, rgb, 72 dpi schrijven afmetingen, rgb, 72 dpi schrijven afmetingen 2.2 Content requirements

14 11 Content item Plaats Contenttype Eigenschappen afbeelding galerij titel cocreatie cocreatie bladeren button versturen afbeelding galerij afbeelding galerij titel onderwerp onderwerp button meer informatie titel onderwerp label input label input label input label input button versturen titel onderwerp onderwerp onderwerp onderwerp button meer informatie achtergrond afbeelding titel onderwep subtitel onderwerp icoon facebook icoon facebook hover iccon twitter icoon twitter hover icoon youtube icoon youtube hover copyright, made by bezoek > expo recyclekunst (x2) bezoek > cocreatie bezoek > cocreatie bezoek > cocreatie bezoek > cocreatie bezoek > cocreatie bezoek > cocreatie (x2) bezoek > vernieuwde museon bezoek > vernieuwde museon bezoek > vernieuwde museon bezoek > cocreatie 2 bezoek > cocreatie 2 bezoek > cocreatie 2 bezoek > cocreatie 2 bezoek > cocreatie 2 bezoek > cocreatie 2 bezoek > workshop bezoek > workshop bezoek > bezoekersinformatie bezoek > bezoekersinformatie bezoek > bezoekersinformatie bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter bezoek > uitsmijter footer foto afbeelding foto foto foto afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding jpg 600 x 450px 'Stuur jouw kunstwerk in' maximaal 90 woorden png 30 x 30px 'Versturen' jpg 600 x 450px jpg 600 x 450px 'Het vernieuwde ' maximaal 120 woorden 'Meer informatie' 'Bepaal het volgende thema' 'Naam', ' adres' ' adres' 'Thema' 'Motiveer je keuze' 'Versturen' 'Recycle workhop' maximaal 120 woorden 'Bezoekersinformatie' maximaal 80 woorden 'Meer informatie' jpg 1280 x 600px 'Beleef het zelf' 'Bezoek ons ook via' png 45 x 35px png 45 x 35px png 45 x 35px png 45 x 35px png 45 x 35px png 45 x 35px ' ', 'HHS & TD' TITPGieUYI/AAAAAAAAAr0/WX3DfZgS2Io/ 3 s1600/plasticsoup2.jpg brandassets /uploads/2013/10/reuchinasmog_.jpg loads/2013/04/plasticsoepmet 7 NAAMSVERMELDINGJ.vanFraneker ochinasmogfacebook.jpg IMARESe.jpg 2.0 Content

15 12 Aan te leveren Bron Auteursrecht Omzetten nodig Status Projectdossier Projectdossier Projectdossier 12 (zie blz. 12) Projectdossier 13 (zie blz. 12) Projectdossier Projectdossier 2 (zie blz. 11) 2 (zie blz. 11) 3 (zie blz. 11) 3 (zie blz. 11) 14 (zie blz. 12) 14 (zie blz. 12) Externe partij Facebook Facebook Twitter Twitter Youtube YouTube schrijven afmetingen afmetingen schrijven schrijven schrijven afmetingen afmetingen afmetingen afmetingen afmetingen afmetingen afmetingen / jpg ijsbarbaar03.jpg uploads/2013/06/iphonepartspile001.jpg downloads.html 2013/06/img_0339.jpg 11 uploads/2013/07/sojafamasul.jpg 2.2 Content requirements

16 Handelingen en feedback Voorafgaand aan het ontwerpen dient er dieper nagedacht te worden over bepaalde aspecten van het ontwerp. Het navigatiemodel, beschreven in paragraaf 3.1, bepaald de verschillende soorten navigatie. De concrete scenario's en flowchart, respectievelijk beschreven in paragraaf 3.2 en weergegeven in paragraaf 3.3, hebben onder andere bijgedragen aan het opstellen van de functionele en niet functionele eisen. Daarnaast wordt er een begin gemaakt aan het visuele ontwerp, beschreven en weergegeven in paragraaf 3.4, welke vervolgens omgezet worden in wireframes, welke weergegeven is in paragraaf 3.5, het skelet van de micro website. 3.1 Navigatiemodel De legenda, horend bij afbeelding 31 is weergegeven op de volgende pagina. Deze legenda hoort tevens bij afbeelding 32. x 4 game video 'land' keuze 'land' overzicht intro Nederland vervolg 'Nederland' intro Beijing vervolg 'Beijing' intro Shenzhen vervolg 'Shenzhen' intro Brazilië vervolg 'Brazilië' bezoek museon.nl Afbeelding 31. Navigatiemodel 3.0 Handelingen en feedback

17 14 Legenda Global navigation Local navigation Supplementary navigation Contextual navigation Courtesy navigation Social navigation ¹ Ervan uitgaande dat de micro website een onderdeel van de officiële website van het wordt is het navigatiemodel opgezet, zie afbeelding 31. Daarnaast zijn in afbeelding 32 alle navigatierichtingen weergegeven. Wanneer de micro website vanaf de website van het geopend wordt, zal deze in een nieuw tabblad worden geopend. Op deze manier kan elke ontworpen micro website volledig uniek zijn, zonder te veel rekening te houden met de website van het zelf. Hierdoor kan gefocust worden op de aansluiting van de micro website op het thema. Uit het model valt af te lezen dat shortcuts naar gerelateerde content, supplementary navigation, en links naar bijvoorbeeld contactinformatie of de klantenservice, courtesy navigation, verwijzen naar ''. Hiermee wordt dus de website van het bedoeld, namelijk: Hiervoor is gekozen aangezien er zeven thema's zijn, en het een verspilling van tijd is om een bepaald gegeven, denk bijvoorbeeld aan de entreeprijzen, op zeven micro websites aan te passen plus die van het zelf. Wel zal de nodige informatie weergegeven worden op de micro website om de gebruiker niet te veel te laten schakelen tussen de websites. Kortom: al hetgeen aan het thema gerelateerd komt op de micro website te staan, voor globale algemene gegevens van het wordt dus verwezen naar de website van het. Afbeelding 32. Navigatiemodel, richtingen ¹ link naar de sociale media: Twitter, Facebook en YouTube respectievelijk com/, museondenhaag en user/denhaag met tevens de mogelijkheid tot 'sharen' oftewel delen van deze pagina's 3.1 Navigatiemodel

18 Concrete scenario's De hierop volgende drie concrete scenario's zijn gebaseerd op de onderstaande drie persona's. Sem Wichelaar is tien jaar oud. Hij woont samen met zijn ouder en drie zusjes in Alphen aan de Rijn. Hij zit in groep zes op basisschool de Duizendpoot. Sem heeft het hier erg naar zijn zin, en speelt graag in de pauze een potje voetbal met zijn vrienden. Na school traint Sem twee keer per week bij zijn voetbalclub. Als hij later groot is wil Sem professioneel voetballer worden. Binnenkort gaat Sem met zijn klas een bezoek brengen aan het. Sem heeft hier veel zin in, want hij houdt er van om naar musea te gaan. Tijdens schoolvakanties gaat Sem vaak met zijn opa en oma naar een museum en hij beleeft hier altijd veel pret aan. Zie ook afbeelding 33. Benjamin Hermans is 72 jaar oud en woont samen met zijn vrouw Margot in een rijtjeshuis in Voorschoten. Benjamin is gepensioneerd. Voordat hij met pensioen ging was Benjamin mariene ecoloog. Voor zijn baan bestudeerde hij de samenhang tussen levende en levenloze natuur in de zee. Hij heeft jarenlang onderzoek gedaan naar de gevolgen van een olieramp voor de levende organismen in de zee. Benjamin vindt het belangrijk dat hij zijn kennis kan doorgeven aan zijn kleinzoon Ben. Ben is tot Benjamins spijt niet geïnteresseerd in wat zijn opa hem te vertellen heeft, Ben kijkt liever naar cartoons of gaat voetballen op een pleintje. Om zijn kleinzoon toch te informeren wil Benjamin zijn kleinzoon meenemen naar een museum. Zie ook afbeelding 34. Angelique Waaier is 35 jaar oud. Ze woont samen met haar vriend Erik en haar 9 jarige dochter Jaimy in Den Haag. Angelique werkt als bedrijfspsychologe bij de politie. Naast haar werk leest ze graag of gaat ze hardlopen in het park. Omdat Angelique een drukke baan heeft die veel van haar vergt heeft ze weinig vrije tijd om het haar gezin door te brengen. Daarom wil ze ieder moment dat ze samen kan spenderen met haar gezin zo goed mogelijk benutten, en gaat ze leuke dingen doen, zoals naar de bioscoop, pretparken en musea. Zie ook afbeelding 35. ¹ Afbeelding 33. Persona, Sem Wichelaar De klas van Sem Wichelaar gaat binnenkort naar het toe, het is een jaarlijks tafereel van groep 6. Sem heeft hier ontzettend veel zin in. Aangezien hij al een geruime tijd niet naar het is gegaan, besluit hij om de website te bezoeken om te kijken wat er momenteel tentoongesteld wordt en wat hij bij het museumbezoek met zijn klas kan verwachten. Sem bezoekt de website via beschermen. Hij ziet dat het mogelijk is om de 'game' te spelen en klikt op de button 'Speel de game'. Een video speelt automatisch af, aangezien hij net hard muziek heeft geluisterd schrikt hij zich rot van de harde stem. Na de eerste vraag beantwoord te hebben klikt hij op 'home'. Hij wil namelijk informatie vinden wat er tijdens het museumbezoek allemaal te doen is. Wellicht dat hij aan het eind van zijn zoektocht de game wil afronden. Hij scrolt door de website. Hij ziet alleen grote foto's met onder andere titels zoals: 'Nederland' en 'Shenzhen'. Van Shenzhen heeft hij nog nooit gehoord en besluit om op het 'pijltje' rechts in het midden van de pagina te klikken om wellicht meer informatie daarover te krijgen. Hij leest een stuk en begrijpt dat dit één van de onderwerpen is die momenteel tentoongesteld worden. Hij klikt op het pijltje om terug te gaan en scrolt verder naar beneden. De 'bezoek' pagina vind hij niet interessant en scrolt naar boven om ook over 'Nederland' meer informatie te krijgen. Daarna klikt hij op 'game' en 'speel de game' om de game af te ronden. 3.0 Handelingen en feedback

19 16 Afbeelding 34. Persona, Benjamin Hermans Afbeelding 35. Persona, Angelique Waaier Benjamin Hermans wil zijn kleinzoon Ben inspireren en informeren over mariene ecologie. Hij denkt dat een bezoek aan een museum het juiste middel is om zijn kleinzoon een zetje in de juiste richting te geven. Ben staat hier niet afwijzend tegenover en wil best met zijn opa mee naar een museum. Benjamin heeft tijdens een bezoek aan familie in Den Haag een serie reclameborden gezien van het. Hierop stond dat binnenkort het vernieuwde museum te bezoeken is met de verschillende nieuwe thema's. Onder andere viel zijn oog op het onderwerp 'Nederland, plastic soep in de Noordzee' van het thema 'beschermen'. Hij besluit om na het familiebezoek thuis hier meer informatie over op te zoeken. Hij bezoekt de website via nl. Vervolgens klikt hij op het thema beschermen. Hij klikt op het menu item 'Nederland' om te kijken of zijn verwachtingen overeenkomen met wat het tentoongesteld heeft. Nadat hij op het pijltje rechts in het midden heeft geklikt leest hij de korte introductie over het onderwerp en bekijkt de foto's van de tentoonstelling. Hij is verrast en besluit om alvast kaartjes te bestellen. Hij klikt op 'bezoek' en verwacht daar meer informatie over het bestellen van de entreekaartjes. Zijn oog valt op de titel 'kaartjes bestellen' en ziet vervolgens dat hij op een link moet klikken welke verwijst naar de website van het, deze opent in een nieuw tabblad. Hij bestelt de kaartjes en sluit beide tabbladen af. Volgende week heeft Jaimy, de dochter van Angelique en Erik Waaier, een week vakantie, daarom hebben ze besloten om een dag vrij te nemen om samen met haar dochter wat leuks te gaan doen. Angelique heeft van een vriendin vernomen dat er momenteel een leuke en interessante tentoonstelling over het milieu, met beschermen als thema, loopt in het. Jaimy is meteen enthousiast, maar haar man moet ze overhalen aangezien hij niet zo van de museabezoeken is. Om meer te weten te komen over de tentoonstelling bezoekt Angelique de website van het via en klikt vervolgens op 'beschermen' waarna ze op de micro website terecht komt. Op de micro website ziet ze in het menu, naast 'game' en 'menu' alleen vier landen staan. Zullen daar de onderwerpen aan gekoppeld zijn, vraagt ze zichzelf hardop af. Nadat de introductie pagina van Nederland en Beijing heeft gezien snapt ze de indeling van de micro website en besluit ze meer informatie op te zoeken over het onderwerp 'de mobiele telefoon', dit is een actueel en interessant onderwerp voor haar dochter die sinds kort ook een telefoon heeft. Tot slot klikt ze op 'bezoek' om te kijken of het überhaupt open is die dag en laat de pagina open staan op de computer zodat haar man eventueel ook nog kan kijken. ¹ Onderzoeksrapport, doelgroepsbeschrijving blz Concrete scenario's

20 Flowchart klik op 'speel de game' is de game voortijdig afbebroken nee het systeem toont de video horend bij 'Nederland' het systeem toont de vraag horend bij 'Nederland' is er op optie 'a' of 'b' geklikt ja het systeem toont de video horend bij 'Beijing' ja was dit bij 'Nederland' ja ja was dit meer dan 10 minuten geleden nee nee nee ja was dit bij 'Beijing' ja was dit meer dan 10 minuten geleden nee nee ja was dit bij 'Shenzhen' ja was dit meer dan 10 minuten geleden nee nee ja was dit bij 'Brazilië' ja was dit meer dan 10 minuten geleden nee 3.0 Handelingen en feedback