28
WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp en eerste prototype website Studenten: Tim Braam 4018486 Tijmen Derikx 3817989 Pascal Donker 4025628 Docent/begeleider: Frans Wiering

WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

WEBDESIGN – TEAM 12

Informatiekunde – week 20 – opdracht 1

Presentatie van het ontwikkelteam,

Concept, ontwerp en eerste prototype website

Studenten:

Tim Braam 4018486

Tijmen Derikx 3817989

Pascal Donker 4025628

Docent/begeleider:

Frans Wiering

Page 2: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

2

Contents Inleiding ......................................................................................................................................................... 3

1. Analyse en requirements ...................................................................................................................... 4

1.1 Analyse van de huidige situatie .................................................................................................... 4

1.2 Doelgroep en concepten ............................................................................................................... 7

1.3 Requirements .............................................................................................................................. 15

2. Ontwerp .............................................................................................................................................. 16

2.1 Informatiearchitectuur ............................................................................................................... 16

2.2 Navigatieontwerp ....................................................................................................................... 17

2.3 Interactiedesign .......................................................................................................................... 18

2.4 Interface design .......................................................................................................................... 20

2.5 Prototype evaluatie..................................................................................................................... 21

Literatuurlijst ............................................................................................................................................... 22

Bijlagen ........................................................................................................................................................... I

Bijlage I – Website structuur .................................................................................................................. I

Bijlage II – STD: Kaarten kopen ............................................................................................................. II

Bijlage III – STD: Inschrijven voor evenement ...................................................................................... III

Bijlage IV – STD: Zoekmachine ............................................................................................................. IV

Bijlage V – STD: Route plannen ............................................................................................................. V

Bijlage VI – Wire Frame: Website mainpage / lay-out ......................................................................... VI

Page 3: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

3

Inleiding In dit document is de eerste opdracht voor webdesign te lezen. Wij hebben gekozen voor de gemeente

Zoetermeer. In het eerste deel van het document zal de analyse van Zoetermeer besproken worden. Er

wordt gekeken wat er op dit moment allemaal al binnen Zoetermeer is én wat er mogelijk is. Vervolgens

wordt dit onderdeel afgesloten met de requirements waar de toerisme pagina van Zoetermeer aan zal

moeten voldoen.

Het tweede deel van het document gaat in op het prototype van deze website. Eerst wordt ingegaan op

de informatiearchitectuur die onze website zal gebruiken. Vervolgens wordt gesproken over het

navigatieontwerp en de interactieve elementen die de website moet bieden. Deze worden vervolgens

d.m.v. State Transition Diagrams verduidelijkt. Tot slot is aan de hand van een Wire Frame de homepage

van het prototype website gecreëerd. Hier is een evaluatie over uitgevoerd.

Page 4: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

4

1. Analyse en requirements

1.1 Analyse van de huidige situatie

Wat heeft Zoetermeer een toerist te bieden? Hoewel Zoetermeer natuurlijk niet een van de meest

toeristische steden in Nederland is, profileert zij zich wel als dé leisurestad van Nederland. Er is dan ook

genoeg te doen. De stad is goed te bereiken met het OV (1.1.1), daarnaast worden en geregeld

evenementen georganiseerd (1.1.2). Ook zijn er genoeg winkelmogelijkheden in Zoetermeer (1.1.3) en

aan recreatievoorzieningen is ook geen tekort (1.1.4). Tot slot is te lezen over de bezienswaardigheden

die Zoetermeer te bieden heeft (1.1.5) en waar te overnachten (1.1.6) en te eten (1.1.7) valt.

1.1.1 (Openbaar) vervoer

In tegenstelling tot veel andere steden is parkeren in de binnenstad van Zoetermeer de eerste 3 uur gratis.

Er zijn diverse oplaadpunten voor elektrische auto’s. Er zijn twee treinstations, Zoetermeer en Zoetermeer

Oost. Deze zijn te bereiken via Utrecht, Gouda en Den Haag. Ook via het HTM (Haagse Tram Maatschappij)

is Zoetermeer te bereiken met de RandstadRail. De RandstadRail verbindt Rotterdam, Den Haag en

Zoetermeer.

1.1.2 Evenementen

Op dit moment is er een kermis in Zoetermeer, deze staat in het centrum van 3 tot 12 mei. Op 9 mei is er

een ‘polder dag’, een dag om te genieten van alles dat dit buitengebied heeft te bieden. Op

Hemelvaartsdag is er een rode kruistocht, een traditionele toch op deze dag. Op zaterdag 11 mei vindt

zowel het vrolijke noten festival als het DSO voetbaltoernooi voor alle C en D jeugd van Nederland en

buitenland plaats. Verder wordt er op deze zaterdag nog een fietstocht georganiseerd en gaat er een disco

trein naar ‘Dutch Water Dreams’.

Page 5: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

5

1.1.3 Winkelen

Winkelen kan in Zoetermeer in de volgende winkelcentra:

-Dorpsstraat: De oude binnenstad. Een lange straat met veel verschillende winkels.

-Woonhart: De meubelboulevard van Zoetermeer met onder andere winkels als Kwantum,

Leen bakker en Jysk.

- Stadshart: Een modern winkelcentrum met winkels als Mediamarkt, H&M en V&D.

1.1.4 Recreatie

Ook is er in Zoetermeer een stadsbioscoop, een bowlingbaan, een kartbaan, SnowWorld en Dutch Water

Dreams (een wildwaterbaan waar watersporten op beoefend kunnen worden). Zoetermeer beschikt ook

over verschillende zwembaden waarvan recreatie zwembad de Driesprong de grootste is.

1.1.5 Bezienswaardigheden

Zoetermeer profileert zich ook als een culturele stad. In de stad zijn verschillende exposities, theaters,

cultuurpodia en musea aanwezig. Zo heb je in Zoetermeer de Galerie en Artotheek de Vlaming,

Stadsmuseum Zoetermeer, Fotografica museum Zoetermeer, Ateliers 99A, Stadstheater Zoetermeer en

kwadrant theater Zoetermeer.

Ook wordt er binnenkort een nieuw pretpark gebouwd in Zoetermeer. AdventureWorld zal 40.000m2

worden en wordt hiermee het grootste indoorpretpark van Europa. De bouw van dit pretpark zal naar

schatting zo’n honderd miljoen euro kosten. De attracties zullen vooral 4D attracties worden zoals

simulatoren en augmented reality. Bij dit pretpark zullen ook nog hotels, restaurants enzovoorts gebouwd

worden.

1.1.6 Overnachten

In Zoetermeer zijn verschillende hotels om te overnachten. Ook is er een camping voor wie in de zomer

Zoetermeer aan wil doen tijdens bijvoorbeeld een fietstocht. Een greep uit de hotels/campings:

- Bastion hotel Zoetermeer

- Camping de drie morgen

- Golden Tulip hotel

- NH Hotel

- Palesteinerhof

Page 6: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

6

1.1.7 Eten in Zoetermeer

In Zoetermeer zitten behalve een paar grote restaurantketens zoals de McDonalds, La Place, Subway, KFC

en de Burger King ook een aantal restaurants die de moeite waard zijn. Een aantal goed gewaardeerde

restaurants zijn:

- Het wapen van Zoetermeer (Frans)

- 1892 Eten & Drinken (Eetcafé)

- Auberge bij ons (Ouderwets genieten)

- De Heeren van Soetermeer

- Parthenon (Grieks)

Page 7: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

7

1.2 Doelgroep en concepten

Om het toerisme in Zoetermeer te vergroten, willen wij een breed aanbod aan activiteiten op frequente

basis introduceren die vooral jonge mensen, maar ook zeker een iets oudere doelgroep aan zal moeten

spreken.

De jongere generatie die ziet hedendaags graag activiteiten die uitdagend, snel en spectaculair zijn. De

oudere generatie daarentegen heeft liever te maken met culturele activiteiten als bezienswaardigheden.

In beide gevallen zullen er met meer regelmaat vaste of tijdelijke activiteiten georganiseerd worden. Voor

de jongere generatie zal dit het volgende inhouden: Pretpark Adventure World (4D), paintball, outdoor

karting, regelmatiger festivals en kermis. Waarbij voor de oudere generatie vooral vaker braderieën en

circussen georganiseerd zullen worden.

Vanwege de goede verbindingen met nabijgelegen randsteden als Den Haag, Rotterdam en Leiden is het

wellicht zelfs mogelijk bij bepaalde activiteiten een actie met de RET of HTM op te zetten waarbij

bezoekers goedkoper kunnen reizen.

De volgende concepten zullen worden toegelicht met persona en user story(s):

- Pretpark Adventure World (Thijs)

- Uitbreiding Attractiecentrum met o.a. paintball (Danny)

- Outdoor karting (Gerard)

- Festival aan het Noord Aa (Emma)

- Kermis (Natasja)

- Circus (Ben)

- Braderie (Henk)

Page 8: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

8

1.2.1 Pretpark Adventure World realiseren

Al enkele jaren zijn er grootse plannen om in het BleiZo gebied (Bleiswijk-Zoetermeer) enkele faciliteiten

te bouwen waaronder een groot bouwcentrum en het grootste 4D pretpark van Europa. De ligging van

deze faciliteiten is ideaal, omdat het op een groot terrein nabij de randstad ligt. Het is dus makkelijk te

bereiken vanuit allerlei grote steden. De kinderen kunnen in het pretpark spelen, terwijl de ouders

rondkijken in een gigantisch bouwcentrum. De kosten voor het realiseren van dit pretpark bedragen

honderd miljoen euro, maar dankzij de recessie investeren banken op dit moment liever is leisure dan in

vastgoed.

Daarnaast biedt Adventure World ook vele thrill-rides voor jongeren. Dit gaat van formule-1 racen tot

straaljager vliegen. Daarom is Adventure World geschikt voor jong en oud.

Persona:

Dit is Thijs Tegezet, hij woont in Gouda en studeert Biomedische

Wetenschappen aan de Universiteit van Utrecht. In zijn vrije tijd leest hij graag

boeken en in het weekend spreekt hij vaak af met wat mede studenten om

uit te gaan.

Thijs is een ijverig persoon, die als hij iets doet, dit goed gedaan wil hebben.

Hij neemt geen genoegen met half werk. Zo staat hij ook in het leven. Alles

wat hij doet wil hij van tevoren geregeld en gepland hebben.

User Story:

Als jongere die het Adventure World wil bezoeken kan ik via de toeristische website van Zoetermeer

makkelijk informatie vinden over dit themepark, zodat ik weet of kaartjes online of aan de balie gekocht

dienen te worden.

Als bezoekers van de toeristische website van Zoetermeer kan ik snel vinden waar toegangsbewijzen voor

Adventure World te halen zijn, zodat ik weet wat deze kosten en hoe deze te betalen zijn.

Page 9: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

9

1.2.2 Uitbreiding attractiecentrum Zoetermeer Al sinds 1995 bevind zich op het bedrijventerrein van Zoetermeer zich een kartbaan. Deze kartbaan is

door de jaren heen met steeds meer bijkomende activiteiten als lasergamen en sumoworstelen

uitgegroeid tot een heus attractiecentrum. Toch blijft het vaak rustig in het attractiecentrum vanwege de

gelijkende activiteiten in nabije steden als Den Haag en Delft.

Daarom zou het voor het attractiecentrum Zoetermeer een goede investering zijn om op een tweede

locatie een outdoor paintball te openen. Er zijn in de regio enkele andere paintball organisaties die over

het algemeen indoor zijn. Door de deuren te openen voor een gigantisch outdoor complex, kan

Zoetermeer zich onderscheiden op dit gebied en zo meer toeristen uit andere steden trekken die zin

hebben in deze activiteit.

Persona:

Dit is Danny Depri, een net afgestuurde IT’er van 23, die een zware periode

doormaakt. Hij is geboren in Rotterdam en woont op dit moment in Den Haag.

Hier werkt hij als database administrator bij Astorium. De baan laat z’n

voetafdruk na op het privéleven van Danny. Hij heeft het druk en heeft weinig

tijd om z’n sociale leven op peil te houden.

Sinds enkele maanden is Danny weer single en hij heeft sindsdien nog geen tijd te gehad om opnieuw het

uitgaansleven te betreden. Wel is hij laatst benaderd door een paar oude vrienden die weer eens wilden

gaan stappen in de weekenden. Omdat Danny altijd de gangmaker van de gesprekken was, is hij ook

uitgenodigd.

User story:

Als gebruiker van de toeristische website van Zoetermeer kan ik informatie opzoeken over de paintball

activiteit, zodat ik weet hoe groot de vriendengroep moet zijn om gebruik te kunnen maken van het

outdoor complex.

Als bezoeker van het paintball gedeelte van de toeristische website kan ik zien of er ook mogelijkheden

zijn om hier te eten, zodat we na de activiteit gezellig kunnen bijpraten over hoe het nu met iedereen gaat.

Page 10: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

10

1.2.3 Outdoor Karting In de regio Zuid-Holland zijn meerdere kartbanen te vinden, deze zijn echter allemaal indoor en de een is

nog groter dan de ander. Wat echter niet bekend en nabijgelegen is, is een outdoor kartbaan.

De karts die op een outdoor circuit rijden mogen harder en de ervaring van het buiten rijden overstijgt die

van een indoor circuit. Het zou daarom niet slecht zijn als er in het hart van Zuid-Holland een outdoor

circuit gebouwd zou worden. Dit zou vele jongeren, maar ook volwassenen trekken die van snelheid

houden.

Persona:

Dit is Gerard Gezellig, hij is 25 jaar oud en geboren en getogen in Scheveningen.

Toen hij ging HBO ging studeren koos hij voor een opleiding op het gebied van

communicatie. Hij is nu dan ook strategisch communicatieadviseur bij

OnlyHuman in Den Haag. Hier verdient hij een gemiddeld inkomen, maar hij is

tevreden met zijn baan.

In zijn privéleven is Gerard ongehuwd, maar hij heeft wel een vriendin die iets jonger is dan hijzelf. Ze

hebben geen kinderen, maar zijn wel van plan deze te nemen nadat ze beiden carrière hebben gemaakt.

Hij gaat graag stappen met vrienden en doet graag aan karten in zijn vrije tijd. Verder is hij is gezellig,

spontaan en goedlachs, maar soms iets te ondoordacht bij bepaalde acties tijdens het uitgaan.

User Story: Als bezoeker van de toeristische website van Zoetermeer kan ik snel zien welke acties er gelden bij het

Outdoor Kartcircuit Zoetermeer, zodat ik weet wanneer het ’t voordeligst is om te gaan karten.

Als bezoeker van het outdoor kartcircuit gedeelte van de website kan ik meer informatie over het circuit

vinden zoals de lengte van de baan en de snelheid van de karts, zodat ik vergelijkingen uit kan voeren met

andere outdoor circuits.

Page 11: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

11

1.2.4 Festivals aan het Noord Aa Met enige regelmaat worden er in Zoetermeer al festivals georganiseerd. Eens per jaar heeft in het

stadscentrum het Bevrijdingsfestival plaats. Daarnaast wordt eens per jaar het Rastaplas Festival

georganiseerd.

Naar al deze festivals komen duizenden bezoekers en daarom is het voor het toerisme gunstig als er op

frequentere basis bekende festivals in allerlei muziekstijlen georganiseerd worden aan het Noord Aa

strand van Zoetermeer.

Persona:

Dit is Emma Evenwicht, een 27 jarige vrouw uit een gezin van drie. Samen met

haar broers is ze opgegroeid in het groene hart zelf; Zoetermeer. Ze heeft

bedrijfseconomie gestudeerd aan de Universiteit Leiden en heeft nu een baan

als HR-manager bij AIM4 in Rotterdam.

In het dagelijks leven let Emma veel op wat ze eet en hoeveel ze beweegt. Ze

probeert zo nu en dan een balans dag te houden om zo gezond mogelijk te blijven. Door het leven gaat zij

als vrijgezel, maar ze gaat vaak stappen met haar vriendinnen. Dit gaat van filmavond thuis of stappen in

de binnenstad van Zoetermeer tot aan het bezoeken van festivals overal in Nederland.

User Story:

Als bezoekster van de toerisme website van Zoetermeer kan ik makkelijk en snel een jaaroverzicht vinden

van alle evenementen en festivals die in en om Zoetermeer georganiseerd worden, zodat ik op tijd met

vriendinnen kan regelen naar welke evenementen we gaan.

Als bezoekster van de evenementen pagina van de toerisme website kan ik makkelijk en snel overzichten

vinden over welke artiesten optreden, zodat ik weet hoe laat ik aanwezig moet zijn op de dag zelf.

Als bezoekster van de evenementen pagina van de toerisme website kan ik vinden of er een prijs aan het

evenement verbonden is, zodat ik weet of en hoeveel geld ik mee moet nemen.

Page 12: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

12

1.2.5 Kermis Zo’n twee keer per jaar wordt er kermis georganiseerd in Zoetermeer. Dit is bijna altijd op het open terrein

naast SilverDome. Een kermis is leuk en trekt vaak veel bezoekers uit omstreken en eigen stad. Een

redelijke toeristische attractie is een kermis dan ook wel te noemen en een frequentere verschijning dan

eens per half jaar zou niet slecht zijn.

Persona: Dit is Natasja Nauwkeurig en ze woont in Zoeterwoude. Ze is een studente van

22 jaar die in haar laatste jaar van de opleiding tandheelkunde bezig is. De

studie vereist een hoop inzet en precisie. Ze stopt veel tijd in de studie en

zodoende houdt ze weinig tijd over voor leuke dingen.

Desondanks probeert ze eens in de twee weken af te spreken met vriendinnen

om te gaan stappen en samen iets leuks te gaan doen. Natasja is in het gezelschap van haar vriendinnen

vaak de meest naar voren tredende persoon. Ze houdt er van dingen te organiseren en te plannen.

User Story: Als bezoekster van de toerisme website van Zoetermeer kan ik voor ons volgende uitstapje makkelijk een

selectie maken tussen de evenementen die op korte termijn in Zoetermeer georganiseerd worden zoals

een kermis, zodat ik met m’n vriendinnen hier plannen voor kan maken.

Als bezoekster van de kermispagina op de website van toerisme Zoetermeer kan ik eenvoudig

kortingsbonnen uitprinten voor de kermis, zodat we meer plezier voor hetzelfde geld kunnen beleven.

Als bezoekster van de kermispagina op de website van toerisme Zoetermeer kan ik de attracties en

openingstijden vinden, zodat we kunnen afspreken hoe laat we daar zijn.

Page 13: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

13

1.2.6 Circus Zoetermeer Een circus in Zoetermeer komt slechts een enkele keer voor. Dit is met name omdat er een

evenementenvergunning voor aangevraagd dient te worden. Het zou daarom een mooie toeristische

trekpleister zijn als een circus organisatie als Herman Renz frequenter op zou treden in Zoetermeer.

Omdat de circuslocatie aan de snelweg gelegen is, zullen zij op deze manier ook veel bezoekers uit

omliggende steden trekken, wat ook voor hun voordelig is.

Persona

Dit is Ben Blij, een 28 jarige Delftenaar die in het dagelijks leven docent

wiskunde is in het middelbaar onderwijs. Hij probeert zijn over het algemeen

goede humor over te brengen aan zijn leerlingen door deze met positieve

energie te benaderen en les te geven.

Ben is vorig jaar getrouwd nadat hij vijf jaar samen was met zijn vrienden. Ze wonen samen in de

binnenstad van Delft en die locatie is perfect om in de weekenden uit te gaan. Ben gaat dan vaak met z’n

vrouw stappen, maar ook de mannenavonden ontbreken niet. Hij gaat graag karten met z’n vrienden op

het Bleekemolen kartcircuit aan de rand van Delft.

User Story

Als bezoeker van de toerisme website van Zoetermeer wil ik gemakkelijk kunnen zien of er binnenkort

een circus in de omgeving is en welk circus dit is, zodat ik en m’n vrouw hier samen heen kunnen.

Als bezoeker van de circuspagina van de toerisme website kan ik makkelijk zien welke acts er dit jaar

allemaal mee doen met het circus, zodat ik weet wat ons te wachten staat.

Page 14: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

14

1.2.7 Braderie Zoetermeer Braderieën en zwarte markten zijn altijd druk bezochte aangelegenheden en daarom geschikt als

toeristische trekpleister. Een braderie trekt zowel jong als oud en men kan er vaak uren rondlopen. Op dit

moment wordt er zelden een braderie georganiseerd in Zoetermeer. Dit zou veel vaker moeten in zowel

de binnenstad als het oude stadsdeel (Dorp).

Persona Dit is Henk Hart, hij is 58 jaar en is sinds enkele maanden met vervroegd

pensioen. Hij woont in Voorburg en heeft voorheen als

luchtverkeersleider gewerkt. Hij is nu 25 jaar getrouwd en heeft twee

volwassen kinderen.

Henk heeft een passie voor sport en houdt zijn conditie graag op peil. Hij

is enkele keren per week in de sportschool te vinden, maar naast de sportschool doet Henk ook aan

wintersport. Hij en zijn vrouw gaan graag op stap om leuke dingen te doen en nu Henk gepensioneerd is,

heeft hij hier alle tijd voor.

User Story

Als braderiebezoeker kan ik op de website van toerisme Zoetermeer vinden op welke data er weer een

braderie georganiseerd wordt, zodat ik alvast kan gaan sparen om nieuwe spullen te kopen.

Page 15: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

15

1.3 Requirements

Content requirements

Informatie over:

evenementen (agenda)

stadsbestuur

musea, exposities, slaapgelegenheden, eetgelegenheden etc.

sport & vrije tijds voorzieningen

Openbaar vervoer

Adressen, links, contact, FAQ

Nieuws

Openbare ruimte

Openingstijden, routebeschrijvingen

Belangrijke telefoonnummers

Geschiedenis Zoetermeer

Fiets en wandelroutes

Winkelen

Functional requirements

In/uit schrijven evenementen

Klachten/suggesties/opmerkingen indienen

Zoeken binnen de site

Route plannen

99,5% uptime garantie

Natuurlijk zijn er ook requirements die niet in deze twee categorieën passen. Denk hierbij aan een

aantrekkelijk uiterlijk, een snelle website, een goede lay-out, voldoende up-time en een goede

beveiliging van de site zelf.

Page 16: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

16

2. Ontwerp

2.1 Informatiearchitectuur

Hoe gaan wij de informatie op onze site structureren?

Omdat de hoeveelheid informatie die wij onze gebruiker gaan aanbieden behoorlijk groot is, is het logisch

om een hiërarchische structuur aan te houden. Er zullen een aantal top level categorieën zijn met

daaronder horende sub categorieën. Bij deze top level categorieën moet je denken aan evenementen,

vervoer, activiteiten et cetera. Pagina’s die er in ieder geval moeten komen zijn:

- Homepage

- Nieuwspagina

- Evenementen/Agenda

- (openbaar) Vervoer

- Contact

- Regelingen

- Activiteiten

- Eten & Overnachten

- Algemene informatie Zoetermeer

Deze pagina’s zullen zoals eerder gezegd weer links bevatten naar andere pagina’s voor subcategorieën

zoals in de bijlagen te zien is op het hiërarchie diagram (bijlage I) dat we gemaakt hebben voor onze

website.

Page 17: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

17

2.2 Navigatieontwerp

Hoe gaan wij ervoor zorgen dat de gebruiker makkelijk door de site navigeert?

Omdat in een gemeente als Zoetermeer veel te doen is, kan het moeilijk worden om door de bomen het

bos nog te zien. Om dit te voorkomen gaan wij informatie indelen in categorieën. Deze categorieën

moeten logisch zijn voor de gebruiker. Die categorieën komen in een balk bovenaan de site. Hierbij moet

je denken aan Home, evenementen, activiteiten, vervoer etc. In deze balk zal ook staan waar je nu bent

om de navigatie van de site duidelijker te maken.

Verder zullen wij een zoekfunctie inbouwen op de website zodat de gebruiker een trefwoord kan

opzoeken. Veel gebruikte links en informatie zullen beschikbaar zijn op de homepage, evenals recent

nieuws. Labels zullen consistent zijn, dus niet telkens andere woorden gebruiken voor hetzelfde

onderwerp. Dat verwart de gebruiker en moet dus vermeden worden. Verder zal onderaan de pagina nog

een paar kleine links staan naar belangrijke pagina’s en een sitemap om alle pagina’s onder elkaar te zien.

Page 18: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

18

2.3 Interactiedesign

Om interactie designs te maken moeten we natuurlijk eerst weten welke interacties plaats moeten

kunnen vinden op onze site. Wij denken dat dat de volgende interacties moeten zijn:

- Kaartjes kopen

- In/uitschrijven evenement

- Zoeken binnen de site

- Route plannen

2.3.1 Kaartjes kopen

Een gebruiker vindt het evenement op onze site. Dat kan zijn via het nieuws, evenementen of in de agenda.

Hij klikt op het evenement en komt op de evenementpagina met nieuws, informatie, prijs,

routebeschrijving et cetera. Hier is ook een optie kaarten te bestellen, hier klikt hij op. Hij komt dan bij

een pagina waar hij gegevens moet invullen zoals zijn voornaam achternaam, het aantal kaarten dat hij

wil hebben en hoe hij wilt betalen. Dan wordt hij mogelijk doorgestuurd naar de site van zijn bank en

nadat de betaling plaats heeft gevonden worden de kaarten via mail of post naar de gebruiker gestuurd,

waarna deze wordt terugverwezen naar de evenementpagina. Dit alles is te zien in het bijbehorende State

Transition Diagram (STD) (Bijlage II)

2.3.2 In/uit schrijven evenementen

Sommige evenementen nemen alleen plaats als er voldoende animo is. Andere evenementen zijn wel

gratis maar hebben maar een bepaald aantal mensen dat kan komen. In zo’n geval moet iemand die mee

wilt doen zich inschrijven. Een groot gedeelte van dit proces verloopt hetzelfde als het kopen van kaarten.

De gebruiker vindt het evenement tussen het nieuws, in de agenda of op de evenementenpagina. Hij klikt

op het evenement en komt op de pagina voor dat evenement. Daar klikt hij op inschrijven, waarna hij zijn

gegevens achterlaat en met hoeveel personen hij komt. Hierna wordt een bevestiging gestuurd naar zijn

e-mail met instructies indien je toch nog wilt afzeggen. Dan wordt de gebruiker terug gestuurd naar de

evenementpagina. Dit alles is te zien in het bijbehorende State Transition Diagram (STD) (Bijlage III)

Page 19: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

19

2.3.3 Zoeken binnen de site

De gebruiker zoekt iets binnen de site en kan het niet vinden of vindt zoeken makkelijker. Hij typt iets in

en de zoekmachine zoekt de site na waar dit trefwoord voorkomt. De resultaten worden dan weergegeven

aan de gebruiker. Dit alles is te zien in het bijbehorende State Transition Diagram (STD) (Bijlage IV)

2.3.4 Route plannen

De gebruiker wil een route plannen naar een evenement of een parkeergarage of een andere plaats.

Gebruiker klikt route plannen aan bij evenementpagina, parkeergarage of andere plekken waar de site

aanbiedt een route te plannen. Gebruiker ziet dan een kaartje van Google Maps en kan daar op klikken

om zijn start en eindpunt in te voeren. Google Maps is een plug-in die de site aanbiedt. Dit alles is te zien

in het bijbehorende State Transition Diagram (STD) (Bijlage V)

Page 20: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

20

2.4 Interface design

Aan de hand van de informatiearchitectuur en het navigatieontwerp is er een basale vorm van de interface

gemaakt. Deze zal bestaan uit de volgende elementen:

- Header

o Gemeente logo

o Taalselectie

o Horizontale navigatie

- Zoekbalk

- Afbeelding

- Tekstvak voor hoofdartikelen/informatie van de pagina

- Verticale Navigatie binnen de pagina’s uit de horizontale navigatie

- Contactinformatie indien er geen verticale navigatie mogelijk is

- Het laatste nieuws (enkel op de hoofdpagina)

- Meer/oud nieuws (enkel op de hoofdpagina)

- Footer

o Disclaimer

o RSS Feeds

o Sitemaps

Om de navigatie door de website zo eenvoudig mogelijk te houden zal niet veel van deze indeling

afgeweken worden naarmate het navigeren vordert. De belangrijkste zaken zullen zich in het ‘tekstvak

voor hoofdartikelen/informatie van de pagina’ afspelen. Elementen die per pagina veranderen (navigeren

binnen een pagina of andere flexibele elementen) die zijn in het vak voor verticale navigatie te vinden. Dit

alles is te zien in het Wire Frame (Bijlage VI)

Page 21: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

21

2.5 Prototype evaluatie

Wij hebben voor de evaluatie gebruik gemaakt van een proefpersoon van 24 jaar. Deze kwam overeen

met een groot deel van de persona’s die gecreëerd waren in het tweede deel van de opdracht. Aan hem

is gevraagd enkele van de user stories te doorlopen voor zover dat mogelijk was. Hij zou op deze manier

dan door de site navigeren op zoek naar allerlei elementen.

Het eerste commentaar dat gegeven werd, was dat de site er ‘clean’ uit zag. Wat in onze ogen een positief

iets is. Hij vond het makkelijk om een keuze te maken tussen de verschillende onderdelen uit de

horizontale navigatie. Het is wellicht niet direct duidelijk wat nou precies onder een ‘evenement’ valt en

wat onder een ‘activiteit’ valt, maar zodra één blik geworpen wordt in het aanbod in beide categorieën,

is dat direct duidelijk. (Een evenement is een tijdelijk of terugkerend iets, waar een activiteit een vaste

locatie heeft en doorgaans altijd te bezoeken is)

Als commentaar kregen we wel dat bepaalde elementen wellicht overbodig zouden zijn op een

toeristische site, zoals het laatste nieuws in Zoetermeer. Als dit echter beperkt zou blijven tot artikelen

die toeristen iets aan zouden kunnen gaan, zou het niet hinderlijk zijn.

Het gaat natuurlijk om een vroege prototype waar nog een hoop dummy-pagina’s in zitten, maar over het

algemeen was de proefpersoon niet lang bezig met zijn weg te zoeken door de website.

Page 22: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

22

Literatuurlijst

Inspire. "User Stories: Het verhaal van de eindgebruiker” 7 Sept. 2012. Web. 2 May 2013.

< http://www.inspire.nl/blog/user-stories-het-verhaal-van-de-eindgebruiker/>.

WikiPedia. “User Story” 5 Apr. 2013. Web. 2 May 2013.

< http://en.wikipedia.org/wiki/User_story/>

WikiPedia. “Website Wireframe” 8 Apr. 2013. Web. 3 May 2013.

< http://en.wikipedia.org/wiki/Website_wireframe/>

Fotolia. “Diverse foto’s persona’s” N.p. Web. 7 May 2013.

<http://nl.fotolia.com/cat1/3000000/>

Kermis Data. “Kermisdata Zoetermeer 2013” N.p. 2013. Web. 8 May 2013.

<http://www.kermisdata.nl/kalender.php?ID=1106&Kermis=Zoetermeer/>

Chapman en Chapman, Webdesign: A complete introduction. Wiley, 2006. May 2013. Print.

Page 23: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

I

Bijlagen

Bijlage I – Website structuur

Bijlage I - Hiërarchisch diagram met de website structuur

Page 24: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

II

Bijlage II – STD: Kaarten kopen

Bijlage II - STD over het kopen van kaarten

Page 25: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

III

Bijlage III – STD: Inschrijven voor evenement

Bijlage III - STD over het inschrijven voor een evenement

Page 26: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

IV

Bijlage IV – STD: Zoekmachine

Bijlage IV - STD over het gebruik van de zoekmachine

Page 27: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

V

Bijlage V – STD: Route plannen

Bijlage V - STD voor het plannen van een route

Page 28: WEBDESIGN TEAM 12 - Universiteit Utrecht3817989/opdracht1/docs... · WEBDESIGN – TEAM 12 Informatiekunde – week 20 – opdracht 1 Presentatie van het ontwikkelteam, Concept, ontwerp

VI

Bijlage VI – Wire Frame: Website mainpage / lay-out

Bijlage VI - Wire Frame mainpage