Youmap. Colofon. Michel Kempers. Afstudeerder Hogeschool Rotterdam Opleiding: Media Technologie

Youmap

Colofon Michel Kempers Afstudeerder Hogeschool Rotterdam Opleiding: Media Technologie Afstudeerbegeleider HR: L. Remijn Afstudeerbegeleider VPRI: R. Minnaar Youmap -‐ Michel Kempers -‐ 2010 2

Youmap

Samenvatting Waar tegenwoordig internet uitkomst bied voor veel informatievraagstukken, gebruikte men vroeger uitsluitend papieren media. Het opzoeken van gegevens van instanties, winkels en bedrijven; het opvragen van informatie over verleende vergunningen of werkzaamheden aan de weg binnen een gemeente werd opgezocht in telefoonboeken, gouden gidsen, regio-‐ nale kranten en gemeente gidsen. Om een product te ontwikkelen dat gemeentelijke informatie kan verstrekken op een ma-‐ nier die bezoekers informeert op een interactieve manier met lage onderhoudstijd voor de aanbieders, is een onderzoek geformuleerd dat antwoord geeft op de volgende vraag: Op welke manier kan er zo efficiënt mogelijk gemeentelijke informatie digitaal worden gebundeld waarbij dit tevens dienst zal doen als informatiepunt voor burgers? Aan de hand van deze onderzoeksvraag is er onderzocht op welke manier er een digitaal product ontwikkeld kon worden dat op een overzichtelijke manier informatie geeft op ge-‐ meentelijke schaal. Het onderzoek bekijkt concurrentie en andere toepassingen om zo een beeld te scheppen van het huidig aanbod. Er is een prototype ontwikkeld dat een helder beeld geeft van de structuur en functionaliteiten die het uiteindelijke product gaat krijgen. Het hele afstudeertraject is beschreven in deze scriptie. Het onderzoek met de bevindingen ervan, ontwerp, ontwikkel en de testfase en een beschrijving van het systeem.

Youmap -‐ Michel Kempers -‐ 2010 3

Youmap

Voorwoord Dit afstudeerverslag is geschreven in opdracht van mijn opleiding Media Technologie aan de Hogeschool Rotterdam. Ik heb mijn afstudeerperiode doorlopen bij VRPI internetdiensten te Rockanje. Mijn afstudeerbegeleider van VPRI is R. Minnaar. De afstudeerdocenten van Hoge-‐ school Rotterdam zijn L. Remijn en G. de Haan. Tijdens mijn afstudeerperiode heb ik onderzoek gedaan naar digitale informatie bronnen in het gemeentelijke segment. Op welke manier wordt er informatie aangeboden en zijn er kansen om deze voorzieningen te verbeteren. In veel gevallen wordt er informatie aangebo-‐ den middels het gebruik van Google Maps, die de informatie visualiseert en aanbiedt op een eenvoudige en gebruiksvriendelijke manier. In het onderzoek zijn verschillende toepassingen beschreven die met een Google Maps plattegrond informatie aanbieden aan bezoekers van websites. Dankwoord: Allereerst wil ik mijn dank uitspreken aan VPRI Internetdiensten, het bedrijf waar ik deze periode heb kunnen doorlopen. Met behulp van de middelen, steun en tijd die zij mij boden ben ik in staat geweest om mijzelf te ontwikkelen, de Youmap applicatie en deze scriptie af te leveren. Daarnaast wil ik mijn afstudeerbegeleider van VRPI bedanken voor het begelei-‐ den van mij tijdens deze periode. Als laatste wil ik de stagebegeleiders van school bedanken voor hun tijd en inzet.

Michel Kempers, Mei 2010


Youmap

Inhoudsopgave Hoofdstuk 1 -‐ Introductie 1.1 Afstudeerbedrijf 1.2 Doel van het afstudeerproject 1.3 Doel van het verslag 1.4 Probleemstelling 1.5 Onderzoeksvragen 1.6 Te hanteren methodieken en technieken 1.7 Leeswijzer Hoofdstuk 2 -‐ Informatievoorzieningen 2.1 Informatievoorziening 2.2 Concurrenten -‐ Digitale gemeentegidsen 2.3 Conclusie 2.4 Mogelijkheden -‐ Google Maps Mashups 2.5 Conclusie

7 7 7 7 8 8 8 11

12 12 14 28 29 34

Hoofdstuk 3 -‐ Ontwerp & ontwikkelfase 3.1 Producten ontwerpfase 3.2 Het ontwerpproces 3.3 De ontwikkelfase 3.4 Het prototype 3.5 Testfase 3.6 Conclusie testfase

36 36 39 40 45 47 47

Hoofdstuk 4 – Beschrijving systeem 4.1 Het product Youmap 4.2 Youmap.nl 4.3 CMS 4.4 Youmap componenten

48 48 50 52 52

Hoofdstuk 5 – Conclusie & aanbevelingen 5.1 Conclusie & aanbevelingen Bronvermelding Literatuur Internet

54 54

55 55 56


Youmap

Bijlagen A Youmap Sitemap B Youmap ERD C Flowcharts D Pakket van eisen E Functioneel ontwerp F Onderzoek gemeentes G Youmap pagina’s H CMS pagina’s I Usability test J Screens Briels Nieuwsland K Algemene info Westvoornse Courant L Navigatie en usability eisen

57 57 58 59 62 68 78 79 80 81 94 96 97


Youmap

Hoofdstuk 1 -‐ Introductie 1.1 Het afstudeerbedrijf VPRI VPRI is een webdesign bureau te Rockanje. VPRI staat voor Voorne-‐Putten, Rozenburg Inter-‐ netdiensten. Het bedrijf is sinds 1996 ontwikkelaar van websites en webapplicaties. Het be-‐ drijf bestaat uit een goed georganiseerd team dat complete webproducten aflevert. De we-‐ bproducten bestaan uit webpagina’s met gekozen modules om de websites completer en dynamischer te maken. Denk bij de modules bijvoorbeeld aan Nieuwsbrief-‐, youtube-‐, CMS-‐, en webshopmodules. De klantenkring beslaat hoofdzakelijk het midden-‐ en kleinbedrijf; er worden ook producten ontworpen voor gemeentes en provincies. Het bedrijf gaat mee met de nieuwste trends in de webwereld. Nieuwe stromingen waar momenteel aan gewerkt worden zijn Narrowcasting en Mobiele internet applicaties. Het team Een creatief team van gemotiveerde medewerkers die allemaal een eigen inbreng hebben. Het team weet wat er speelt in de huidige wereld van webdesign en blijft inspelen op nieu-‐ we kansen. Het team bestaat uit vier vaste medewerkers met daaromheen een kleine groep losse medewerkers vaak in de vorm van studenten. Studenten van MBO en HBO niveau zijn een vast onderdeel in het VPRI team. Deze studenten leggen de basis voor een toekomst in de grafisch industrie en ondersteunen het bedrijf met dagelijkse werkzaamheden. Het be-‐ drijf heeft daarbij meerdere studenten van de opleiding MT (voorheen GMT) 1 begeleid in het afstuderen.

1.2 Doel van het afstudeerproject Het doel van het afstudeerproject is een veelzijdig en dynamisch informatiepunt voor ge-‐ meentes ontwikkelen. Efficiënt gebruik maken van informatie is een uitgangspunt. Dit uit-‐ gangspunt wordt bereikt door een applicatie te ontwikkelen waar de content makkelijk te beheren is door verschillende belanghebbenden.

1.3 Doel van het verslag Een verslag van het onderzoek en de ontwikkeling van het product om een overzicht te krij-‐ gen van het proces dat doorlopen wordt bij het ontwikkelen van het product. Bij het ontwik-‐ kelen van dergelijke producten kan het inzicht bieden in de te doorlopen procedure. Er wordt gekeken naar huidig aanbod en waarom deze succesvol zijn of wat gedaan kan wor-‐ den om deze producten succesvol te maken. 1

MT = Media Technologiem GMT = Grafimediatechnologie


Youmap

1.4 Probleemstelling Naar aanleiding van gesprekken met gebruikers, geïnteresseerden en eigen ervaringen van het bedrijf, is het duidelijk geworden dat het huidig aanbod van informatiesystemen van gemeentes niet voldoet aan eisen van de gebruikers. Een onderzoek moet helderheid geven over hoe het probleem op te lossen is en zo een product te ontwikkelen dat wel veelzijdig genoeg is om aan de wensen te voldoen.

1.5 Onderzoeksvragen Hoofdvraag: Op welke manier kan er zo efficiënt mogelijk gemeentelijke informatie digitaal worden gebundeld waarbij dit tevens dienst zal doen als informatiepunt voor burgers? Deelvragen: . Wat wordt bedoeld met gemeentelijke informatie? . Hoe kan deze informatie gebundeld en teruggekoppeld worden. . Op welke manier is het mogelijk om een dynamische inhoud krijgen? Hoe ver gaat de dynamiek? . Hoe kan de informatie actueel blijven zonder dat het onderhoud erg hoog is?

1.6 Te hanteren methodes en technieken In deze paragraaf worden de methodes en technieken beschreven die zijn gebruikt tijdens de afstudeerperiode. Onderzoeksmethode Een succesvol onderzoek beschrijft de van te voren gestelde doelen. Deze doelen zijn om-‐ schreven in de hoofd-‐ en deelvragen. Belangrijk is om op verschillende manieren te zoeken naar antwoorden. Wat is er geschreven over het onderwerp, hoe heeft de concurrentie het probleem aangepakt en hoe denken potentiële gebruikers over het concept. Om hier duide-‐ lijkheid in te krijgen gaan we gebruik maken van verschillende onderzoekmethodes. Wat is het huidig aanbod, op welke manieren kan dat worden aangepast zodat het beter zijn doe-‐ len bereikt. Er komt een onderzoek naar wat eisen zijn binnen het gevraagde. Wat wil de gebruiker bij het product, op welke manier ziet deze graag bepaalde handelingen en wat is wenselijk. De uitkomsten van deze onderzoeken worden beschreven in een conclusie die als leidraad zal dienen tijdens het ontwikkelen van het product. Youmap -‐ Michel Kempers -‐ 2010 8

Youmap

Literatuuronderzoek Een onderzoek waarbij het onderzoeksveld geschreven literatuur is. Deze literatuur kan van verschillende bronnen zijn. Het onderzoek dat ik ga doen is grotendeels gebaseerd op digita-‐ le literatuur. De oorzaak hiervoor is de vindbaarheid, op internet is het gemakkelijk om ver-‐ schillende actuele bronnen aan te boren. Ook het onderwerp van het onderzoek heeft zijn oorsprong bij digitale media. Marktonderzoek Bij het marktonderzoek wordt gekeken naar de markt en/of klanten die worden aangespro-‐ ken door het product. Door middel van de geformuleerde onderzoeksvragen zal getracht worden om gericht te zoeken naar informatie. Een ander onderdeel dat onderzocht gaat worden is de concurrentie. Er wordt bekeken hoe concurrerende systemen informatie aan-‐ bieden en verwerken. Er wordt daarbij gekeken of er raakvlakken of verschillen zijn tussen de systemen. Daarnaast zal bekeken worden op welke manieren er voordeel kan worden verkregen door de minpunten van de concurrentie. Experience prototyping Met experience prototyping wordt bedoeld dat door middel van een prototype inzicht wordt verkregen over de manier van denken van potentiële gebruikers. Via verschillende scenario’s wordt gekeken of de manier van denken van gebruikers gelijk loopt met de manier waarop het product ontwikkeld wordt. Deze bevindingen worden beschreven en meegenomen in het onderzoek. Een bekend woord is gebruiksvriendelijkheid, ook wel usability. Het is be-‐ langrijk dat het product zo gebruiksvriendelijk mogelijk is, zodat gebruikers zonder moeite gebruik kunnen maken van het product. Voor nieuwe en meer ervaren gebruikers, moet het mogelijk zijn om door middel van herkenbare opbouw van de pagina gemakkelijk te werken met het product. Producten De producten die uiteindelijk zullen worden opgeleverd. Deze producten zijn ontwikkeld om het onderzoek te beschrijven en om het onderzoek te ondersteunen. Onderzoek Hiermee bedoel ik een uitgebreid verslag van het onderzoek. De onderzochte zaken worden besproken. De bevindingen van het onderzoek zullen worden beschreven en beargumen-‐ teerd. Naar aanleiding van dit verslag zal een prototype worden ontwikkeld. Prototype Het prototype zal worden ontwikkeld als eerste versie van het uiteindelijke product. Net als bijvoorbeeld in de auto-‐industrie, waar eerst prototypes van modellen worden gemaakt. Deze prototypes worden getest en beoordeeld. De positieve elementen worden verwerkt in het product dat later op de markt zal worden gebracht. Negatieve elementen worden aan-‐ Youmap -‐ Michel Kempers -‐ 2010 9

Youmap

gepast of verwijderd. Er wordt een werkend product ontwikkeld dat als basis zal gaan funge-‐ ren voor het uiteindelijk product. Alle basisfuncties zullen aanwezig zijn in het prototype. Het prototype wordt gebruikt om te testen of de functionaliteiten logisch zijn. Met de resul-‐ taten van de testen zal verder worden gewerkt aan een product dat kan worden aangebo-‐ den aan potentiële afnemers. Ontwikkelwijze Tijdens de afstudeerperiode is voor het ontwikkelen van het product gekozen voor de com-‐ binatie van de programmeertaal PHP en de database server van MySQL. De keuze om deze producten te gaan gebruiken, is grotendeels bepaald door het bedrijf. PHP enMySQL zijn de basis voor alle webproducten die het bedrijf ontwikkelt. De componenten vormen samen een sterk team en worden veelal samen gebruikt bij het ontwikkelen van applicaties. Voor mij persoonlijk is het een manier om mijn kennis in deze twee producten te vergroten en zo een basis te leggen voor mijn toekomst in de grafisch industrie. Het platform waarop de ap-‐ plicatie zal gaan draaien is LAMP. Dat staat voor Linux, Apache, MySQL & PHP. Dit platform is de standaard bij VPRI. Deze onderdelen vormen een webomgeving die stabiel draait. Tech-‐ nieken die nog meer worden toegepast zijn Javascript (JS), HTML & CSS. HTML en CSS zorgen voor de lay-‐out van de pagina, met JS als aanvulling op de basisfunctionaliteit. De Google Maps API zal (bijvoorbeeld) ondersteund worden met JS. Er zullen nog meerdere componen-‐ ten ontwikkeld worden met JS. Als API (Een API (application programming interface) is een verzameling definities op basis waarvan een computerprogramma kan communiceren met een ander programma of onder-‐ deel (meestal in de vorm van bibliotheken).) 2 voor het visualiseren van de Interactieve plat-‐ tegrond in de applicatie zal ik de Google Maps API gebruiken. Binnen het bedrijf wordt er met deze API gewerkt als standaard API. Daarnaast is de bekendheid in gebruik met de Google Maps plattegrond bij gebruikers het grootst in vergelijking met de andere aanbie-‐ ders. De Google Maps API bestaat het langst van alle producten en geeft vertrouwen in de continuïteit van het product en in de levensduur ervan. De kennis is voornamelijk opgedaan op fora: PHP.net, PHPhulp.com. Daarnaast heb ik ge-‐ bruik gemaakt van boeken als: het SQL leerboek van Van Lans en MySQL/PHP database ap-‐ plicaties van J. Greenspan & B. Bulger. Het script is geschreven in het Engels. Hier is voor gekozen, omdat alle functies en andere vaste waardes in de programmeertaal in het Engels zijn ontwikkeld. Door de code zelf ook in het Engels te ontwikkelen blijft de leesbaarheid constant. Daarbij blijft, ondanks de keuze om het product voor de Nederlandse markt te ontwikkelen, de deur voor buitenlands ge-‐ bruik openstaan. 2

Bron: http://nl.wikipedia.org/wiki/Applic ation_programming_interface


Youmap

Afbakening Of het product daadwerkelijk succesvol wordt kan niet worden gegarandeerd. Het product is ontworpen naar aanleiding van een behoefte vanuit VPRI. Deze behoefte is geanalyseerd en aan de hand van deze analyse is een concept geschreven. Vanuit het concept is het uiteinde-‐ lijke product ontworpen en gebouwd. Na mijn afstuderen word het product aangeboden aan verschillende partijen. De tijd zal leren of het product succesvol is in zijn huidige vorm of dat de functionaliteit aangepast zal moeten worden. Het product is ontworpen voor de Nederlands markt. Er zijn geen vertalingen of vertaalfunc-‐ tionaliteiten aanwezig in de applicatie. De functionaliteit van de Google Maps plattegrond is vanuit de API wel in te stellen op wereld niveau. Op scriptniveau is de voertaal Engels. Het argument hiervoor is beschreven in bij Ontwikkelwijze op pagina 10. De applicatie is ondanks het gebruik van een Google Maps plattegrond geen routeplanner voor wandelen, fietsen of autotochten. Een route kan worden bepaald en beschreven via Google Maps (een extern venster dat zich opent vanuit de applicatie). De functionaliteit van Googlemaps.nl is erg uitgebreid en er is een keuze gemaakt om deze functionaliteit niet na te maken. Er is prioriteit gesteld aan andere werkzaamheden voor het ontwikkelen van func-‐ tionaliteiten die niet bestonden of voor openbaar gebruik beschikbaar zijn. 1.7 Leeswijzer De leeswijzer geeft een korte beschrijving van de inhoud van de scriptie. Het onderzoek wordt beschreven in het hoofdstuk informatievoorzieningen. Er worden ver-‐ schillende producten beschreven die vergelijkbaar zijn met de Youmap. Vervolgens worden de verschillende fases beschreven die zijn doorlopen om een product te ontwikkelen dat invulling geeft op de conclusies die zijn gedaan na het onderzoek. Tijdens de ontwerpfase zijn verschillende producten ontwikkeld die hielpen met de beeldvorming van het te ontwikkelen product. De hoofdstukken ontwikkelfase, prototype en testfase behande-‐ len de fase van de ontwikkeling van het product, van begin tot oplevering. Als laatste wordt het systeem beschreven in het hoofdstuk beschrijving systeem. Hoe steekt het product in elkaar en wat zijn nuttige elementen. De conclusies van het onderzoek worden hier beschreven evenals een aantal aanbevelingen voor het product.


Youmap

Hoofdstuk 2 -‐ Informatievoorzieningen 2.1 Informatievoorziening Wat is informatievoorziening? Informatievoorziening is een totaalplaatje van middelen die gericht zijn om in de behoefte aan informatie van een bepaald onderwerp te voorzien. Het stelt geïnteresseerden in staat meer te weten te komen over een onderwerp. Vastgestelde informatie en kennis is verza-‐ meld en wordt verspreid naar degene die er behoefte aan hebben. Het afstudeeronderzoek gaat uit van een digitaal product als informatievoorziening in de vorm van een webapplica-‐ tie. Dit afstudeerproject gaat over informatievoorzieningen gericht op gemeentelijke informatie. Deze informatie licht burgers voor in verschillende onderwerpen. Voorbeelden: beleid, be-‐ slissingen, regels, locaties, vergunningen, belangrijke data en burgerzaken. Deze informatie kan heel divers zijn en wordt via verschillende kanalen naar de burger toegebracht. Voor-‐ beelden hiervan zijn: regionale kranten, folders, regionale televisie, internetpagina’s.3

3

(Bronnen o.a.: www.rotterdam.nl, www.brielle.nl, Rijnmond tv, Briels Nieuwsland, Westvoornse Courant. zie bijlage)


Youmap

Beschrijving van huidige informatievoorzieningen

De informatievoorziening waar het onderzoek zich op gaat richten is met het medium inter-‐ net. Internet is in vergelijking met andere media redelijk nieuw. Het is een dynamische industrie waar veel ontwikkeling in is. Met internet kunnen gemeentes burgers informeren op veel verschillende manieren. In tegenstelling tot de krant, folder en televisie is internet niet statisch. Kranten en folders worden gedrukt en kunnen daarna niet meer worden aan-‐ gepast. In de loop van tijd zijn deze niet meer actueel en daarom niet meer bruikbaar. In-‐ formatie in de krant, bijvoorbeeld het vrijgeven van het aantal aanvragen voor vergunningen voor bouw en evenementen, worden per week in de regionale kranten gedrukt. Bij folders is de inhoud van een wat minder tijdelijke aard. Ze hebben een langere levensduur, maar ook deze verliezen uiteindelijk hun waarde. De televisie kan worden gebruikt voor het aanbieden van informatie via regionale of ge-‐ meentelijke zenders. Voorbeelden hiervan zijn zenders van Rotterdam (RTV, Rijnmond tv) , Amsterdam (ATV5), Zeeland (Omroep Zeeland). Via deze kanalen kunnen gemeentes/regio’s burgers informeren over allerlei onderwerpen. Deze informatie kan meer uitgebreid zijn dan in een folder of krant door bewegende beelden. Ook de actualiteit kan groter zijn. Maar on-‐ geacht de verschillen zijn deze drie media statisch. De inhoud staat van te voren vast en er kan niet interactief mee om worden gegaan. Internet daarentegen biedt mogelijkheden om op een interactieve manier informatie aan te bieden aan burgers. Met een website kunnen gemeentes informatie aanbieden en deze in-‐ formatie kan op alle tijden worden aangepast. Ook kan deze informatie op alle tijden door burgers worden geraadpleegd. Gegevens die worden aangeboden op internetsites verschillen per gemeente. Een gemeente kan kiezen om informatie te plaatsen, die andere gemeentes niet relevant vinden voor op de website. Informatie zoals geschiedenis van de gemeente, kan voor de ene gemeente als af-‐ leiding van het werkelijke doel worden gezien, terwijl een andere gemeente het ziet als een welkome aanvullingen op het aanbod. Een compleet overzicht van gemeentelijke informatie wordt verschaft in de vorm van ge-‐ meentegidsen. In de tijd dat internet nog niet bestond of in de kinderschoenen stond, werd deze gemeentelijke informatie op papier aangeboden. Tegenwoordig zijn er twee varianten beschikbaar. De papieren versie en de digitale versie in de vorm van een website/ webappli-‐ catie. In een gemeentegids wordt de gemeente beschreven en worden burgers geïnfor-‐ meerd in een reeks onderwerpen.


Youmap

Een selectie van deze onderwerpen die betrekking hebben op het onderzoek:4 Algemene informatie: Deze informatie kan verschillende onderwerpen omvatten. Openings-‐ tijden en locatie van het gemeentehuis, brievenbussen en andere algemene diensten. Historie, toerisme en Cultuur: De geschiedenis waar de stad trots op is met een beschrijving van deze gebeurtenissen. Monumenten en andere trekpleisters worden beschreven ter in-‐ formatie.

Bestuur en organisatie: Een beschrijving van het bestuur van de gemeente. Welke rollen worden er vertolkt in de gemeente. Wanneer vergadert de gemeenteraad en wie is de bur-‐ gemeester. Ondernemen: Bedrijventerreinen, winkelcentra, universiteiten en andere onderwijsinstellin-‐ gen. Verschillende gebieden die interessant kunnen zijn voor huidige en nieuwe bewoners van gemeentes. Dienstverlening: Locatie en gegevens van veiligheidsdiensten als politie en brandweer bin-‐ nen gemeentes. Verkeer en vervoer: Locaties waar gewerkt gaat worden aan de infrastructuur, openbaar vervoer en parkeergelegenheden zijn onderwerpen die hier worden getoond. Jeugd, onderwijs en sport: Een gezonde gemeente heeft inwoners met een diversiteit qua leeftijden. Voor jeugd en jonge volwassenen zijn onderwerpen als onderwijs en jeugdinstan-‐ ties van belang. Sport is belangrijk voor alle leeftijden en zodoende een belangrijk onder-‐ werp om uit te lichten. Sociale zaken en zorg: Waar kunnen burgers terecht met vragen over deze onderwerpen. Het is van belang dat burgers goed geïnformeerd worden over sociale regelingen binnen de gemeente. Het doel van een gemeentelijke website blijft om burgers te informeren wat de visie en het beleid is van de gemeente in belangrijke onderwerpen. Een voordeel van het media internet is de interactiviteit ervan. Bent u het niet eens met een bepaalde beslissing of wenst u nog extra informatie over een bepaald onderwerp? Met zogenaamde formulieren kunt u ter plaatse uw klacht indienen of extra informatie aanvragen. Voorheen moesten burgers daar-‐ voor naar het gemeentehuis of naar andere instanties.

4

(Bronnen: http://www.vng.nl/smartsite.dws?id=BELEIDSVELDEN, verschillende websites van gemeentes en papieren gemeentegidsen )


Youmap

Er is veel gemeentelijke informatie beschikbaar voor burgers. De informatie is naar mijn me-‐ ning nog erg statisch en wordt veelal door de gemeentes zelf geregeld. Het laatste is op het eerste gezicht logisch maar het is mogelijk om dit aspect kosteloos uit te besteden. Het soort informatievoorziening waar het onderzoek op gericht is, is het openbaar maken van informa-‐ tie in de vorm van locaties met bijbehorende gegevens van instanties en gebeurtenissen. Daarbij is actualiteit een belangrijk woord. Zonder actualiteit heeft het aanbieden van infor-‐ matie geen zin. Niemand is op zoek naar oud nieuws of gegevens die niet meer kloppen. Op welke manieren kan de informatievoorziening van gemeentes interactiever worden waarbij actualiteit en de authenticiteit belangrijk zijn. Het onderzoek richt zich vooral op gemeente-‐ gidsen. Er is gekozen om het onderzoek te richten op deze media, omdat de beoogde oplos-‐ sing veel weg heeft van een gemeentegids.

2.2 Concurrenten -‐ digitale gemeentegidsen Voor het ontwikkelen van een product dat voldoende functionaliteit en body heeft om te slagen als een op zichzelf staand product zijn er een aantal producten onderzocht die op het gebied van doel en functionaliteit vergelijkbaar zijn. Digitale gemeentegidsen zijn producten die deze eigenschappen bezitten. Het marktverkennend onderzoek richt zich op deze pro-‐ ducten. In Nederland zijn vier grote uitgevers van gemeentegidsen. Bij het selecteren van de te onderzoeken digitale gemeentegidsen is in ieder geval een eis gesteld en dat is dat er een Google Maps plattegrond op de website aanwezig is. Er zijn in Nederland 431 gemeentes5. De 4 grote aanbieders van gemeentegidsen worden beschreven in het onderzoek. Deze vier hebben het leeuwendeel van gemeentes onder de hoede. Andere aanbieders zijn om deze reden niet meegenomen in het onderzoek.

Uitgever

Product

Website (url)

Beweerd aantal afnemers:

FMR

Digigids

http://www.fmrproducties.nl/

+/-‐ 120

AKSE media

Smartmap

http://www.aksemedia.nl/

+/-‐ 140

De kleine media

Geen productnaam

http://cms.dekleinemedia.nl/

+/-‐ 60

C&T Promotions

mijngemeentegids

http://www.mijngemeentegids.nl/Main +/-‐ 60

Resterend aantal gemeentes

+/-‐ 50

De uitgevers van digitale gemeente gidsen in Nederland zijn: (zie bijlage F bladzijde 77: aantal gemeentes met digitale gemeentegids) 5

Bron: http://cbs.nl/nl-‐gemeentelijke indeling per 1 januari 2010


Youmap

Het aantal gemeentes met een digitale gemeentegids is vrij groot. Er zijn ongeveer vijftig gemeentes zonder digitaal product. Tijdens het onderzoek naar het aantal afnemers viel het op dat er bij de verschillende aanbieders namen dubbel voorkwamen. Dit geeft aan dat ge-‐ meentes zijn overgestapt naar andere aanbieders die waarschijnlijk een completer product boden. Er kunnen andere oorzaken zijn voor het overstappen, maar dat is puur giswerk en niet relevant voor het onderzoek. Het geeft wel aan dat gemeentes open staan voor over-‐ stappen en dat is gunstig voor het product. Het onderzoek richt zich op een aantal punten die belangrijk worden geacht voor het succes van een dergelijk product. Deze punten zijn: . . .

Inhoud van de pagina. Een korte beschrijving van de website. Is de navigatie op een logische manier opgebouwd en gepresenteerd? De usability van het systeem. Een beschrijving van goede en minder goede punten.

Deze punten zijn belangrijk om te onderzoeken daar zij een goed beeld geven van de appli-‐ caties. Hieronder wordt verder uiteengezet waarom deze onderzoekspunten belangrijk zijn voor een succesvolle webapplicatie. Inhoud: De inhoud van de pagina zijn de tekstuele elementen die gebruikers informeren over de ge-‐ meente. Daarbij horen nog afbeeldingen om de pagina te vullen of om de tekst kracht bij te zetten. Daarnaast is gekeken naar de opmaak van de pagina en of de opmaak het doel van de website versterkt of remt. Is de inhoud die wordt aangeboden actueel, relevant? Op wel-‐ ke manier wordt de informatie aangeboden? Is de inhoud dynamisch? Een beschrijving van het product. Navigatie: Bij de navigatie is het van belang dat deze logisch is en volledig werkt. Bij navigatie komen eisen naar voren die gelijk lopen met gebruiksvriendelijkheid. Consistentie en herkenning zijn heel belangrijk. Navigatieelementen op de pagina’s zijn het menu, een kruimelpad en knoppen om verder of terug gaan op de pagina. Punten die belangrijk zijn bij navigatie zijn persoonlijk, in die zin dat sommige gebruikers meer waarde hechten aan het ene aspect en andere gebruikers meer waarde hechten aan andere aspecten. De Nielsen Norman Group 6 6

http://www.den-‐dopper.com/2009/05/26/top-‐10-‐eisen-‐aan-‐een-‐effectieve-‐navigatie/ http://en.wikipedia.org/wiki/Nielsen_Norman_Group http://www.nngroup.com/


Youmap

(NNgroup) heeft in 2009 een lijst gepresenteerd met daarop 10 belangrijke punten voor na-‐ vigatie. Deze punten die belangrijk zijn voor een goede navigatie zijn volgens de NNgroup zijn:

. . . . .

zichtbaar intuïtief contextgevend consistent permanent

. . . . .

passend uitbreidbaar niet hinderlijk gecoördineerd toegankelijk

(De bovenstaande punten worden beschreven in bijlage L op bladzijde 96)

De punten van de NN-‐group worden in het onderzoek als leidraad genomen, daar de organi-‐ satie wereldwijd gewaardeerd wordt en als betrouwbaar kan worden gezien. Vol-‐ gens J.Nielsen en H. Loranger worden gemiddeld de meeste ernstige usability issues veroor-‐ zaakt door slechte vindbaarheid, oftewel informatiearchitectuur en navigatie. Het volgende punt waar het onderzoek zicht op richt is gebruiksvriendelijkheid of usability. Usability: Het product wordt gebruikt door een grote verscheidenheid aan gebruikers. Er zijn gebrui-‐ kers die veel ervaring hebben met computers en webomgevingen. Deze gebruikers hebben door hun ervaring over het algemeen weinig moeite met nieuwe omgevingen. Ze weten door het vele gebruik van webapplicaties wat te doen als ze vast zitten en hoe te navigeren. Er zijn ook gebruikers die weinig tot geen ervaring hebben. Deze nieuwe gebruikers zijn niet bekend met standaardfuncties en zijn snel verward. Het is daarom belangrijk dat de gebrui-‐ kers altijd kunnen zien waar ze zich bevinden op de pagina. Ook is het belangrijk dat er her-‐ kenning plaatsvindt als het gaat om functionaliteit. Gebruikers moeten bekende elementen zien, zodat ze gelijk begrijpen wat er gebeurt als er op geklikt wordt. Het consistent gebruik van functionaliteiten is erg belangrijk. Het is belangrijk dat elke soort gebruiker gemakkelijk kan werken met het systeem, ongeacht de werkervaring met webapplicaties. Door gebruiks-‐ vriendelijkheidseisen toe te passen, wordt de applicatie logisch in gebruik en werkt het ge-‐ makkelijk voor elke type gebruiker. Het lijkt logisch dat een website volledig werkt, maar er zijn genoeg webapplicaties waar niet alle functionaliteit naar behoren werken. Redenen hiervoor kunnen liggen bij een foutief design, verkeerd onderhoud of ontwerpfouten. Het is belangrijk dat alle aangeboden func-‐ tionaliteiten naar behoren werken om gebruikers zo goed mogelijk van dienst te zijn. Als niet alle functionaliteiten werken, levert dat irritatie op bij gebruikers en dat resulteert in het Youmap -‐ Michel Kempers -‐ 2010 17

Youmap

verlies van gebruikers. Een ander belangrijk aspect is de bereikbaarheid van het product. Met bereik doel ik op het aantal mensen dat het product kan gebruiken. Het product moet laagdrempelig zijn in gebruik. Bijvoorbeeld: de website moet zonder plug-‐ins kunnen draai-‐ en, gebruikers met simpele computer en dito internet moeten ook gebruik kunnen maken van het product. Op de website van Handboek website usability 7 staan een aantal richtlijnen die kunnen worden gebruikt om te bepalen of websites rekening houden met de gebruiker in de vorm van usability. Het zijn een aantal logisch lijkende steekwoorden die het gebruik van websites voor gebruikers makkelijker te maken. De richtlijnen hieronder weergegeven. De richtlijnen zullen meegenomen worden in het onderzoek van de verschillende webapplicaties.

. . . . .

Herkenbaarheid & bedrijfsinformatie Navigatie8 Snelheid Zoeken Opmaak

. . . . .

Schrijfstijl Hyperlinks Interactie Accessibility Afbeeldingen &multimedia

7

http://www.w3use.nl/usability/goudenregels.html

8

Het punt navigatie is in het onderzoek apart beschreven. Uitleg voor de overige punten staat ook in deze bijlage. (zie bijlage L bladzijde 96)


Youmap

FMR: digigids

Figuur 1 is een weergave van de digigids van gemeente Opmeer.

Digitale gemeentegidsen van FMR. FMR is een aanbieder van gemeentegidsen, in papieren vorm en in digitale vorm. De pagina’s worden aangeboden met een vast stramien. De lay-‐out van de pagina’s kan bepaald worden door gemeentes zelf. Op deze manier kan een pagina een eigen identiteit aannemen en aangepast worden aan de voorkeur van een gemeente. Inhoud van de pagina. Een korte beschrijving van de website. De Google Maps kaart trekt gelijk de aandacht wanneer de pagina geladen is. Een centraal geplaatste kaart om de gebruiker te informeren over de locatie van alle instanties binnen een categorie, of een reeds gekozen instantie. Via de kaartweergave wordt de gebruiker ge-‐ informeerd waar de locatie is en het is mogelijk om een route te plannen naar deze locatie toe. Het plannen van de route gebeurt in een extern venster. Het voordeel hiervan is dat er ge-‐ noeg ruimte en overzicht voor de gebruiker is en dat het plannen van de route in een voor veel gebruikers bekende omgeving plaatsvindt (er van uitgaande dat veel gebruikers hun routes plannen met Google Maps). Instanties worden op de kaart weergegeven met mar-‐ kers. Deze markers worden ondersteund met een “tekstballon” met daarin de naam van de instantie. De marker geeft de locatie weer van de instantie op de plattegrond. Deze functio-‐ naliteit is een standaard functionaliteit van de Google Maps API. Niet bij elke digigids is de Youmap -‐ Michel Kempers -‐ 2010 19

Youmap

Google Maps kaart geïntegreerd, in plaats daarvan is er dan een statisch kaart. De weergave met een statische kaart geeft de applicatie een erg beperkte functionaliteit. De inhoud van de digigids wordt door gemeentes zelf bepaald. Zij kunnen er een informatie-‐ punt van maken dat gebruikers informeert met actuele gemeentelijke informatie. In werke-‐ lijkheid zijn de producten vaak statische systemen die gebruikers weinig bieden. Voor ge-‐ meentes is dat een gemiste kans in mijn ogen. Door het systeem actief te gebruiken, kunnen gemeentes burgers informeren met allerlei soorten informatie. De informatie die nu wordt aangeboden is gering en is daarom voor gebruikers niet interessant genoeg om terug te ko-‐ men. Is de navigatie op een logisch manier opgebouwd en gepresenteerd? Navigeren binnen de applicatie gebeurt met een horizontaal menu en een ondersteunend verticaal menu. Het horizontale menu is een zogenaamd dropdown menu dat qua functiona-‐ liteit niet ver ontwikkeld is. De informatie in dit menu is algemeen. Het linker menu geeft de mogelijkheden van de keuze in het horizontale menu. De presentatie van het menu is matig. Het ondersteunt gebruiker niet en kan irritatie op-‐ wekken bij gebruikers door het verschieten van onderwerp naar onderwerp. Gebruikers die-‐ nen een vaste hand te hebben willen zij probleemloos kunnen werken. De usability van het systeem. Een beschrijving van goede en mindere punten. Het systeem heeft positieve en negatieve elementen. Digigids pretendeert drempelvrij appli-‐ caties af te leveren, maar dat is niet terug te zien aan de producten. Het schalen van tekst is een functionaliteit die is geboden. Hiermee kunnen gebruikers de tekst van de website ver-‐ groten om het meer leesbaar te maken. Het kleurgebruik is bij veel gemeentes heel erg slecht gekozen en amper te lezen. Vooral voor die gebruiker waarvan het zicht minder goed is zal dat problemen opleveren. Kleurgebruik is een punt dat erg belangrijk is bij het ontwik-‐ kelen en presenteren van producten. Bepaalde kleurcombinaties kunnen een boodschap versterken of juist te niet doen. Het kan een geheel aantrekkelijk maken of het verschil zijn tussen wel of niet leesbaar. Bij een aantal digigidsen lijkt het erop dat er niet is nagedacht over het gebruik van kleur. Veel combinaties zijn totaal niet wenselijk voor websites. Een kruimelpad geeft de gebruiker te allen tijden aan waar hij of zij zich bevindt op de websi-‐ te. Via het kruimelpad kan worden genavigeerd naar bovenliggende elementen. Als gebrui-‐ kers vragen hebben, kunnen zij nergens terecht aangezien er geen handleiding beschikbaar is en er zijn ook geen andere hulpelementen in het systeem die gebruikers ondersteunen in het gebruiken van de website. Zijn er gebruikers die niet overweg kunnen met de functiona-‐ liteit van het systeem, dan ben je ze als gemeente kwijt en komen ze waarschijnlijk niet meer terug. Het doel van de applicatie is het bedienen van burgers met gemeentelijke informatie. Youmap -‐ Michel Kempers -‐ 2010 20

Youmap

Worden de burgers niet goed geholpen, dan schieten gemeentes hun doel voorbij. Er is ook geen gebruik gemaakt van visuele hulpmiddelen die gebruikers informeren over bepaalde functionaliteiten. Bijvoorbeeld het gebruik van iconen om de soort instantie die de marker aanwijst uit te beelden. Of iconen om de bedoeling van bepaalde functies duidelijk te ma-‐ ken. De werking van de FMR pagina is van een basis niveau, maar de functionaliteit werkt. De invulling van de pagina is vrij matig. Bij de gemeente Utrecht is bijvoorbeeld onder het kopje banken alleen een vestiging van de Rabobank te vinden. Terwijl ik me kan voorstellen dat er meer verschillende banken gelokaliseerd zijn in de gemeente Utrecht. Er zijn, zoals beschreven, niet veel instanties te vinden en de plattegrond is te klein om duidelijk te zijn. Bij FMR is gekozen om één marker per keer weer te geven. Dat houdt het geheel overzichte-‐ lijk, maar het kost de gebruiker extra handelingen om te bepalen waar alle instanties van een categorie zich bevinden. Bij sommige aangeboden items mist de functionaliteit zonder dat de gebruiker wordt geïnformeerd met een melding dat hetgeen gezocht wordt er niet is en of er op een andere manier naar een oplossing wordt gezocht. Conclusie Digigids De huidige digigids van FMR is een product dat niet meer voldoet aan de eisen die tegen-‐ woordig worden gesteld aan dergelijke applicaties. De functionaliteit van de website laat te wensen over. Er zijn veel punten die niet worden weergegeven in het systeem, die naar mijn visie wel wenselijk zijn om te tonen. Er is nog weinig interactie met de gebruiker. Het geheel is te statisch (passief) om te kunnen dienen als verbetering van bijvoorbeeld de papieren gemeentegids. Het ontwerp en de uitvoering van de pagina’s is niet sterk. De kleuren passen in veel geval-‐ len niet bij een dergelijk product en werken het product soms ook tegen. De tekst is onlees-‐ baar en het geheel geeft geen professionele uitstraling. Of de keuze van het kleurenpallet een resultaat is van een beslissing van alleen gemeentes, is mij niet duidelijk. Als aanbieder van een publiek product, is het belangrijk om invloed te hebben op dergelijke beslissingen. daar zij ook publiciteit genereren voor de aanbieders. Consequent gebruik van de functiona-‐ liteit is bij verschillende versies niet in acht genomen. Het is misschien minder van belang omdat de producten een beperkte doelgroep aanspreken, namelijk de burgers van gemeen-‐ tes. Het zou kunnen voorkomen dat gebruikers andere digigidsen aanspreken voor het win-‐ nen van informatie van andere gemeentes. Bijvoorbeeld bij vakanties of stedentrips. Een product dat niet opvalt in belangrijke zaken als functionaliteit en gebruiksvriendelijk zal niet snel worden aangesproken.


Youmap

Akse media: smartmap

Figuur 2 is een weergave van de Smartmap van gemeente Hellevoetsluis.

Akse media werkt samen met Smartmap bij het uitgeven van digitale gemeentegidsen. Akse media is van oorsprong een uitgever van papieren gemeentegidsen. Inhoud van de pagina. Een korte beschrijving van de website. De digitale gemeentegids van Akse media is een erg compleet product. Het design is strak en verzorgd. Zaken die gelijk in het oog springen zijn de ruime opzet en de grote Google Maps kaart. Met behulp van de kaart wordt de gebruiker geïnformeerd over de locatie van gezoch-‐ te instanties. Een functionaliteit die erg in opkomst is en voor webapplicaties een verrijking boven de bestaande functionaliteiten. Voorheen was het alleen mogelijk om adresgegevens met links te plaatsen. Met behulp van de kaart wordt de gebruiker nog beter geïnformeerd door het visuele aspect. Een opvallend element is de voorleesfunctie. Deze functie helpt slechtzienden aan informatie te komen die zij nodig hebben om gebruik te kunnen maken van de website. Daarnaast is er de mogelijkheid tot schalen van de tekst, dit is ook een tool om slechtzienden te ondersteunen in het gebruik. Er wordt veel informatie aangeboden aan de gebruiker. De kaart heeft vier verschillende tabbladen, waarvan de standaardweergave de plattegrond is. De andere opties zijn de bedrijvengids, de stratengids en adverteren. Bij adverteren kunnen bedrijven zich aanmelden om te adverteren op de gemeentegids. Aan de onderkant van de kaart is een advertentiecarrousel. Youmap -‐ Michel Kempers -‐ 2010 22

Youmap

De linkerkolom dient als dynamische kolom die informatie weergeeft. In de meeste gevallen wordt het menu weergegeven op die plek, maar als er specifieke informatie wordt aange-‐ vraagd, vervangt deze informatie het menu. Er is gekozen om het algemene menu rechtsbo-‐ ven in de applicatie te plaatsen. Het menu werkt door ruimtegebrek niet helemaal logisch. Het menu is een dropdown menu dat door genoemd ruimtegebrek naar links en naar rechts uitschuift. Het menu oogt door de kleurstelling overzichtelijk en werkt naar behoren. Is de navigatie op een logische manier opgebouwd en gepresenteerd? De locatie waar het menu zich bevindt op de pagina is opvallend. Menu´s worden meestal in het midden of aan de linkerkant geplaatst van het scherm. Bij deze applicatie is gekozen om het menu rechts bovenin te plaatsen. Het menu werkt qua functionaliteit naar behoren, maar zoals eerder beschreven opent het menu naar links in plaats van naar rechts wegens ruimtegebrek. Het centrale gedeelte van de pagina is verdeeld in twee kolommen. De linker-‐ kolom is een interactief menu. In deze ruimte worden de keuze´s van de gebruiker weerge-‐ geven. De bedrijven(terreinen), de stratengids en alle andere functionaliteiten. De rechter-‐ kolom bevat de Google Maps kaart. Op de kaart worden alle locaties getoond van de instan-‐ ties binnen de gemeente Hellevoetsluis. De usability van het systeem. Een beschrijving van goede en mindere punten. De smartmap besteedt veel aandacht aan usability. Er zijn veel elementen op de pagina die het gebruik ervan voor iedereen mogelijk zou moeten maken. De voorleesfunctie, om blinden en slechtzienden de inhoud van de pagina’s te laten ‘zien’. Het schalen van de tekst, een tool die slechtzienden kunnen gebruiken om de tekst op de pagina te vergroten en zo beter leesbaar te maken. De rest van de pagina blijft behouden. Er wordt consequent gebruik gemaakt van de elementen als kolommen, de marker en andere functionaliteiten. Op deze manier weet een gebruiker wat er van het systeem verwacht kan worden en is het gemakkelijker werken. Een functionaliteit die ontbreekt is het kruimelpad. Dit pad laat gebruikers zien waar ze zich op de website bevinden. Daarbij is het navigeren naar pagina’s die eerder bezocht zijn of een niveau hoger gemakkelijk bereikbaar. De adver-‐ tentiecarrousel is een extra functionaliteit in het geheel. Het geeft bedrijven de mogelijkheid om zichzelf extra te profileren. Nadelig is de manier waarop de carrousel is ingesteld. De advertentiecarrousel ververst elke seconde. Het zou wenselijk zijn dat de carrousel ververst elke keer als de gebruiker iets aan klikt. Nu ziet de gebruiker steeds iets flitsen in het beeld, wat als storend ervaren kan worden. Youmap -‐ Michel Kempers -‐ 2010 23

Youmap

Conclusie smartmap

De gemeentegids van Akse media is een prima product. Het biedt gebruikers veel functiona-‐ liteit en inhoud. De gebruiker wordt geïnformeerd over de instanties binnen de gemeente en dat gebeurt op niveau. De plattegrond is groot weergegeven, zodat het geheel overzichtelijk oogt en niet snel verwarrend is voor de gebruiker, wanneer er veel verschillende items wor-‐ den weergegeven. Het design van de pagina is net als de plattegrond overzichtelijk en ruim-‐ telijk. Het straalt rust uit naar gebruiker toe. Het kleurgebruik is logisch en ondersteunt de website. Minder aan de website is de uitvoering van de advertentiecarrousel die blijft ver-‐ springen en zo een irritatiefactor vormt op het scherm. Daarnaast valt er nog op te merken dat de content van de pagina wordt beheerd door de gemeente of door Akse media. Hier-‐ mee laten ze, in mijn ogen, de kans liggen om voor de verschillende partijen de applicatie nog aantrekkelijker te maken. Beheren instanties de gegevens zelf, dan heeft de gemeente er geen omkijken naar en behoeft zij er weinig tot geen tijd in te steken, maar ze biedt wel een volledig en actueel product. Voor de instanties is het nadelig dat zij afhankelijk zijn van gemeentes om gegevens aan te passen. Deze aanpassingen worden doorgegeven door mid-‐ del van een webformulier. De kleine media: digitale gemeentegids

Figuur 3 is een weergave van de digitale gemeentegids van gemeente Neder-‐Betuwe.

De kleine media, een uitgever van gemeentegidsen, plattegronden, bedrijfsgidsen en digitale gemeentegidsen. Flexibiliteit staat hoog in het vaandel en van belang is dat alle gemeentes Youmap -‐ Michel Kempers -‐ 2010 24

Youmap

een eigen gids krijgen. Alle digitale gemeentegidsen zijn uniek, omdat het ontwerp zelf kan worden aangeleverd. De gemeentegids van De kleine media heeft op het eerste gezicht een andere opzet dan de voorgaande partijen. Inhoud van de pagina. Een korte beschrijving van de website. De opbouw van de pagina is logisch, van links naar rechts worden verschillende elementen getoond. Het uiterlijk van de pagina is overzichtelijk. Alle elementen krijgen genoeg ruimte om op te vallen, zonder dat ze andere elementen storen. Opvallend is dat er veel verschil-‐ lende elementen worden aangeboden. Een fotogalerie, een E-‐book, een weermodule en ook een Google Maps plattegrond. De plattegrond speelt op deze pagina geen belangrijke rol gezien de locatie. De plattegrond is onderaan de pagina geplaatst en is vanwege het beknop-‐ te formaat niet in staat om overzichtelijk informatie weer te geven. Andere modules zoals de fotogalerie zijn leuk, maar niet erg belangrijk in mijn optiek. Een module die de gemeentegids interactief houdt en aantrekkelijk voor bezoekers is, is het re-‐ gionale nieuws. Doordat deze informatie blijft veranderen, is er altijd wat nieuws te lezen-‐ voor bezoekers van de pagina. Het is niet waarschijnlijk dat gebruikers meerdere malen per dag naar de pagina komen om het nieuws te bekijken, daar zijn genoeg andere kanalen voor die meer veelzijdig zijn, maar het houdt de gebruiker op de pagina. De website richt zich het meest op het verschaffen van informatie op een vaststaande ma-‐ nier. Er is veel informatie te vinden voor gebruikers. Het hoofddoel is duidelijk informeren net als de andere gemeentegidsen, maar de interactie tussen de applicatie en de gebruiker is minder groot dan bij de voorgaande producten. Is de navigatie op een logische manier opgebouwd en gepresenteerd? Het menu is links gepositioneerd en gerangschikt op categorie. Als eerste is de gemeentelijke informatie geplaatst met daaronder informatie die betrekking heeft op instanties als clubs en verenigingen. De informatie wordt weergegeven in het midden van de pagina. De functi-‐ onaliteit werkt goed. Het leidt de gebruiker door de pagina zonder dat er onverwachte of storende acties plaatsvinden. Als de gebruiker een categorie kiest, wordt er een lijst getoond met verschillende instanties die onder de gekozen categorie vallen. De gebruiker kan hier vandaan navigeren naar een instantie. Als de gebruiker een categorie kiest van de instanties wordt er een lijst getoond met subcategorieën. De gebruiker kiest daarna specifiek naar wel-‐ ke instantie genavigeerd wordt. De usability van het systeem. Een beschrijving van goede en mindere punten. Een van de elementen is een tekst schaalfunctie, een functie die vrij standaard is. Deze func-‐ tie komt veel voor op websites die een publiekelijke functie vervullen. De voorleesfunctie is Youmap -‐ Michel Kempers -‐ 2010 25

Youmap

ook een tool die steeds vaker wordt aangeboden aan gebruikers. Het voorlezen gebeurt met het programma BrowseAloud9. Deze functie dient eerst te worden gedownload en daarmee schiet het in mijn optiek zijn doel voorbij. Het kost de gebruiker een extra handeling en mis-‐ schien kan de gebruiker die functie niet installeren door zijn of haar beperking. De navigatie loopt over de hele site hetzelfde. Consequent, de gebruiker kan snel wennen aan de web-‐ site. Er wordt overal gebruik gemaakt van e-‐mail-‐ en hyperlinks, dat maakt het voor de ge-‐ bruiker makkelijk qua gebruik. Kleurgebruik ondersteunt de functionaliteit. Er wordt veelal gebruik gemaakt van rustige kleuren op een enkele na. Hierbij is het natuurlijk aan de gemeente om te bepalen hoe de pagina eruit ziet. Te felle kleuren zijn niet aan te bevelen, ze kunnen als storend worden er-‐ varen en maken tekst moeilijk leesbaar. Conclusie De kleine media De digitale gemeentegids van De kleine media heeft veel items voor de gebruiker. Het hoofddoel is overduidelijk informeren van gebruikers. Maar door de vele items wordt de gebruiker snel afgeleid van het uiteindelijk doel. De content van de website naast de items is veelal tekst. De bezoekers worden via tekst geïnformeerd en geïnstrueerd. De applicatie werkt naar behoren en heeft veel content die gebruikers met vragen op weg zal helpen. De insteek van het verschaffen van de informatie is anders dan de visie van mijn afstudeerpro-‐ ject. Deze opzet is om de gebruikers meer te informeren via gerichte beeldinformatie met het gebruik van de Google Maps plattegrond.

9

BrowseAloud: Online voorleesprogramma (Bron: http://www.browsealoud.nl)


Youmap

C &T Promotions: mijngemeentengids

Figuur 4 is een weergave van de Mijngemeentegids van gemeente Heerhugowaard.

Inhoud van de pagina. Een korte beschrijving van de website. De pagina is eenvoudig opgebouwd. Het geeft de bezoeker een aantal opties om te kiezen. De pagina heeft geen onnodige items die de bezoeker afleiden van het eigenlijke doel name-‐ lijk het vergaren van informatie. Een centraal gedeelte waar bezoekers kunnen selecteren waar ze precies op willen zoeken. Links op de pagina staat een tekst, die bezoekers infor-‐ meert over de website en tevens een kleine inleiding geeft over de gemeente. Aan de rech-‐ terkant is een menu te vinden. De menu items zijn niet specifiek nodig voor het doel van de website, meer ter ondersteuning. Meer over het menu verder in het onderzoek. Bezoekers hebben vier verschillende categorieën waar op gezocht kan worden. Deze categorieën kun-‐ nen los of gezamenlijk worden bezocht. Er kan worden gezocht naar Straten, Bedrijven, Ver-‐ enigingen/organisaties en Binnen de gemeente. De betekenis van de laatste categorie is on-‐ duidelijk. Het is niet te achterhalen wat er precies mee wordt bedoeld. Het lijkt logisch dat alle informatie die te vinden is op de pagina van de gemeentegids is. Het is namelijk een digi-‐ tale gemeentegids. Als er een zoekopdracht wordt ingetypt, vult het systeem de gebruiker aan en geeft sugges-‐ ties. Op deze manier is het voor bezoekers erg makkelijk om bepaalde informatie te vinden. Als de bezoeker één van de geboden opties aanklikt, geeft het systeem de gezochte informa-‐ Youmap -‐ Michel Kempers -‐ 2010 27

Youmap

tie weer in het linkerkolom en plaatst de markers op de plattegrond. Er kan gelijk een route worden gepland op de website. Minpunt aan de applicatie is dat de gemeente en de instanties totaal afhankelijk zijn van de aanbieder van het product. Op verschillende plaatsen op de pagina staan links naar formu-‐ lieren waar aanpassingen doorgegeven kunnen worden. Deze informatie wordt doorge-‐ stuurd naar of de gemeente of het bedrijf C &T Promotions. Dat is niet duidelijk. Door deze manier van beheren van gegevens is het aanpassen van gegevens een tijdrovend proces. De aanpassingen moeten worden ontvangen en dan worden aangepast. Dit gebeurt waarschijn-‐ lijk door een medewerker die meerdere taken heeft en prioriteiten moet geven aan bepaal-‐ de taken. Als het aanpassen van gegevens geen prioriteit heeft, kan het enige tijd duren voordat deze aanpassingen zijn doorgevoerd. De website en daarbij de Google Maps kaart is niet schaalbaar. De kaart blijft altijd hetzelfde formaat en dat kan verwarrend werken, als er veel markers op de kaart staan aangegeven. Er is veel ruimte die onbenut blijft op de pagina. Het zou voor de gebruiker overzichtelijker zijn, als de kaart groter zou worden weergegeven. Is de navigatie op een logische manier opgebouwd en gepresenteerd? De belangrijkste links op de pagina staan centraal of aan de linkerkant weergegeven. Aan de rechterkant staat een menu met links naar mutatieformulieren en een link naar de gemeen-‐ telijke website. Het is niet storend dat dit menu rechts staat, omdat het voor het gebruik van de digitale gemeentegids geen hoofddoel heeft. De navigatie van de website houdt zich redelijk aan de van te voren beschreven richtlijnen. Het beginscherm geeft weinig informatie aan de bezoekers maar omdat er weinig afleiding is, kan een bezoeker makkelijk zijn weg vinden. De locatie van de menu items zijn constant. Andere steekwoorden die passend zijn zijn: Uitbreidbaar, contextgevend en zichtbaar. De usability van het systeem. Een beschrijving van goede en mindere punten. Bij deze website geen gebruikelijke elementen als tekstschalen of voorleesfunctie. Er is ge-‐ kozen om een andere aanpak te hanteren. Gekeken naar de punten die zijn opgesteld is er rekening gehouden met usability. Een aantal elementen zijn overduidelijk verwerkt in de pagina. Het zoeksysteem is een hoofdfunctionaliteit op de pagina die zeer uitgebreid werkt. Het werkt alleen niet altijd, als er een zoekopdracht is gegeven die niet gevonden kan wor-‐ den, het systeem zoekt daarna niet meer op nieuwe opdrachten. De pagina zal door de ge-‐ bruiker ververst moeten worden. Dat kan voor verwarring zorgen bij bezoekers. Er wordt geen duidelijke melding gemaakt van deze bug.


Youmap

Elementen als herkenbaarheid, snelheid en opmaak zijn goed bij deze applicatie. Het logo van de gemeente is altijd zichtbaar en staat op dezelfde locatie op het scherm. Het laden van de pagina gebeurt snel, wat resulteert in gebruiksgemak. De opmaak van het systeem is logisch en blijft de gehele tijd hetzelfde. Conclusie Mijngemeentegids

De applicatie van C & T Promotions werkt naar behoren. Het geeft bezoekers snel en op een overzichtelijke manier de informatie waar zij naar zoeken. De inhoud van het systeem is minder. Er is gekozen om een aantal items in het systeem te zetten, die het bedrijf waar-‐ schijnlijk belangrijk vindt voor een dergelijke applicatie. De punten die het systeem sterk maken zijn ook gelijk punten die het systeem minimaal maken. De Google Maps kaart wordt op een duidelijke manier gebruikt en de functionaliteit ervan wordt goed benut. Het behe-‐ ren van informatie is totaal in handen van de gemeente of van C & T Promotions. Dat kan zoals eerder is beschreven vertraging geven in het actueel houden van de informatie.

2.3 Conclusie -‐ concurrentie ⇒ Onderzoeks-‐ Inhoud Navigatie Usability Design Beheer Google maps punt ⇓ Product Digigids

-‐

-‐

+

-‐-‐

Akse Media

+

-‐

++

++

De kleine media

++

+

+

+

MijnGemeentegids -‐

-‐

+

-‐

Youmap10

++

++

++

++

-‐ -‐ -‐ -‐ ++

Interactie

+/-‐

-‐

++

+

+/-‐

+

+

-‐

++

++

Figuur x: Schematisch weergave van onderzoeksuitslagen De onderzochte websites zijn, op de digigids na, allemaal behoorlijke applicaties. Het meest belangrijk is wat willen de ontwikkelaars bereiken/aanbieden aan hun gebruikers. De ont-‐ wikkelaars van de digigids zijn een nieuwe applicatie aan het ontwikkelen om bij te blijven bij de andere producten. Het product van Akse Media is een product dat het meest compleet is en het meest lijkt op het beoogde product. Een reden om het product te ontwikkelen is het hebben van een eigen product. Er zijn geen eisen voor het gebruik van functionaliteiten. Ook zijn er functionaliteiten en ontwerpeisen die niet gelijk lopen met de ideeën en eisen die zijn 10

De resultaten van Youmap zijn als doel, er is in dit stadium nog geen product ontwikkeld.


Youmap

gesteld i.s.m. VPRI. De kleine media heeft achteraf niet veel raakvlakken met het beoogde product. Er wordt amper gebruik gemaakt van de Google Maps plattegrond, terwijl bij de Youmap de plattegrond de meest belangrijke functionaliteit wordt. Ook bij de gemeentegids van C&T promotions zijn er heel duidelijk andere eisen gesteld wat betreft het plattegrond-‐ gebruik. Een positief punt voor het te ontwikkelen product. Als alle onderzochte applicaties teveel raakvlakken zouden hebben met Youmap, zou het raadzaam zijn om niet door te gaan met het proces. Aangezien de visie van de Youmap anders is dan de huidige aanbieders, zijn er veel kansen om een product te ontwikkelen dat daadwerkelijk een bijdrage levert en een toevoeging is op de actuele markt. In figuur x staan de onderzoeksuitslagen weergegeven in een schema. De resultaten van Youmap zijn hier als doel genomen. De andere applicaties scoren op sommige punten beter als andere punten maar het laat zien dat er nog ruimte is voor verbeteringen. De applicaties die slecht scoren in het onderzoek zijn niet persé slecht maar ze matchen niet met de gedachtengang met Youmap.

2.4 Mogelijkheden -‐ Google Maps Mashups De Google Maps API wordt naast digitale gemeentegidsen nog in veel andere toepassingen gebruikt. In dit hoofdstuk worden een aantal van deze toepassingen beschreven. De beschreven producten: De ANWB routeplanner http://route.anwb.nl/routeplanner/ . Fiets en wandel web http://www.fietsenwandelweb.nl/ . Groen-‐links op de kaart http://www.groenlinksopdekaart.nl . Funda http://www.funda.nl Deze producten zijn beschreven, omdat zij de Google Maps plattegrond op een manier ge-‐ bruiken die opviel tegenover andere producten of op een andere manier inspirerend is voor het verdere traject van de afstudeerperiode. .


Youmap

De ANWB routeplanner

Figuur 5 is een weergave van de ANWB Routeplanner.

De routeplanner van de ANWB is een webapplicatie waar een gebruiker net zoals bij andere routeplanners een route kan plannen. Op het eerste gezicht is het product niet anders dan andere routeplanners. Pas als de route is bepaald, verschijnt de functionaliteit die interes-‐ sant genoeg is om mee te nemen in het onderzoek. Op het scherm wordt een kaart weerge-‐ geven waar de route wordt geprojecteerd. Bij elk belangrijk punt staat een genummerde marker. Deze marker wijst de gebruiker de juiste weg. Naast de kaart zijn een aantal extra’s. Hiermee kan de gebruiker extra markers op de kaart laden, die belangrijk kunnen zijn tijdens de reis. Marker`s voor bijvoorbeeld tankstations, flitscontroles, files en restaurants.


Youmap

Op deze manier kan de gebruiker meer informatie aanvragen over de reis die gemaakt gaat worden. Dit product maakt geen gebruik van een Google Maps plattegrond, maar bezit een functionaliteit die het benoemen waard is. Wat interessant is aan deze applicatie voor het onderzoek is de interactiviteit. De gebruiker kan snel schakelen tussen bepaalde opties die belangrijk worden geacht. Vindt de gebruiker bepaalde informatie niet interessant, dan kan deze in een klik worden verwijderd. Fiets en wandelweb

Figuur 6 is een weergave van de Fiets en wandelweb website.

Fiets en wandelweb is een website waar gebruikers routes kunnen plannen voor fiets-‐ en wandeltochten. De tochten kunnen worden gepland via ijkpunten in een plattegrond. De website werkt met Google Maps wat de herkenning bevorderd en het is een webtoepassing die goed werkt. De functionaliteit is goed uitgewerkt. De applicatie werkt prima en het is gemakkelijk werken. De route wordt gepland door op de kaart te klikken. Er wordt een punt gemaakt op de plattegrond, zodoende kan een gebruiker een route creëren. De afstand van de tocht wordt berekend en de route kan direct worden geprint. Het tabblad stopplaatsen leidt gebruikers naar een pagina, waar met plattegrond en markers leuke plaatsen worden aangegeven waar men kan rusten of om te bekijken tijdens te tochten. De plaatsen worden in een lijst weergegeven. Als een gebruiker op een bepaald item klikt, wordt de marker op de kaart getoond. Via de marker kan een gebruiker meer informatie opvragen om te bepalen of het geschikt is tijdens de fiets of wandeltocht. Deze functionaliteit is bruikbaar voor het Youmap product. De functionaliteit is niet erg uniek want de documentatie van de Google Youmap -‐ Michel Kempers -‐ 2010 32

Youmap

Maps API toont al dergelijke functies maar voor het visualiseren/ de beeldvorming is deze applicatie erg nuttig. Groenlinks op de kaart

Figuur 7 is een weergave van webproduct van GroenLinks

Een website die de Groenlinks (GL) afdeling uit Amsterdam heeft laten ontwikkelen om hun stemmers te informeren over het werk van GroenLinks. Op de Google Maps plattegrond worden markers getoond in een aantal categorieën. De gebruiker kan deze categorieën aanvinken of afvinken. Zodoende worden er markers geprojecteerd op de plattegrond met bijvoorbeeld successen of strijdpunten van de partij. Een leuke feature is dat gebruikers zelf worden betrokken in het geheel en zelf locaties waar de aandacht op gericht moet worden kunnen aanmaken. Het kan hier gaan over gevaarlijke kruispunten, meer isolatie aan woningen en andere soortgelijke onderwerpen. Andere ge-‐ bruikers kunnen stemmen op de markers als ze deze ook belangrijk achten. Leuk aan de ap-‐ plicatie is dat de gebruiker zelf invloed heeft op de pagina. Het lijkt erop dat de partij wat doet met de informatie, het wekt in ieder geval de schijn, zodat GroenLinks stemmers meer het gevoel krijgen dat ze betrokken zijn bij politieke beslissingen. Wat belangrijk is voor het onderzoek, is de interactiviteit met gebruikers. Deze kunnen zelf invloed uitoefenen op de content van de applicatie. Dat maakt de website interessant om op terug te keren en het biedt de gebruiker meer als alleen statische informatie.


Youmap

Funda

Figuur 8 is een weergave van de website van Funda.

De website van Funda biedt naast de gebruikelijke functionaliteit op een makelaars website ook de mogelijkheid om woningen te zoeken via een Google Maps plattegrond. Op de plat-‐ tegrond worden woningen getoond die beschikbaar zijn door een marker op de kaart te plaatsen. Als een gebruiker op deze marker klikt verschijnt er een tekstwolk met daarin ge-‐ gevens van het gekozen pand. De functionaliteit van het aanbieden van panden door make-‐ laars kwam al naar voren tijdens het formuleren van de afstudeeropdracht en wordt om die reden meegenomen in het onderzoek. De website bezit een rijke functionaliteit wat betreft het specificeren van de zoekopdracht. Gebruikers kunnen eigenschappen van de panden aanklikken en een selectie maken van panden die aantrekkelijk zijn qua betaalbaarheid en eigenschappen. De plattegrond schaalt mee met de grootte van de browser. De grootte van het beeldscherm van de gebruiker bepaalt de grootte van de plattegrond. Op deze manier wordt altijd de volle beschikbare ruimte benut voor de plattegrond. Door het grote aantal markers is het belangrijk dat er een zo groot mogelijke plattegrond beschikbaar is voor een Youmap -‐ Michel Kempers -‐ 2010 34

Youmap

dergelijk systeem. Tegenwoordig worden de schermen van computer steeds groter en het is belangrijk om van dit feit gebruik te maken. 2.5 Conclusie -‐ mogelijkheden De beschreven applicaties bieden gebruikers extra functionaliteit boven op de standaard functionaliteit waar gebruikers al bekend mee zijn. De nieuwe functionaliteit voegt daad-‐ werkelijk wat toe aan de applicaties. Het maakt ze meer veelzijdig en het biedt zonder extra moeite veel meer informatie. Het is vermakelijk om mee te werken en het trekt gebruikers terug naar het product. Deze producten bezitten functionaliteit die wordt meegenomen in het ontwerp van het Youmap product. De functionaliteiten worden beoordeeld op bruik-‐ baarheid en of de functionaliteit bijdraagt aan de applicatie. Een opvallende eigenschap van de beschreven producten is de interactiviteit met gebruikers. Op deze manier voelen gebrui-‐ kers zich betrokken met de informatie die zij opvragen. Gebruikers krijgen informatie die gericht is op de vraag zonder extra’s waar zij niet om vragen. Op het internet zijn tegenwoordig veel toepassingen te vinden die gebruik maken van de Google Maps API. Sinds de introductie van de API zijn er talloze applicaties op het internet verschenen, sommige zijn totaal nutteloos en andere zijn een verrijking van het World wide web. Het onderzoek heeft veel duidelijk gemaakt wat er wordt geboden aan applicaties die ge-‐ bruik maken van de Google Maps API. De digitale gemeentegidsen tonen allemaal een eigen visie op het product. Terwijl één aanbieder eenvoud belangrijk acht, kiest een andere aan-‐ bieder voor het aanbieden van veel informatie. Er zijn ook punten die overeenkomen bij de applicaties en dat is bijvoorbeeld het beheer. Bij alle applicaties wordt het beheer extern geregeld, door gemeentes of door de aanbieders van de digitale gemeentegidsen. Het beheren van eigen inbreng is in mijn ogen een verbete-‐ ring boven het huidig beleid van de aanbieders. Tegenwoordig kunnen gebruikers bij heel veel internetapplcaties zelf hun input bepalen. Internetpagina’s als hyves, facebook zijn ont-‐ zettend populair. Deze voorbeelden zijn persoonlijk en voor non-‐commerciele doeleinden maar het geeft aan gebruikers het fijn vinden betrokken te zijn met wat zij aanbieden. Op meer professioneel gebied zijn CMS systemen vergelijkbaar met de profielpagina’s als hyves. Bedrijven kunnen zelf de inhoud van de website aanpassen. Het framework wordt ontwik-‐ keld door een webdesignbureau en daarna kan een bedrijf zelf de website gaan vullen. Be-‐ drijven voelen meer zich betrokken bij de website en zijn ook bereid om er tijd in te steken wat de kwaliteit van de website en van de inhoud verhoogd.


Youmap

Hoofdstuk 3 -‐ Ontwerp & ontwikkelfase De ontwerpfase is het deel van het project waar wordt bepaald welke elementen in het pro-‐ duct komen en welke functionaliteiten deze elementen krijgen. Er zijn verschillende produc-‐ ten opgesteld om een goed beeld te vormen voor het latere ontwikkelen. Een aantal van deze producten zijn: . . . . . . 3.1

Pakket Van Eisen (PVE) Sitemap Functioneel Ontwerp (FO) Entity Relational Diagram (ERD) Flowchart Grafisch ontwerp Producten ontwerpfase

Pakket van Eisen11 Een pakket van eisen is simpel gezegd een lijst met eisen of “requirements” waaraan een applicatie moet voldoen. De PVE is een gedetailleerde beschrijving van het systeem en be-‐ schrijft wat er gemaakt moet worden, maar nog niet hoe het gemaakt gaat worden. Het is een afbakening voor het project. Het PVE wordt gebruikt tijdens het testen om te con-‐ troleren of de bouwer volledig en juist heeft gebouwd. Het pakket van eisen is samengesteld in overleg met VPRI. De punten die in de lijst staan zijn geformuleerd na gesprekken met potentiële afnemers van de applicatie en de resultaten en bevindingen van het onderzoek. Potentiële afnemers van het product zijn gemeentes en makelaars. De wensen en ideeën die deze afnemers hebben, gecombineerd met de ervaringen binnen het bedrijf, heeft geleid tot de lijst met functionaliteit beschreven in het pakket van eisen. Een aantal voorbeelden van functionaliteiten die zijn ontwikkeld naar aanleiding van het voortraject zijn: . . . .

het onderverdelen van instanties in categorieën waar naar gezocht en geselecteerd kan worden. het zoeken naar specifieke gegevens zoals de applicaties van de Fiets en wandelroute en de ANWB routeplanner. het volledig meeschalen van de plattegrond, gegenereerd door de Google Maps API, met het scherm is een functionaliteit die is voortgekomen uit het onderzoek. Het beheer van de applicatie zoals instanties, gebruikers en markers door geregi-‐ streerde gebruikers laten plaatsvinden.

11

Pakket van eisen; zie bijlage


Youmap

.

Een veelzijdigheid aan aanbod op de applicatie mogelijk maken. Door gebruikers zelf hun input te laten bepalen via het beheer, in combinatie met de input van gemeen-‐ tes, ontstaat er een veelzijdige applicatie die bezoekers informeert over allerlei soor-‐ ten gemeentelijke informatie (gegevens van instanties zoals clubs, verenigingen en bedrijven, maar ook verleende bouw-‐, festivalvergunningen en wegwerkzaamheden kunnen gemeld worden).

(De PVE is weergegeven in bijlage D bladzijde 61). Sitemap De sitemap is een schematisch weergave van de pagina’s die de website heeft. Op deze ma-‐ nier wordt overzichtelijk weergegeven welke onderdelen het systeem heeft. Deze sitemap is ook in het systeem verwerkt om gebruikers een overzicht te verschaffen van de pagina’s. (De sitemap is weergegeven in bijlage A bladzijde 56). Functioneel Ontwerp12 In het functioneel ontwerp worden de functionaliteiten die het product heeft beschreven. Alle pagina’s zijn apart beschreven met de functionaliteiten die de pagina’s hebben. Het functioneel ontwerp is net als het PVE een afbakening van het project. Er wordt beschreven hoe de pagina’s gaan werken. Ook de database is beschreven, deze wordt later uitgewerkt tot een ERD. (Het functioneel ontwerp is weergegeven in bijlage E bladzijde 67). Entity Relational Diagram Het ERD is een schematische weergave van de database van het systeem. In het functioneel ontwerp is de database beschreven en deze is uitgewerkt tot een ERD. Het nut van een ERD is dat het duidelijkheid verschaft voor het ontwerpen, het haalt fouten uit de eerdere pro-‐ cessen van het ontwerpen en boven alles beschrijft het de relaties tussen de entiteiten van het systeem. Het ERD heeft verschillende onderdelen: Entiteiten (objecten), meestal zelf-‐ standige naamwoorden die in het systeem voorkomen. Relaties: De entiteiten in het sys-‐ teem zijn gerelateerd aan elkaar. Deze relaties worden getoond in de ERD. Attributen: Attri-‐ buten zijn eigenschappen van de entiteiten. Een gebruiker heeft bijvoorbeeld een gebrui-‐ kersnaam en een e-‐mailadres. (De ERD is weergegeven in bijlage B bladzijde 58). Flowchart Een flowchart beschrijft een proces dat in het systeem bestaat. Het proces wordt uitgebeeld in een schema om een overzicht te geven van de stappen die worden gemaakt en welke be-‐ slissingen er worden gemaakt in het systeem. (De flowcharts staan in bijlage C bladzijde 58).

12

http://www.whelp.nl/uitvoering-‐functioneel-‐ontwerp/


Youmap

Grafisch ontwerp Er zijn grafische ontwerpen gemaakt om een geschikte lay-‐out voor de pagina’s te maken. De ontwerpen zijn besproken met verschillende belanghebbenden om tot een besluit te komen. Er is geprobeerd om met verschillende kleurstellingen een passende weergave te maken die aansluit met de functionaliteit en het doel van de website.

Figuur 9 is een weergave van een grafisch ontwerp van de voorkant van de Youmap website.

Op deze pagina kunnen bezoekers zoeken naar informatie. De bezoekers worden begeleid met een Google Maps kaart die markers en informatie toont van de gezochte instanties. Figuur 9 toont het grafisch ontwerp van de Youmappagina. Tijdens de ontwikkelfase zal ge-‐ probeerd worden om zo dicht mogelijk bij het grafisch ontwerp te blijven. Aan de linkerkant van het ontwerp wordt het menu weergegeven. Het menu toont de categorieën die in het systeem staan. Wordt er op een categorie geklikt dan toont het systeem alle markers van deze categorie op de kaart, in het menu worden subcategorieën getoond, als deze bestaan. Centraal op de pagina wordt de plattegrond getoond waar de markers op worden geprojec-‐ teerd. Deze plattegrond bezit alle nuttige functionaliteiten die een Google Maps kaart kan hebben. Rechts op de pagina wordt informatie getoond van markers in het systeem. Als een bezoeker een categorie kiest, worden de bijbehorende markers getoond op de platte-‐ grond,en de informatie van de markers word getoond in het rechterkolom. Deze informatie kan ook worden opgevraagd door op een marker te klikken.


Youmap

Figuur 10 is een weergave van een grafisch ontwerp van de achterkant van de Youmap.

Het onderdeel Beheer of CMS wordt getoond door figuur 10. Op deze locatie kunnen geregi-‐ streerde gebruikers (naar gelang hun rechten): . . . . . .

Gebruikers beheren Groepen beheren Markers beheren Categorieën beheren F.A.Q beheren Gebruik maken van het e-‐mail systeem.

De indeling van het grafisch ontwerp van het beheer van het Youmap systeem getracht zo logisch mogelijk te maken. Links op de pagina wordt het menu getoond. Deze locatie is het meest logisch i.v.m. de gebruikelijke werkrichting, nl. van links naar rechts. De rechterkant van de pagina toont informatie van verschillende onderwerpen zoals gebruikers, markers. De informatie wordt statisch getoond, maar kan waar gebruikers de juiste rechten hebben worden aangepast en/ of verwijderd.

3.2 Ontwerpproces Tijdens het ontwerpen van het product werd duidelijk wat de omvang van het project was. Elke keer wanneer er een onderdeel was beschreven kwamen er nieuwe onderdelen bij die Youmap -‐ Michel Kempers -‐ 2010 39

Youmap

ook van belang waren. Steeds terugkoppelen naar de basis, opnieuw maken en uitbreiden van modellen en documenten. Het product kreeg op deze manier steeds meer vorm en werd steeds completer. Door steeds terug te koppelen, bleef het overzicht gewaarborgd. De ver-‐ schillende producten die tijdens deze fase zijn ontwikkeld belichamen het proces. Door deze producten kwamen er steeds nieuwe onderdelen aan het licht, maar werd het ook overzich-‐ telijk. Tijdens mijn studeerperiode zijn er grote en kleine projecten voorbij gekomen, waarbij verschillende stadia overgeslagen konden worden of elkaar konden overlappen zonder dat er verlies van kwaliteit merkbaar was. Het afstudeerproject daarentegen is van dermate om-‐ vang geweest, dat het eiste dat alle stadia zorgvuldig doorlopen werden. Werd er een stap overgeslagen dan was de kans groot dat er zaken over het hoofd gezien werden, die later alsnog gedaan moesten worden, evenals de aanpassingen in bestaande producten. Dat gaf tijdverlies en irritatie, omdat met nauwkeuriger werken deze extra werkzaamheden niet nodig zouden zijn. Na een bepaalde tijd groei je in het project en wordt het jouw eigen pro-‐ ject. Steeds meer zaken gaan dan vanzelf, terwijl er in het begin hard gewerkt moest worden om op te starten en daarna om overzicht te bewaren. Het ontwerpproces is tijdens het hele project lopende geweest. Naarmate het afstudeerproces vorderde is er steeds minder tijd besteed aan het ontwerpen, maar tijdens het ontwikkelen kwamen er weer punten boven water waar tijdens het ontwerpen geen rekening mee was gehouden of die als niet belang-‐ rijk werden beoordeeld. Na het ontwerpproces begint het ontwikkelproces. De producten van het ontwerpproces waren een aantal documenten, modellen en ontwerpen die als leidraad zouden volgen voor het ontwikkelen van de applicatie. 3.3. De ontwikkelfase De ontwikkelfase verliep net als de ontwerpfase in stappen. Van te voren werd besproken welke componenten zinvol waren om als eerste te ontwikkelen. Een van de eerste compo-‐ nenten die ontwikkeld is, is het framework met templates. De templates geven de pagina’s vorm. Andere pagina’s roepen deze templates op en op deze manier wordt er geen code eindeloos herhaald en is het makkelijk om aanpassingen door te voeren. Alles wordt name-‐ lijk automatisch aangepast, wanneer de template wordt aangepast. Een ander voordeel is dat de pagina’s minder code bevatten wat de applicatie snel houdt. Na het ontwikkelen van een basisstructuur is besloten om het login systeem te ontwikkelen. De onderdelen in het login systeem zijn: . . . .

Login pagina Registratie pagina Wachtwoord recovery pagina Account validatie pagina Youmap -‐ Michel Kempers -‐ 2010 40

Youmap

Als deze pagina’s zijn gerelateerd met elkaar, in die zin dat zij samen een sterk systeem vor-‐ men dat veilig is en bedachtzaam is op menselijk falen (vergeten van een wachtwoord). Na-‐ dat het systeem afgerond was, zijn er globale tests geweest of de functionaliteit werkend was. Na afronden van deze fase werd besproken welke componenten de volgende stap in het ontwikkelproces waren. De navigatie De navigatie op een website verwijst bezoekers van pagina naar pagina. Dat kan op verschil-‐ lende manieren. Deze manieren zijn er omdat er veel verschillende doelen zijn waarom men navigeert en wat het uiteindelijk doel van het navigeren is. Er zijn regels opgesteld die wen-‐ selijk zijn voor navigatie op websites. Deze regels zijn in principe logisch maar er zijn websi-‐ tes en webapplicaties die anders zijn ontwikkeld. Redenen hiervoor kunnen zijn dat de ont-‐ wikkelaar onkundig en onervaren is of dat het een experimentele stijl van ontwikkelen be-‐ treft. Voor de navigatie van de Youmap applicatie is besloten om de richtlijnen te volgen die zijn gesteld. Zogenaamde webrichtlijnen. Er is besloten om deze richtlijnen te volgen om de re-‐ den dat het product a: een publiek product is, en b: er verschillende doelgroepen met ver-‐ schillende ervaringen met webpagina’s met het product gaan werken. Het is belangrijk dat iedereen kan werken met het product ongeacht de ervaring met computers van de gebrui-‐ ker. Door de richtlijnen te volgen is de kans dat iedereen dit kan het grootst. Deze richtlijnen worden beschreven in hoofdstuk 2, bladzijde 16. Het onderzoek is verricht aan de hand van deze richtlijnen De menu’s in het systeem zijn aan de linkerkant van de pagina’s geplaatst. Hier is voor geko-‐ zen omdat de normale werkrichting (in ieder geval in de westerse wereld) van links naar rechts is. Het consequent zijn met items is belangrijk zodat er herkenning van elementen plaats vindt door gebruikers en om deze reden zijn de menu’s altijd op dezelfde locatie ge-‐ plaatst. In het onderzoek kwam naar voren dat bij de vergeleken producten de plaatsing en het gebruik van het menu niet altijd was zoals beschreven in de richtlijnen, wat resulteerde in gebreken op gebruikersniveau en op werking van de menu’s. Het Youmap systeem kent verschillende soorten menu’s die zijn ontwikkeld om zo efficiënt mogelijk de gebruiker te bedienen. Op de voorpagina van het product is een uitschuifmenu ontwikkeld. De reden hiervoor is dat als alle items standaard getoond zouden worden het menu heel onoverzichtelijk zou zijn. Het menu geeft instanties weer die in het systeem voorkomen onderverdeeld in de categorieën en subcategorieën waar zij onder vallen. Heeft het systeem vier categorieën en geen subca-‐ tegorieën dan zou het menu overzichtelijk zijn. Als er vijftig categorieën zouden zijn met al-‐ lemaal drie subcategorieën dan is de overzichtelijkheid van het menu totaal weg. Omdat het Youmap -‐ Michel Kempers -‐ 2010 41

Youmap

systeem gebruikers instaat stelt om instanties aan te maken en te tonen op de plattegrond, waarbij deze instanties een menu item worden, is er geen overzicht met betrekking tot de grootte van het menu. Het aantal keuzes bij de andere menu’s staan vast. Het zijn geen menu’s die naar gelang het aantal instanties meer of minder keuzes krijgen. Om deze reden is er gekozen om een stati-‐ sche stijl te kiezen. De menu’s zijn eenvoudig opgesteld zonder dynamische effecten. Naar mijn mening leidt dat af van het uiteindelijk doel van een menu. Bij het eerste voorbeeld is het een must om een dynamisch menu te kiezen, in andere gevallen is eenvoud van belang. Hoe eenvoudiger het menu is, des te meer gebruikers er mee kunnen werken. In het systeem is geprobeerd om de namen van verwijzingen (links) een titel te geven die prijs geeft waar de gebruiker naar toe wordt verwezen. Ook zijn er met behulp van Javascript zogenaamde WZ Tooltips 13 verwerkt aan de links. Hiermee krijgt een gebruiker informatie over de link als hij of zij met de muis over de link heen gaat. Front end De front end van de Youmap applicatie bestaat uit twee onderdelen. De voorpagina met daarop de plattegrond en het beheersysteem. Een subonderdeel is het Login systeem. Het Login systeem verbind de twee belangrijkste onderdelen met elkaar. Youmap (Publiek gedeelte) Het publieke gedeelte van Youmap is opgebouwd uit een template. Op bladzijde 39 is be-‐ schreven waarom deze keuze is gemaakt. De pagina heeft een aantal elementen die bezoe-‐ kers van de website op weg helpt naar het verkrijgen van de informatie waar zij naar op zoek zijn. In deze paragraaf ga ik een paar van de elementen kort beschrijven. Plattegrond De plattegrond op de Youmap website is gegenereerd met de Google Maps API14. (zie para-‐ graaf ontwikkelwijze op bladzijde 10 en in hoofdstuk 6 bladzijde 51 voor meer informatie over de keuze en de werking). Op de interactieve plattegrond wordt de betreffende ge-‐ meente getoond met standaard functionaliteit zoals gebruikelijk is van de plattegrond van de Google Maps 15 website. De kaart is zo geplaatst dat het schaalt met de grootte van het scherm van de gebruiker. Een grote kaart biedt de gebruiker een ruim overzicht op de in-‐ stanties die door markers worden getoond. Zijn er bijvoorbeeld drie markers te zien op de kaart dan is er altijd overzicht. Zijn er honderd markers te zien dan is het overzicht al snel weg. Er is getracht het overzicht te bewaren door het indelen van instanties in categorieën 13

http://nl.wikipedia.org/wiki/Tooltip; http://www.walterzorn.com/tooltip/tooltip_e.htm http://code.google.com/intl/nl/apis/maps/ 15 http://maps.google.nl 14


Youmap

en subcategorieën en een schaalbare plattegrond. Als laatste punt is er op deze manier wei-‐ nig nutteloze ruimte op het scherm.

Zoekfunctie De zoekfunctie geeft bezoekers de mogelijkheid om gericht te zoeken naar instanties op naam en naar instanties aangemaakt door bepaalde gebruikers op gebruikersnaam of op functie. Voorbeeld (instanties op naam): Er wordt gezocht op kerk. Het systeem zoekt dan de kerken in de gemeente en toont de gegevens op het scherm. Voorbeeld (instanties via ge-‐ bruikersnaam/ gebruikersfunctie): Er wordt gezocht op gebruiker: Janssen. Het systeem geeft alle instanties weer die zijn aangemaakt door gebruikers met de gebruikersnaam, voornaam of achternaam Janssen. Het zoeksysteem is zo ontwikkeld dat bezoekers bepaalde gegevens kunnen filteren, ze krijgen op deze manier alleen informatie te zien die zij wensen. Tekstweergave De tekstweergave geeft de informatie weer die als de plattegrond wordt getoond in de rech-‐ terkolom staat. De tekstweergave vervangt de plattegrond. Op deze manier is er meer ruim-‐ te om de gegevens te tonen van de instanties. Doordat er meer ruimte is heeft de gebruiker meer overzicht en wordt deze niet afgeleid door de plattegrond. Gebruikers kunnen gemak-‐ kelijk wisselen tussen de twee weergaven (plattegrond-‐ en tekstweergave). De wisseling is mogelijk door het gebruik van Javascript. Door een ‘show & hide’ functie te gebruiken is het wisselen snel en stabiel. Deze weergave is een extra manier voor bezoekers van het systeem om bepaalde informatie te filteren. Ze kunnen met de tekstweergaven gemakkelijk en zon-‐ der afleiding gegevens bekijken van de gezochte instanties en/of categorieën. F.A.Q. De veelgestelde vragen pagina of F.A.Q. geeft bezoekers van de website antwoorden op meest gestelde vragen. De vragenlijst in interactief en kan bij het beheer worden aangepast. Youmap (Cms/Beheer ) Het Cms/Beheer gedeelte van de Youmap is net als het publieke gedeelte opgebouwd in een template. De redenen hiervoor zijn dat de pagina’s die het template gebruiken sneller laden door het gebruik van minder code; algemene aanpassingen zijn door te voeren op de tem-‐ plate. De template wordt in elke pagina geladen en daardoor worden aanpassingen doorge-‐ voerd op alle pagina’s. Op deze manier hoeven de pagina’s niet per stuk aangepast te wor-‐ den. De content van de Youmap applicatie kan in het beheer worden aangepast. Naar gelang de rechten die een gebruiker heeft kan deze gebruiker items aanmaken, aanpassen en ver-‐ wijderen. De rechten worden toegedeeld door de groep waar de gebruikers invallen. De ad-‐ min of administrator bepaalt de rechten van groepen en in welke groep nieuwe gebruikers komen. Op deze manier wordt het systeem beveildigd tegen kwaadwillenden die voor de lol het systeem legen of loze items aanmaken. Het is moeilijk om het systeem totaal te beveili-‐ Youmap -‐ Michel Kempers -‐ 2010 43

Youmap

gen tegen zinloze input op de site, maar de schade wordt door het rechtensysteem tot een minimum beperkt. Het systeem kent verschillende tools om het gebruik zo eenvoudig moge-‐ lijk te maken. De WZ tooltips zijn ingesteld op links, er zijn zoekfuncties ingebouwd voor het snelzoeken in het systeem. Het beheersysteem geeft bezoekers van de website de mogelijkheid om na registratie hun eigen instantie te promoten en letterlijk op te kaart te zetten. Alle gegevens kunnen op ieder gewenst moment worden aangepast in het beheersysteem. Bij de producten die zijn behan-‐ deld in het onderzoek kwam deze functionaliteit niet naar voren, het is daarmee een unieke functionaliteit die het gebruik verbeterd voor alle partijen. Aanbieders van het product heb-‐ ben minder werk qua het doorvoeren van aanpassingen en geregistreerde gebruikers kun-‐ nen op elk gewenst moment de gegevens aanpassen van hun instantie. Back end De back end van de Youmap applicatie is de kant die alleen programmeurs kunnen begrij-‐ pen. Een verzameling van tientallen bestanden met daarin honderden regels met tekst, te-‐ kens en formules die samen de applicatie maken die bezoekers zien als ze naar Youmap.nl gaan. Eerder is beschreven dat de code is geschreven door een combinatie van program-‐ meertalen. De talen Php, Html, Css, Javascript en Xml zijn gecombineerd om een veelzijdig product te ontwikkelen. Elke taal heeft zijn speciale eigenschappen en door de talen te com-‐ bineren en de sterke eigenschappen te gebruiken van een taal zijn er oneindig veel moge-‐ lijkheden als je kijkt naar webdesign. Tijdens de ontwerpfase is er nagedacht over de manier waarop de applicatie gebouwd moest worden. Er zijn besluiten gemaakt over de manier van programmeren. Er is nagedacht op welke manier de templates opgebouwd moesten wor-‐ den, welke pagina’s er ontwikkeld moesten worden. Veel functionaliteiten worden opgeroepen door Php functies te gebruiken. Er is voor geko-‐ zen om de paginagerichte functies op de pagina’s zelf te plaatsen, om het overzicht op te functies te behouden. Algemene functies zijn geplaatst in een apart bestand (functions.php). Deze functies worden op verschillende pagina’s aangeroepen en daarom is de keuze ge-‐ maakt om deze te plaatsen in een apart bestand. De structuur van de website is georganiseerd ingedeeld. Alle verschillende soorten pagina’s zijn geplaatst in aparte mappen met herkenbare naamstelling. Zodoende kunnen latere pro-‐ grammeurs eenvoudig hun weg vinden. Ook tijdens mijn afstudeerperiode heb ik ondervon-‐ den dat het organiseren van bestanden erg belangrijk is voor het overzicht.

3.4 Het prototype Het doel van het prototype is het ontwikkelen van een product waar alle basisfunctionalitei-‐ ten zijn ingebouwd. Met het prototype zal worden getest om een beeld te vormen of het ontwerp en ontwikkelen naar behoren is gedaan. Het product is tijdens het ontwikkelen Youmap -‐ Michel Kempers -‐ 2010 44

Youmap

steekproefmatig getest en de functionaliteiten werken naar behoren maar er zijn vaak kleine punten van verbetering die over het hoofd zijn gezien tijdens het ontwikkelen. Door het pro-‐ totype aan tests te onderwerpen wordt er een beeld geschetst of gebruikers de voorge-‐ schreven taken binnen gewenste tijd kunnen afronden, of gebruikers het systeem makkelijk vinden werken en of de gebruiksvriendelijkheid zoals ontworpen realistisch is. De resultaten worden gedocumenteerd. Met de gedocumenteerde verbeterpunten kan het prototype worden aangepast. Na de aanpassingen is het product completer en meer gebruiksvriende-‐ lijk. Als het product een gewenst niveau heeft, kijkend naar de bovenstaande punten kan het worden aangeboden aan geïnteresseerde partijen. Het prototype wordt ontworpen met functionaliteiten die zijn beschreven in het Pakket van Eisen(PVE). (Zie bijlage D bladzijde 61) Deze functionaliteiten worden verder beschreven in 4.2 Concept.

Concept Het prototype toont een aantal categorieën die volledig zijn uitgewerkt met markers en bij-‐ behorende tekst. In de CMS zijn al deze elementen aan te passen. De gegevens worden uit de database gehaald, net zoals bij het uiteindelijke product. Het prototype richt zich op de gemeente Brielle. Deze gemeente heeft interesse toont in de toepassing en na oplevering van het uiteindelijke product wordt het aangeboden aan de gemeente. Functionaliteiten De functionaliteiten die het prototype bezit zijn van te voren beschreven in het PVE. Het PVE is een document dat gedetailleerd beschrijft welke functionaliteiten de applicatie gaat krij-‐ gen. Er wordt niet beschreven hoe deze ontwikkeld worden. Het is een afbakening voor het project. De projectgrenzen worden bepaald zodat er van te voren duidelijk is welke richting het project opgaat; welke punten worden behandeld en welke punten buiten beschouwing worden gelaten. Het PVE wordt gebruikt tijdens het testen om te controleren of de bouwer volledig en juist heeft gebouwd.


De volgende basisfunctionaliteiten zijn ingebouwd in het prototype:. Functionaliteit Registreren: Het account valideren : Inloggen Instanties/ categorieën op zoeken d.m.v het zoekveld Marker tonen op de plattegrond door een instantie te kiezen in het menu Schakelen tussen kaart/ tekstweergave Een melding of klacht versturen Sitemap raadplegen FAQ raadplegen De functionaliteit van de Google Maps plattegrond gebruiken Profiel inzien Profiel bewerken Beheer inzien van: * Gebruikers Groepen Markers Categorieën F.A.Q. Gebruik maken van de mailfunctie Instellingen pagina inzien

PVE – eis # Functionele eis: 20 Functionele eis: 23 Functionele eis: 21 Functionele eis: 42 t/m 46

Functionele eis: 32 t/m36

GUI: 19 GUI: 18 GUI: 17 GUI: 20 GUI: 6

Functionele eis: 25 Functionele eis: 26 Naar gelang de rechten het toestaan Functionele eis: 5 t/m 7 Functionele eis: 2 t/m 4 Functionele eis: 2 t/m 4 Functionele eis: 1 Functionele eis: 20 -‐ 2 Functionele eis: 52 GUI:6 Youmap -‐ Michel Kempers -‐ 2010 46

Youmap

Youmap

3.5 De testfase Het testplan van de Youmap applicatie waren een aantal opdrachten die gebruikers moesten afronden. Er is beschreven welke stappen de gebruikers moesten nemen om tot een goed resultaat te komen. Daarna werden er een aantal vragen gesteld die betrekking hebben op het gebruik van de applicatie. Vragen zoals bijvoorbeeld: Is de pagina logisch opgebouwd voor uw gevoel, werkten de links naar behoren en zoals verwacht, had u problemen met de werking van het systeem. De vragen konden daarbij altijd extra beargumenteerd worden als de testpersonen nog extra te melden hadden over een onderwerp. De personen die de website hebben getest waren van verschillende leeftijden met een ver-‐ scheidenheid aan ervaring met internet en soortgelijke websites. De testpersonen waren studenten, familieleden en een aantal bekenden. Deel 1 van de test, de opdrachten, gaf een aantal fouten met die betrekking hadden op de werking van het systeem. Bijvoorbeeld invoervelden die niet goed functioneerden, foutieve of te beperkte informatie bij een functionaliteit. Deze fouten zijn aangepast aan de hand van de gemaakte tests. Dit deel van de test gaf ook inzicht in de manier van denken van gebrui-‐ kers. Als deze manier anders liep dan de manier van ontwikkelen is er getracht om het sys-‐ teem aan te passen. Dat kan zijn door het geven van instructies of door het systeem aan te passen. Deel 2 van de test, de enquête, gaf een overzicht van de indruk die het systeem aan de gebruiker maakte. De testpersonen gaven aan dat het systeem goed werkte en voldeed aan de verwachtingen van de gebruikers. Daarnaast is er een testfase afgerond die gericht was op eventuele fouten. Deze fase omvat-‐ te het nagaan van alle functionaliteiten om fouten te detecteren. De fouten zijn achteraf aangepast. De test is te lezen in bijlage I op bladzijde 81.

3.6 Conclusie testfase De resultaten van de usability tests hebben ertoe geleid dat het systeem verbeterd kon wor-‐ den op een aantal punten. Veelal waren dat aanwijzingen naar gebruikers toe of kleine aan-‐ passingen op code niveau. De tests konden worden afgerond zonder extra documentatie naast de usability test. Eventuele fouten die niet van technische aard waren, kwamen door-‐ dat gebruikers aanwijzingen van het systeem niet hadden doorgenomen. Op het gebied van usability scoorde het product goed. Bijna alle testpersonen konden zich goed bewegen binnen de applicatie. Ook aanwijzingen van het systeem waren duidelijk op-‐ gezet evenals het doel van de geboden iconen. Youmap -‐ Michel Kempers -‐ 2010 47

Youmap

Hoofdstuk 4 -‐ Beschrijving systeem 4.1 Het product Youmap Een applicatie die de gegevens van gemeentelijke informatie bundelt en deze op een klant-‐ vriendelijke manier aanbiedt. Het aanbieden van de informatie gebeurt door middel van een interface met een Google Maps kaart. De applicatie gaat uit van gemeentelijke schaal. Clubs, verenigingen en bedrijven kunnen zich registreren in het systeem en daarna hun gegevens toevoegen. Zodoende zijn deze ge-‐ gevens gemakkelijk beschikbaar voor belangstellenden. Ook kunnen gemeentes met de ap-‐ plicatie burgers attenderen op zaken zoals verleende vergunningen, locaties van glasbakken, onderwijsinstellingen en overheidsinstellingen. Het systeem bundelt al deze gegevens en maakt ze beschikbaar voor iedereen. Beschrijving van de mogelijkheden van Youmap Het project bestaat uit twee onderdelen die aan elkaar gekoppeld zijn. Onderdeel 1 is de Youmap applicatie. De applicatie is een informatiepunt voor burgers, waar zij allerlei soorten gemeentelijke in-‐ formatie kunnen opvragen. Locaties van instanties en voorzieningen worden op een Google Maps plattegrond weergegeven. De kaart bezit alle functionaliteiten die gebruikelijk zijn voor Google Maps. De informatie wordt per categorie weergegeven zodat het voor gebrui-‐ kers makkelijk is om te vinden waar zij naar zoeken. Dit gedeelte is openbaar, gebruikers hoeven zich niet te registreren om gebruik te maken van de service. Op dit moment wordt voor het verschaffen gebruik gemaakt van plaatselijke kranten en gemeentegidsen. Deze informatie is statisch en na publicatie niet te actualiseren. De Youmap applicatie biedt een dynamische omgeving, waar gebruikers altijd bij kunnen. Elk moment van de dag is de in-‐ formatie beschikbaar en omdat het digitaal is zijn er meer mogelijkheden om de gebruiker informatie aan te bieden. De content van het systeem wordt gevuld en beheerd via een CMS systeem. De informatie die wordt aangeboden op Youmap is onderverdeeld in twee catego-‐ rieën. Categorie een is gemeentelijke informatie beheerd door de gemeente. Hieronder wordt verstaan: Verleende vergunningen, locaties van brievenbussen, glasbakken e.a. aan-‐ kondigingen voor bouwprojecten en omleiding van verkeer. Categorie twee is gemeentelijke informatie beheerd door instanties. De instanties zijn o.a. clubs, verenigingen. Zij kunnen via het systeem hun instantie letterlijk op de kaart zetten. De locatie van de instantie wordt met een marker op de plattegrond weergegeven. Daarbij kunnen deze instanties eigen inbreng als adresgegevens, links naar website en e-‐mail en afbeeldingen toevoegen. Deze gegevens worden beheerd in het achterliggende systeem.


Youmap

Gemeentes hebben de vrije hand als het gaat om de invulling van het product. Zij hebben de keuze om alleen gemeentelijke informatie van categorie een of twee aan te bieden. Het is mogelijk om beide categorieën te combineren tot een product. Onderdeel 2 van de applicatie is het CMS gedeelte. Het CMS gedeelte is een omgeving waar geregistreerde instanties gegevens kunnen toevoe-‐ gen en aanpassen. Ze kunnen bepalen welke gegevens worden weergegeven bij de bijbeho-‐ rende marker. Al deze gegevens worden gebundeld in een database. Op deze manier heeft de gemeente een plek waar de gegevens van al deze instanties wor-‐ den opgeslagen. Het systeem werkt twee kanten op. Aan de ene kant verschaft het informa-‐ tie aan burgers en aan de andere kant bundelt het informatie voor gemeentes. Doordat in-‐ stanties zelf hun gegevens beheren hebben gemeentes niet hun handen vol aan het bijhou-‐ den en actualiseren van de gegevens. De instanties krijgen periodiek een herinnering of de gegevens nog actueel zijn en zodoende blijft de informatie altijd up-‐to-‐date. Als een ge-‐ meente deze gegevens wil gebruiken is het mogelijk om deze te exporteren of uit te printen. Extra informatie Youmap & CMS gedeelte De locatie in de Youmap applicatie wordt bepaald door de adresgegevens die worden inge-‐ vuld. Die gegevens zijn: postcode, plaats, straatnaam(en nummer). Deze gegevens worden ingevuld in de CMS. De Google Maps API maakt dan automatisch de locatie op de kaart aan. In de CMS zal een mogelijkheid zijn om te sorteren op alle instanties of instanties per stuk. Dit is voor de volgende doeleinden: Mailfunctie: Mogelijkheid om e-‐mail te versturen naar alleen de doelen waar de e-‐mail rele-‐ vant voor is. Printfunctie: Mogelijkheid om verschillende data te printen op een overzichtelijk manier. Exportfunctie: Mogelijkheid om gegevens te exporten uit de database naar een CSV bestand. De gegevens van de database kunnen door gemeentes worden gebruikt om een gemeente-‐ gids te maken omdat alle gegevens gebundeld zijn. Het design van de Youmap is volledig door afnemers te bepalen. Het wordt aangeboden in een template vorm. Het is mogelijk om de applicatie in te bouwen in de website van de ge-‐ meente. Gemeentes kunnen ook kiezen om het systeem te draaien in een losse pagina met eigen opmaak. De locatie van het menu, de plattegrond en de gegevenskolom kunnen naar smaak van de afnemer worden geplaatst. Voor de Youmap applicatie zal er een vaste URL zijn. Namelijk Youmap.nl/(gemeentenaam), maar het is mogelijk om de naam te maskeren als dat wenselijk is. De applicatie kan worden geïntegreerd in de gemeentelijke website. Bedrijven zoals bijvoorbeeld makelaars kunnen plattegronden aanmaken met daarop hun aanbod aan huizen die door middel van markers worden weergegeven. Via de markers Youmap -‐ Michel Kempers -‐ 2010 49

Youmap

wordt de informatie die bij de panden hoort aangeboden aan belangstellenden. O.a. be-‐ schrijvingen van aangeboden panden en afbeeldingen kunnen worden toegevoegd om zo een completer beeld te geven van het aanbod.

4.2 Youmap.nl

Figuur 11 is een weergave van de homepagina van Youmap.nl.

Youmap is een website waar gebruikers informatie kunnen vinden van instanties binnen ge-‐ meentes. Informatie zoals locatie, contactinformatie, e-‐mailadressen en websites. Vanuit de applicatie is het mogelijk om routes te plannen naar de locaties toe. De webpagina heeft een geïntegreerde kaart. Deze kaart is van Google Maps. Alle functiona-‐ liteiten van dat systeem zijn aanwezig in de pagina. Inzoomen, schalen, aanpassen van de weergave en het plannen van routes is zoals de gebruiker gewend is van Google Maps alle-‐ maal mogelijk. De instanties worden in het linkermenu weergegeven. Om het geheel over-‐ zichtelijk te houden zijn de instanties weergegeven in categorieën. Het is voor de gebruiker gemakkelijk om te zoeken naar de instanties waar hij/zij naar op zoek is. De instanties wor-‐ den op de kaart weergegeven met markers. De markers geven de precieze locatie weer van de bijbehorende instantie. Als er meerdere instanties van dezelfde categorie aanwezig zijn in de gemeente dan worden deze allemaal Youmap -‐ Michel Kempers -‐ 2010 50

Youmap

weergegeven. De markers worden waar mogelijkheid weergegeven met een afbeelding die logisch is met het onderwerp. Daarover meer in de beschrijving van de markers. Gegevens van de instanties worden in het rechtgedeelte weergegeven. Alle instanties van een categorie worden aan de hand van markers getoond en deze instanties worden ook ge-‐ toond in de rechterkolom van de pagina. Op deze manier kan een gebruiker op verschillende manieren bepalen welke instantie zij wil bekijken. Andere functionaliteiten op deze pagina zijn: Zoekfunctie: Hiermee kan een gebruiker zoeken naar instanties. De zoekresultaten worden weergegeven in de rechtkolom van het scherm. Ook zullen bijbehoren markers worden ge-‐ plaatst op de kaart. Plattegrond/tekstweergave: Deze knoppen laten de gebruiker switchen tussen het weerge-‐ ven van een kaart of een tekstweergave van de gezochte instanties. Deze weergave geeft de informatie die ook in de rechterkolom staat alleen in een ruimere weergave. Melding/klachten: Er is een mogelijkheid om een melding of klacht naar de gemeente toe te doen. Via de website kunnen gebruikers melden als er bijvoorbeeld een marker verkeerd geplaatst is of als zij iets willen melden op meer gemeentelijke schaal. Gebruikers: Rechts onderin de pagina is een link naar het gebruikersgedeelte. Hier kunnen geregistreerde gebruikers zichzelf inloggen en zo de gegevens van hun instanties beheren. Meer informatie over dit gedeelte komt later bij beschrijving van het gebruikersgedeelte. Bovenstaande weergave is een voorbeeld hoe de pagina kan worden gebruikt. Elke afnemer van Youmap bepaalt zelf welke inhoud er te vinden is op de pagina. Er kan gekozen worden om het systeem te gebruiken voor het aangeven waar instanties gelokaliseerd zijn, waar bouwvergunningen zijn afgegeven of waar de brievenbussen en glasbakken zijn geplaatst. De mogelijkheden zijn erg divers en dat maakt Youmap tot een veelzijdig systeem dat voor elke gemeente een verrijking kan zijn op het huidige informatiesysteem naar burgers toe.


Youmap

4.3 CMS

Figuur 12 is een weergave van de profielpagina van de Youmap CMS

Figuur 12 is een screenshot van het CMS systeem. CMS staat voor content management sys-‐ teem wat betekent dat vanuit dit gedeelte van het systeem de content of inhoud kan wor-‐ den beheerd. In de CMS kunnen gebruikers de gegevens aanpassen die op de Youmap pagi-‐ na worden weergegeven. Aan de linkerkant van de pagina staat het menu. Dit menu is varia-‐ bel in grootte en geeft alleen de menu items weer waar de gebruiker recht toe heeft om ze te bekijken. Deze rechten worden bepaald via groepen. Elke groep heeft bepaalde rechten die van te voren worden bepaald. Op deze manier komt er een hiërarchie in het systeem. Op deze manier kan een gebruiker alleen gegevens inzien en aanpassen die relevant zijn. In het middengedeelte van de pagina wordt altijd de inhoud getoond.

4.4 Youmap componenten Google Maps plattegrond De plattegrond is een Google Maps kaart geïntegreerd in het systeem. Alle functionaliteiten waar gebruikers mee bekend zijn, zijn aanwezig. Alle instanties worden weergegeven op de kaart. De plattegrond wordt gegenereerd doormiddel van de Google Maps API. Deze API stelt softwareontwikkelaars instaat om allerlei soorten applicaties te ontwikkelen die met behulp van een interactieve kaart locaties en gegevens weergeven. De functionaliteiten die gebruikt kunnen worden zijn dezelfde als van de Google Maps website. Functionaliteiten zoals o.a. het plaatsen van markers, weergeven van gegevens en afbeeldingen, het plannen van routes, printen van deze routes. Youmap -‐ Michel Kempers -‐ 2010 52

Youmap

Markers Markers wijzen de locaties van instanties aan. De markers zijn aangepast aan het soort in-‐ stanties. Een voetbalclub krijgt een ander icoon als een ziekenhuis. Op deze manier is het voor gebruikers in een oogopslag duidelijk tot welke categorie de marker behoort. Als een gebruiker op een marker klikt verschijnt er een tekstballon met daarin de gegevens van de instantie E-‐mail systeem Met het E-‐mail systeem kunnen gebruikers berichten sturen naar geregistreerde gebruker(s). Er kan worden geselecteerd op gebruike of op groep.


Youmap

Hoofdstuk 5 – Conclusie & aanbevelingen De beginfase van het project omvatte een onderzoek naar digitale gemeentegidsen en ande-‐ re webproducten die gebruik maken van de Google Maps API. De resultaten van het onder-‐ zoek zijn meegenomen in het verdere proces van ontwerpen en ontwikkelen en hebben de basis gevormd van de latere bouw van de applicatie. Goede, duidelijke navigatie en usability zijn kernpunten in het onderzoek geweest daar deze als zeer belangrijk geacht worden bij het ontwikkelen van webproducten. Vooral bij webproducten die een gevarieerd publiek dienen zijn deze twee punten van belang. De applicatie richt zich op gemeentelijke informatie. Gemeentelijke informatie is een woord dat allerlei soorten informatie omvat. Gegevens van instanties zoals clubs, verenigingen en bedrijven maar ook informatie als locaties van brievenbussen en bushaltes, of verleende vergunningen zoals bouw-‐ of horecavergunningen. Als laatste is het aangeven van wegwerk-‐ zaamheden of soortgelijke vaak tijdelijke zaken meegenomen in het project als gemeentelij-‐ ke informatie. De front end van de applicatie wordt ondersteund en beheerd door een eigen beheersys-‐ teem. De combinatie van deze twee onderdelen maken van de applicatie een sterk product dat afwijkt van producten die tot nu toe worden aangeboden door verschillende partijen. Op deze manier kan de inhoud van het systeem worden beheerd zonder dat er verstand aanwe-‐ zig moet zijn van programmeren. Ook hoeven instanties met een account niet te wachten tot aanpassingen worden doorgevoerd, ze kunnen zelf deze aanpassingen maken wanneer hen dat uitkomt. De informatie van het systeem blijft op deze manier actueel. Uit de usabilitytest is gebleken dat de applicatie gebruiksvriendelijk is en naar behoren werkt. De vooraf gesteld functionaliteit is opgeleverd en daarmee is een werkend prototype afgeleverd. Daarbij is een kale versie van het systeem opgeleverd die klaar is om aangebo-‐ den te worden aan afnemers van het product. Deze scriptie kan als leidraad dienen bij het verder ontwikkelen van de applicatie of bij het ontwikkelen van een soort gelijk product. Er is beschreven welke stappen zijn ondernomen en is er uiteengezet waarom bepaalde keuzes zijn gemaakt.


Bronvermelding Literatuur: •

•

•

•

Briels Nieuwsland zie bijlage op bladzijde 92 Westvoornse Courant zie bijlage op bladzijde 94 Papieren gemeentegidsen: Westvoorne 09/10 Uitgever: De kleine media Rozenburg 09/10 Uitgever: De telefoongids BV Krimpen a/d IJssel 09/10 Uitgever: Fmr producties PHP, MySQL boeken: Het SQL leerboek: Auteur: R. van der Lans Uitgever: Academic service, Schoonhoven Jaar: 1998 MySQL/PHP database applicaties: Auteurs: J. Greenspan & B. Bulger Uitgever: Academic service, Schoonhoven Jaar: 2001 Youmap -‐ Michel Kempers -‐ 2010 55

Youmap

Internet Gemeentelijk informatie http://www.rotterdam.nl http://www.brielle.nl http://www.vng.nl http://www.cbs.nl/nl-‐ NL/menu/methoden/classificaties/overzicht/gemeentelijke-‐ indeling/2010/default.htm Aanbieders gemeente gidsen http://www.fmrproducties.nl/ http://www.aksemedia.nl/ http://cms.dekleinemedia.nl/ http://www.mijngemeentegids.nl/Main Mashup producten http://route.anwb.nl/routeplanner/ http://www.fietsenwandelweb.nl/ http://www.groenlinksopdekaart.nl http://www.funda.nl/ Navigatie en usability elementen http://www.den-‐dopper.com/2009/05/26/top-‐10-‐eisen-‐aan-‐een-‐effectieve-‐navigatie/ http://en.wikipedia.org/wiki/Nielsen_Norman_Group http://www.nngroup.com/ http://www.browsealoud.nl http://www.whelp.nl/uitvoering-‐functioneel-‐ontwerp/ http://www.docstoc.com/docs/27726000/Project-‐beschrijving-‐Functioneel-‐ontwerp-‐ %28FO%29-‐Grafisch-‐ontwerp-‐%28GO http://www.handboekusability.nl/inhoud/ Overig http://nl.wikipedia.org/wiki/Applic ation_programming_interface Youmap -‐ Michel Kempers -‐ 2010 56

Youmap

Youmap

Bijlage A -‐ Youmap Sitemap Deze bijlage toont de sitemap, een grafische weergave van de pagina’s van het systeem.


Youmap

Bijlage B -‐ Youmap ERD Deze bijlage toont de erd van het systeem. Een erd is een schematische weergave van en database. Alle tabellen worden getoond met onderlinge relaties.


Youmap

Bijlage C – Flowcharts: login systeem Deze bijlage tonen de flowcharts van het youmapsysteem. Een flowchart toont het verloop van een proces. Met flowcharts kunnen processen makkelijker worden gevisualiseerd.


Bijlage C – Flowcharts: globaal aanmaken objecten


Youmap

Bijlage C – Flowcharts: Marker aanmaken


Youmap

Youmap

Bijlage D -‐ Pakket van eisen Het pakket van eisen beschrijft de functionaliteiten, minimale technische eisen en grafisch eisen die het systeem dient te bevatten. Ook worden gewenste situaties meegenomen. Dit pakket van eisen is opgesteld met de MOSCOW methode. Deze methode geeft een prioriteit mee aan een eis. M staat voor Must have, C staat voor Could have.

Functionele eisen Nr. Omschrijving 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Pr io

CMS Een Bevoegd gebruiker kan categorieën aanmaken, aanpassen, verwijderen Een Bevoegd gebruiker kan (sub)groepen aanmaken Een Bevoegd gebruiker kan (sub)groepen aanpassen Een Bevoegd gebruiker kan (sub)groepen verwijderen Een Bevoegd gebruiker kan gebruikers aanmaken Een Bevoegd gebruiker kan gebruikers verwijderen Een Bevoegd gebruiker kan gebruikers aanpassen Een Bevoegd gebruiker kan markers plaatsen op de Youmap Een Bevoegd gebruiker kan markers aanpassen op de Youmap Een Bevoegd gebruiker kan markers verwijderen van de Youmap Een Bevoegd gebruiker kan gegevens importeren Een Bevoegd gebruiker kan gegevens exporteren Een Bevoegd gebruiker kan gegevens van gebruikers aanpassen Een Bevoegd gebruiker kan gegevens van gebruikers verwijderen Een Bevoegd gebruiker kan gegevens van instanties* aanpassen Een Bevoegd gebruiker kan gegevens van instanties* verwijderen Een Bevoegd gebruiker kan gegevens van beheerders aanpassen Een Bevoegd gebruiker kan gegevens van beheerders verwijderen Een Bevoegd gebruiker kan een instantie aanmaken Een Bevoegd gebruiker kan een Faq item aanmaken Een Bevoegd gebruiker kan een Faq item verwijderen Een bezoeker kan zichzelf registreren in het systeem (en wordt een gebrui-‐ ker) Een gebruiker kan inloggen met inloggegevens Als een gebruiker zijn wachtwoord kwijt is kan deze het opvragen via de wachtwoord-‐recovery functie Een gebruiker moet zijn account valideren na succesvol registreren Een Bevoegd gebruiker kan een account aanmaken Een Bevoegd gebruiker kan zijn/ haar account(profiel) inzien Een Bevoegd gebruiker kan zijn/ haar account(profiel) bewerken

M M M M M M M M M M C C M M M M M M M M M M M M M M M


29 30 31 32 33 34

Een Bevoegd gebruiker kan zijn/ haar clubgegevens inzien M Een Bevoegd gebruiker kan zijn/ haar clubgegevens aanpassen M Een Bevoegd gebruiker kan zijn/ haar clubgegevens verwijderen M Youmap Een locatie op de kaart wordt aangegeven met een marker M Een bezoeker kan gegevens opzoeken van instanties* van de gemeente M Als de bezoeker een categorie opent verschijnen de markers die correspon-‐ M deren met instanties categorie op de kaart. 35 Als de bezoeker een categorie opent verschijnen de instanties die corres-‐ M ponderen met de markers van de categorie in het rechtermenu. 36 Klikt een bezoeker op de marker dan krijgt deze de gegevens van de instan-‐ M tie te zien 37 Klikt een bezoeker in het rechtermenu dan krijgt deze de gegevens van de M instantie te zien 38 Een bezoeker kan straten opzoeken in de gemeente C 39 Een bezoeker kan de lettergrootte bepalen M 40 Een bezoeker kan via een e-‐mail link een e-‐mail sturen naar instantie* M 41 Een bezoeker kan via een link naar de website van een instantie* M 42 Een gebruiker kan zoeken naar gegevens van instanties* op naam M 43 Een gebruiker kan zoeken naar gegevens van instanties* op type M 44 Een gebruiker kan zoeken naar gegevens van instanties* op voorzitter M 45 Een gebruiker kan zoeken naar gegevens van instanties* op penningmees-‐ M ter 46 Een gebruiker kan zoeken naar gegevens van instanties* op persoon met M bepaalde belangstelling 47 Het systeem zal checken of toegevoegde instantie* bestaat in de database M 48 Een gebruiker kan gegevens van instanties importeren C 49 Een gebruiker kan gegevens van instanties exporteren C 50 D.m.v. sorteren kan een gebruiker gericht gegevens uitprinten M 51 D.m.v. sorteren kan een gebruiker gericht gegevens exporteren C 52 D.m.v. sorteren kan een gebruiker gericht e-‐mails sturen naar een of meer-‐ M dere ontvangers *Onder instanties wordt verstaan: clubs/ verenigingen/ bedrijven/ gemeentelijke informa-‐ tiepunten


Youmap

Youmap

Technische eisen Nr. 1 2 3 4 5 6 7 8 9 10

Omschrijving Minimale systeemeisen (Windows) Internet connectie: Kabel of DSL Besturingssysteem: Windows XP SP2 of Windows 2000 SP4 Computer processor 800 MHz Pentium III of Athlon Computergeheugen van 256 mb of hoger Minimale systeemeisen (Mac) Internet connectie: Kabel of DSL Besturingssysteem: MAC OS X 10.3.9 of hoger Computer processor 1GHz G4 of hoger Computergeheugen van 512 mb of hoger Omgeving Applicatie zal draaien op een LAMP omgeving Talen waarin applicatie is ontwikkeld zijn PHP, MYSQL, JAVA & HTML, CSS

Prio M M M M M M M M M M


Youmap

GUI/ usability eisen Nr. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Omschrijving Youmap De pagina heeft een eigen huisstijl De pagina heeft een zoekfunctie voor categorieën De pagina heeft een zoekfunctie voor de stratengids De pagina heeft een broodkruimelnavigatie De pagina heeft een mogelijkheid tot schalen voor de tekst De pagina heeft een geïntegreerde Google Maps kaart De gehele pagina is schaalbaar, bij verkleinen browser wordt de kaart verkleind, de rest blijft gelijk formaat houden Een marker wordt aangegeven met een passend icoon Gegevens van een instantie worden bij de marker aangegeven in de vorm van tekst Gegevens van makelaars worden bij de marker aangegeven in de vorm van tekst en afbeelding Inloggen via het inlogsysteem Gegevens toevoegen via een formulierachtige interface Het te importeren bestand naar het systeem is een Excel bestand (.csv) Het te exporteren bestand vanuit het systeem is een Excel bestand (.csv) Het te importeren bestand naar het systeem is een Excel bestand (.csv) Het te exporteren bestand vanuit het systeem is een Excel bestand (.csv) Het systeem heeft een sitemap Het systeem heeft een meldsysteem Het systeem heeft een schakelsysteem tussen tekst en kaartweergave Het systeem heeft een FAQ Het systeem heeft een instellingenpagina

Prio M M C M M M M M M C M M C C C C M M M M M


Youmap

Bijlage E – Functioneel ontwerp Het functioneel ontwerp is een document dat de werkingen en toepassing van alle pagina’s beschrijf die ontwikkeld worden. De functioneel ontwerp geeft een goed beeld van het sys-‐ teem voor ontwikkelaars maar ook voor opdrachtgevers.

Functioneel ontwerp Componenten Database CMS (back end) Youmap (front end) Structuur Niet ingelogd gedeelte Gebruiker ingelogd gedeelte Admin ingelogd gedeelte Extra informatie/ Kanttekening: (Deze worden verder in de tekst niet gemeld omdat zij als vanzelfsprekend worden gezien.) Database Velden met een * worden ingevoerd door gebruikers. Velden met ** worden door het systeem ingevuld CMS -‐ Een gebruiker die toegang heeft tot de CMS is altijd geregistreerd. -‐ Een gebruiker die de CMS inziet of bewerkt is altijd ingelogd. -‐ Alle tekstuele data die wordt ingevoerd in het systeem is via formulieren. Er is gekozen voor deze manier omdat het een overzichtelijke manier is en omdat deze bekend is bij veel gebruikers. -‐ Alle invoer in het systeem wordt gecontroleerd, alle velden zijn beveiligd tegen ongewenste invoer. Sommige velden worden gecontroleerd op be-‐ paalde waarden (deze worden wel benoemd in het onderstaande over-‐ zicht). Algemene punten CMS: (Deze worden verder in de tekst niet gemeld omdat zij als vanzelfsprekend worden gezien vanaf nu). -‐ Een gebruiker die toegang heeft tot de CMS is altijd geregistreerd. -‐ Een gebruiker die de CMS inziet of bewerkt is altijd ingelogd. -‐ Alle tekstuele data die wordt ingevoerd in het systeem is via formulieren. Het uiterlijk van deze pagina’s is zo opgebouwd. Er is gekozen voor deze manier omdat het een overzichtelijke manier is en omdat deze bekend is bij veel gebruikers. Youmap -‐ Michel Kempers -‐ 2010 66

Youmap

Youmap

Map

-‐ Alle invoer in het systeem wordt gecontroleerd, alle velden zijn beveiligd tegen ongewenste invoer. Sommige velden worden gecontroleerd op be-‐ paalde waarden (deze worden wel benoemd in het onderstaande over-‐ zicht). -‐ Voor het gebruik van youmap.nl hoeven gebruikers zich niet te registre-‐ ren. -‐ Het is een openbaar informatie portaal -‐ Onderstaande componenten zijn onderdelen van de pagina. Samen vor-‐ men deze delen een volledige pagina. -‐ Onderdelen op de pagina zijn naar wens van de afnemer te plaatsen en te verwijderen bijvoorbeeld bij plaatsen in bestaande websites. Het draaien als een op zich zelf staand product is ook mogelijk. De locatie van de onderde-‐ len is naar wens te bepalen. Map wordt voortaan plattegrond genoemd

Componenten van het systeem met de beschrijving van de functionaliteiten.

Database Tabellen

Omschrijving (Naam tabellen, naam velden en omschrijving) Users User_id Een uniek nummer om gebruikers te kun-‐ nen identificeren Group_id Met het unieke groepsnummer wordt een gebruiker aan een bepaalde groep gekop-‐ peld. Role_id Het rol id geeft aan welke rol de gebruiker bekleed binnen de organisatie. * User_name De naam van de gebruiker in het systeem. Met deze naam wordt ingelogd in het CMS gedeelte van het systeem. De gebruikers-‐ naam is een snelnaam voor een gebruiker en een unieke naam in het systeem. User_frontname Voornaam van een gebruiker. * Youmap -‐ Michel Kempers -‐ 2010 67

Youmap

* *

*

*

*

*

* **

*

**

**

User_lastname Achternaam van een gebruiker. User_password Het wachtwoord van de gebruiker. In com-‐ binatie met de gebruikersnaam en dit wachtwoord kan de gebruiker inloggen in het systeem. Het wachtwoord heeft mini-‐ maal 4 en maximaal 15 tekens. User_street Deel 1 van adresgegevens van de gebruiker: De straatnaam. User_number Deel 2 van de adresgegevens van de gebrui-‐ ker: Het huisnummer. User_zipcode Deel 3 van de adresgegevens van de gebrui-‐ ker: De postcode. User_city Deel 4 van de adresgegevens van de gebrui-‐ ker: De plaatsnaam. User_telephone Het telefoonnummer van de gebruiker. User_validation Een validatiecode om het account van de gebruiker te valideren. Er wordt gecontro-‐ leerd of het account echt bestaat. Dit is een extra beveiligingsmaatregel. User_email Het e-‐mail adres van de gebruiker. Hier worden gegevens als de validatiecode, nieuw wachtwoord (bij vergeten van het wachtwoord) of o.a. groepsinformatie e-‐mails naar toegestuurd. User_last_ip IP adres waar een gebruiker als laatste mee heeft ingelogd. Deze gegevens worden op geslagen omdat ze gemakkelijk kan worden gecontroleerd wie de gebruikers zijn die het systeem gebruiken. User_last_login In dit veld wordt bijgehouden wanneer (op welke datum en welk tijdstip) de gebruiker als laatste actief is geweest in het systeem. Youmap -‐ Michel Kempers -‐ 2010 68

Youmap

**

User_created

als laatste actief is geweest in het systeem. In dit veld wordt opgeslagen wanneer (op welke datum en welk tijdstip) de gebruiker is aangemaakt in het systeem.

Groups Group_id **

* *

*

Uniek nummer om een groep te identifice-‐ ren. Sub_group Een uniek nummer om subgroepen aan te geven in het systeem. Een subgroep is een groep die valt onder het beheer van een groep. Group_name De naam van de groep. Deze naam is uniek in het systeem. Systeem_ Permissies die de gebruikers in de groep permissions hebben in het systeem. Per groep kan be-‐ paald worden wat een gebruiker wel en niet kan. Number_of_ Het aantal markers dat een groep mag markers plaatsen op een kaart. Het aantal markers wordt bepaald per groep.

Mar-‐ kers *

Marker_id

*

Marker_ description

Cate-‐ gory *

Category _id

Roles

Role_id

**

Role_name

Marker _name

Een uniek nummer om een marker te identificeren De naam van een marker omschrijft zijn functie. Het is een unieke naam op de kaart. De beschrijving van de marker. Hier wordt de functie van de marker beschre-‐ ven.

Category _name

Een uniek nummer om een categorie te identificeren. Naam van de categorie.

Een uniek nummer om rollen aan te dui-‐ den die binnen een categorie voor kun-‐ nen komen. De naam van de rol. Youmap -‐ Michel Kempers -‐ 2010 69

**

Role_ description

Een beschrijving van de rol. Deze maakt duidelijk wat de rol precies inhoud.

Faq

Faq_id

*(*) *(*)

Faq_name Faq_ description

Een uniek nummer om vragen aan te dui-‐ den. De naam van de vraag. Een beschrijving van de vraag. Deze maakt duidelijk wat de vraag precies in-‐ houd.

Settings Setting_id *(*)

*(*)

Een uniek nummer om instellingen aan te duiden. Registrati-‐ Via deze tabel wordt bepaald in welke on_groups groep nieuwe gebruikers worden ge-‐ plaatst. Youmap_title In deze tabel wordt de titel van het sys-‐ teem opgeslagen. De titel is dynamisch omdat deze per gemeente aangepast moet kunnen worden. Meta_tags

De meta_tags zijn dynamisch om dezelfde reden als de titel van het systeem. Door ze in de database op te slaan kunnen ze makkelijk worden aangepast.


Youmap

Youmap

CMS Back end Profiel

Bewerk profiel

Groepen beheer

Groepen aanmaken

Omschrijving De pagina waar de gebruiker naar wordt doorverwezen als de inlog procedure succesvol is verlopen. De profiel pagina geeft alle persoonlijke gegevens weer van de ge-‐ bruiker. Gegevens die zijn ingevoerd tijdens het registreren zoals naam, adresgegevens maar ook de rechten die een gebruiker heeft. De rechten worden bepaald door de groep waar de gebruiker is in-‐ gedeeld. Vanuit de profiel pagina komt u via een link op de bewerk profiel pagina. Op deze pagina kunnen alle persoonsgebonden gegevens van gebruikers worden aangepast. De groepen beheer pagina geeft de mogelijkheden om groepen aan te maken, groepen te bewerken en groepen te verwijderen. De gerechtigde gebruiker kan groepen kiezen met behulp van een lijst die de bestaande groepen uit de database haalt. Groepen kunnen alleen groepen bewerken die onder hen vallen in de hiërarchie van het systeem (subgroepen). Een groep kan nooit een groep aanpassen of verwijderen die boven de groep staat. Op deze manier wordt de veiligheid van het systeem gewaarborgd. Deze pagina wordt alleen in het menu aangegeven als de desbetref-‐ fende groep daar de rechten voor heeft. Dat geldt ook voor de ande-‐ re groep beheer pagina’s. Het aanmaken van nieuwe groepen. Op de groepen beheer pagina wordt een groep aangemaakt d.m.v. een uniek id. De gebruiker wordt dan doorverwezen naar de nieuwe groep pagina om gegevens toe te voegen aan de nieuwe groep. Deze pagina heeft een formulierachtige weergave. Gegevens die worden toegevoegd aan de groep zijn groepsrechten, gebruikersrechten en markerrechten (+ het aantal markers dat ge-‐ plaatst mag worden door gebruikers in een groep). De groep wordt automatisch ingedeeld in een subgroep die valt on-‐ der de groep die de nieuwe groep heeft aangemaakt. Youmap -‐ Michel Kempers -‐ 2010 71

Youmap

Bewerk groepen

Gebruikers beheer

Gebruikers aanma-‐ ken

Gebruikers aanpas-‐ sen

Marker beheer

Deze pagina geeft de mogelijkheden om een bestaande groep te bewerken en is te bereiken vanaf de groep beheer pagina. De te bewerken groep wordt gekozen op de groepen beheer pagina waarna het systeem de gebruiker doorverwijst naar de bewerk groe-‐ pen pagina. De gegevens die bewerkt kunnen worden op de pagina zijn de naam van de groep en de rechten die de groep heeft in het systeem. De rechten kunnen worden toebedeeld aan de groep d.m.v. een aan/uit vink principe. Het aantal markers dat kan worden aange-‐ maakt wordt aangegeven in een tekstvak. De gebruikers beheer pagina geeft gerechtigde gebruikers de moge-‐ lijkheid om gebruikers aan te maken, te bewerken en te verwijderen uit het systeem. Alleen gebruikers die vallen in dezelfde groep of subgroepen kunnen worden beheerd. De reden hiervoor is dat er geen misbruik van het systeem gemaakt kan worden. De gebruikers die bewerkt kunnen worden, worden weergegeven in een lijst die correspondeert met de database. In de lijst wordt ook de groep weergegeven waar de gebruiker toebehoord. Deze pagina wordt alleen in het menu aangegeven als de desbetref-‐ fende groep daar de rechten voor heeft. Dat geldt ook voor de ande-‐ re gebruiker beheer pagina’s. Een nieuwe gebruiker kan worden aangemaakt op deze pagina. De gebruiker word ingedeeld in een groep. Deze groep kan alleen eenzelfde of een subgroep zijn van de groep waar de gerechtigde gebruiker toebehoort. De gegevens die op deze pagina worden ingevoerd zijn de gegevens die in het gebruikersprofiel worden weergegeven. Op deze pagina kunnen gegevens van gebruikers worden bewerkt. Er kunnen alleen gebruikers worden bewerkt die tot eenzelfde of een subgroep behoren. Deze gegevens zijn de gegevens die worden weergegeven in de pro-‐ fielpagina. Op deze plek bewerkt een gerechtigd gebruiker de gege-‐ vens, bij de profielpagina bewerkt de ingelogde gebruiker de gege-‐ vens zelf. De marker beheer pagina geeft gebruikers die gerechtigd zijn de mogelijkheden om gegevens van markers te beheren. De gebruiker kan markers aanmaken, markers bewerken (het gaat Youmap -‐ Michel Kempers -‐ 2010 72

Youmap

hier om het bewerken van de gegevens van de marker (tekst, icoon en de afbeelding)) en markers verwijderen. De markers kunnen worden gekozen uit een lijst die uit de database komt. Alleen markers van een eigen groep kunnen worden bewerkt. Alleen administrators kunnen alle gegevens beheren. Het aantal markers dat aangemaakt kan worden wordt bepaald in de groeps-‐ rechten. Het aantal kan worden bijgesteld als daar permissie voor is. Evenals het recht om markers aan te maken, bewerken en verwijde-‐ ren. Marker aanmaken Het aanmaken van markers. Allereerst wordt er een naam aan de marker toegekend. Andere gegevens die de marker meekrijgt zijn locatie, gegevens zoals adres en contactgegevens en zo nodig een afbeelding. Ook is het mogelijk om een icoon te selecteren voor de marker. Het is belangrijk dat aan de marker gezien kan worden wat voor type instantie deze aangeeft. Markers aanpassen Na het kiezen van een marker uit de lijst worden de gegevens van deze marker weergegeven en deze gegevens kunnen dan bewerkt worden. De locatie wordt bepaald via adresgegevens door het systeem. De afbeelding die met de marker kan worden weergegeven heeft bepaalde formaten en bestandsgrootte. De afbeelding kan worden opgehaald vanaf de harde schijf van de gebruikers computer. Daarnaast kan er een icoon worden gekozen die de gebruiker informeert over het doel van de marker. Categorie beheer De categorie beheer pagina geeft gebruikers de mogelijkheid om categorieën aan te maken. Er zijn hoofd-‐ en subcategorieën. Subca-‐ tegorieën zijn categorieën die in relatie staan tot hoofdcategorieën. Balsport is bijvoorbeeld een sub van sport. De markers die bij mar-‐ ker_beheer aangemaakt kunnen worden, worden ook in een catego-‐ rie geplaatst. Categorie aanmaken Het aanmaken van een nieuwe categorie kan alleen worden gedaan door gerechtigde gebruikers. Deze rechten worden bepaald door de groep waarin de gebruiker zich bevind. Bewerk categorie Het bewerken van categorieën: De naam van de categorie kan wor-‐ den aangepast. Daarnaast moet er bepaald worden of de categorie en hoofd of een subcategorie is. Is de categorie een subcategorie Youmap -‐ Michel Kempers -‐ 2010 73

Youmap

dan moet er bepaald worden onder welke categorie deze valt. Help (FAQ) beheer De help beheer pagina laat gebruikers bepalen welke vragen er bo-‐ venaan staan in de FAQ in het systeem. Groepen kunnen bepalen dat welke vragen belangrijker zijn dan an-‐ dere. Dat kan per groep verschillen. Ook is het mogelijk om extra vragen toe te voegen aan de FAQ. Vragen die bijvoorbeeld specifiek zijn voor de groep. Rechten verlenen Rechten verlenen houdt in dat gebruikers en groepen mogelijkheden in het systeem krijgen. Op deze manier blijft het systeem veilig en kan niet elke groep gegevens aanpassen van andere groepen als de-‐ ze gegevens niet zijn gerelateerd aan hun eigen groep. D.m.v. het rechten systeem wordt er een hiërarchie gecreëerd waar bij bovenliggende groepen nooit beheerd kunnen worden door lager liggende groepen. Een voorbeeld: Een gemeente staat hoger in de hiërarchie als een voetbalvereniging. Een gemeente zou gegevens kunnen inzien en beheren van de voetbalvereniging maar andersom niet. Systeem instellingen Hier worden de instellingen van in het systeem geregeld. Globale instellingen zoals: -‐ Groep waar geregistreerde gebruikers in terecht komen. -‐ Of er geregistreerd mag worden. E-‐mail opsturen Administrators kunnen e-‐mail berichten opstellen en deze versturen naar bepaalde gebruikers. Dit kunnen bijvoorbeeld alle voorzitters van voetbalclubs zijn. De ontvangers worden geselecteerd uit een lijst die word opgehaald uit de database. De berichten worden ver-‐ stuurd naar de e-‐mailadressen van de geregistreerde gebruikers. Registratie Het registreren van een gebruiker gebeurt op deze pagina. Gebrui-‐ kers moeten geregistreerd zijn willen zij gebruik kunnen maken van het CMS systeem. De toekomstig gebruikers dienen hun contact en adresgegevens in te vullen. De gebruikersnaam is uniek en wordt gecontroleerd door het sys-‐ teem. De gebruikersnaam moet minimaal 3 tekens zijn. Het wachtwoord heeft minimaal 4 tekens en maximaal 15 tekens. Youmap -‐ Michel Kempers -‐ 2010 74

Youmap

Wachtwoord verge-‐ ten

Validatie

Is een geregistreerd gebruiker zijn wachtwoord vergeten dan kan hij/ zij deze opvragen via een e-‐mailadres. De gebruiker voert zijn/haar gebruikersnaam in met het bijbehorend e-‐mailadres waarna een nieuw wachtwoord wordt gegenereerd en gestuurd naar het e-‐ mailadres van gebruiker. Zo kan er op een veilige manier een nieuw wachtwoord worden opgevraagd. Als een toekomstig gebruiker zijn/ haar gegevens heeft ingevuld op de registratie pagina en deze zijn goedgekeurd dan stuurt het sys-‐ teem een e-‐mailbericht naar de desbetreffende persoon. In dit bericht staat een code waarmee de gebruiker zijn registratie kan voltooien. De validatiecode is een automatisch gegenereerde code die niet is te herleiden. Op deze manier wordt het systeem beveiligd tegen kwaadwillende personen.


Youmap

Youmap.nl Front end Home

Zoekpagina

Menu (Instanties)

Map (plattegrond)

Omschrijving De eerste pagina die bezoekers van Youmap.nl zien als ze gebruik willen maken van de site. Alle mogelijkheden van de website worden gepresenteerd aan gebruikers. Algemene informatie van de gemeente staat voorop met daar om-‐ heen mogelijkheden tot het opzoeken en vergaren van informatie over de gemeentelijke instanties. Met een variabele template is het mogelijk om voor elke afnemer een eigen identiteit mee te geven en het product te plaatsen in elk bestaande pagina maar kan ook op zichzelf draaien als website. Het zoekonderdeel geeft de gebruiker de mogelijkheid om specifiek te zoeken naar bepaalde doelen. Er kan op categorie maar ook op instantie worden gezocht. De informatie wordt opgehaald uit de database en op een overzich-‐ telijke manier teruggekoppeld aan de gebruiker. Een lijst met daarin alle geregistreerde instanties. Deze gegevens kunnen worden opgezocht in het menu op de pagina. Het menu is van variabele grootte en wordt groter of kleiner naar gelang het aan-‐ tal categorieën. Ook kan er via het zoekveld bovenin de pagina worden gezocht naar categorieën en instanties. Als er op een instantie wordt geklikt geeft de plattegrond de instantie weer d.m.v. een marker. Klikt de gebruiker op de marker dan verschijnt er een tekstveld met gegevens van de instanties. Ook kan de gebruiker kiezen om meer uitgebreide informatie te krijgen van de instantie door op de infor-‐ matieknop te drukken. De kaart maakt dan plaats voor een interface met daarin tekst en uitleg betreffende de instantie. Er kan in dit stadium op elke moment worden gewisseld tussen beide interfaces. De plattegrond is een interface waarmee gebruikers worden geïn-‐ formeerd door beschikbare locaties weer te geven d.m.v. markers. Deze markers geven instanties weer en via deze marker kan er meer informatie worden vergaard zoals contactgegevens, locatie of/en webadressen. Via de plattegrond kunnen ook routes worden geprojecteerd die gebruikers kunnen begeleiden naar het vinden van gewenste loca-‐ ties. De markers geven de optie om een route van en naar de locatie te Youmap -‐ Michel Kempers -‐ 2010 76

Youmap

Header (Banner) Footer

Kruimelpad

plannen. Er wordt dan gelinkt naar google.maps.nl in een nieuw ven-‐ ster. De header is een ruimte die naar eigen inzicht kan worden ingedeeld. Het is een onderdeel dat de pagina een identiteit mee geeft. De footer is een ruimte die gevuld kan worden met vaste informatie zoals adres-‐ en contactgegevens. De ruimte kan worden opgedeeld in kolommen om de informatie per onderwerp weer te geven. Het kruimelpad geeft de gebruikers altijd hun precieze locatie weer. Op deze manier behouden zij het overzicht op de pagina en is het eenvoudig om terug te navigeren naar bovenliggende onderdelen.


Youmap

Bijlage F -‐ Onderzoek naar het aantal gemeentes met een digitaal product: Een onderzoek naar het aantal gemeentes die een digitale gemeentegids aanbieden heeft de volgende resultaten opgeleverd. De resultaten zijn weergegeven in een schema dat hieron-‐ der is weergegeven. De bezochte webpagina’s zijn dezelfde als in het onderzoek naar digitale gemeentegidsen: . . . .

http://www.fmrproducties.nl/ http://www.aksemedia.nl/ http://cms.dekleinemedia.nl/ http://www.mijngemeentegids.nl/Main

Aantal gemeentes in Nederland: 431 (Bron: http://www.cbs.nl/nl-‐ NL/menu/methoden/classificaties/overzicht/gemeentelijke-‐indeling/2010/default.htm) Aanbieder FMR Akse media De kleine media C&T Promotions TOTAAL Rest

Aantal klanten(gemeentes) 120 149 59 64 392 49

Conclusie: Het aantal gemeentes in Nederland zonder digitale gemeentegids is rond de vijftig. De ge-‐ meentes lijken welwillend te zijn naar overstappen op een andere aanbieder als deze gunsti-‐ gere voorwaarden heeft. Bijvoorbeeld goedkoper of een completer product. Dat is alleen een aanname. Er is geen onderzoek naar gedaan om deze uitspraak aan te tonen.


Youmap

Bijlage G -‐ Youmap pagina´s: In deze bijlage worden een aantal pagina’s beschreven van het youmap systeem. Deze pagi-‐ na’s zijn belangrijk in het systeem maar niet uitzonderlijk genoeg om in de scriptie te plaat-‐ sen. Login systeem: Log in Figuur 2 geeft het beginscherm van het gebruikersgedeelte weer. Op deze pagina kunnen geregistreerde gebruikers inloggen in het systeem door middel van hun gebruikersnaam en wachtwoord. Deze gegevens zijn te verkrijgen door jezelf in te schrijven in het systeem. Als gebruikers een gebruikersaccount hebben kunnen zij hun instantie aanbieden op de You-‐ map. De gegevens van deze instantie kunnen worden aangepast in het CMS gedeelte waar naar wordt toeverwezen na het inloggen. Registratie Op deze pagina kunnen gebruikers door hun gegevens in te voeren zichzelf registreren in het Youmapsysteem. Als de gebruiker zichzelf heeft geregisteerd kan daarna worden ingelogd met de gebruikersgegevens. De ingevoerde gegevens kunnen later worden veranderd in de CMS. Wachtwoord vergeten Figuur 4 geeft de pagina weer waar je als gebruiker een nieuw wachtwoord kan opvragen als deze kwijt of vergeten is. Door het invoeren van de gebruikersnaam met het daarbij beho-‐ rend e-‐mailadres kan de gebruiker een nieuw wachtwoord opvragen. Het wachtwoord wordt dan verstuurd naar het e-‐mailadres van de gebruiker. De gebruiker kan dan weer inloggen in het systeem. Account validatie Op deze pagina kan een gebruiker die zichzelf heeft geregistreerd zijn/haar account valide-‐ ren. De validatie procedure is een extra beveiliging voor het systeem. Als de gebruiker op de registratiepagina op verzenden klikt dan krijgt deze een e-‐mailbericht met daarin de validatie code.


Youmap

Bijlage H -‐ CMS pagina’s

CMS Profielpagina Figuur 7 geeft de profielpagina weer van het CMS systeem. Als de geregistreerde gebruiker inlogt dan wijst het systeem de gebruiker door naar de profielpagina. Op deze profielpagina staan de persoonsgegevens van de gebruiker met daarbij de rechten die de gebruiker heeft. CMS Beheer gebruikers Op deze pagina worden alle gebruikers getoond die in dezelfde groep of subgroep zitten. Naar gelang de rechten kan een gebruiker andere gebruikers aanmaken, verwijderen en be-‐ werken. CMS Beheer groepen Alle groepen en subgroepen worden getoond op deze pagina. Als ingelogd gebruiker kan je de groepen aanpassen en verwijderen. Ook is het mogelijk om nieuwe groepen aan te ma-‐ ken. CMS Beheer markers De markers die op de plattegrond worden getoond worden op deze pagina beheerd. De lo-‐ catie wordt bepaald met een latitude/longitude bepaler. Met deze twee coördinaten bepaalt het systeem de locatie van de marker. CMS Beheer categorieën Alle markers zijn ingedeeld in categorieën. Het beheer gebeurt hetzelfde als op de andere beheer pagina’s. CMS Beheer F.A.Q. Met het F.A.Q. beheer hebben gebruikers de macht over de F.A.Q. vragen. Vragen kunnen naar eigen inzicht worden aangemaakt en verwijdert. Met deze methode kunt u uw gebrui-‐ kers altijd het beste van dienst zijn. CMS Instellingen Op deze pagina worden alle gebruikers getoond die in dezelfde of een subgroep zitten. Naar gelang de rechten kan een gebruiker andere gebruikers aanmaken, verwijderen en bewer-‐ ken.


Youmap

Bijlage I -‐ Usability test Youmap Een usability of gebruiksvriendelijkheid test van de Youmap website. Beste, Voor mijn afstudeeropdracht heb ik de website Youmap gemaakt. Met deze website kunt u gegevens vinden van clubs, verenigingen, bedrijven en andere instanties binnen uw gemeen-‐ te. Het is mogelijk om uzelf te registreren en zelf uw club, vereniging of bedrijf te profileren op een eenvoudige manier. Bij de ontwikkeling van het product is er veel rekening gehouden met de gebruiksvriendelijk-‐ heid. Door middel van deze test is het de bedoeling om het systeem te testen op de ge-‐ bruiksvriendelijkheid en het product te verbeteren waar mogelijk. Praktijktests leveren vaak extra informatie op die tijdens het ontwikkelen over het hoofd is gezien. De test richt zich op het gebruik van de functionaliteit en zal een aantal situaties doorlopen die ook in later gebruik veel voorkomen. Per situatie wordt door middel van een korte om-‐ schrijving uitgelegd wat verwacht wordt. Na het afronden van deze opdracht wordt er ge-‐ vraagd hoe deze is verlopen en of er waar mogelijk commentaar kan worden gegeven. Mijn vraag is of u de opdrachten met de bijbehorende vragen wilt maken. Met de resultaten kan ik heb systeem beoordelen en verbeteren waar nodig. Op deze manier kan ik een nog completer product afleveren en hopelijk ook afstuderen. Alvast bedankt voor de moeite, Michel Kempers


Youmap

Algemene vragen Deze vragen zijn om te bepalen wat uw ervaring is met computers, internet en soortgelijke applicaties. Zijn er vragen die u niet snapt of waar u geen antwoord op weet, laat deze dan open. Het systeem is tijdens het ontwikkelen op verschillende systemen getest en zou overal moeten werken. Komt u toch fouten tegen, of werkt de applicatie bij u niet geeft u dat dan aan. Vraag 1: Heeft u ervaring met Google Maps, Yahoo Maps, Bing Maps? • •

Ja Nee

Motivatie (optioneel): ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Vraag 2: Welke webbrowser gebruikt u? Kunt u ook het versienummer vermelden. Open hiervoor uw browser en klik in het menu HELP op de link INFO OVER…. (Een browser is het programma waarmee u webpagina’s bekijkt) ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Vraag 3: Gebruikt u een PC (Windows) of een MAC (OSX)? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Youmap -‐ Michel Kempers -‐ 2010 82

Youmap

Vraag 4: Wat voor internetverbinding heeft u? • •

Modem Breedband (ADSL/ Kabel

Vraag 5: Welke beeldscherm resolutie gebruikt u? (Klik op de rechterknop op uw muis als u op het bureaublad staat > Beeldscherminstellingen > resolutie ) • •

1024 x 768 1280 x 1024

Anders, nl: ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….……………………………………………..


Youmap

U kunt de Youmap applicatie vinden op het volgende adres: http://www.youmap.nl/pages/

Opdracht 1: Omschrijving: Gebruikers kunnen gegevens van instanties opzoeken. Deze instanties worden op de platte-‐ grond weergegeven door markers. Als u op een marker klikt verschijnt er een tekstwolk met daarin de gegevens van de instantie. In het menu (links) staan de instanties gesorteerd op categorie. In de gegevenskolom (rechts) worden de gegevens van de instantie weergegeven. Opdracht: U bent net in de gemeente Brielle komen wonen en u bent opzoek naar een voetbal-‐ vereniging. U komt op Youmap.nl terecht en zoek daar naar een voetbalvereniging. Klik in het menu op SPORT. Het menu schuift uit en u ziet verschillende soorten sporten. Aangezien voetbal een balsport is klikt u op BALSPORT. Klik daarna op VOETBAL en u ziet markers verschijnen op de kaart die voetbalverenigingen aanduiden. 1a: In de rechterkolom worden deze verenigingen ook getoond. Klik op een van de voetbal-‐ verenigingen in de rechterkolom om de gegevens te tonen. Onder de vereniging staat een tekst: TOON MARKER. Klik hierop om alleen de marker van de gekozen club te tonen. 1b: Klik op een marker die wordt weergegeven op de plattegrond, de marker toont dan zijn gegevens. 1c: Klik nu op TEKSTWEERGAVE boven de plattegrond om van weergave te veranderen en de gegevens van de marker te zien. Keer terug naar de beginsituatie door linksboven in het scherm op YOUMAP of op BRIELLE te klikken.


Youmap

Vragen bij de opdracht: 1: Heeft u problemen ondervonden bij het uitvoeren van de opdracht? • •

Ja Nee

Zo ja, kunt u een beschrijving geven van deze problemen? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 2: Zijn er fouten opgetreden tijdens het uitvoeren van de opdracht? • •

Ja Nee

Zo ja, kunt u een beschrijving geven van deze fout(en)? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 3: Waren alle knoppen en opties gemakkelijk te vinden? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Youmap -‐ Michel Kempers -‐ 2010 85

Youmap

………………….………………….………………….………………….………………….…………………………………………….. 4: Vond u dat u veel stappen moest nemen om tot het resultaat te komen? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 5: Heeft u verder nog vragen of opmerkingen over de opdracht? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….……………………………………………..


Youmap

Opdracht 2: Omschrijving: Om zelf uw instantie te profileren op Youmap dient u zichzelf te registreren. Als u geregi-‐ streerd bent krijgt u toegang tot een zogenaamd CMS systeem waar u markers kunt aanma-‐ ken en deze marker kunt vullen met gegevens. Opdracht 2a: Registreer u zelf op de Youmap applicatie. U bent weer op de beginsituatie zoals u eindigde bij opdracht 1. Rechts onderin het scherm staan een aantal links. Een daarvan is GEBRUIKERS, klik daarop om vervolgens op het login/registratie gedeelte te komen. Klik REGISTREREN in het linker menu en vul uw gegevens in. Vul het formulier helemaal in, laat geen velden leeg. Heeft u vragen over wat u moet invul-‐ len in een veld, ga met de muis(cursor) over een vraagteken heen om informatie te krijgen. Heeft u alle velden ingevuld? Klik dan op de REGISTREREN knop onder het invulgedeelte. Heeft u alle gegevens goed inge-‐ vuld? Dan krijgt u de melding dat uw account succesvol is aangemaakt en dat u het via uw (net ingevulde) e-‐mailadres moet valideren. 2b: Valideer uw account via uw e-‐mail adres: Ga naar de INBOX van uw e-‐mailaccount, u heeft als het goed is een e-‐mail gekregen van Youmap. (Het zou kunnen zijn dat de e-‐mail in ongewenste berichten is gekomen, ziet u geen bericht in uw INBOX, kijk even in uw ongewenste berichten.) Open het e-‐mail bericht. Daarin staat een validatie code en een link “KLIK HIER”. Klik op de KLIK HIER link om het account te valideren. Als het goed is opent een nieuw venster dat u verwijst naar Youmap. U krijgt de melding: Uw account is gevalideerd, u kunt nu inloggen met uw inloggegevens. 2c: Log in met uw gegevens Klik op de INLOGGEN link in het linkermenu. Voer uw GEBRUIKERSNAAM & WACHTWOORD in op de juiste plaats en klik op de log in. Als u alles goed heeft gedaan wordt u doorverwe-‐ zen naar de profielpagina.


Youmap


Ja Nee


Ja Nee

Zo ja, kunt u een beschrijving geven van deze fout(en)? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 3: Waren alle knoppen en opties gemakkelijk te vinden? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Youmap -‐ Michel Kempers -‐ 2010 88

Youmap

………………….………………….………………….………………….………………….…………………………………………….. 4: Vond u dat u veel stappen moest nemen om tot het resultaat te komen? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 5: Heeft u verder nog vragen of opmerkingen over de opdracht? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….……………………………………………..


Youmap

Opdracht 3: Omschrijving: U heeft uzelf geregistreerd tijdens opdracht 2. Tijdens opdracht 3 gaat u een categorie en een marker aanmaken. Met de marker wordt uw instantie weergegeven op de plattegrond. De categorie waarin de marker geplaatst wordt bepaald waar deze in het menu wordt ge-‐ plaatst. Opdracht 3a: U bent op de profielpagina, waar u tijdens opdracht 2 stopte. Klik op de link CATEGORIE BEHEER in het linkermenu, de categorie beheer pagina opent. U ziet een plaatje van een groen rondje met een wit kruis; daarachter staat de tekst: “Maak een nieuwe categorie aan”. Klik op de tekst. Het programma wijst u door naar de “categorie aanmaken” pagina. Vul een naam in de categorie die u gaat aanmaken. Vink ‘aan’ bij ‘Wordt de categorie een hoofdcategorie?’ en klik op CATEGORIE AANMAKEN. Als het goed is krijgt u de melding dat de categorie succesvol is aangemaakt, klik nu op de GA TERUG link boven in het venster. Opdracht 3b: U wordt terugverwezen naar de categorie beheerpagina. Klik nu op de MARKER BEHEER link in het linkermenu, de pagina wordt dan geopend. U ziet een plaatje van een groen rondje met een wit kruis; daarachter staat de tekst: “Maak een nieuwe marker aan”. Klik op de tekst. Het programma wijst u door naar de marker aanmaken pagina. U kunt nu de marker aanmaken. STAP1: Vul uw adres in en de plaatsnaam. En klik op “ZOEK”. Uw marker wordt nu weergegeven op de kaart. STAP2: Vul een naam in voor uw marker. STAP 3: Kies een categorie; bij voorkeur de categorie die u net heeft aangemaakt. STAP 4: Kies een icoon die bij uw marker past. STAP 5: Klik op de MARKER AANMAKEN link en als u het invullen juist heeft gedaan, krijgt u de melding dat de marker succesvol is aangemaakt.


Youmap

Klik nu op de GA TERUG link rechts boven in het scherm. Uw wordt terugverwezen naar de marker beheer pagina. Klik nu links onderin het scherm op de naar website link, naast het plaatje van het huisje. Uw wordt automatisch uitgelogd en doorverwezen naar de homepagina van Youmap. Als u de vorige stappen goed heeft doorlopen dan ziet u de categorie die u net heeft aangemaakt in het linkermenu staan. Klik op de categorie en u ziet uw marker.


Ja Nee


Ja Nee

Zo ja, kunt u een beschrijving geven van deze fout(en)? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Youmap -‐ Michel Kempers -‐ 2010 91

Youmap

3: Waren alle knoppen en opties gemakkelijk te vinden? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 4: Vond u dat u veel stappen moest nemen om tot het resultaat te komen? • •

Ja Nee

Zo nee, kunt u aangeven hoe dat kan verbeteren? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. 5: Heeft u verder nog vragen of opmerkingen over de opdracht? ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. ………………….………………….………………….………………….………………….…………………………………………….. Youmap -‐ Michel Kempers -‐ 2010 92

Youmap

Afsluitende vragen: Hieronder staan een aantal beweringen, geeft u uw mening over de beweringen door ze te beoordelen van mee oneens tot mee eens. Vraag:

Mee oneens

Mee eens

1. De tekst is goed leesbaar.

O

O

O

O

2. De iconen zijn herkenbaar.

O

O

O

O

3. De vormgeving, plaatsing van items is con-‐ sequent.

O

O

O

O

O O O

4. De vormgeving past bij de website.

O

O

O

O

5. De website is overzichtelijk.

O

O

O

O

6.De website is logisch ingedeeld.

O

O

O

O

O O O

7. De navigatie (menu’s) zijn duidelijk in ge-‐ bruik. 8. De navigatie is logisch.

O

O

O

O

O

O

O

O

O

9. Ik kan gemakkelijk mijn weg vinden op de website.

O

O

O

O

O O

10. Het doel van de website is duidelijk.

O

O

O

O

11. Mijn eerste indruk van de website is goed. 12 Mijn oordeel over de website is goed.

O

O

O

O

O

O

O

O

13. Ik snap de website en ik vind het een nuttig systeem. 14. In de toekomst zou ik gebruik maken van het systeem. Bedankt voor het meedoen aan de test.

O

O

O

O

O O O O

O

O

O

O

O

Opmaak

Vormgeving

Werking

Algemeen


Youmap

Bijlage J -‐ Screens Briels Nieuwsland Deze bijlage toont een tweetal pagina’s met gemeentelijke informatie die ook getoond zou kunnen worden in het Youmap systeem.


Youmap


Youmap

Bijlage K -‐ Algemene info Westvoornse Courant B.V. Een bron waaruit kan worden afgeleid welke informatie wordt getoond in regoniale kranten en hoeveel lezers deze hebben. Al meer dan 28 jaar is de Westvoornse Courant een begrip in de omgeving. Niet alleen inwo-‐ ners uit Oostvoorne en Rockanje, maar ook uit Brielle, Tinte, Vierpolders en Zwartewaal kij-‐ ken wekelijks uit naar hun Westvoornse Courant. De Westvoornse Courant is een niet meer weg te denken krant in de regio. Eenmaal per week brengt het gratis huis-‐aan-‐huis blad het laatste nieuws uit de omgeving bij de inwo-‐ ners. De Westvoornse Courant staat dichtbij de lezers. In de Westvoornse Courant leest u bijna ALLES wat er die week is gebeurd in Oostvoorne, Rockanje, Brielle, Tinte, Vierpolders en Zwartewaal. Naast plaatselijke nieuwtjes, leest u er ook interessante achtergrondartike-‐ len, familieberichten, sportnieuws, muziek en cultuur en nieuws en advertenties van winke-‐ liers en ondernemingen. Uit onderzoek is gebleken dat de Westvoornse Courant de hoogste leesdichtheid heeft van alle kranten in de regio! 97% van de inwoners leest de Westvoornse Courant.


Youmap

Bijlage L – Navigatie & usablity eisen De 10 eisen voor navigatie en usability in het onderzoek zijn gekozen om de applicaties die zijn onderzocht te beoordelen op een manier die zich houdt aan vooraf gestelde doelen. De punten zijn bepaald door organisaties die zich verdiept hebben in de onderwerpen. Door deze punten te hanteren in het onderzoek is geprobeerd om een beeld te scheppen van de producten op een manier die zich houdt aan bepaalde doelen.

Navigatie eisen 1 -‐ Zichtbaar Het menu moet ten alle tijden zichtbaar zijn voor gebruikers. Ook de plaatsing van het menu is hierbij belangrijk. 2 -‐ Intuïtief Het menu moet opgebouwd zijn op een manier die logisch is voor gebruikers, ze moeten zonder hulp of nadenken kunnen navigeren. De opties moeten als vanzelfspreken gezien worden. 3 -‐ Contextgevend Het menu begeleidt gebruikers door de applicatie heen. Bij het kiezen van een menu item worden gerelateerde opties getoond aan de gebruiker. 4 -‐ Consistent Consistentie is erg belangrijk voor gebruikers. Door consequent te zijn met items kunnen gebruikers die vaker gebruik maken van de applicatie met steeds meer gemak werken. Ze weten wat een bepaalde functionaliteit gaat doen omdat de bij een soort gelijke functionali-‐ teit hetzelfde werkt. 5 -‐ Permanent Het menu moet altijd in beeld zijn en altijd op dezelfde locatie op de pagina. 6 -‐ Passend Het uiterlijk en de werking van het menu moet passen bij de applicatie. Voor een serieuze website is het niet wenselijk om een menu te hebben met 20 verschillende kleuren. Youmap -‐ Michel Kempers -‐ 2010 97

Youmap

7 -‐ Uitbreidbaar Een statisch menu is niet wenselijk voor producten die een variabele inhoud hebben. Als er items worden toegevoegd of verwijderd, moet het menu op een eenvoudige manier, of zelfs automatisch aanpassen. 8 -‐ Niet hinderlijk Het menu moet de gebruiker niet hinderen in het gebruik. Het menu moet bijvoorbeeld niet over belangrijke items vallen op het scherm, geen dode links bevatten en ook is het hinder-‐ lijk als het menu meerdere kanten op opent door verkeerde plaatsing op de pagina. 9 -‐ Gecoördineerd Het menu is ontworpen en opgebouwd op een manier die gebruikers zo goed mogelijk helpt in het navigeren. Het menu is erg belangrijk in een applicatie. Daarom is het van belang dat er geen onverwachte acties gebeuren als het menu gebruikt wordt. 10 -‐Toegankelijk Het menu moet voor elke gebruiker toegankelijk zijn. Locatie is erg belangrijk. Er kunnen bepaalde menu items worden verborgen als een gebruiker geen rechten heeft om deze te gebruiken..

Deze punten zijn overgenomen van de Nielsen Norman Group. De Nielsen Norman Group is een bureau opgericht door experts op het gebied van usability. Met de adviezen die zij uit-‐ geven trachten zij internetapplicaties beter te maken in het gebruik. Doordat deze mensen expert zijn in hun vakgebied kan worden vertrouwd op de zaken die zij presenteren. Navigatie is een onderdeel van usability maar in het onderzoek heb ik navigatie apart bena-‐ derd. Navigatie is een belangrijk onderdeel van een webpagina. Werkt de navigatie niet, of niet naar behoren dan gaan gebruikers op zoek naar andere producten die wel goed werken. Het belang van navigatie is van dergelijke omvang dat het een eigen onderdeel in het onder-‐ zoek heeft.

Usability eisen De uitleg van deze eisen zijn letterlijk overgenomen van de website: http://www.w3use.nl/usability/goudenregels.html 1. Herkenbaarheid en bedrijfsinformatie: maak duidelijk wie u bent en wat u doet. ◦

Plaats een uithangbord op elke webpagina: uw logo (het liefst linksboven) plus een informatieve slagzin. Gebruik op andere pagina's dan de homepage een duidelijke paginatitel boven de tekst die het doel of de inhoud van de pagina omschrijft.

◦

Groepeer uw bedrijfsinformatie op aparte servicepagina's. Maak deze bereikbaar Youmap -‐ Michel Kempers -‐ 2010 98

Youmap

via een link 'Over ons' of 'Over bedrijfsnaam'. 2. Navigatie: plaats een standaard primaire navigatiestructuur op elke pagina. ◦

Plaats op elke webpagina consistent dezelfde primaire navigatiestructuur.

◦

Bied de bezoeker overal een weg terug naar de homepage met de tekstlink 'Home'. Zorg er ook voor dat het logo een hyperlink is, die leidt naar de homepage. Beperk u tot 7 plus of min 2 hyperlinks in uw primaire navigatiestructuur.

◦

3. Snelheid: toon uw webpagina's binnen 10 seconden. Beperk de omvang van de homepage tot maximaal 50 kB, inclusief scripts,

◦

stylesheet en multimediabestanden. Andere pagina's mogen eventueel zwaarder worden, maar denk over opsplitsing bij erg grote pagina's. Zorg voor splitsing van opmaak en inhoud voor optimale code. Gebruik hiervoor

◦

de webstandaarden (X)HTML en CSS (als extern stylesheet). 4. Zoeken: help uw bezoekers te vinden wat zij zoeken. Plaats een zoekdienst boven in elke webpagina. Houd deze eenvoudig: één wit

◦

zoekveld met ruimte voor 25-‐30 tekens en een knop met het opschrift 'Zoek' of 'Zoeken'. Plaats op uw website servicepagina's met een faq en een wegwijzer (site map),

◦

bereikbaar vanuit de primaire navigatiestructuur. 5. Opmaak: maak uw webpagina's optimaal leesbaar op elk beeldscherm. ◦

Gebruik een vloeibaar ontwerp (procentuele codering van tabellen en layers). U kunt de pagina het beste optimaliseren voor een minimale resolutie van 800×600, maar er tevens voor zorgen dat de pagina de volle schermbreedte benut in elke andere resolutie.

◦

Zorg voor goede leesbaarheid van de pagina op een beeldscherm. Hanteer goed contrast tussen voor-‐ en achtergrondkleur; gebruik liefst een schreefloos let-‐ tertype en schaalbare tekengrootte.


Youmap

6. Schrijfstijl: geef zoveel mogelijk informatie met zo weinig mogelijk woorden. ◦

Schrijf kort: schrap rigoureus alle overbodige tekst.

◦

Schrijf de belangrijkste informatie eerst: in de titelbalk (), in de paginatitel en in de kopteksten. Plaats de informatieve kernbegrippen aan het begin van elke koptekst, alinea, zin en hyperlink. Zo wordt uw pagina optimaal scanbaar. Maak uw tekst geschikt om te scannen: gebruik hiervoor accenten in de vorm van <br /> <br /> ◦<br /> <br /> koppen (<h1>...<h6>), benadrukte tekst (<strong>) en opsommingen (<u>en <ol>). Beperk hierbij de paginalengte tot 2 à 3 beeldschermen (1000-‐1600 pixels). 7. Hyperlinks: geef uw informatie context en diepgang met duidelijke links. Maak uw hyperlinks informatiedragend. Gebruik de hyperlinktekst om aan te <br /> <br /> ◦<br /> <br /> geven waar de bezoeker terecht zal komen. Codeer hyperlinktitels om extra informatie aan uw hyperlinks mee te geven (<a <br / rel="nofollow"> <br /> ◦<br /> <br /> href="..." title="korte beschrijving van de hyperlink">). Maak hyperlinks duidelijk herkenbaar ten opzichte van de omliggende tekst. Ge-‐<br /> <br /> ◦<br /> <br /> bruik een afwijkende kleur voor hyperlinks (liefst de standaardkleur blauw) en laat hyperlinks onderstreept. Zorg ervoor dat bezochte hyperlinks herkenbaar zijn in een afwijkende kleur (liefst de standaardkleur paars). 8. Interactie: geef surfers de mogelijkheid zelf dingen te doen. Maak belangrijke interactieve elementen van de site direct bruikbaar op de home-‐<br /> <br /> ◦<br /> <br /> page. Denk in elk geval aan zoeken en bijvoorbeeld aan inloggen. Laat de gebruikers zien wat ze doen. Maak de formulieren zo eenvoudig mogelijk <br /> <br /> ◦<br /> <br /> en geef na iedere actie van de gebruiker feedback over wat er wel of niet goed is gegaan. Maak internetters duidelijk welk type reactie zij binnen welke termijn kunnen <br /> <br /> ◦<br /> <br /> verwachten. Organiseer dat de mensen aan 'uw kant' van de interactie de toegezegde service en optimale kwaliteit bieden. 9. Accessibility: maak uw website toegankelijk voor iedereen. ◦<br /> <br /> Maak gebruik van alternatieve teksten voor afbeeldingen zodat screenreaders en Youmap -‐ Michel Kempers -‐ 2010 100 <br /> <br /> <br /> <br /> <br /> <br /> Youmap <br /> <br /> spraakbrowsers ermee overweg kunnen (<img src="..." alt="beschrijving van de afbeelding">). Zorg ervoor dat de primaire navigatiestructuur en de informatie op de pagina altijd <br /> <br /> ◦<br /> <br /> ook als tekstinformatie aanwezig is. Zorg indien mogelijk voor een complete tekst-‐only versie van de site. Maak gebruik van standaard (X)HTML-‐coderingen voor kopteksten en benadrukte <br /> <br /> ◦<br /> <br /> tekst. Plaats nooit meer HTML-‐opmaakcodes zoals <font> en <b> in uw schermteksten, maar regel dit via CSS (in een externe stylesheet). 10. ◦<br /> <br /> Afbeeldingen en multimedia: gebruik ze spaarzaam en doelgericht. Beperk het gebruik van afbeeldingen liefst tot 5 à 15% van het oppervlak van de webpagina, ter illustratie van belangrijke onderdelen van de website. <br /> <br /> ◦<br /> <br /> Gebruik alleen pictogrammen indien deze niets te raden overlaten. Doe dit door bij (zelfgemaakte) pictogrammen ook een tekstlabel in de stijl van de site te plaatsen. <br /> <br /> ◦ <br /> <br /> Zorg ervoor dat er een tekstalternatief beschikbaar is voor multimediainhoud. Ge-‐ bruik liever geen multimediatechnieken voor de primaire navigatie.<br /> <br /> <br /> <br /> Youmap -‐ Michel Kempers -‐ 2010 101 <br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/youmap-colofon-michel-kempers-afstudeerder-hogeschool-rotter" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Youmap. Colofon. Michel Kempers. Afstudeerder Hogeschool Rotterdam Opleiding: Media Technologie"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html>

Youmap. Colofon. Michel Kempers. Afstudeerder Hogeschool Rotterdam Opleiding: Media Technologie

Recommend Documents