Projectdossier Datum: 13-02-2013 Versie: 1.0 Projectgroep: CMD-C-3.02 Naam: Alexander van der Kooij Student nr: 12027766 Docent: S.C. Hallenga-Brink
Inhoudsopgave: Richtlijnen:... 3 Eisen:... 3 MoSCoW... 3 Functionele eisen:... 4 Niet functionele eisen:... 4 Design principles:... 4 Constraints:... 4 Content:... 5 Sitemap:... 5 Contentplan:... 6 Handelingen en feedback... 6 Navigatiemodellen:... 6 Concrete Scenario s:... 7 Flowcharts:... 8 Wireframes:... 9 Presentatie:... 16 Styleguide... 16 Schermafbeelding:... 18 Bijlage 1:... 19 Projectplan:... 19 Inleiding:... 19 Projectdefinitie:... 20 Projectorganisatie en taakverdeling:... 21 Succesfactoren:... 22 Bijlage 2: Contentplan... Bijlage 3: Logboek... 2
Richtlijnen: Eisen: MoSCoW Must Should Could Won t Het systeem moet informatie tonen over het tropische regenwoud. Het systeem moet onafhankelijk van de aantal bezoekers normaal moeten functioneren. Het systeem moet werken met fancy box. Het systeem moet een inlogsysteem hebben. Het systeem moet interactie bevatten. Het systeem maakt het mogelijk de beheerder nieuws te laten plaatsen. Het systeem maakt het mogelijk nieuws te lezen. Het systeem moet een werkende navigatie hebben. Het systeem moet een werkende game bevatten. Het systeem moet overzichtelijk zijn. Het systeem moet worden weergeven als een grote boom. Het systeem moet verwerkt zijn in HTML5 semantische code. Het systeem moet beeldmateriaal juist weergeven. Het systeem is in werking met de meest recent jquery. Het systeem moet in meerdere talen kunnen weergeven. 3
Functionele eisen: Het systeem moet onafhankelijk van de aantal bezoekers normaal moeten functioneren. Het systeem moet een werkende game bevatten. Het systeem moet overzichtelijk zijn. Het systeem moet gebruiksvriendelijk zijn. Het systeem moet een inlogsysteem hebben. Het systeem moet interactie bevatten. Het systeem moet informatie tonen over het tropische regenwoud. Het systeem maakt het mogelijk de beheerder nieuws te laten plaatsen. Het systeem maakt het mogelijk nieuws te lezen. Het systeem moet worden weergeven als een grote boom. Niet functionele eisen: Het systeem moet verwerkt zijn in HTML5 semantische code. Het systeem moet een werkende navigatie hebben. Het systeem moet werken met fancy box. Het systeem is in werking met de meest recent jquery. Het systeem moet beeldmateriaal juist weergeven. Het systeem moet in meerdere talen kunnen weergeven. Design principles: Gericht op de mens Regenwoud uitstraling Overzichtelijke uitstraling Duidelijke uitstraling Constraints: Mijn programeer vaardigheden zijn voldoende maar nog niet goed genoeg. De boomspel die zal ik waarschijnlijk niet kunnen maken. 4
Content: Sitemap: In mijn sitemap zie je dat de website uit verschillende onderwerpen bestaat. Op de beginpagina staat een grote boom. Deze boom bevat verschillende takken met verschillende 5
onderwerpen zoals: Museon, Gevolgen en producten. In de top vind je Het spel als je dan verder klikt om het spel te gaan spelen zul je inloggen tegen komen. Omdat alle hoofdonderwerpen dus op het zelfde niveau op de microwebsite bevinden staan ze allemaal gelijk. Contentplan: Zie bijlage 2 Handelingen en feedback Navigatiemodellen: Localnavigation: Navigation bar/ NamedAnchors: Deze menu balk bestaat uit linkjes die gekoppeld zijn aan ankers. Dit zijn zijn normale buttons als je er op klikt, zal er een pop-up verschijnen - Bomepage(Home) - Het spel Inloggen o Versieren o Verzorgen Registreren - Museon Tentoontstelling 6
Vernieuwing - Nieuws - Producten Grondstoffen Planten Dieren Subtopic - Gevolgen - Inloggen Registreren Wachtwoord vergeten Hierboven zie je de soorten navigatie die mijn website bevat en de navigatie structuur in mijn website. De structuur van de website ligt dus ongeveer gelijk aan de sitemap. Als hoofdnavigatie gebruik ik een simpele navigation bar omdat het voor iedereen wel duidelijk is wat hier mee bedoelt wordt. Hierdoor kun je makkelijk navigeren door de website. Als navigatie om bij de pop-ups te komen gebruik de blauwe en bruine buttons. Dit is dus gewoon navigatie wat zich op de microwebsite zelf bevind. Concrete Scenario s: De gebruiker zal de microwebsite bezoeken voor informatief gebruik. De gebruiker zal alleen op de hoofdpagina blijven vanwege dat hier de tabbladen te vinden zijn met informatie over het tropisch regenwoud. De gebruiker zal op de desbetreffende tabblad zien dat er een lees meer knop te vinden is. Hier zal de gebruiker op klikken als de gebruiker meer informatie wilt lezen over het onderwerp. Als de gebruiker erop geklikt heeft zal er een box worden geopend met behulp van de plug-in fancybox. De gebruiker zal nu een eventuele foto met een stuk tekst zien. Als hij klaar is met het lezen van het stuk tekst dan zal hij op het kruisje klikken om de box te sluiten. Als de gebruiker weer het hoofdscherm ziet zal de gebruiker of door gaan naar het volgende onderwerp of de microwebsite verlaten. De gebruiker zal de microwebsite bezoeken voor het boomspel met nog geen account. De gebruiker zal op de hoofdpagina boven in de boom op de button start spel klikken. Nu ziet de gebruiker boven in de boom inloggen staan maar, de gebruiker heeft nog geen account. Onder het inlog scherm staat een stukje tekst met wachtwoord vergeten en registreren. Hier klikt de gebruiker op registreren. De gebruiker komt nu in het scherm dat hij zijn gegevens moet gaan invullen. Zodra hij klaar is met het invullen van gegevens zal hij het verzenden en gelijk een mailtje krijgen met de inloggegevens. Hij kan gelijk beginnen met het spelen van het spel. De gebruiker zal de microwebsite bezoeken voor het boomspel maar hij is zijn wachtwoord vergeten. De gebruiker zal op de hoofdpagina boven in de boom op de button start spel klikken. Nu ziet de gebruiker boven in de boom inloggen staan maar, de gebruiker is zijn wachtwoord vergeten. Onder het inlog scherm staat een stukje tekst met wachtwoord vergeten en registreren. Hier klikt de gebruiker op wachtwoord vergeten. Hij vult zijn email adres in en krijgt de bijbehorende gegevens via 7
de mail gestuurd. Hij krijgt een tijdelijk wachtwoord deze moet hij gaan wijzigen bij de eerst volgende keer dat hij inlogt. Nadat hij zijn wachtwoord dus heeft gewijzigd kan hij weer vrij spelen. De gebruiker zal de microwebsite bezoeken voor het boomspel. De gebruiker zal op de hoofdpagina van de microwebsite op de button start klikken om het spel te starten. Vervolgens zal hij gewoon inloggen om het spel te gaan spelen. In het spel zal hij eerst zijn boom gaan versieren met kerst versiering want het is de periode van kerst en vervolgens zal hij zijn boom gaan verzorgen. De gebruiker zal de microwebsite bezoeken om de vernieuwing van de tentoonstelling te bekijken. De gebruiker zal alleen op de hoofdpagina blijven. De gebruiker zal naar beneden scrollen tot dat de gebruiker het kopje tentoonstelling ziet. Nu klikt hij op de button lees meer. Nu zal er een pop-up verschijnen met een uitgebreide tekst en een foto. Als de gebruiker klaar is met lezen dan klikt hij rechts boven in de pop-up om het venster te sluiten. Flowcharts: 8
Wireframes: 9
10
11
12
13
14
15
Presentatie: Styleguide Grid/Compositie/Vlakverdeling Ik heb voor het ontwerp geen standaard grid gebruikt. Mijn microwebsite is opgebouwd vanuit een boom. Met een top en takken met verschillende onderwerpen. Bovenin de top zal het boomspel te vinden zijn. Helemaal bovenin zal de navigatie te vinden zijn. Deze zal altijd meescrollen zodat je altijd kan navigeren en dus niet helemaal weer naar boven moet scrollen. De basis kleur is bruin en groen. Dit heeft ook temaken met het thema: het tropisch regenwoud. Typografie Ik heb bewust voor deze lettertypes gekozen en de kleuren erbij gekozen. De navigatie een duidelijke lettertype zodat dit duidelijk overkomt voor de gebruiker. De Header en sub header hebben de uitstraling van het tropisch regenwoud gekregen zodat de sfeer in de boom wel bij de thema hoort. De normale lettertype van de normale context heb ik een duidelijke lettertype gekozen zodat het lezen van een artikel gemakkelijk gaat. 16
Kleur De kleuren zijn bewust omdat deze kleuren het tropisch regenwoud gevoel afgeven aan de gebruiker. Dit kun je terug zien in ons ontwerp Beeldelementen/ Visuele taal Ik heb niet veel verschillende standaard beeld elementen gebruikt. Er kunnen nog extra elementen bij komen zoals afbeeldingen bij de verschillende artikels en de dieren die je kunt kiezen bij het boomspel. Feedback & Affordance Bij alle interactieve elementen wordt er feedback gegeven. Feedback word meestal gegeven met een hover die van kleur veranderd of bij de speciale buttons lijkt het net of je knop echt indrukt. In het menu wordt ook gebruik gemaakt van de hover als de muis erover gaat zullen de submenu items veranderen naar de submenu items van het hoofdmenu item. Scherm hiërarchie De achtergrond kleur is blauw en daarover is de boom geplakt die bruin is met groene bladeren en een groene ondergrond. Doordat het toch best wel een opvallende kleur heeft waardoor de boom opvalt. Bovenin de boom is het spel te vinden de button waar je op moet klikken is blauw. Hierdoor is het duidelijk waar je moet klikken om door te gaan naar het spel. 17
Schermafbeelding: 18
Bijlage: Projectplan: Inleiding: Schets bedrijf/instelling: Het Museon in Den Haag is een museum voor populairwetenschappelijke onderwerpen zoals de geschiedenis van de aarde en volkenkunde. Het museum wil graag met leuke interactieve exposities en programma s met zo veel mogelijk mensen in contact komen en blijven. Context: Dit project zullen meerdere personen zich bezig houden om het goed af te ronden. Het is een individueel project dus zal zelf de producten maken en opleveren. S.C. Hallenga-Brink zal me begeleiden met dit project. Vanuit het Museon is mr. Visser de contactpersoon. De microsite zal worden geplaatst op de website van Museon. Deze zal worden weergeven als je op een tabje klikt van het hoofdmenu. De microsite zal bestaan uit een grote boom met in de top een game en aan de takken verschillende borden met informatieve tekst. Startdocumenten Moodboard Onderzoekdossier Ontwerprapport Wireframes Style tile Probleemstelling: Lofi prototype Het Museon heeft op het moment het beeld dat zij een kindermuseum is, van dat beeld willen ze af. Ze wil zich niet alleen op kinderen richten en niet alleen op volwassenen, maar op volwassenen met kinderen. Het Museon wil de bezoeker meer betrekken bij de tentoonstelling, en niet alleen maar informatie geven. De bezoeker moet zich betrokken voelen in wat hij te zien krijgt, het moeten herkenbare situaties worden, situaties waar ouder en kind over kunnen praten. Door middel van een microsite wil het Museon de bezoeker meer bewust proberen te maken van wat er allemaal voor nodig is om zijn dagelijkse leven te creëren en in stand te houden. Van het potje pindakaas in de keukenkast tot de mobiele telefoon. Het doel van de microsite is niet om bezoekers af te schrikken of ze proberen over te halen om alles de deur uit te doen, maar om de bezoeker bewust te maken en na te laten denken. Tijdens dit project zullen wij ons focussen op de microsite, om specifiek te zijn: een microsite over de spullen in ons huis die hun oorsprong (gedeeltelijk) vinden in het tropisch regenwoud. Het doel van de microsite is dat de bezoeker nieuwsgierig gemaakt wordt en naar aanleiding van de website het Museon gaan bezoeken om zo meer te weten te komen. 19
Projectdefinitie: Doelstelling: De doelstelling is om families en/ of onderwijs via de microwebsite duidelijk te maken wat het regenwoud met het dagelijks leven te maken heeft. De microwebsite moet nieuwe bezoekers nieuwsgierig maken zodat ze naar het museum gaan. Maar ik moet de huidige bezoekers juist laten wennen aan de nieuwe focus en dus de veranderingen die in het museum gaan plaatsvinden. De nieuwe focus zal zijn: - Aardrijkskunde Globalisering Mondiale kwesties. Dit wil ik gaan doen met een klein voorproefje. Ook zullen belangrijke punten Interactie en Co-creatie zijn. Co-creatie omdat gezinnen en onderwijs kunnen meebouwen aan producten die in museum worden vertoond. Om een duidelijke structuur in de microwebsite te krijgen moeten we ons houden aan de volgende punten: Een centraal thema over het tropisch regenwoud. Doelgroep: De nieuwe en eigenlijk al de huidige doelgroep van het Museon zullen families en leerlingen zijn. Ze willen met de nieuwe aanbod behalve de kinderen ook volwassen aan gaan spreken. Hierdoor kunnen de volwassen begeleiders leuke weetjes overbrengen aan hun kinderen. Het Museon wordt dus vooral gezien als familie museum en richt zich voornamelijk op de landelijke markt. Ook is een deel van de bezoekers verblijfstoerisme. Buiten regio Den-Haag valt redelijke winst te halen door onderwijs bijv. als klasse uitje. Dit omdat er natuurlijk ook les kan worden gegeven bij het Museon. Projectresultaat: Dit project zal ik het lofi prototype uitwerken die ik voor vorig project had gemaakt. Deze zal compleet werkend zijn en interactie bevatten. Beschrijving uitgangsconcept: Ik heb gekozen om van onze microwebsite een game/ info pagina te maken. De layout lijkt op een enorme boom met boven in een spel. Je kunt in het spel een dier kiezen en vervolgens gaan verzorgen. Je kunt via een kaart de omgeving bekijken en kijken wie er nog meer het spel spelen en kijken wat voor soort dier zij hebben en hoever ze zijn met verzorgen. Je kunt ook je dier aanpassen door bijvoorbeeld kerst versiering. Om bij je dier te komen moet je eerst registeren en bij je volgende bezoek inloggen met je inloggegevens. Als je naar beneden scrolled zal je verschillende takken zien. Onder deze takken hangen boorden met een korte inleiding over het onderwerp wat op het boord staat. Als je op de button klikt rechts onder op het boord dan zal er een pop-up verschijnen met de volledige informatie. 20
Projectorganisatie en taakverdeling: Contactgegevens: Alexander van der Kooij Functie: project uitvoerder 06-25266585 alex.21.06.92@gmail.com S.C. Hallenga-Brink Functie: Supervisor S.C.Hallenga-Brink@hhs.nl Museon Functie: opdrachtgever info@museon.nl Fasen: Definiëren opdracht en project Eerste iteratie Tweede iteratie Activiteitenplanning: Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 t/m 10 Week 8 Projectplan Lijst met testpersonen Functionele eisen Geprioriteerde functionele eisen Niet functionele eisen Overzicht te plaatsen content met eigenschappen daarvan Informatieontwerp Navigatieontwerp Schermontwerpen Werkend en getest onderdeel van de Website Interactiefontwerpen Styleguide Mockups Indeling/ inhoud van de webpagina s Werkend en getest onderdeel van de Website Vormgeving van webpagina s Werkende website Aangepast projectplan Verbeterpunten verwerkt in ontwerp en website Aangevulde projectplan Sprint 1 nogmaals doorlopen Projectdossier en Logboek 21
Week 10 Complete website Succesfactoren: We hebben voor dit project 10 weken om af te ronden. Om dit project af te ronden hoeven er geen kosten in rekening worden gebracht. We moeten om het project af te ronden design programma s als photoshop, dreamweaver/ notepad++ en een internetbrowser gebruiken. Om het zo goed mogelijk af te ronden krijg ik feedback van mijn peergroep hierbij zal ik zal ik de goede punten te horen krijgen maar ook tegenslagen waardoor ik een stap terug moet zetten zodat ik dat kan opvangen. Ik heb qua JavaScript genoeg ervaring om basis vaardigheden te snappen en uit te voeren maar als het wat lastiger wordt zal ik er meer moeite mee krijgen waardoor ik het moet gaan uit zoeken dit zal zeker extra tijd gaan kosten. Ik moet me tijdens het ontwerp proces houden aan de style tyle van het project. Het belangrijkste punt wat in het ontwerp moet zitten in interactie en het moet gelinkt zijn aan co-creatie. Het moet de doelgroep ( 8t/m 16 jaar) prikkelen. Het moet informatief zijn over de nieuwe tentoonstelling (tropisch regenwoud). De microwebsite moet de huidige bezoekers thuis laten voelen. 22