1 Wat is jouw footprint? Projectdossier Design details and realise CMD C PR 01 Begeleiders: B. Reurings en D. Mast Opdrachtgever: Klas 1f groep 232 Wa...
Projectdossier Design details and realise CMD C PR 01
Begeleiders: B. Reurings en D. Mast Opdrachtgever: Museon Tim Davids 13095978 Klas 1f groep 23
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: Museon Tim Davids 13095978 Klas 1f groep 23
Inhoudsopgave
1.0 Richtlijnen
1
1.1 Geprioriteerde eisen
1
1.2 Beperkingen
1.3 Ontwerpprincipes
2.0 Content
3 4
5
2.1 Sitemap
2.2 Content requirements
3.0 Handelingen en feedback
5
13
7
3.1 Navigatiemodel
13
3.4 Schets visueel ontwerp
19
3.2 Concrete scenario's 3.3 Flowchart
3.5 Wireframes 3.6 Interactie
4.0 Presentatie 4.1 Style tile
4.2 Uitwerking visueel ontwerp
Bijlagen
A Schetsen
B Checklist projectdossier C Projectplan
15 17 27 35
39
39 43
55
55 57 59
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
1.2.1 Het systeem moet het mogelijk maken om een video automatisch te kunnen afspelen 1.2.2 Het systeem moet het mogelijk maken om een video te kunnen pauzeren
1.2.3 Het systeem moet het mogelijk maken om een video te kunnen doorspoelen
1.2.4 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
2.1.1 De interface toont op elke pagina het logo van het Museon 2.1.2 De interface toont op elke pagina de titel van de pagina
2.1.3 De interface maakt onderscheid tussen belangrijke en minder belangrijke content 2.1.4 De interface is gebaseerd op de minimalistische ontwerpstijl
2.1.5 De interface toont bij elke sectie een verschillende steunkleur
2.1.6 De interface maakt gebruik van afgeronde rechthoeken ter verduidelijking van content 2.1.7 De interface toont op elke pagina de globale navigatie
2.1.8 De interface maakt gebruik van full-screen afbeeldingen 2.1.9 De interface maakt gebruik van affordances
2.1.10 De interface is gebaseerd op een grid voor desktop 2.1.11 De interface is gebaseerd op een grid voor tabled
2.1.12 De interface is gebaseerd op een grid voor mobiel
2.3 Performance eisen
2.3.2 Het systeem bevat jpg bestanden van maximaal 2,5mb per bestand
2.3.3 Het systeem bevat png bestanden van maximaal 100kb per bestand 2.3.4 Het systeem bevat gif bestanden van maximaal 100kb per bestand
2.4 Operationele eisen
2.4.1 Het systeem moet geschreven zijn in semantisch correcte HTML 5.0 2.4.2 Het systeem moet geschreven zijn in syntactisch correcte HTML 5.0 2.4.3 Het systeem moet geschreven zijn in semantisch correcte CSS 3.0 1.0 Richtlijnen
2
2.4.4 Het systeem moet geschreven zijn in syntactisch correcte CSS 3.0
2.4.5 Het systeem moet geschreven zijn in syntactisch correcte Javascript 2.4.6 Het systeem moet geschreven zijn in syntactisch correcte JQuery
2.5 Technische eisen
2.5.1 Het systeem moet draaien op versie 32.0.1700.107 van Google Chrome
2.5.2 Het systeem moet de status van de game tot 10 minuten na het afsluiten onthouden
2.5.3 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 Museon 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 co-creatie 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
2.2.1 Het systeem moet schaalbaar zijn om wisselende bezoekersaantallen op te vangen
2.3 Performance eisen
2.3.5 Het systeem moet zoekopdrachten binnen één seconde uitvoeren
2.3.1 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
2.4.7 Het systeem wordt onderhouden door een systeembeheerder die ervaring heeft met HTML 5.0 2.4.8 Het systeem wordt onderhouden door een systeembeheerder die ervaring heeft met CSS 3.0
2.4.9 Het systeem wordt onderhouden door een systeembeheerder die kennis heeft van Javascript 2.4.10 Het systeem wordt onderhouden door een systeembeheerder die kennis heeft van JQuery
Would have
2.0 Niet functionele eisen 2.5 Technische eisen
2.5.2 Het systeem moet gebouwd worden op basis van een CMS ¹ ¹ Ongeprioriteerde eisen: projectplan, definiëring blz. 6 - 7 1.1 Geprioriteerde eisen
3
1.2 Beperkingen Benodigde tijd
burgerschap een plek krijgt.
Het project loopt gedurende een periode van tien
- de doelgroep op de microsite laten beleven
zijn zelfstudie waarin zelfstandig gewerkt wordt aan
- de doelgroep informeren over een onderwerp
weken. Het geschatte aantal te besteden uren is 160, waarvan 38 uur is ingeroosterd. De resterende uren 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
hoe het is om een bezoek aan het Museon te brengen.
(thema) waarover zij iets kunnen leren op
een manier die aansluit bij de wijze waarop bezoekers in het Museon leren.
- de doelgroep actief stimuleren om het Museon te bezoeken.
- de doelgroep middels co-creatie een eigen inhoudelijke bijdrage laten leveren
van semantisch en syntactisch correcte HTML 5.0, CSS 3.0, Javascript en JQuery. Daarnaast dient het
User needs
aan het onderwerp van de microsite.
versie van Google Chrome. Overige browsers, zoals bijvoorbeeld Internet Explorer, Mozilla Firefox en
balans gevonden worden tussen de behoeften van kinderen en ouders. Voor beide moet het ontwerp
ontwerp volledig te functioneren op de recentste
In het ontwerp voor de micro website moet een
Opera worden bij de uiteindelijke beoordeling van
uitdagend zijn en aanspreken. Ook is uit het onder-
het project buiten beschouwing gelaten. Business needs Eisen
- de micro website moet informatie bevatten over het nieuwe Museon.
- de micro website bevat informatie over het thema 'beschermen'.
- de micro website moet een voorbeeld
geven van hoe de bezoeker kan leren in het Museon.
- de micro websitemoet potentiële bezoekers aanzetten tot een bezoek.
- de micro website moet de gebruikers, door-
middel van co-creatie, de mogelijkheid geven om het ontwerp van de microsite inhoudelijk aan te passen.
Wensen
- de doelgroep informeren dat het Museon 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-
1.0 Richtlijnen
zoeksrapport 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 voor-
proefje. Het moet de potentiële bezoeker duidelijk worden wat hem of haar te wachten staat bij een museumbezoek aan het Museon. 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 be-
keken 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 ge-
bruikt worden om de gemaakte schetsen te digitaliseren. Waar nodig zal Adobe Photoshop gebruikt
worden om afbeeldingen op een correcte manier op
4
1.3 Ontwerpprincipes te slaan zodat deze gebruikt kunnen worden in de
1. Behoeften zijn het beginsel
wat weer afbeeldingen en daardoor laadtijd scheelt.
zomaar dingen aannemen, maar het oprecht zoeken
uiteindelijke realisatie. Uiteraard zal zoveel mogelijk,
Voorafgaand aan elk ontwerp moet er onderzocht
Voor het coderen van de website zullen Notepad++
en willen begrijpen waar behoefte aan is.
voor zover realiseerbaar is, met CSS opgelost worden, en Aptana gebruikt gaan worden, waar de nadruk op de laatste zal liggen. Het team
Het realiseren van de micro website is een indivi-
dueel 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 bij-
voorbeeld 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 onder-
deel waardoor er minder tijd over is voor andere be-
worden wat de behoeften zijn van de gebruiker. Niet 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 aan-
vulling 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. ²
langrijke 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. ¹
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
bijbehorend onderwerp, Shenzhen met bijbehorend
op te nemen. De single page is door een stippellijn
geworden, zo moeten er onder andere ook de ope-
een single page. Om meer duidelijkheid te geven is besloten om de overige pagina's ook in de sitemap
omkaderd, dit ter verduidelijking, zie afbeelding 2-1. De game bestaat uit vier vragen en vier keuze-
mogelijkheden. 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. Wan-
neer deze vragen zijn beantwoord komt de gebruiker terecht op de pagina met het scoreoverzicht welke
onderwerp, Brazilië met bijbehorend onderwerp en
bezoek. De content van dit laatste is wel uitgebreider ningstijden 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
ingaat op de gegeven antwoorden van de gebruiker.
- onderwerpen: Nederland, informatie Nederland,
koppeld, te weten: Nederland, Beijing, Shenzhen en
- bezoek: bezoek, expositie recyclekunst, jij be-
Aan het onderwerp 'milieu', zoals al eerder
beschreven in het projectplan, zijn vier landen ge-
Brazilië. Elk van deze landen heeft respectievelijk een introductie en een vervolgpagina. Op de introductiepagina komt een aan het onderwerp gerelateerde full-screen 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
Beijing, informatie Beijing, Shenzhen, informatie Shenzhen, Brazilië en informatie Brazilië
paalt het volgende thema, bezoek het vernieuwde Museon, 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 Museon' werden niet geassocieerd met de bezoek-
pagina, er werd meer gedacht aan een 'over het Museon' pagina
- de werking van 'Nederland' en 'informatie Nederland' was duidelijk genoeg
Tijdens het vorige project is er al nagedacht over
Nadat ik de werking van de game had laten zien be-
Het betreft hier de volgende onderdelen: de game,
Door dit resultaat heb ik besloten om de indeling van
de indeling van de micro website. Deze structuur en indeling heb ik voor dit project overgenomen.
Nederland met bijbehorend onderwerp, Beijing met 2.0 Content
grepen de testpersonen dat de 'video' kaartjes hoorde bij de game en niet bij het desbetreffende land. de micro website is dus niet aan te passen.
6
x4 game
video 'land' ¹
intro 'Nederland'
vervolg 'Nederland'
intro 'Beijing'
vervolg 'Beijing'
intro 'Shenzhen'
vervolg 'Shenzhen'
intro 'Brazilië'
vervolg 'Brazilië'
keuze 'land' ²
overzicht
bezoek Afbeelding 2-1. Sitemap
¹ vervang 'land' respectievelijk door: Nederland, Beijing, Shenzhen en Brazilië
2.1 Sitemap
² vervang 'land' respectievelijk door: Nederland, Beijing, Shenzhen en Brazilië
7
2.2 Content requirements Content item
Plaats
Contenttype
Eigenschappen
logo museon
header
tekst
'MUSEON'
global navigation
header > nav
tekst
'Beijing'
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 2.0 Content
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
tekst tekst tekst tekst tekst foto
tekst tekst
afbeelding afbeelding afbeelding afbeelding afbeelding afbeelding video video video video tekst tekst tekst tekst tekst tekst tekst
foto > screenshot video foto > screenshot video foto > screenshot video foto > screenshot video tekst tekst tekst tekst tekst tekst
afbeelding afbeelding afbeelding
'Game'
'Nederland' '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
8
Aan te leveren
Bron
Auteursrecht
Omzetten nodig
Status
Tim Davids
Ontwerprapport
Haagse Hogeschool
-
-
Tim Davids
Ontwerprapport
Haagse Hogeschool
-
-
Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Museon Museon Museon Museon
Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids Tim Davids
Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Museon Museon Museon Museon
Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Haagse Hogeschool Museon Museon Museon Museon
3.0 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 3-1 is weergegeven op de volgende pagina. Deze legenda hoort tevens bij afbeelding 3-2.
game
video 'land'
intro Nederland
vervolg 'Nederland'
intro Beijing
vervolg 'Beijing'
intro Shenzhen
vervolg 'Shenzhen'
intro Brazilië
vervolg 'Brazilië'
bezoek
museon.nl Afbeelding 3-1. Navigatiemodel
3.0 Handelingen en feedback
x4 keuze 'land'
overzicht
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 Museon wordt is het
navigatiemodel opgezet, zie afbeelding 3-1. Daarnaast zijn in afbeelding 3-2 alle navigatierichtingen weergegeven. Wanneer de micro website vanaf de website van het Museon 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 Museon 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 'Mu-
seon'. Hiermee wordt dus de website van het Museon bedoeld, namelijk: www.museon.nl.
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 Museon zelf. Wel zal de nodige informatie weerge-
geven 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 Museon wordt dus verwezen naar de website van het Museon.
Afbeelding 3-2. Navigatiemodel, richtingen
¹ link naar de sociale media: Twitter, Facebook en YouTube respectievelijk https://twitter.
com/Museon, https://www.facebook.com/
museondenhaag en http://www.youtube.com/
user/MuseonDenHaag met tevens de mogelijkheid tot 'sharen' oftewel delen van deze pagina's 3.1 Navigatiemodel
15
3.2 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 Museon. Sem heeft
Afbeelding 3-3. Persona, Sem Wichelaar
zijn opa en oma naar een museum en hij beleeft hier
Museon toe, het is een jaarlijks tafereel van groep 6.
hier veel zin in, want hij houdt er van om naar musea te gaan. Tijdens schoolvakanties gaat Sem vaak met altijd veel pret aan. Zie ook afbeelding 3-3.
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 tus-
sen 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 Benja-
mins 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 3-4.
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 3-5. ¹ 3.0 Handelingen en feedback
De klas van Sem Wichelaar gaat binnenkort naar het Sem heeft hier ontzettend veel zin in. Aangezien hij al een geruime tijd niet naar het Museon 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 www.museon.nl/
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 tekst en begrijpt dat dit één van de on-
derwerpen 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.
16
Afbeelding 3-4. Persona, Benjamin Hermans
Afbeelding 3-5. Persona, Angelique Waaier
Benjamin Hermans wil zijn kleinzoon Ben inspireren
Volgende week heeft Jaimy, de dochter van Angelique
zijn kleinzoon een zetje in de juiste richting te geven.
haar dochter wat leuks te gaan doen.
en informeren over mariene ecologie. Hij denkt dat
een bezoek aan een museum het juiste middel is om 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
Museon. 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 www.museon. 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
Museon 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 Mu-
seon, deze opent in een nieuw tabblad. Hij bestelt de kaartjes en sluit beide tabbladen af. 3.2 Concrete scenario's
en Erik Waaier, een week vakantie, daarom hebben
ze besloten om een dag vrij te nemen om samen met Angelique heeft van een vriendin vernomen dat
er momenteel een leuke en interessante tentoon-
stelling over het milieu, met beschermen als thema, loopt in het Museon. 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 Museon via www.museon.nl 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 kij-
ken of het Museon überhaupt open is die dag en laat
de pagina open staan op de computer zodat haar man eventueel ook nog kan kijken.
Afbeelding 3-6. Flowchart game Legenda Actie gebruiker
Keuzemogelijkheid Reactie systeem ¹
¹ Ter verduidelijking van de te nemen stappen 3.3 Flowchart
ja
19
3.4 Schets visueel ontwerp
MUSEON
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Brazilië
Bezoek
Welke voetafdruk laat jij achter op deze aarde? Speel de game
Afbeelding 3-7. Schets visueel ontwerp, game
MUSEON
Afbeelding 3-8. Schets visueel ontwerp, game video
3.0 Handelingen en feedback
Game
Nederland
Beijing
Shenzhen
20
MUSEON
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Shenzhen
Brazilië
Bezoek
Wat zou jij doen? Laten liggen
Opruimen
A
B
Afbeelding 3-9. Schets visueel ontwerp, game vraag
MUSEON
Game
Nederland
Score overzicht Klik op de vraag om je score te bekijken
Afbeelding 3-10. Schets visueel ontwerp, game overzicht 1
3.4 Schets visueel ontwerp
Beijing
21
MUSEON
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Beijing
Shenzhen
Brazilië
Bezoek
Score overzicht Klik op de vraag om je score te bekijken
“antwoord” “antwoord is niet netjes en slecht voor het millieu, optie B: antwoord is veel beter voor het millieu”
Afbeelding 3-11. Schets visueel ontwerp, game overzicht 2
MUSEON
Game
Nederland
Score overzicht Klik op de vraag om je score te bekijken
Fout
“antwoord” “antwoord is goed en goed voor het millieu, het is een kleine moeite om het weg te gooien toch?”
Afbeelding 3-12. Schets visueel ontwerp, game overzicht 3
3.0 Handelingen en feedback
22
MUSEON
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Nederland Plastic soep in de Noordzee Afbeelding 3-13. Schets visueel ontwerp, Nederland intro
MUSEON Nederland Plastic soep in de Noordzee Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed fortuna fortis; Quid me summum malum est, dici aliter non potest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi Quare obscurentur dicendum sit, cum.
Bezoek het museum
Afbeelding 3-14. Schets visueel ontwerp, Nederland vervolg
3.4 Schets visueel ontwerp
23
MUSEON
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Game
Nederland
Beijing
Shenzhen
Brazilië
Bezoek
Beijing Het gevecht tegen smog Afbeelding 3-15. Schets visueel ontwerp, Beijing intro
MUSEON Beijing Het gevecht tegen smog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed fortuna fortis; Quid me summum malum est, dici aliter non potest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi Quare obscurentur dicendum sit, cum.
MUSEON Shenzhen De mobiele telefoon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed fortuna fortis; Quid me summum malum est, dici aliter non potest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi Quare obscurentur dicendum sit, cum.
Brazilië Ontbossing door soja Afbeelding 3-19. Schets visueel ontwerp, Brazilië intro
MUSEON Brazilië Ontbossing door soja Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed fortuna fortis; Quid me summum malum est, dici aliter non potest. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Sed haec quidem liberius ab eo dicuntur et saepius. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Miserum hominem! Si dolor summum malum est, dici aliter non potest. Ac tamen hic mallet non dolere. Duo Reges: constructio interrete. Illud urgueam, non intellegere eum quid sibi Quare obscurentur dicendum sit, cum.
Afbeelding 3-21. Schets visueel ontwerp, bezoek De afbeeldingen horend bij paragraaf 3.4, afbeelding 3-7 tot en met afbeelding 3-21 zijn de visuele uit-
werkingen van het voorgaande project 'look, listen
