WASCO - Webs & Apps Standaarden voor de Converserende Overheid

FUNCTIONELE ANALYSE

WEBSITE “#convGov in a box” Webs & Apps Standaarden voor de Converserende Overheid – WASCO

Vlaamse ICT Organisatie #convGov in a box

A-‐2

A. Revisies

Datum Versie Auteur Opmerkingen 05-‐04-‐2013 0.1a Bart Gysens Eerste outline, vaste elementen (elke pagina) 20-‐04-‐2013 0.1b Bart Gysens Eerste outline, vaste elementen (meeste pagina’s) 20-‐05-‐2013 0.1c.a Bart Gysens Eerste outline, start-‐, thema-‐ & detailpagina 26-‐05-‐2013 0.1d.a Bart Gysens Eerste outline, modules 29-‐05-‐2013 0.1c.b Bart Gysens Eerste outline, alternatieve toestellen 31-‐05-‐2013 0.1d.b Bart Gysens Eerste outline, modules 11-‐05-‐2013 0.1e Bart Gysens Eerste outline, modules 13-‐06-‐2013 0.1f Bart Gysens Detail outline, modules 28-‐06-‐2013 1.0 Bart Gysens Good practices, bijlagen Release document, first copy


B-‐3

B. Inhoudsopgave A. Revisies ............................................................................................................................................................ A-‐2 B. Inhoudsopgave .............................................................................................................................................. B-‐3 C. Over dit document ........................................................................................................................................ C-‐7 1. Doel van een functionele analyse ................................................................................................................................. C-‐7 2. Hoe gebruiken? ..................................................................................................................................................................... C-‐7 0) Algemene duiding ................................................................................................................................................... C-‐7 1) Mockups ...................................................................................................................................................................... C-‐7 2) Beschrijvingen per onderdeel ........................................................................................................................... C-‐8

3. Voorwaarden en restricties ............................................................................................................................................. C-‐8 4. Consortium ............................................................................................................................................................................. C-‐8

D. Situering van het project WASCO ............................................................................................................ D-‐9 1. Drie communicatieve evoluties die ons doen nadenken over onze nieuwe online toepassingen .... D-‐9 2. Overkoepelende visie op “de converserende ambtenaar” ............................................................................... D-‐10 3. Twee werelden die samen komen: OSLO + WASCO ........................................................................................... D-‐11 1) Wat is OSLO – Open Standaard voor Lokale Overheden? ................................................................... D-‐11 2) Hoe werken deze projecten samen? ............................................................................................................ D-‐12

E. Beginsituatie binnen onze organisatie ................................................................................................ E-‐13 F. Functionele analyse ................................................................................................................................... F-‐14 1. Algemene principes ......................................................................................................................................................... F-‐14 1) Gebruik van iconen .............................................................................................................................................. F-‐14 2) Gebruik van tekstuele links ............................................................................................................................. F-‐14

2. Overzicht van het eindresultaat ................................................................................................................................. F-‐15 3. Vaste elementen ................................................................................................................................................................ F-‐16 1) Elementen die op elke pagina staan ............................................................................................................. F-‐16 a. Overzicht ................................................................................................................................................................................. F-‐16 b. Het logo .................................................................................................................................................................................... F-‐17 c. De snelle links ........................................................................................................................................................................ F-‐17 d. De hoofdnavigatie ............................................................................................................................................................... F-‐18 e. De zoekfunctie ....................................................................................................................................................................... F-‐19 f. De hoofding met portaalfunctie ...................................................................................................................................... F-‐20 g. Onze diensten / Dienstverlening > De AZ-‐gids ....................................................................................................... F-‐21 h. De voettekst / contactinformatie ................................................................................................................................. F-‐22 Integratie GoogleMaps .......................................................................................................................................................... F-‐22 Adresgegevens en andere relevante contactgegevens ........................................................................................... F-‐22 Openingsuren ............................................................................................................................................................................ F-‐22 Onze andere kanalen ............................................................................................................................................................. F-‐22 Snelle links (verplichte vermeldingen) ......................................................................................................................... F-‐22

2) Elementen die terugkeren op thema-‐ en detailpagina’s ..................................................................... F-‐23 a. Broodkruimels ...................................................................................................................................................................... F-‐23 b. Pagina delen ........................................................................................................................................................................... F-‐23 Sociale media: facebook ....................................................................................................................................................... F-‐23 Sociale media: twitter ............................................................................................................................................................ F-‐23 E-‐mail ........................................................................................................................................................................................... F-‐23 Bookmark ................................................................................................................................................................................... F-‐23 Afdrukken ................................................................................................................................................................................... F-‐23

4. Informatiearchitectuur .................................................................................................................................................. F-‐24 1) Globale inhoudsstructuur ................................................................................................................................. F-‐24 2) De startpagina ....................................................................................................................................................... F-‐25 3) De themapagina .................................................................................................................................................... F-‐26 4) De detailpagina ..................................................................................................................................................... F-‐27


B-‐4

5) Extra: WASCO.Connector Open Data ........................................................................................................... F-‐29 5. Alternatieven voor tablet en smartphone ............................................................................................................. F-‐31 1) Smartphone: iPhone, Android-‐, Windows(8)-‐toestellen, Black Berry, ... ..................................... F-‐31 2) Eventuele tablet-‐versie: iPad, Android-‐tablet, Windows-‐tablet, ... ................................................. F-‐32

6. Modules ................................................................................................................................................................................. F-‐33 0) Algemene richtlijnen bij de implementatie / ontwikkeling ............................................................... F-‐33 1) Bedrijvengids ......................................................................................................................................................... F-‐34 a. Doelstelling ............................................................................................................................................................................. F-‐34 b. Beschikbaarheid .................................................................................................................................................................. F-‐34 c. Adres(sen) ............................................................................................................................................................................... F-‐34 d. Beschrijving ........................................................................................................................................................................... F-‐34 e. Schermafbeelding ................................................................................................................................................................ F-‐35

2) Bibliotheek .............................................................................................................................................................. F-‐36 a. Doelstelling ............................................................................................................................................................................. F-‐36 b. Beschikbaarheid .................................................................................................................................................................. F-‐36 c. Adres(sen) ............................................................................................................................................................................... F-‐36 d. Beschrijving ........................................................................................................................................................................... F-‐36 e. Schermafbeelding ................................................................................................................................................................ F-‐37

3) Dienstverlening -‐> Productencatalogus (PC) ........................................................................................... F-‐38 a. Doelstelling ............................................................................................................................................................................. F-‐38 b. Beschikbaarheid .................................................................................................................................................................. F-‐38 c. Adres(sen) ............................................................................................................................................................................... F-‐38 d. Beschrijving ........................................................................................................................................................................... F-‐38 e. Schermafbeelding ................................................................................................................................................................ F-‐39

4) Evenementen ......................................................................................................................................................... F-‐40 a. Doelstelling ............................................................................................................................................................................. F-‐40 b. Beschikbaarheid .................................................................................................................................................................. F-‐40 c. Adres(sen) ............................................................................................................................................................................... F-‐40 d. Beschrijving ........................................................................................................................................................................... F-‐40 e. Schermafbeelding ................................................................................................................................................................ F-‐41

5) Huisvuilophaling .................................................................................................................................................. F-‐42 a. Doelstelling ............................................................................................................................................................................. F-‐42 b. Beschikbaarheid .................................................................................................................................................................. F-‐42 c. Adres(sen) ............................................................................................................................................................................... F-‐42 d. Beschrijving ........................................................................................................................................................................... F-‐42 e. Schermafbeelding ................................................................................................................................................................ F-‐43

6) Meldingen ................................................................................................................................................................ F-‐44 a. Doelstelling ............................................................................................................................................................................. F-‐44 b. Beschikbaarheid .................................................................................................................................................................. F-‐44 c. Adres(sen) ............................................................................................................................................................................... F-‐44 d. Beschrijving ........................................................................................................................................................................... F-‐44 e. Schermafbeelding ................................................................................................................................................................ F-‐45

7) Mijn buurt ................................................................................................................................................................ F-‐46 a. Doelstelling ............................................................................................................................................................................. F-‐46 b. Beschikbaarheid .................................................................................................................................................................. F-‐46 c. Adres(sen) ............................................................................................................................................................................... F-‐46 d. Beschrijving ........................................................................................................................................................................... F-‐46 e. Schermafbeelding ................................................................................................................................................................ F-‐47

8) Mijn dossier ............................................................................................................................................................ F-‐48 a. Doelstelling ............................................................................................................................................................................. F-‐48 b. Beschikbaarheid .................................................................................................................................................................. F-‐48 c. Adres(sen) ............................................................................................................................................................................... F-‐48 d. Beschrijving ........................................................................................................................................................................... F-‐48 e. Schermafbeelding ................................................................................................................................................................ F-‐49

9) Nieuws ...................................................................................................................................................................... F-‐50 a. Doelstelling ............................................................................................................................................................................. F-‐50 b. Beschikbaarheid .................................................................................................................................................................. F-‐50 c. Adres(sen) ............................................................................................................................................................................... F-‐50


B-‐5

d. Beschrijving ........................................................................................................................................................................... F-‐50 e. Schermafbeelding ................................................................................................................................................................ F-‐51

10) Openbare werken .............................................................................................................................................. F-‐52 a. Doelstelling ............................................................................................................................................................................. F-‐52 b. Beschikbaarheid .................................................................................................................................................................. F-‐52 c. Adres(sen) ............................................................................................................................................................................... F-‐52 d. Beschrijving ........................................................................................................................................................................... F-‐52 e. Schermafbeelding ................................................................................................................................................................ F-‐53

11) Onderwijs .............................................................................................................................................................. F-‐54 a. Doelstelling ............................................................................................................................................................................. F-‐54 b. Beschikbaarheid .................................................................................................................................................................. F-‐54 c. Adres(sen) ............................................................................................................................................................................... F-‐54 d. Beschrijving ........................................................................................................................................................................... F-‐54 e. Schermafbeelding ................................................................................................................................................................ F-‐55

12) Verenigingen ....................................................................................................................................................... F-‐56 a. Doelstelling ............................................................................................................................................................................. F-‐56 b. Beschikbaarheid .................................................................................................................................................................. F-‐56 c. Adres(sen) ............................................................................................................................................................................... F-‐56 d. Beschrijving ........................................................................................................................................................................... F-‐56 e. Schermafbeelding ................................................................................................................................................................ F-‐57

G. Bijlagen ......................................................................................................................................................... G-‐58 1. Navigatiestructuur .......................................................................................................................................................... G-‐58 2. Good practices ................................................................................................................................................................... G-‐59 1) Liverpool City Council, UK : http://www.liverpool.gov.uk ................................................................ G-‐59 a. Algemeen principe ............................................................................................................................................................. G-‐59 b. Troeven ................................................................................................................................................................................... G-‐59

2) State of Alabama, USA : http://www.alabama.gov ................................................................................ G-‐60 a. Algemeen principe ............................................................................................................................................................. G-‐60 b. Troeven ................................................................................................................................................................................... G-‐60

3) Stad Amsterdam -‐ Stadsdeel Noord, Nederland : http://www.noord.amsterdam.nl ............ G-‐61 a. Algemeen principe ............................................................................................................................................................. G-‐61 b. Troeven ................................................................................................................................................................................... G-‐61

4) Welcome to GOV.UK : http://www.gov.uk ................................................................................................ G-‐62 a. Algemeen principe ............................................................................................................................................................. G-‐62 b. Troeven ................................................................................................................................................................................... G-‐62

3. Gebruik van de interactieve mockup met FlairBuilder Viewer .................................................................... G-‐63 4. Trefwoordenlijst ............................................................................................................................................................... G-‐64 5. Bronvermeldingen ........................................................................................................................................................... G-‐77 1) Gebruik van iconen .............................................................................................................................................. G-‐77 2) Usability ................................................................................................................................................................... G-‐77 3) Dienstverlening / conversatie ........................................................................................................................ G-‐77

6. Overzicht van alle digitale bestanden ..................................................................................................................... G-‐78 1) Functionele analyse (dit document) ............................................................................................................ G-‐78 a. Word-‐versie : ........................................................................................................................................................................ G-‐78 b. PDF-‐versie : ........................................................................................................................................................................... G-‐78

2) Interactief mockup-‐bestand ............................................................................................................................ G-‐78 a. FlairBuilder-‐versie : ........................................................................................................................................................... G-‐78 b. PDF-‐versie : ........................................................................................................................................................................... G-‐78

3) Navigatiestructuur ............................................................................................................................................... G-‐78 a. Excel-‐versie : ......................................................................................................................................................................... G-‐78 b. PDF-‐versie : ........................................................................................................................................................................... G-‐78 c. Google Sheet : ........................................................................................................................................................................ G-‐78

4) Trefwoordenlijst ................................................................................................................................................... G-‐78 a. Excel-‐versie : ......................................................................................................................................................................... G-‐78 b. PDF-‐versie : ........................................................................................................................................................................... G-‐78 c. Google Sheet : ........................................................................................................................................................................ G-‐78


B-‐6


C-‐7

C. Over dit document

Voor je verder gaat met het in gebruik nemen van dit beschrijvend document, willen we graag even wat duiding geven bij de inhoud van dit dossier.

1. Doel van een functionele analyse

Als je met het bouwen van toepassing als een website of mobiele applicatie begint, is het voor ieder van ons vaak vanuit een idee uit iemands hoofd. Het één op één op papier brengen van zulk een idee is niet altijd even evident en de systematiek van de functionele analyse kan ons helpen om eenduidig en goed omschreven het idee helder te stellen. Elke projectmanager weet dat het gebruiken van een document als dit, noodzakelijk is voor de goede gang van zaken en de kans op slagen sterk verhoogt. Enerzijds is het een indicator om een goede controle te hebben over de vraag en de resultaten, ook het budget wordt via deze werkwijze goed bewaard. Anderzijds krijg je als klant reeds bij aanvang een goed beeld van het uiteindelijke resultaat dat gebouwd zal worden. Je kan het een beetje vergelijken met het bouwen van een huis. Je vraagt aan de architect een huis met 2 slaapkamers, een living, keuken en badkamer. Als de aannemer zo maar aan de slag zou gaan zonder plan en zonder dat te bespreken zou het niet zo helder zijn waar je uiteindelijk in zal gaan wonen...

2. Hoe gebruiken?

De functionele analyse bestaat uit verschillende onderdelen.

0) Algemene duiding

Het bouwen van een website of mobiele applicatie wordt vaak gekaderd in een groter geheel. Telkens worden er bruggen gebouwd tussen de verschillende diensten binnen een organisatie op het vlak van IT en communicatie. In heel wat organisaties mist het vandaag nog aan een interne informatiearchitect, de persoon die goed op de hoogte is van het interne digitale landschap, maar ook de organisatie kent op het vlak van haar doelstelling en strategie, vertaald door de communicatie, zowel intern als extern. Daarom achten we het in de beginfase altijd opportuun om voor de gebruikers van dit document een goed kader te scheppen waarin ze het project zullen verwezenlijken. Het geeft een onderbouw aan de uitwerking van het project en zorgt daarmee voor een beter fundament bij het maken van keuzes en aanreiken van oplossingen.

1) Mockups

Niets is zo sterk als visuele voorstellingen van het eindresultaat, dat is ook de filosofie die schuilt achter de ‘schetsen’ die je in dit document ruimschoots terugvindt. De tekeningen geven een functionele en structurele werking van de schermen weer. Hierbij wordt geen rekening gehouden


C-‐8

met huisstijl, grafische opmaak of andere vormelijke elementen. Deze naakte structuur is louter functioneel en mag dus niet geïnterpreteerd worden als een grafisch ontwerp.

2) Beschrijvingen per onderdeel Naast de mockups wordt er voor elk onderdeel een uitvoerige beschrijving gemaakt. Op deze manier worden alle handelingen die gebruikers op de website of binnen de mobiele applicatie doen, besproken en vast gelegd wat er concreet technisch en vormelijk voorzien moet worden. De beschrijvingen zijn het resultaat van de uitwerking van de mockups en zijn bijgevolg goed doorgesproken met het begeleidende team binnen de organisatie. In de beschrijving zal een eerste aanzet worden gegeven om de toepassing binnen de IT-‐infrastructuur en/of het communicatieplan te koppelen. Dit laatste is natuurlijk niet volledig generiek omdat de verschillende organisaties een eigen beginsituatie hebben. We raden daarom aan om in het uiteindelijke document het luik ‘Beginsituatie’ zelf verder aan te vullen met een zo duidelijk mogelijk beschrijving van bestaande toepassingen, databanken, processen... gerelateerd aan de implementatie van dit project.

3. Voorwaarden en restricties

Deze functionele analyse is tot stand gekomen door een intensieve samenwerking binnen het consortium van het WASCO-‐project, opgestart door V-‐ICT-‐OR, de Vlaamse ICT Organisatie. Met dit document willen we een standaard neerzetten binnen de digitale communicatie van de lokale overheden. Het toepassen van deze standaard zorgt ervoor dat het resulterende project conform de gemaakte afspraken wordt gebouwd en daarmee ook de standaarden volgt om verdere implementatie binnen de organisatie te vergemakkelijken. Projecten die uitgewerkt werden met deze standaard mogen de status VlaVirGem-‐approved dragen na een revisie van de verantwoordelijke projectbegeleiders. Het label is voor de organisatie en zijn gebruikers een garantiekeurmerk, dat de voorwaarden omtrent concept, ontwikkeling en ondersteuning bekrachtigt. Dit document werd met de grootste zorg samengesteld en door diverse experten gereviseerd. V-‐ICT-‐OR vrijwaart zich daarom van enige implementatie-‐ of ontwikkelingsproblematiek binnen de opgestarte projecten. Meer informatie over VlaVirGem vindt je op de website van V-‐ICT-‐OR: http://www.v-‐ict-‐or.be

4. Consortium


D-‐9

D. Situering van het project WASCO

1. Drie communicatieve evoluties die ons doen nadenken over onze nieuwe online toepassingen

De voorbije jaren kende het Internet een enorme evolutie. De tijd dat er enkel nog met eenvoudige html of statische toepassingen werd gewerkt is voorbij. We merken dagelijks dat die evolutie een ware revolutie aan het worden is en dat de toekomst nog steeds elke dag een beetje realiteit aan het worden is. Het Internet is overal aanwezig en de mensen zijn meer en meer online; een nieuwe factor die ons als dienstverlener in een nieuwe dimensie plaatsen. Naast de integratie van het Internet in het dagelijkse leven, hebben ook de nieuwe media langzaam hun plaatst opgeëist in het geheel van communicatie. Sociale netwerken hebben hun kinderziekten aan de zijkant kunnen werpen en zijn nu voor heel wat mensen een volwaardig communicatiekanaal geworden. Met de adaptatie van deze trends hebben mensen geleerd via deze wegen te converseren. Het vergt een aanpassing in de manier waarop men sociaal met elkaar omgaat en de snelheid waarmee men van gedachten wisselt is enorm toegenomen. Een verwachting die van ons, als dienstverleners, de nodige aandacht vraagt. Een derde factor die ons vandaag dwingt tot nadenken over nieuwe werkmethodes is de technologische vooruitgang. Het is het tijdperk aan het worden van mobiliteit en bereikbaarheid. De opmars van toestellen als een tablet of de smartphone zorgt er voor dat de dienstverlening naar een volgend niveau wordt gebracht. De burger veracht snellere actie en is niet meer tevreden met eenrichtingscommunicatie. De interactie wordt stilaan afgedwongen door de community die ontstaan door de toegankelijkheid van alle informatie. Deze tijd, waar we nu als dienstverlener voor staan, is een open veld van mogelijkheden. Een gezonde mix van creativiteit, realisme en een open mind zal garant moeten staan voor een bewustwordingsproces dat binnen de organisaties moet doorsijpelen in alle richtingen.


D-‐10

2. Overkoepelende visie op “de converserende ambtenaar”

Ken je nog het beeld van de collega’s, een serie uit de jaren tachtig. Het was een stereotype beeld, dat aangaf dat een bureau op een overheidsdienst een stoffige ruimte was met groen meubilair en ijzeren bureaus. Ook het beeld van de archivaris, Jomme Dockx met de grijze stofjas, was sprekend door zijn archief dat bestond uit kaartjes in een bakje, netjes geordend. Dit beeld is gelukkig een ver verleden en niet langer een realiteit. Maar nu staat die digitale revolutie op de deur van de ambtenaar te kloppen. Heel wat vragen komen naar boven, want een organisatie als een lokale overheid heeft vaak te maken met verschillende snelheden. Geen verandering zonder de bestuurlijke ondersteuning. En geen verandering zonder de creatieve zonderlingen die iedereen uitdagen in nieuwe trajecten. En die uitdagingen zullen ons allemaal in nieuwe processen en werkmethodes dwingen. Of beter gezegd: ze zullen ons werking optimaliseren. De grootste omschakeling waar we als dienstverlener voor staan is dat we niet langer uitsluitend communiceren. De tijd dat een website bestond uit louter informatiegerichte inhoud is voorbij. Als je als burger een online dienstverlening wil gebruiken, dan heb je interactie nodig. We zullen moeten leren converseren. En daar hebben we de juiste werkmiddelen voor nodig. In een notendop zal het neerkomen op technologie, kennis en ondersteuning. Onze burgers zijn online, de converserende ambtenaar is dat ook. Samen voeren ze een conversatie die tot een snelle afhandeling van de vraag zal leiden. Een utopie? Ja, zeker. Maar de bouwstenen liggen nu klaar om het te realiseren. #convGov : Hashtag ‘convGov’


D-‐11

3. Twee werelden die samen komen: OSLO + WASCO

1) Wat is OSLO – Open Standaard voor Lokale Overheden?

Burgers en bedrijven klagen terecht over een inefficiënte overheid. Vaak moeten gegevens telkens opnieuw worden ingediend wanneer men aanklopt bij verschillende diensten. De wil om het beter te doen is er, doch het lijkt bijzonder moeilijk om gegevens met elkaar te delen. Om burgers en bedrijven beter van dienst te zijn, moet die overheid dan ook werk maken van een geïntegreerde en organisatie brede elektronische dienstverlening. Dat is echter geen makkelijke klus. De diverse informaticasystemen werden onafhankelijk van elkaar ontwikkeld en begrijpen elkaar hierdoor niet. De sleutel zit hem dan ook in het evolueren naar standaardisatie van data. Wanneer dit bereikt wordt kunnen toepassingen makkelijker gegevens uit wisselen en bereikt men hierdoor automatisch een hogere efficiëntie. Dan kan het telkens bevragen van burgers en bedrijven, over gegevens die men eigenlijk al heeft, tot het verleden behoren. Het evolueren naar een zekere eenvormigheid in datastructuren bereikt men via consensus met de industrie en het stimuleren van een open forum voor discussie. Met dit project wil de Vlaamse ICT Organisatie dé datastandaard ontwikkelen voor lokale besturen. Bij de eerste fase van dit project, de zgn. inventarisatiefase worden de bestaande authentieke gegevensbronnen en veelgebruikte datamodellen, waarmee lokale overheden momenteel werken, geïnventariseerd. Dit gebeurt in werkgroepen. Hierin zitten zowel de verschillende belanghebbende uit de lokale besturen, de Vlaamse overheid, federale overheid en diverse consortiumpartners. Het resultaat geeft een overzicht van de verschillende problemen m.b.t. gegevensintegratie en toepassing van authentieke bronnen en hun impact op de werking van lokale besturen. Het kernprobleem situeert zich op het niveau van de kern data m.b.t. personen, organisaties en adressen. De datastandaard focust zich dan ook op deze entiteiten. Standaardisatie moet het in de toekomst mogelijk maken om gegevens uit te wisselen tussen verschillende toepassingen (binnen en buiten de lokale besturen). V-‐ICT-‐OR wil geen solitaire Vlaamse standaard uitwerken, maar toetst deze ook aan de internationale standaarden. Het is de bedoeling dat deze OSLO-‐standaard maximaal afgestemd is op de web standaarden (W3C) en ander wereldwijd onderzoek. Een finale doorbraak wordt verwacht tegen mei 2013. Het technisch traject wordt gefaciliteerd door V-‐ICT-‐OR en iMinds, samen met toonaangevende spelers uit de industrie. In het consortium zetelen Belgacom, CIPAL, CORVE, Digipolis Gent, Digipolis Antwerpen, Fusebox, Infront, Kortrijk, Remmicom en Schaubroeck. Projectleiding: Raf Buyle – raf.buyle@v-‐ict-‐or.be


D-‐12

2) Hoe werken deze projecten samen?

Om interfaces in het WASCO-‐project te voorzien van data, zal er via een transparant systeem, gecommuniceerd moeten worden door de toepassingen. Dit vertaald zich in een te hanteren open standaard die in het OSLO-‐project wordt gerealiseerd. In praktijk zal men regelmatig in een typische opstelling komen van back-‐, mid-‐ en front-‐office. De data-‐architectuur is van die aard dat we spreken over (lokale) authentieke bronnen, verrijkte data en business-‐logica die de processen vertalen. Het is een win-‐win-‐situatie voor alle stakeholders om in deze setup te kunnen werken.


E-‐13

E. Beginsituatie binnen onze organisatie

Maak hier een opsomming van de toepassingen, databanken, processen, ... gerelateerd aan de implementatie van dit project. Je kan dat doen met behulp van onderstaande tabel. Tabel: Informatiearchitectuur -‐ inventaris Naam van de toepassing Leverancier Korte beschrijving Contactpersonen Te integreren ja / neen / nog niet Je mag natuurlijk verder aanvullen met extra informatie die nuttig is om zowel de leveranciers als de andere betrokkenen binnen je organisatie zo goed mogelijk te informeren.


F-‐14

F. Functionele analyse

1. Algemene principes

1) Gebruik van iconen In het concept werden geen grafische elementen gebruikt omdat die niet behoren tot een functioneel design of analyse. We hebben wel duidelijk geopteerd om de acties te ondersteunen met behulp van een veelbetekenend icoon. De combinatie van tekst en beeld werken in het geheel versterkend en maken de gebruikers nog sneller duidelijk wat het doel is achter een bepaalde link. Tevens wordt de herkenbaarheid van bepaalde iconen een nieuwe manier (of bestaande, maar vergeten / anders toegepaste) om de communicatie rond een dienstverlening zowel digitaal als analoog op elkaar af te stemmen. Het gebruik van het juiste icoon is dan primordiaal. Wij baseren onze keuze op de gratis iconen op de website van The Noun Project: http://thenounproject.com

2) Gebruik van tekstuele links Naast de gevestigde waarde van iconen om links te duiden, zal je in het concept vaak gewoon tekst zien als een aanklikbare link. De idee hierrond is de dingen zo eenvoudig mogelijk voor te stellen aan de bezoeker. Het heeft weinig zin een link grafisch perfect te verwerken als je het gevoel van aanklikbaarheid kwijt speelt op deze manier. Wij raden dan ook aan omzichtig om te springen met de manier waarop men links verwerkt in het grafisch ontwerp en in het achterhoofd te houden: liever duidelijk en met woorden, dan zonder woorden en betekenis.


F-‐15

2. Overzicht van het eindresultaat

Hier zie je alvast een overzicht van het eindresultaat van de startpagina. Afbeelding: Mockup van de volledige startpagina


F-‐16

3. Vaste elementen

Als een surfer doorheen de website navigeert zal hij sommige delen op het scherm telkens opnieuw zien. Deze elementen vormen een basis als herkenningspunten binnen het totale project.

1) Elementen die op elke pagina staan

a. Overzicht Afbeelding: Startpagina met in het rood de blokken die op elke pagina staan


F-‐17

b. Het logo In het concept werd het logo rechtsboven geplaatst. Op deze manier maken we links plaats voor de snelle links die de surfer op een erg efficiënte manier snel tot zijn doel moet brengen. Het logo zelf is aanklikbaar en brengt de surfer terug naar de startpagina van de website. Tip toegankelijkheid: vergeet de tooltip niet op het logo “Logo – Terug naar de startpagina”

c. De snelle links

Een collectie van hyperlinks die de meest gevraagde informatie in het totale aanbod centraal bovenaan op een snelle manier ter beschikking stelt. De links die er nu in staan zijn op basis van de nodige meting van meest bezochte en bevraagde informatie geselecteerd. Dit proces dient continu gemonitord te worden via de analyse van de bezoekersgegevens. Huidige links:

• Contact Een paginaverwijzing (‘anchor’ of anker) naar het onderste gedeelte van de pagina; voor meer informatie omtrent de invulling zie het onderdeel “De voettekst / contactinformatie”;

• Mijn dossier Een link naar een webpagina waarop alle informatie samenkomt betreffende het persoonlijk dossier van een surfer; hij/zij dient hiervoor ingelogd te zijn; meer informatie vind je bij het onderdeel “Mijn dossier”;

• Dienstverlening Achter deze link wordt de producten-‐ en dienstencatalogus gepresenteerd, zijnde alle documenten, processen en diensten die vanuit de organisatie worden aangeboden; voor meer informatie kan je kijken naar het onderdeel “Dienstverlening / Producten-‐ & Dienstencatalogus”;

• Portaal De organisatie zal voor diverse doeleinden soms toch opteren om haar digitale communicatie niet via de standaard weg te voeren en hiervoor aparte projecten activeren, in dit blok wordt een eenvoudige opsomming gemaakt deze kanalen; het blok kan geanimeerd worden getoond of weg geklapt;

• Vergroot de tekst Om te voldoen aan de vereisten van AnySurfer dient onder andere de tekst vergroot te kunnen worden, we voorzien hiervoor één enkel alternatief dat op zich doeltreffend genoeg moet zijn.


F-‐18

d. De hoofdnavigatie De informatiestructuur binnen de website zal zich vooral vertaald zien in de navigatie. De structuur is volledig opgebouwd rond een dienstgerichte aanpak, opgedeeld in een beperkt aantal thema’s, zodat de surfer niet geconfronteerd wordt met het maken van drastische keuzes inzake een bepaald profiel waaraan hij op dat moment beantwoord of de werking van de organisatie moet kennen om zijn weg te vinden. In de hoofdnavigatiebalk zal enkel niveau 1 en 2 worden getoond. Het klikken op de tabbladen bovenaan zal de hoofdpagina van het betreffende thema openen waarop een overzicht van de onderliggende links wordt getoond (zie verder “Thema-‐pagina”). Bij het klikken op één van de onderwerpen die onder het thema vervat zitten wordt een pagina met betreffende informatie getoond, dit kan een collectie van links of een tekst of andere vorm van inhoud zijn (zie verder “Onderwerp-‐pagina”). Afbeelding: Mockup van de hoofdnavigatie

Het systeem dat gebruikt kan worden om deze duidelijk te kunnen voorstellen is op basis van de creativiteit van de ontwikkelaar zelf te bepalen. Wij houden wel graag vast aan enkele basisprincipes:

- gemakkelijk in gebruik: liever wat minder ‘fancy’ maar gewoon goed toegankelijk - duidelijk: grafische elementen mogen natuurlijk de inhoud niet overheersen - snel: liever geen vertragende animaties of storende beweging in dit vaak gebruikte blok - intuïtief: een navigatie die zichzelf uitwijst qua bediening is optimaal in gebruik

De ontwikkelaar moet ook rekening houden dat de gehele website liefst een hoge mate van intelligentie meekrijgt. In de navigatie zien we dit graag vertaald naar een combinatie van controle over het plaatsen van de elementen in een bepaalde volgorde tot het automatisch plaatsen van de links op basis van het aantal keer gezocht of geklikte momenten. Zo is het noodzakelijk dat de links die getoond worden altijd gepercipieerd worden als meest voor de hand liggende informatie die het vaakst wordt opgevraagd door de gebruikers. De manier waarop deze ranking wordt samengesteld is aan de leverancier om te bepalen. Hiervoor kunnen diverse systemen gebruikt worden, maar worden volgende parameters best opgenomen:

- aantal keer voorgekomen in de zoekfunctie, gezocht via google / Bing / ea. - aantal keer bekeken - bounce rate - links naar de pagina / informatie


F-‐19

Om de interactiviteit en de intelligentie te vertalen kan de navigatie ook beschikken over een blok dat bij het hoveren over een navigatie-‐element tevoorschijn komt. Een voorbeeldje kan je hieronder zien. Dit blok wordt normaal gezien volledig automatisch gestructureerd maar de ontwikkelaar kan voorzien dat de links gemanipuleerd kunnen worden om promotionele redenen. Afbeelding: Mockup van de hoofdnavigatie met extra navigatie door hovering

Door het grote aanbod aan scripts en andere technologische vertalingen van dit soort bewegende delen op een website, laten wij het aan de creativiteit van de leverancier om een goede oplossing aan te bieden; met daarbij in het achterhoofd houdende dat gebruiksgemak primordiaal is. De volledige basisnavigatie kan je in bijlage terugvinden, deze kan ook opgevraagd worden in de vorm van een gestructureerde spreadsheet.

e. De zoekfunctie

Voor de implementatie van de zoekfunctie wordt er gewerkt op basis van de principes van Google Live Search. Dit systeem geeft de gebruiker al tijdens het typen van de zoekterm(en) mogelijke resultaten. De gebruiker kan op deze manier erg snel tot de gezochte informatie komen en hoeft niet de hele zoekterm in te geven. Op welke manier dit systeem wordt geprogrammeerd is niet vast gelegd; volgende principes moeten echter wel gerespecteerd worden:

- aanduiding van het gezochte deel in de resultaten (kleur / vet) - sortering op basis van relevantie, eventueel percentage

aangeven - onderscheid maken tussen resultaten die rechtstreeks verband

houden en gerelateerde informatie - snelle werking van het systeem - snelle resultaatweergave

Afbeelding: Mockup van de zoekfunctie


F-‐20

f. De hoofding met portaalfunctie

Over het al dan niet gebruiken van deelsites zijn er heel wat verschillende meningen. Als compromis, om zowel de tegen-‐ als voorstanders te kunnen voorzien van hun specifieke communicatiekanalen, kan er gebruik gemaakt worden van een portaalfunctie. Dit houdt in dat er boven elke (deel-‐)website een blokje wordt opgenomen dat de link tussen de verschillende digitale kanalen vertegenwoordigd in de vorm van een lijst van deze kanalen. In de mockup werd gebruik gemaakt van zowel een screenshot als een tekstuele link; de beheerder kan hier zelf een keuze maken wat er wordt getoond (logo, banner, scherm, ...). Het blok is standaard naar boven geklapt en dus maar deels zichtbaar. Op deze manier neemt het een minimum aan plaats in op het scherm. Als men het blok open klapt kan er gebruik gemaakt worden van een korte animatie, maar deze mag zeker niet storend zijn voor de gebruikservaring. Afbeelding: Mockup van het gesloten portaal

Eens het portaal is opengeklapt moet het voor de gebruiker makkelijk zijn om doorheen de verschillende onderdelen te navigeren. Kan vrij eenvoudig gehouden worden als een balk welke men van rechts naar links kan doorbladeren. Afbeelding: Mockup van het opengeklapte portaal

Als men ergens buiten het portaal klikt, moet het zich sluiten. De sluit-‐knop rechtsonder is tevens om te sluiten. Het portaal schuift over de webpagina heen, de inhoud moet dus niet mee naar beneden schuiven. De leverancier kan een voorstel uitwerken die het werken van het portaal goed duidt.


F-‐21

g. Onze diensten / Dienstverlening > De AZ-‐gids

De lijst van de diensten die de organisatie aanbiedt, wordt gedaan aan de hand van een AZ-‐gids (zie ook: “Dienstverlening / Producten-‐ & Dienstencatalogus”). Dit is geen trefwoordengids, maar een gerichte verzameling van de dienstverlening (en kan eventueel aan de hand van specifieke trefwoorden worden samengesteld). Op elke pagina wordt bovenaan in de Snelle links een link gelegd naar een overzichtspagina van deze gids. Er wordt ook op elke pagina onderaan een regel voorzien met een alfabet waarop men kan klikken. Bij het klikken open zich ook hier weer de pagina met de links naar de diverse diensten en producten, ofwel door middel van de dienst zelf ofwel door middel van een trefwoord. Afbeelding: Integratie van de regel Onze diensten onderaan de pagina, boven de contactinformatie

Belangrijk is wel dat de letters voldoende groot zijn, of de aanklikbare ruimte over de letter, omdat een letter op zich vrij klein is. Op deze manier wordt de toegankelijkheid bevordert. Let op dat ook het eerste deel van deze balk aanklikbaar is en dat je via de titel naar de overzichtspagina van de dienstverlening wordt geleid. Voor de verdere uitwerking van de achterliggende pagina’s verwijzen we naar “Dienstverlening / Producten-‐ & Dienstencatalogus”.

Afbeelding: Plaats van de dienstverlening met centraal zijn


F-‐22

h. De voettekst / contactinformatie

Onderaan elke pagina wordt een grote ruimte gebruikt om alle mogelijke, relevante contactinformatie te tonen. Afbeelding: Voorstelling van het contactblok onderaan de pagina

Integratie GoogleMaps Gebruikers van de website komen vaak zoeken op welke manier ze de diensten fysiek kunnen bezoeken. Het plaatsen van een kaartje op deze pagina is alvast een snelle stap voor het navigeren naar de organisatie. Indien het laden van de pagina wordt vertraagd door het invoegen van dit kaartje, dan kan het vervangen worden door een screenshot met daarachter een link naar http://maps.google.be/ met eventuele parameters die de bezoeker onmiddellijk de juiste resultaten geeft.

Adresgegevens en andere relevante contactgegevens In de tweede kolom wordt alle informatie opgegeven die kan gebruikt worden voor de administratie. Dit is individueel te bepalen en liefst dynamisch in functie van de inhoud die getoond wordt op de webpagina. De links die actief kunnen gemaakt worden zoals telefoonnummer, emailadres, ... moeten geactiveerd worden in functie van het toestel waarop men werkt.

Openingsuren Een item dat zeer vaak gezocht wordt op de website zijn de openingsuren. Het moet mogelijk zijn voor de beheerders dat de gegevens op een gestructureerde manier kunnen ingegeven worden, maar er moet ook de nodige vrijheid voorzien worden om elke afwijking te formuleren. Met behulp van de dropdownbox kan de gebruiker erg snel navigeren doorheen de verschillende diensten en/of locaties. De leverancier kan tevens in dit blok een tekst voorzien met daarin de toestand van vandaag of het moment: “Vandaag open tot ...”

Onze andere kanalen In de laatste kolom kunnen alle externe kanalen worden opgenomen die door de organisatie actief worden ingezet. De inhoudelijke en strategische invulling van deze kanalen moet met een waakzaam oog worden bekeken. Elk kanaal moet de nodige toegevoegde waarde hebben.

Snelle links (verplichte vermeldingen) Er wordt tenslotte onderaan nog een kort lijstje met links naar (verplichte) informatie gegeven.


F-‐23

2) Elementen die terugkeren op thema-‐ en detailpagina’s

a. Broodkruimels

De gebruiker moet steeds kunnen zien, binnen de structuur, waar hij zich bevindt. Via de opeenvolgende links die getoond worden in de broodkruimels, kan hij naar de respectievelijke links gaan die de huidige pagina vooraf gingen. Het scheidingsteken tussen de verschillende stappen mag vrij gekozen worden; het “groter dan”-‐teken is het meest duidelijk.

b. Pagina delen Voor de gebruikers wordt de mogelijkheid aangeboden om de pagina op verschillende manieren te delen. Dit kan via sociale media, door de link te mailen of door af te drukken.

Sociale media: facebook Vereisten voor het delen van een pagina op facebook:

- Titel = de titel van het detail dat getoond wordt - Inhoud = de eerste regel van de inhoud; indien het

onderhoudssysteem beschikt over de mogelijkheid om een korte inhoud in te geven dan wordt deze gebruikt

- Indien in het detail een foto werd verwerkt, moet deze mee opgenomen worden - Link = directe link naar de pagina binnen de website

Sociale media: twitter Vereisten voor het delen van een pagina op twitter:

- Titel = de titel van het detail dat getoond wordt - Link = directe link naar de pagina binnen de website

E-‐mail Vereisten voor het delen van een pagina via e-‐mail:

- Titel = de titel van het detail dat getoond wordt - Inhoud = de integrale tekst met eventueel fotomateriaal - Link = directe link naar de pagina binnen de website

Bookmark Vereisten voor het opslaan van een pagina als bookmark:

- Titel = de titel van het detail dat getoond wordt - Link = directe link naar de pagina binnen de website

Afdrukken Vereisten voor het afdrukken van een pagina:

- Titel = de titel van het detail dat getoond wordt - Inhoud = de integrale tekst met eventueel fotomateriaal - Link = directe link naar de pagina binnen de website

Afbeelding: De broodkruimel wordt getoond als een reeks van stap voor stap links terug naar Start

Afbeelding: Delen met behulp van een menu


F-‐24

4. Informatiearchitectuur

1) Globale inhoudsstructuur Om onze informatie op een heldere manier in kaart te brengen, werd er gekozen voor 3 niveaus die de sitemap zullen bepalen: startpagina – themapagina – detailpagina. We gaan op elk van deze niveaus dieper in. Afbeelding: Overzicht van de structuur van de inhoud

In de laatste trap van de data wordt een stap gezet naar een Open Data structuur. Hiermee initiëren we de mogelijkheid om datasets die gebruikt worden om bepaalde pagina’s te voeden open te stellen. Dit is een deelproject genaamd WASCO.ConnectorOD, waarbij OD staat voor Open Data. Het CMS moet over de mogelijkheid beschikken om datasets via Open Standaarden makkelijk ter beschikking te stellen. Mogelijke formaten zijn XML, CSV, ... die aangeboden worden via download, webservices of andere open protocollen. Een beheersysteem voor deze Open Data sets binnen het systeem is een pluspunt.


F-‐25

2) De startpagina De startpagina zal als ankerpunt dienen in de structuur. Het is niet zozeer een landingspagina die de website zal aansturen als inhoudsblok, maar zal dienst doen als verzamelpunt naar zoveel mogelijk ingangen voor niveau 2, de themapagina’s. Tevens geeft het de mogelijkheid om de meest gebruikte topics op de website al op dit eerste niveau aan te bieden. Het CMS-‐systeem zal dus rekening moeten houden met een dynamische invulling van deze pagina als het gaat om het plaatsen van links, toepassingen en structuur. De dynamisch opgebouwd onderdelen op de startpagina geven we aan in het rood op onderstaande schermafbeelding. Afbeelding: De startpagina met de verschillende onderdelen en hun werking

ROOD = Dynamische onderdelen die reageren op het aantal keer dat een item wordt opgevraagd; het CMS dient hier rekening mee te houden

GROEN = koppeling met een themapagina

BLAUW = koppeling naar een detailpagina


F-‐26

3) De themapagina

Deze pagina wordt bedoeld als een verzamelpagina voor items die via een zelfde onderwerp aan elkaar zijn gelinkt. De uitwerking is een praktische verzameling van links, die dynamische zijn gesorteerd op relevantie in gebruik. Het CMS moet rekening houden met een volgorde die is gebaseerd op paginabezoek, hits of een ander relevant systeem om de doeltreffendheid van de informatie te verhogen. Afbeelding: De structuur van een themapagina, opgebouwd uit uitsluitend links naar detailpagina’s

Let hier zeker op het gebruik van iconen die de onderwerpen extra ondersteunen in de communicatie. Het gebruik van deze beelden is optioneel en louter indicatief.


F-‐27

4) De detailpagina De indeling van deze pagina is een vrij klassieke opbouw waarbij de inhoud centraal staat. Aan de linkerkant is een eenvoudige navigatie voorzien die het de surfer gemakkelijk maakt om snel zijn weg te vinden in de structuur en de bijhorende detail-‐ en themapagina’s. Rechts is een kolom voorzien om de inhoud op een interactieve manier te plaatsen in de werking. Hier is het aan de opdrachtgever om creatief met deze blokken om te gaan. De opdrachtnemer staat het vrij om de nodige suggestie te geven voor het uitwerken van deze kolom. Op de volgende pagina worden enkele concrete cases uitgewerkt. Afbeelding: Indeling van de detailpagina met de content centraal


F-‐28

Mogelijke bouwelementen voor het uitwerken van de interactiviteit in de rechterkolom

1. Gerelateerde informatie Via het gebruik van trefwoorden of andere systemen eigen aan het CMS worden pagina’s aan elkaar gekoppeld. Deze verschijnen in de vorm van een relevante lijst naast de inhoud en versterken of vullen de inhoud verder aan. Het spreekt voor zich dat dit blok enkel zinvol is bij het leveren van een hoge klikgraad. Er wordt wel gelet op de arbeidsintensiviteit bij de invoer van de inhoud bij de beoordeling van dit aspect.

2. Contactinformatie Het is voor de surfer zeker zinvol om direct in verbinding te kunnen komen met het bestuur of de verantwoordelijke ambtenaar. Het CMS moet toelaten om het centrale adressenbestand (CRM), niet via tekstvelden of aparte infoblokken, te raadplegen om de juiste informatie op te halen. Hier kan gewerkt worden met adressen van diensten, telefoonnummers van personen of zelfs de verantwoordelijke beleidsmaker(s). Het staat het bestuur vrij om te bepalen wat al dan niet in de dagelijkse werking past.

3. Converserend aspect Omdat meer en meer organisaties gebruik beginnen te maken zou men kunnen opteren voor een interactief overleg instrument zoals een Twitter-‐blok. Hier zou, door middel van hashtags, een directe link naar de inhoud, in combinatie met een gemonitorde account van de organisatie, de surfer in realtime kunnen geholpen worden bij vragen. Men zou eveneens kunnen gebruik maken van de chatfunctie die zich in Facebook aanbiedt. Het is een surplus indien het CMS hiermee kan koppelen naar een Social CRM zodat de surfer ook dadelijk wordt geïdentificeerd en de gesprekken worden gearchiveerd in de registratie.

4. Community building Sommige content leent zich tot een soort overlegplatform. Het CMS kan voorzien dat voor deze pagina’s een blog-‐functie in de vorm van Reageren kan worden geactiveerd. Zo kan men de burger nauw betrekken bij overlegmomenten of het zogeheten crowdsourcen. Indien de diensten of contentmanagers dit willen is het een surplus als deze inhoud kan worden gemonitord binnen het CMS.

5. Transparante overheid De inhoud kan verrijkt worden met persoonsgegevens en zelf fotomateriaal (profielfoto) van betrokken verantwoordelijken. Het is belangrijk dat de website als een verlengde van de dagelijkse werking wordt beschouwd en dat de link met het echte leven wordt gerespecteerd. Een burger neemt contact met een medewerker van de organisatie, niet met DE organisatie. Deze verpersoonlijking kan op eenvoudige wijze worden gerealiseerd door te werken met dit blok aangevuld met directe telefoonnummers, emailadressen en andere rechtstreekse informatie.

Het spreekt voor zich dat dit een niet-‐limitatieve lijst is van mogelijkheden. Zowel de organisatie als de opdrachtnemer zijn vrij om zelf verder aan te vullen en dit te delen met de community.


F-‐29

5) Extra: WASCO.Connector Open Data

In het kader van Open Data zullen er stappen ondernomen worden tijdens de definitie van WASCO om de gegevens die zich bevinden in mid-‐ en front-‐office verder te ontsluiten, koppelen en op een eenvoudige manier ter beschikking te stellen aan de burgers. Op deze manier worden afnemers van de Open Data geïnspireerd en gemotiveerd om vanuit gemeentelijke informatie applicaties en innovatieve ideeën te lanceren ter ondersteuning van de gemeentelijke werking in functie van de dienstverlening aan haar burgers. Bij het ontwikkelen van de gemeentelijke website en het volledige communicatie-‐ en dienstenpakket dat daarbij samenhangt is het té vaak dat er mogelijkheden om de Open Data meer te ontsluiten niet worden ingevuld. Daarom wil dit project per module één of meerdere datasets in de vorm van Open Data ter beschikking stellen. Op die manier worden de inspanningen die men doet om de gegevens te structureren voor de website en mobiele applicaties, hergebruikt als Open Data sets. Het project WASCO schept nieuwe kansen voor het gebruik en de inzet van Open Data.


F-‐30

Enkele voorbeelden ter illustratie van de werkwijze per module in de website: a) De implementatie van een bedrijvengids in de website op diverse manieren Deze module is een vaak terugkerende toepassing die de bedrijven op een visueel praktische manier in een lijst zet. Deze lijsten kunnen zowel alfabetisch in de vorm van een AZ, geografisch op basis van ligging (ook naar filialen toe) of via andere parameters worden opgebouwd. Het spreekt voor zich dat er om deze toepassing te bouwen allerlei koppelingen moeten worden gemaakt tussen verschillende datasets. Deze datasets kunnen via dit project worden aangeboden aan derden die een alternatieve manier van voorstelling willen bouwen of voor andere media willen ontwikkelen. b) De inschrijvingsprocedure voor sportkampen via de website Bij de dienstverlening van de gemeente om inschrijvingen te realiseren via de website, in dit geval voor sportkampen maar dit kan ook globaal voor andere events, worden vaak online formulieren gebruikt die al dan niet gevoed worden met informatie afkomstig uit diverse bronnen. Sommige van die bronnen zijn lokaal, andere centraal. De informatie die gebruikt wordt in de toepassing is echter openbaar te gebruiken en kan bijgevolg opgenomen worden in een Open Data set die door derden gebruikt kan worden. Op basis van deze data kunnen toepassingen zelfs feedbackdata aanleveren aan de gemeente. Door deze data beschikbaar te maken is het voor organiserende groepen gemakkelijker om ook de inschrijvingsprocedures in hun eigen toepassingen te integreren. c) Het dienstenpakket (Producten Catalogus) van de gemeente als een verrijkte Open Data set Burgerinitiatieven online willen vaak verwijzen naar de dienstverlening die binnen de gemeente rechtstreeks betrekking heeft op het door hun opgezette idee. Via een dataset waarin deze dienstverlening wordt gedefinieerd met verrijkte informatie uit de lokale authentieke bronnen, bestaande uit kleine Open Data sets, kan er op een eenvoudige manier gekoppeld worden aan beschrijvingen, formulieren en onrechtstreeks aan processen en informatie die via deze sets beschikbaar worden.


F-‐31

5. Alternatieven voor tablet en smartphone

Om de vertaalslag te maken naar mobiele toestellen, kan je hieronder een voorstel vinden om dit verder uit te werken. Er werd geopteerd om dit niet per module te doen maar een indruk te geven van hoe de toepassing er moet uitzien voor de eindgebruiker. Het staat de leverancier vrij om hiervoor betere alternatieven, gestaafd met de nodige argumentatie, in het voorstel op te nemen. Dit mag allemaal vertaald worden via een verstandig gebruik van HTML5, echter zonder verlies van functionaliteiten.

1) Smartphone: iPhone, Android-‐, Windows(8)-‐toestellen, Black Berry, ...


F-‐32

2) Eventuele tablet-‐versie: iPad, Android-‐tablet, Windows-‐tablet, ...


F-‐33

6. Modules

3) Algemene richtlijnen bij de implementatie / ontwikkeling

Indien een module wordt ontwikkeld of geïmplementeerd moet de leverancier rekening houden met volgende richtlijnen:

- de integratie van de module binnen de bestaande informatiearchitectuur (IA) moet op voorhand worden vastgelegd in samenspraak met de opdracht gevende organisatie, hiervoor kan de volgende (niet-‐limitatieve) vragenlijst gebruikt worden (het spreekt voor zich dat de organisatie er alle baat bij heeft deze informatie op voorhand – offertefase – reeds over te maken aan de deelnemende leveranciers):

o Waar haalt de toepassing de nodige data binnen de IA? o Moet de toepassing gegevens terugsturen naar de IA? o Hoe ziet het master-‐data-‐management eruit binnen de IA? o Zijn er toekomstige vereisten die nu voorzien moeten worden? o Op welke manier (technisch, juridisch, ...) kan er gekoppeld worden?

- de gebruiker mag niet het gevoel krijgen dat hij in een ander systeem is beland, de module moet naadloos aansluiten bij het totaalconcept qua functionaliteiten, grafische vormgeving en gebruik van gegevens;

- indien een module kan worden geïmplementeerd in andere systemen, zonder verlies aan functionaliteiten, dan is dat een pluspunt;

- de module dient aangepast aan elk device (zie punt Alternatieven voor...) dat vermeld staat bij de module;

- indien een module ter beschikking moet zijn voor een bepaald toestel dan dient de volledige functionaliteit worden geïmplementeerd;

- invulvelden, knoppen, aanraakgebieden, ... moeten afgestemd zijn op het werken met de handen in plaats van de muis;

- elke module moet apart gedocumenteerd worden in de interne gebruikershandleiding van de website / het communicatieplatform;

In de meeste modules wordt heel wat functionaliteit overgenomen, zodat het voor de surfers niet telkens moeite moet kosten om te ‘leren’ werken met bepaalde content. Deze functionaliteiten worden in de beschrijvingen van de modules gewoon telkens herhaald.


F-‐34

4) Bedrijvengids

a. Doelstelling

De gegevens van de bedrijven die in onze gemeente actief zijn ter beschikking stellen aan de surfer op een gestructureerde manier. De interactie tussen het bedrijf, de surfer en de organisatie stimuleren. De conversatie tussen de diverse stakeholders motiveren.

b. Beschikbaarheid - Tablet: volledige functionaliteiten - Smartphone: opzoeken via vereenvoudigd scherm, 3 mogelijke stappen (schermen):

zoeken, resultatenlijst, detail

c. Adres(sen)

http://www.organisatie.be/bedrijven http://www.organisatie.be/bedrijvengids

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw regio. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de bedrijven van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de inhoud die hier verschijnt en het beheer van deze content door de bedrijven zelf. Het derde blok op het bovenste deel van dit scherm bevat wat statische informatie en contactgegevens, hier kan vrij worden ingevuld vermits dit deel van het scherm in de zone ligt die het minst bekeken wordt. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in de meest relevante informatie van het bedrijf. De interactie door middel van aanklikbare telefoonnummers, emailadressen en andere informatie is een pluspunt.


F-‐35

e. Schermafbeelding


F-‐36

5) Bibliotheek

a. Doelstelling

Een online belevingswereld creëren die de lezers een platform geeft om het lezen van (e-‐)boeken te ervaren. De lezer krijgt een digitaal portaal van de dienstverlening die de bibliotheek aanbiedt. De conversatie tussen de diverse stakeholders (ik en mijn community) motiveren.



c. Adres(sen)

http://www.organisatie.be/bibliotheek http://www.organisatie.be/bieb http://www.organisatie.be/bib http://www.organisatie.be/mijnbibliotheek http://www.organisatie.be/mijnbieb http://www.organisatie.be/mijnbib

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw organisatie. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de lezer van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de dienstverlening van de organisatie en de (potentiële) bibliotheekbezoeker. Het derde blok op het bovenste deel van dit scherm bevat wat statische informatie en contactgegevens, hier kan vrij worden ingevuld vermits dit deel van het scherm in de zone ligt die het minst bekeken wordt. Bij het aantal (e-‐)boeken is het een pluspunt als de lezer rechtstreeks de nieuwe collectie kan inkijken als preselectie. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in de meest relevante informatie van het boek. De interactie door middel van aanklikbare covers, foto’s en andere informatie is een pluspunt.


F-‐37

e. Schermafbeelding


F-‐38

6) Dienstverlening -‐> Productencatalogus (PC)

a. Doelstelling

De surfer moet een plaats krijgen waarin hij het aanbod aan (lokale) dienstverlening snel kan consulteren. De dienstverlening moet op deze plek centraal staan in functie van de burger = gebruiker centraal. De conversatie tussen de diverse stakeholders (ik en mijn community) motiveren.

b. Beschikbaarheid - Tablet: beperkte functionaliteiten (beperkingen in documentformaten of formulieracties

zijn toegelaten) - Smartphone: opzoeken via vereenvoudigd scherm, 3 mogelijke stappen (schermen):

zoeken, resultatenlijst, detail (interactie is niet noodzakelijk, consulteren van de dienstverlening en de bijhorende procedures wel)

c. Adres(sen)

http://www.organisatie.be/diensten http://www.organisatie.be/loket http://www.organisatie.be/eloket http://www.organisatie.be/digitaalloket http://www.organisatie.be/producten (toekomstig)

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw organisatie. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de lezer van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de dienstverlening van de organisatie en de burger / surfer. De link naar Gemeentehuis bevat alle contactinformatie. De resultatenlijst staat in dit geval kort bij de selectie. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in relevante informatie over de dienst. De link naar het downloaden van een document moet duidelijk zichtbaar worden geïmplementeerd. Het invullen van het formulier kan het best full-‐screen worden gedaan, zodat het voor de gebruiker een overzichtelijk formulier blijft, zonder veel scrollen.


F-‐39

e. Schermafbeelding


F-‐40

7) Evenementen

a. Doelstelling

De surfer moet een plaats krijgen waarin hij het aanbod aan evenementen snel kan consulteren. De events moeten op deze plek centraal staan in functie van de burger = gebruiker centraal. De conversatie tussen de diverse stakeholders (ik en mijn community) motiveren. Er moeten interactie mogelijkheden zijn en de gebruiker moet intuïtief kunnen informatie opvragen.



c. Adres(sen)

http://www.organisatie.be/events http://www.organisatie.be/kalender http://www.organisatie.be/evenementen http://www.organisatie.be/uit ../UiT http://www.organisatie.be/agenda

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren zijn deels gebaseerd op het aanbod van de UiT-‐agenda (http://www.uitinvlaanderen.be). Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok de resultatenlijst in de vorm van een kalender, deze kan gewisseld worden door de gebruiker naar een lijst-‐vorm. De invulling van deze lijst mag vrij bepaald worden, houd echter rekening met het gebruiksgemak en de overzichtelijkheid. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in relevante informatie over de dienst. Bij het detail staan eveneens 3 acties:

• IK GA! : staat voor het feit dat de gebruiker kan aangeven (als hij is ingelogd) dat hij op dit event aanwezig zal zijn (delen via sociale media zijn optioneel, pluspunt)

• kaartjes : de mogelijkheid om direct kaarten te bestellen of te reserveren • in mijn agenda : een iCal of ander formaat aanbieden dat gemakkelijk in het agenda kan

worden geïmporteerd


F-‐41

e. Schermafbeelding


F-‐42

8) Huisvuilophaling

a. Doelstelling

De surfer moet op een overzichtelijke manier snel toegang krijgen om alle informatie rond huisvuilophaling te consulteren. Daarnaast moet hij op een gemakkelijke manier in contact kunnen komen met de organisatie om eventuele problemen aan te kaarten. De informatie kan best op diverse manieren worden aangeboden, als laagdrempelig.

b. Beschikbaarheid - Tablet: volledig functionaliteiten - Smartphone: opzoeken via vereenvoudigd scherm, 3 mogelijke stappen (schermen):


c. Adres(sen)

http://www.organisatie.be/huisvuil http://www.organisatie.be/afval http://www.organisatie.be/restafval /pmd /papier /... http://www.organisatie.be/afvalkalender

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw organisatie. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de lezer van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de organisatie en de burger / surfer. De link naar Melding maken zorgt er voor dat er een directe link is naar het meldingsformulier rond problemen met huisvuilophaling, Mijn buurt verwijst dan weer naar alle nieuws uit de eigen buurt / omgeving. De ophaalkalender wordt standaard als eerste getoond (het onthouden van de laatste keuze van de surfer is een pluspunt). Deze wordt aangevuld als de surfer de filter verder specifieert. De lijst, die als alternatief dient voor de surfers die gewoon liever chronologisch nadenken, kan dynamisch worden gesorteerd. Het blok onderaan draait volledig rond content die te maken heeft met afval. Deze inhoud wordt liefst dynamische opgebouwd, op basis van meest opgevraagd of meest relevant.


F-‐43

e. Schermafbeelding


F-‐44

9) Meldingen

a. Doelstelling

De meldingskaart zoals die gekend is op de meeste website is een vrij complex formulier. Met deze module willen we streven naar eenvoud. De surfer moet via enkele klikken een melding kunnen plaatsen.

b. Beschikbaarheid - Tablet: volledige functionaliteiten - Smartphone: interactie via een eenvoudig formulier met preselectie via de iconen

(interactie is noodzakelijk en dient afgestemd om mobiele toestellen, consulteren van de dienstverlening en de bijhorende procedures wel)

c. Adres(sen)

http://www.organisatie.be/melding http://www.organisatie.be/meldingen

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een snelle keuze kan maken voor het type melding dat hij wil doen. Deze selectie is niet bindend en kan afwijken per organisatie. Tip: consulteer de statistieken om te bepalen welke iconen zinvol zijn; beperk dit tot maximaal 12. Bij het klikken op een icoon, wordt in het venster rechts een formulier ingeladen dat hoort bij de actie die men selecteerde. De invulling van deze formulieren wordt bepaald door de organisatie zelf. Bovenaan worden links voorzien naar het eigen dossier (Mijn Dossier), waar men ook de status van de meldingen dient terug te vinden, en naar het Gemeentehuis waar men alle dienstverlening centraal terug kan vinden. Onderaan vind je een overzicht terug van de meldingen van een bepaalde periode. Hier kan je tevens zien welke meldingen er reeds in behandeling zijn en wat de status is. Dit is een openbaarheid van bestuur die binnen het plaatselijk beleid dient vast gelegd te worden.


F-‐45

e. Schermafbeelding


F-‐46

10) Mijn buurt

a. Doelstelling

Op deze pagina, of in deze module indien er uitgebreid kan worden, is het de doelstelling om voor de surfers een online vertaling te krijgen van informatie en conversaties die zich afspelen in de eigen leefomgeving. Je moet hier in één oogopslag een goed beeld krijgen van wat er zich afspeelt binnen de gemeente.



c. Adres(sen)

http://www.organisatie.be/mijngemeente http://www.organisatie.be/mijnbuurt (eventueel naam van de buurt) http://www.organisatie.be/mijnstraat (eventueel naam van de straat)

d. Beschrijving Dit scherm heeft een erg intuïtieve opbouw. Het komt er op neer dat elk blok van informatie dat in het beheersysteem (CMS) kan worden gevonden en kan gelokaliseerd worden, binnen deze pagina wordt opgenomen. Op die manier krijg je een soort van ‘mash-‐up’ waarbij er een krant wordt samengesteld met nieuws, weetjes en conversaties vanuit deze locatie. De locatie kan ook verkozen worden via een kaartje, waarbij de buurten door polygonen worden opgelicht. Door het gebruik van de blokkenstructuur, eventueel gecombineerd met visuele versterking van iconen en kleuren, wordt er een logische opbouw van dit samenraapsel tot stand gebracht. Op deze manier is het voor de surfer een aangename plek om snel inzicht te krijgen in de situatie rondom hem. Er is ook de nodige aandacht voor de interactie tussen de verschillende surfers. Zo kan men reageren via de gekende wegen (facebook, twitter), blokjes delen op sociale media en zelf bijdragen aan deze community. We sommen even de verschillende mogelijke type informatieblokken op (niet-‐limitatief):

- alle informatie uit het CMS die kan voorzien worden van een locatie: o events, nieuws, huisvuilophaling, verenigingen, openbare werken, ...

- sociale media: o berichten: facebook, twitter, ... o foto’s: facebook, flickr, pinterest, ... o quote’s: tumblr, ... o (deze lijst is afhankelijk van de keuze die de organisatie maakt)

- eigen inzendingen via het CMS o berichtjes, zoekertjes, foto’s, ...


F-‐47

e. Schermafbeelding


F-‐48

11) Mijn dossier

a. Doelstelling

Om de dienstverlening zo persoonlijk en efficiënt mogelijk voor te stellen en te ondersteunen digitaal is het op deze pagina van belang dat de surfer een totaal beeld krijgt van zijn stand van zaken binnen de gemeente. Alle informatie die ter beschikking is van de surfer moet hier samenkomen en een digitaal dossier vormen.

b. Beschikbaarheid - Tablet: beperkte functionaliteiten (beperkingen in documentformaten of formulieracties

zijn toegelaten) - Smartphone: opzoeken via vereenvoudigd scherm, 3 mogelijke stappen (schermen):

zoeken, resultatenlijst, detail (interactie is niet noodzakelijk, consulteren van de dienstverlening en de bijhorende procedures wel)

c. Adres(sen)

http://www.organisatie.be/mijndiensten http://www.organisatie.be/mijnloket http://www.organisatie.be/mijndossier

d. Beschrijving Links vindt de surfer een lijst van dossiers die voor hem van toepassing zijn. Deze kunnen op diverse manieren worden gerangschikt zodat hij kan kiezen tussen en chronologische opvolging, op basis van status of de dienstverlening. Het is van belang dat hij een goed overzicht gepresenteerd krijgt dat eventueel kan uitgebreid worden met relevante details, zoals laatste actie binnen het dossier of datum van status. Deze lijst kan best wel niet overladen worden met te veel details. Hierin kan ook al de nodige ruimte voorzien worden voor call-‐to-‐actions die de surfers toelaten om snel te reageren en de volgende stap te zetten in het dossier. Rechts is een blok dat gelijkaardig is aan het blok bij de Digitale dienstverlening (PC) of het loket. Onderaan kan de surfer, afhankelijk van het gekozen dossier, een lijst terug vinden van de historiek die van dit dossier werd teruggevonden. Het is voor de surfer belangrijk om te zien hoe het dossier verloopt of is verlopen indien afgesloten. Deze openbaarheid van bestuur wordt door de organisatie zelf bepaald en welke informatie hierin wordt opgenomen kan autonoom worden beslist. Indien de surfer een nieuw dossier wil openen, dan verloopt de procedure gelijkaardig aan de Dienstverlening (PC).


F-‐49

e. Schermafbeelding


F-‐50

12) Nieuws

a. Doelstelling

Het nieuws en alle content die daarvoor in aanmerking kan komen (berichten op sociale media, events van verenigingen, bedrijfsnieuws, nieuwe jobs, ...) worden samengebracht binnen dit portaal. De intuïtieve werking van het CMS-‐systeem moet zodanig zijn dat de gebruiker hier in één oogopslag een snel overzicht krijgt van het nieuws dat door de gemeente werd geselecteerd. Het is niet de bedoeling een alternatief voor kranten, Tv-‐zenders ed. aan te bieden. Community-‐mogelijkheden voor de surfers zijn een pluspunt in de aangeboden oplossing.



c. Adres(sen)

http://www.organisatie.be/nieuws (http://www.organisatie.be/mijngemeente)

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw organisatie. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de lezer van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen het nieuws van de organisatie en de burger / surfer. De link naar Gemeentehuis bevat alle nieuwsberichten uit de organisatie, Mijn buurt verwijst dan weer naar alle nieuws uit de eigen buurt / omgeving. De resultatenlijst staat in dit geval kort bij de selectie. Er worden de laatste relevante berichten getoond om alvast een teaser-‐ / portaal-‐functie te activeren. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Er werd een tag-‐cloud geplaatst onder de resultatenlijst zodat de surfer snel een andere ingang kan vinden tot zijn informatie – dit is optioneel indien er een beter alternatief beschikbaar is.


F-‐51

e. Schermafbeelding


F-‐52

13) Openbare werken

a. Doelstelling

Openbare werken zijn vaak een grote bron van frustratie, tenzij er goed over wordt gecommuniceerd. Dat betekent dat deze module moet voorzien in een duidelijke informatiestroom die de conversatie tussen de diverse stakeholders motiveert om zo de dialoog te kunnen monitoren.



c. Adres(sen)

http://www.organisatie.be/openbarewerken http://www.organisatie.be/werken http://www.organisatie.be/omleidingen

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw regio. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de werken van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de inhoud die hier verschijnt en het beheer van deze content door de betrokkenen zelf. Indien het bestuur hiermee instemt kan elke stakeholder binnen het openbaar werk een onderdeel van het platform invullen met informatie; gaande van de architect, de aannemer, de verantwoordelijke ambtenaar, het college, ... Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in de meest relevante informatie van de werken. De interactie door middel van aanklikbare telefoonnummers, emailadressen en andere informatie is een pluspunt. De kalender verwijst naar een lijst van activiteiten die aan deze organisatie zijn gekoppeld. Aandachtspunt in deze module is de focus leggen op visualisatie, dat kan op volgende manieren:

- gebruik foto’s die de situatie voor en na geven - een webcam kan de progressie in beeld brengen en archiveren - een tijdlijn brengt het project in perspectief


F-‐53

e. Schermafbeelding


F-‐54

14) Onderwijs

a. Doelstelling

De gegevens van de scholen en onderwijsorganisaties (of aanverwante) die in onze gemeente actief zijn ter beschikking stellen aan de surfer op een gestructureerde manier. De interactie tussen de school, de surfer en de organisatie stimuleren. De conversatie tussen de diverse stakeholders motiveren.



c. Adres(sen)

http://www.organisatie.be/scholen http://www.organisatie.be/onderwijs http://www.organisatie.be/opleidingen http://www.organisatie.be/onderwijsgids

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw regio. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de school van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de inhoud die hier verschijnt en het beheer van deze content door de scholen zelf. Het derde blok op het bovenste deel van dit scherm bevat wat statische informatie en contactgegevens, hier kan vrij worden ingevuld vermits dit deel van het scherm in de zone ligt die het minst bekeken wordt. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder schermverversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in de meest relevante informatie van de organisatie. De interactie door middel van aanklikbare telefoonnummers, emailadressen en andere informatie is een pluspunt. De kalender verwijst naar een lijst van activiteiten die aan deze organisatie zijn gekoppeld.


F-‐55

e. Schermafbeelding


F-‐56

15) Verenigingen

a. Doelstelling

De gegevens van de verenigingen die in onze gemeente actief zijn ter beschikking stellen aan de surfer op een gestructureerde manier. De interactie tussen de vereniging, de surfer en de organisatie stimuleren. De conversatie tussen de diverse stakeholders motiveren.



c. Adres(sen)

http://www.organisatie.be/verenigingen http://www.organisatie.be/verenigingengids

d. Beschrijving Het scherm is opgebouwd vanuit een blok links waarin de gebruiker een filter kan samenstellen om de lijst samen te stellen die hij verkiest. De voorkeuren die nu werden opgenomen in dit blok kunnen verschillen met de situatie in jouw regio. Kies hier voor de meest relevante opties en zorg dat het filterblok zelf niet meer plaats inneemt dan nodig. Naast het filterblok staan enkele acties die specifiek voor de verenigingen van toepassing zijn. Op deze manier zorgen we voor een korte verbinding tussen de inhoud die hier verschijnt en het beheer van deze content door de verenigingen zelf. Het derde blok op het bovenste deel van dit scherm bevat wat statische informatie en contactgegevens, hier kan vrij worden ingevuld vermits dit deel van het scherm in de zone ligt die het minst bekeken wordt. Het samenvouwen van het bovenste deel van deze pagina is een pluspunt maar geen vereiste. Het is belangrijk dat de surfer een gemakkelijk interface krijgt. De lijst met resultaten moet on the fly worden gegenereerd zonder scherm verversing als mogelijk. Het detailblok kan afwijken qua lay-‐out maar moet voorzien in de meest relevante informatie van de vereniging. De interactie door middel van aanklikbare telefoonnummers, emailadressen en andere informatie is een pluspunt. De kalender verwijst naar een lijst van activiteiten die aan deze vereniging zijn gekoppeld.


F-‐57

e. Schermafbeelding


G-‐58

G. Bijlagen

1. Navigatiestructuur

Vanuit deze conceptnota willen we een voorzet doen om de navigatiestructuur te veralgemenen. De hoofddoelstelling blijven we centraal zetten, nl. de burger via de website een elektronische weg aanbieden tot de dienstverlening van de gemeente. Wij adviseren om de navigatie op niveau 0 (Thema’s) en 1 te implementeren volgens onderstaand schema, de volgorde kan wijzigen (op basis van prioriteiten, analyse van de bezoekers, ...). Tabel: Basisnavigatiestructuur gemeentelijke website Thema Niveau 1 Niveau 2 (in te vullen) Niveau 3 (in te vullen) Wonen & Verblijven Vrije tijd

Afval & Recyclage Bibliotheek Openbare werken Onderwijs Meldingen Mijn buurt Onze planning Belastingen Parkeren Containerpark Voordeeltips Geboorte -‐ Huwelijk -‐ Overlijden Noodoproepen Gezondheid & Welzijn Huisvesting

Werken & Ondernemen Loket Documenten Online belastingen Subsidies Planning Aanbestedingen Milieu Tips & Advies Preventie Immobiliën Zaken doen Uw bedrijf en onze gemeente Handelsmissie

Over het bestuur Burgemeester & Schepencollege Gemeenteraad Klachten Meldingen Verkiezingen Strategie & visie Planning Begroting In cijfers Bescherming van uw gegevens Open data

Te downloaden via deze link: http://www.v-‐ict-‐or.be/assets/51c95c7cce3fb55bd6000341/Navigatiestructuur.xlsx


G-‐59

2. Good practices

1) Liverpool City Council, UK : http://www.liverpool.gov.uk

a. Algemeen principe

“Cut the crap”

b. Troeven

- Volledig dienstgericht; de vraag van de burger staat centraal - Responsive design - Strakke vormgeving - Geen ballast in grafische elementen; enkel grafische elementen bij de thema’s - Dynamisch karakter van veel gebruikte diensten op de homepage - Dynamisch karakter in de samenstelling van de sitemap en navigatie - Kleurgebruik in functie van toegankelijkheid - Maar 3 hoofdthema’s waaronder alle dienstverlening een plaats kreeg: Resident, Business

& Council (Mayor niet meegeteld)


G-‐60

2) State of Alabama, USA : http://www.alabama.gov


“Facts & Figures”

b. Troeven

- De interactie tussen de staat en de burger staat centraal en wordt via de cijfers continu gecommuniceerd

- Een prachtig design - Responsive design - Zoekfunctie centraal geplaatst - Erg compacte navigatie


G-‐61

3) Stad Amsterdam -‐ Stadsdeel Noord, Nederland : http://www.noord.amsterdam.nl


“Toptaken eerst”

b. Troeven

- Op basis van metingen en bevragingen heeft men eerst de toptaken in kaart gebracht en deze vertaald in de website

- Design is minimalistisch en erg functioneel - Mooi integratie van de huisstijl in het digitale platform - Responsive design met aandacht voor het roterend beeld van de tablet bij draaien - Gebruik van een lange scroll-‐pagina


G-‐62

4) Welcome to GOV.UK : http://www.gov.uk


“Simpler, clearer, faster”

b. Troeven

- Diensten en informatie voor de burger staan centraal - Absoluut minimalisme in design - Werkt zowel als serviceplatform en als portaal voor de ministeries - Responsive design - Helder lettertype, hoog contrast voor leesbaarheid - 3-‐click service level; snelle toegang tot dienstverlening


G-‐63

3. Gebruik van de interactieve mockup met FlairBuilder Viewer

Stap 1 -‐ Surf met je browser naar: http://share.flairbuilder.com

Stap 2 – Open het bestand dat je hier kan downloaden:

http://www.v-‐ict-‐or.be/assets/51cd8a68ce3fb53475000cf1/WASCO-‐Concept.fbp

Stap 3 – De blauwe links geven interactie aan, de groene links zijn hover-‐ of demo-‐concepten


G-‐64

4. Trefwoordenlijst

Dit document is beschikbaar in Excel-‐formaat om te importeren. Te downloaden via deze link: http://www.v-‐ict-‐or.be/assets/51c95c57ce3fb55bd6000332/Trefwoordenlijst.xlsx A WOORD(EN) HOOFDSYNONIEM aangetekende zendingen

aanplakking aanplantingen aardgaswarmtedroger administratieve sancties adoptie adres adressen adreswijziging adviesraden affichekasten afgravingen afschrift afschriften afstamming afval afvalverbranding afvalwater akte alarmsystemen alcohol alcoholhulp amateurkunsten amfibieën aperitiefconcerten apothekers arbeid arbeidskaart arbeidsmarkt archiefopzoeking asbest asielzoeker autobanden avondmarkt avondsluiting

B WOORD(EN) HOOFDSYNONIEM baangrachten

begeleid wonen begraafplaats begrafenis begrafenisondernemer begrafenistoelage


G-‐65

bejaardenoppasdienst bekendmaking belastingaangifte belastingen beleidsplannen beroepskaart beroepswijziging beschermde werkplaatsen bestaansminimum bestemmingsplan bestrijdingsmiddelen bestuursakkoord betalingen bevolking bevolkingscijfer bevolkingsregister bewijs bewijs van goed gedrag en zeden bewijzen en attesten bezienswaardigheden bibliotheek bijen billijke vergoeding biodiversiteit BIS-nummer bladkorven blindenstok bloed geven bodemattest bodemonderzoek bodemsanering bomen boomgaard boordsteen bosdecreet bouwaanvraag bouwafval bouwdossier bouwen bouwgrond bouwgronden bouwlijn bouwovertreding bouwplan bouwproject bouwvergunning brandpreventie brandstofdistributie brandveiligheid brandweer btw-controle budgetbegeleiding budgetbeheer buitenmuurisolatie


G-‐66

buitenschoolse opvang buitenspeeldag burgerlijke stand buslijnen buurtfeest

C WOORD(EN) HOOFDSYNONIEM café

charter circus collectieve schuldenregeling college communicatie communicatiedienst composteren concerten concessie concessies condensatieketel conditietraining contact crematorium crisisopvang cultureel centrum cultuurdienst

D WOORD(EN) HOOFDSYNONIEM dag van de buren

dag van de dynastie dakisolatie dakloos De Lijn diefstal dienst uitvoering dienstencheques directe belastingen discriminatie distels diversiteit domotica driehuizen drijfkracht drinkwateraansluiting duurzaamheid

E WOORD(EN) HOOFDSYNONIEM echtscheiding


G-‐67

ecopark eensluitend afschrift eikenprocessierups elektriciteit energie erepark eretekens erfenis erfgoeddag erkenning euthanasie evenementen explosieve stoffen

F WOORD(EN) HOOFDSYNONIEM federale overheid

feestelijkheden festival fietsen fietsgraveren filiaal bibliotheek filmopname financiële dienst financiële hulp financiën folklorefestival fotokopieën fuiven

G WOORD(EN) HOOFDSYNONIEM gas

gasflessen geboorte geboortepremie GECORO gedenktekens gedichtenroute geestelijke gezondheid gehandicapt gehandicapten gemachtigde opzichters gemeente gemeentehuis Gemeentelijke Commissie voor Ruimtelijke Ordening gemeenteraad gemeenteschool geneesmiddelen geschiedenis geurhinder


G-‐68

gezinsproblemen gezondheid GFT+ glas grabbelpas grachten grannysitting groen groenafval groendaken grof restafval grofvuil grondverzet grondwater

H WOORD(EN) HOOFDSYNONIEM heemmusem

heihoefseweg hemelwater herberg herbruikbare goederen hinder historiek hommels hondenpoep hoogrendementsbeglazing hoogstamboomgaard houtafval huisartsen huisbezoeken huisnummers huisstijl huisvesting huisvuil hulpdiensten huren huurcontract huwelijk

I WOORD(EN) HOOFDSYNONIEM IBO

identiteit identiteitskaart identiteitskaart kind identiteitsstuk isolatie inbraak inenting inentingen


G-‐69

inkomen inschrijving instructiebad internationale solidariteit internet invaliditeit inzage ioniserende straling

J WOORD(EN) HOOFDSYNONIEM jaarmarktfeesten

jaarverslagen jeugd jeugdcentrum jeugddienst jeugdhuizen jeugdraad jeugdsport jeugdverenigingen jeugdwerk jubilea juridische hulp

K WOORD(EN) HOOFDSYNONIEM kadaster

kapel kapmachtiging karweihulp kastelen katten kelder kermis kerstboomverbranding keukengeiser KGA kind en gezin kinderopvang kinderverlamming klasbezoek kleine landschapselementen kleuterontbijtzwemmen klusjes kom op tegen kanker kopen kringloopgoederen kruispuntbank kunstcentra kunstonderwijs


G-‐70

L WOORD(EN) HOOFDSYNONIEM laatste wilsbeschikking

lawaaihinder leefloon leerlingenvervoer leerplicht legionella leidingwater leurhandel lichthinder lichtkranten ligging logo luifels

M WOORD(EN) HOOFDSYNONIEM maaltijd

maatschappelijke hulp mantelzorg markt materiaal uitlenen materiaal uitlenenen materiële hulp materielële hulp mazout mazouttank melding meldingsplicht metalen milieuvergunning militie mindermobielencentrale missie mobiliteit muurovernames muziek muziekonderwijs

N WOORD(EN) HOOFDSYNONIEM naam

nationale feestdag nationaliteit natuur natuureducatie natuurgids natuurvergunning niet-belg


G-‐71

nieuwe inwoners nieuwjaarsdrink nieuwsbrief nieuwsbrieven NMBS nutsmaatschappijen nutsvoorzieningen

O WOORD(EN) HOOFDSYNONIEM OCMW

offerfeest onbewoonbaarverklaring onderhoud openbare weg ondernemen onderwijs ongedierte onkruid ontgravingen onthaalmoeders ontvangkantoor ontwikkelingshulp onvermogen opcentiemen open monumentendag openbaar groen openbaar onderzoek openbaar vervoer openbare weg openingsuren openingsuren ecopark ophaalkalender oprit optocht opvanggezinnen opzoekingen orgaandonatie organiseren oud-strijders overlast overlijden

P WOORD(EN) HOOFDSYNONIEM papier- en karton

parkeerkaart parkeerverbod parken parkeren pashoogte en bouwlijn passiefhuis


G-‐72

patrimonium pegode pensioen personeel personeelsdienst personenalarmtoestel personenbelasting petanquebanen piepschuim PIN/PUK plaatselijk werkgelegenheidsagentschap plakzuilen planning en inrichting planten plantenziekten plantjesverkoop plastiek PMD poetshulp polio politie politiereglement postbus premies prijs voor verdienste pro deo promotie putwater PWA

R WOORD(EN) HOOFDSYNONIEM rappels

rattenverdelging reclamedragers reclamedrukwerk recreatie recreatiedomein regenwater registratie reglement reispas reistoestemming reizen rekeningnummers renovatiepremie repetitielokalen restafval retributie revalidatiecentra rijbewijs rijksregisternummer riolering


G-‐73

riool rioolaansluiting rituele slachtingen rode kruis ruimtelijk structuurplan ruimtelijke ordening rupsenverdelging rustdag rusthuis

S WOORD(EN) HOOFDSYNONIEM sabam

sagen en legenden samenleven samenwonen successierechten schade schade openbare weg scheidingslijn scheidingsmuren scholen scholenveldloop school schoolomgeving schuldbemiddeling schulden secretariaat senioren seniorenconsulent seniorenfeest seniorenraad serviceflats signalisatie slachtbewijs slachtingen slachtofferhulp sloop sloopafval sloopvergunning sluikstorten snoeihout sociaal kopen sociaal verhuurkantoor sociaal-pedagogische toelage sociale tarieven sociale tewerkstelling solidariteit solliciteren speelpleinen speelstraten sport sport en spel


G-‐74

sportclubs sporthallen sportinfrastrcutuur sportinfrastructuur sportkampioenen stappenteller start to run statistiek statuten stedenbouwkundig attest stedenbouwkundige aanvraag stedenbouwkundige inlichting stedenbouwkundige vergunning stedenbouwkundige voorschiften steenhouwer steenpuin sticker reclamedrukwerk straatfeest straatkatten straatlampen strafregister strategisch plan stronken structuurplan studietoelagen subsidie subsidies

T WOORD(EN) HOOFDSYNONIEM taalonderwijs

taxivergunning te deum telefoon televisie tenlastename terrassen tewerkstelling textiel thermostaatkranen thuisbevalling thuiscomposteren thuisverpleging thuiszorg toelage toerisme token treinen treinstations tuinafval

U


G-‐75

WOORD(EN) HOOFDSYNONIEM uitleendienst

uitlenen uittreksel uittreksels

V WOORD(EN) HOOFDSYNONIEM vacature

vacatures vakantie-initiatieven veiligheid ventilatiesysteem verbeteringspremie verbouwen verenigingen vergunning vergunningen verhuis verhuizen verkaveling verkavelingsakte verkavelingsvergunning verkavelingsvergunningsplicht verkavelingsverzaking verkavelingswijziging verkeersbelastingen verkeerspark verkeersveiligheid verkiezingen verpleegkundigen vervoer verwarmingstoelage verzekering verzekering vrijwilligers veteranenziekte visgunning visum viswaters Vlaamse overheid vluchteling voeding voedselbedeling voedselveiligheid vredegerecht vreemdeling vreemdelingen vrijwilliger vrijwilligers vuurtje stoken


G-‐76

W WOORD(EN) HOOFDSYNONIEM wachtdiensten

wandelen wapenschild wapenstilstand wapenvergunning warmtekracht warmterecuperatie water waterlopen wateroverlast waterzuivering week van de amateurkunsten welzijn werk zoeken werken in het buitenland werpen wettigen wijkpolitie wijkwerking wilsverklaring windmolens windschermen witgoed wonen wonen in het buitenland woning woningtoezicht wortels

Z WOORD(EN) HOOFDSYNONIEM zaak starten

zaal huren ziekenhuis zoneringsplan zonne-energie zonnepanelen zusterband zwaluwnest zwembad zwerfkatten zwerfvuil


G-‐77

5. Bronvermeldingen

1) Gebruik van iconen

• WebAIM, Using alternative text : http://webaim.org/techniques/alttext/

• The Noun Project, free icons : http://thenounproject.com

2) Usability

• Gerry McGovern : http://gerrymcgovern.com

• Usability-‐blog : http://usability-‐blog.be

3) Dienstverlening / conversatie

• Intergemeentelijke Producten en Dienstencatalogus (Corve) : http://www.corve.be/projecten/lokaal/IPDC/

• Onderzoek Leiedal naar online dienstverlening : http://www.leiedal.be/e-‐government/innovatie/onderzoek-‐dienstverlening

• The Social Media Experiment in Government -‐ Elements of excellence : http://www.govloop.com/profiles/blogs/the-‐social-‐media-‐experiment-‐in-‐government-‐elements-‐of-‐excellence-‐

• Alleen aanwezig zijn op sociale media is niet voldoende : http://www.velsenlokaal.nl/wp-‐content/uploads/2012/04/onderzoek-‐social-‐media-‐bij-‐gemeenten.pdf

• Online Trend Rapport 2013 : http://wijs.be/nl/trends-‐inzichten/blog/detail/online-‐trendrapport-‐2013

• Rijksoverheid -‐ Communicatie : http://www.rijksoverheid.nl/onderwerpen/overheidscommunicatie

• Frank Watching -‐ Gemeentesite : http://www.frankwatching.com/archive/tag/gemeentesites/


G-‐78

6. Overzicht van alle digitale bestanden

1) Functionele analyse (dit document)

a. Word-‐versie :

(tijdelijke link -‐ zie http://www.v-‐ict-‐or.be/kenniscentrum/WASCO/stavaza)

b. PDF-‐versie : (tijdelijke link -‐ zie http://www.v-‐ict-‐or.be/kenniscentrum/WASCO/stavaza)

2) Interactief mockup-‐bestand

a. FlairBuilder-‐versie :

http://www.v-‐ict-‐or.be/assets/51cd8a68ce3fb53475000cf1/WASCO-‐Concept.fbp

b. PDF-‐versie : http://www.v-‐ict-‐or.be/assets/51cd8a58ce3fb53475000cd5/WASCO-‐Concept-‐mockups.pdf

3) Navigatiestructuur

a. Excel-‐versie :

http://www.v-‐ict-‐or.be/assets/51cd8acfce3fb53475000d4c/Navigatiestructuur.xlsx

b. PDF-‐versie : http://www.v-‐ict-‐or.be/assets/51cd8acdce3fb53475000d3f/Navigatiestructuur.pdf

c. Google Sheet :

https://docs.google.com/spreadsheet/ccc?key=0ArhI_YyjvsFedF9wRkF4VFlueENEZ3pOdGVQWEZaZVE

4) Trefwoordenlijst

a. Excel-‐versie :

http://www.v-‐ict-‐or.be/assets/51cd8c29ce3fb53a080007c0/Trefwoordenlijst.xlsx

b. PDF-‐versie : http://www.v-‐ict-‐or.be/assets/51cd8c28ce3fb53a080007b2/Trefwoordenlijst.pdf

c. Google Sheet :

https://docs.google.com/spreadsheet/ccc?key=0ArhI_YyjvsFedGtlRzUzcUVLclVMUThPSDZRZmRlTFE

WASCO - Webs & Apps Standaarden voor de Converserende Overheid

Business

Transcript of WASCO - Webs & Apps Standaarden voor de Converserende Overheid