VGC portaal sites. 18 juli 2011 EEN GLOBALE VISIE OP DE INFORMATIE ARCHITECTUUR & UX

VGC portaal sites EEN GLOBALE VISIE OP DE INFORMATIE ARCHITECTUUR & UX

18 juli 2011

Kunstmaan nv Tervuursevest 362‐1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 [email protected] RPR Leuven BTW BE 0463 235 871 KBC 431‐0703991‐32 ING 330‐0709211‐01 Kunstmaan.be

VGC PORTAAL SITES: GLOBALE VISIE DOCUMENT

CONTENT 1. Informatie architectuur .............................................................................3 1.1 Waarom? 3 1.2 Bottom-up navigatie 4 1.3 Het personaliseren van de homepage(s) 12 1.4 Het verbeteren van de interne zoekmachine 14 2. Een goede, uniforme UX ......................................................................... 16 2.1 Het uitgangspunt 17 2.2 Een gemeenschappelijk profiel voor alle portaal sites 17 2.3 Een uniforme personalisatie module op de homepage 20 2.4 Gepersonaliseerde Nieuwsbrieven 20 2.5 Een uniforme, conventionele lay-out 21 2.6 Het hergebruik van HTML templates 23 3. Visie in pratijk gebracht .......................................................................... 24 3.1 Zonder CMS, geen bottom-up navigatie of personalisatie 24 3.2 Selectiecriteria voor het CMS 26 3.3 Selectiecriteria voor de zoekmachine 30

2/30


1. INFORMATIE ARCHITECTUUR 1.1 WAAROM? Alhoewel de verschillende portaal sites als onafhankelijke sites ontwikkeld en gepositioneerd worden, zijn er vele inhoudelijke raakvlakken en zullen alle sites de facto gebruik maken van een gemeenschappelijke databank (en CMS). Daarom zouden we VGC willen aanraden om d.m.v. een intelligente informatie architectuur strategie niet alleen de vindbaarheid van de informatie binnen elke portaal site, maar ook over de 3 portaal sites te verhogen en aldus ook de algemene UX (User Experience) te verbeteren. Volgens Peter Morville – een van de grondleggers van de informatie architectuur – is een goede vindbaarheid van de informatie immers dé conditio sine qua non voor een goede UX (zie afbeelding 1). Indien een bezoeker van een site de informatie waar hij/zij op zoek naar is niet kan vinden, maakt het immers weinig uit hoe waardevol die informatie is of hoe gebruiksvriendelijk de site is. Wanneer een bezoeker dit enkele keren ervaart, zal hij/zij zelfs definitief afhaken en via zoekmachines en andere sites deze informatie proberen te vinden. Een goede vindbaarheid van de informatie over alle portaal sites is daarom volgens ons de belangrijkste Key Success Factor!

Afbeelding 1: UX honeycomb - de 7 facetten van de online UX volgens Peter Morville

3/30


Concreet stellen wij daarom de volgende drievoudige aanpak voor: 1. het ontwikkelen van een bottom-up navigatie; 2. de mogelijkheid om de homepage(s) te personaliseren; 3. het optimaliseren van de zoekresultaten.

1.2 BOTTOM-UP NAVIGATIE Wat? Naast de conventionele topdown navigatie (via het menu en de sitemap), kunnen we voor de belangrijkste content objects1 ook links naar gerelateerde interne nieuwsberichten, pagina’s en documenten en van de andere portaal sites tonen.

Afbeelding 2: het contextueel tonen van (links naar) gerelateerde informatie

Een content object is een beheersbare brok van informatie georganiseerd rond een bepaald onderwerp (een product, een proces, een functie, een thema, ...). Het is een zelfstandige eenheid die op verschillende manieren kan worden hergebruikt, afhankelijk van de doelgroep en het doel.

1

4/30


Waarom? Met een bottom-up navigatie wordt de vindbaarheid van de informatie aanzienlijk verhoogd, omdat de bezoekers rechtsreeks vanuit de inhoud (i.e. bottom-up) kunnen navigeren naar gerelateerde informatie op de site zelf en naar de andere portaal sites zonder belemmerd te worden door het feit dat deze informatie zich op verschillende sites bevindt met verschillende menu’s. Hoe? Om zowel binnen een specifiele portaal site als over de andere VGC portaal sites gerelateerde inhoud met elkaar te kunnen verbinden, moet er voor elke portaal site een content model2 ontwikkeld worden en moeten deze content models met elkaar verbonden worden. Content models vormen nl. de basis van elke “bottom-up navigatie” en worden gebruik om bepaalde inhoud te beschrijven en contextuele linking mogelijk te maken (i.e. het tonen van links naar gerelateerde pagina’s en/of documenten). De opeenvolgende stappen om een content model te ontwikkelen, zijn: 1. Bepaal de doelgroepen (Wie zijn de gebruikers?) 2. Inventariseer en analyseer de inhoud (Welke inhoud hebben we?) 3. Bepaal de document en object types (Welke soorten documenten en content objecten hebben we?) 4. Bepaal de metadata classes (Waar gaan deze content objecten over?) 5. Bepaal de regels voor de contextuele linking (Naar welke gerelateerde inhoud gaan we linken?) Om op een efficiënte wijze inhoud met inhoud te verbinden en inhoud met lezers, moet de gebruikte metadata overigens erg consistent zijn (en dit zowel structureel als semantisch vlak - zie afbeelding 3). Daarom raden wij VGC aan om een gemeenschappelijke thesaurus (zie afbeelding 5) te ontwikkelen.

Afbeelding 3: de verschillende stappen in de ontwikkeling van een bottom-up navigatie

Een content model definieert de document en/of inhoud types, hun attributen, classificaties en relaties binnen de informatie architectuur van een site.

2

5/30


Een thesaurus is een soort controlled vocabulary3 (zie afbeelding 4) waarbij binnen een verzameling van termen de equivalenten van deze termen, de gerelateerde termen en hun onderlinge hiërarchie worden in kaart gebracht om de vindbaarheid van de informatie te verbeteren.

Afbeelding 4: het onderling verbinden van verschillende content modellen

Afbeelding 5: controlled vocabularies

Een controlled vocabulary is een manier om een interpretatieve, semantische laag te voegen tussen de (zoek)term, die wordt ingegeven door een bezoeker (van een site), en de onderliggende database om de eigenlijke betekenis van deze term beter weer te geven en aldus de vindbaarheid van de informatie te verbeteren (UX).

3

6/30


Afbeelding 6: een voorbeeld van een thesaurus De opeenvolgende stappen om een thesaurus te ontwikkelen, zijn: 1. Definieer een strategie. (Wat is het doel?) 2. Maak een lijst van de gebruikte termen. (Welke termen worden gebruikt om de inhoud van de site te beschrijven?) 3. Leg de voorkeurtermen, hun varianten en de onderlinge hiërarchieën vast. (Hoe verhouden de termen zich tot elkaar?) 4. Identificeer de “zie ook” termen. (Welke inhoud zou jullie doelgroepen nog kunnen interesseren?) 5. Implementeer. 6. Test en evalueer. 7. Begin opnieuw en verfijn. (Wat kan er worden verbeterd?) Uiteraard is het uitwerken van content models en een thesaurus geen doel op zich, maar slechts een middel dat zowel de aanbieder van de informatie als de consument van de informatie in staat moet stellen om gerelateerde informatie gemakkelijk met elkaar te kunnen verbinden en aldus de vindbaarheid ervan te verhogen. Concreet gaat het dus om het faciliteren van zowel een tagging door de VGC medewerkers als een sociale tagging.

7/30


Concrete uitwerking 1: het taggen van inhoud door VGC medewerkers Wat? Wanneer een van jullie content contributors in de toekomst via het CMS een foto, artikel, event, ... oplaadt, dan zal hij aan dit content type een bepaalde tag (metadata) uit een vooraf gedefinieerde lijst kunnen toevoegen, bijv. schoolvoorstelling. Waarom? Als een leraar nu de portaal site bezoekt op zoek naar een schoolvoorstelling (bijv. theater) om met zijn leerlingen naar toe te gaan, zal hij meestal eerst de agenda van gekende of nabijgelegen centra raadplegen. Wanneer dit centrum nu toevallig geen net geen schoolvoorstelling aanbiedt in de gewenste periode, dan kan hij ofwel de agenda’s van alle andere centra beginnen na te kijken of besluiten om een andere activiteit te plannen. In beide gevallen zal de UX niet echt bevredigend zijn. Op basis van tags kan de portaal sites echter op de bewuste pagina de schoolvoorstellingen van de andere centra tonen: wat op dat ogenblik voor de bezoeker het leven gemakkelijker maakt (hij moet niet zelf beginnen te zoeken) en wat kan verhinderen dat hij/zij afhaakt. Ook de relevantie van de zoekresultaten van de interne zoekmachine zal hierdoor worden verhoogd. Dit zijn enkele voordelen op microniveau (binnen één portaal site), maar er zijn uiteraard ook voordelen op macroniveau (tussen de verschillende portaal sites). Wanneer een jongere bijvoorbeeld in het jeugdportaal enkele keren pagina’s bekijkt die als “danscursus” werden getagd, dan kan op wanneer hij/zij de Gemeenschapscentra portaal site bezoekt op de homepage een overzicht tonen van de aanstaande dansvoorstellingen van alle 22 centra. Daarnaast kan er uiteraard op bepaalde pagina’s ook gerelateerde nieuwsberichten, links (maar ook intern) en publicaties (documenten) van de andere portaal sites tonen. Wij raden jullie wel aan om deze gerelateerde inhoud op alle portaal sites steeds op dezelfde wijze en plaats weer te geven. Zie wireframe op de volgende pagina.

8/30


Afbeelding 7: wireframe interne pagina

9/30


Concrete uitwerking 2: folksonomy of sociaal taggen Wat? Folksonomy is het door de bezoekers van een site of blog – in onderlinge consensus – voorzien van o.a. foto's, filmpjes, artikels en blogposts van zogenaamde tags of metadata (zie afbeelding 8). Deze activiteit noemt men daarom ook wel eens sociaal taggen. Waarom? De consensus maakt dat deze tags meestal goed bruikbaar zijn en vaak beter aansluiten op het taalgebruik van publiek dan de termen die de site eigenaars gebruiken. Waardoor de vindbaarheid van de informatie wordt verbeterd. Nadelen De 3 grootste nadelen van de aanpak zijn: het overvloed aan tags, een gebrek aan controle en consistentie. Hoe? Wij raden een hybride methode aan waarbij enkel bezoekers met een profiel aan bepaalde content types ofwel een tag kunnen toevoegen uit een vooraf gedefinieerde lijst (i.e. dezelfde lijst als door jullie content contributors wordt gebruikt) ofwel een nieuwe tag suggereren (die pas wordt toegevoegd aan de vooraf gedefinieerde lijst na validatie door jullie)

10/30


Afbeelding 8: Flickr maakt gebruik van folksonomy om foto’s aan elkaar te linken Een bijkomend voordeel van folksonomy is dat interactie en betrokkenheid van de bezoekers verhoogt!

11/30


1.3 HET PERSONALISEREN VAN DE HOMEPAGE(S) Wat? Een bezoeker kan een stuk van de inhoud van de homepage zelf kiezen. (zie afbeelding 9) Waarom? Als site eigenaar kan je proberen informatie te pushen naar de bezoekers. Zonder een exhaustieve profiling en een in realtime analyse van het gedrag van de bezoekers, gaan jullie echter nooit kunnen bepalen welke informatie relevant is voor een bezoeker. En laat dat nu net een van de meest doorslaggevende factoren zijn voor het bepalen van de bruikbaarheid van de informatie (cfr. Het facet “usefulness” in UX honeycomb van Peter Morville – zie afbeelding 1). Door een ingelogde bezoeker echter zelf te laten kiezen welke informatie hij op de homepage wil zien (en die dus voor hem/haar relevant is), kan een bezoeker op de portaal site (die het meest in lijn ligt met zijn profiel) de meest relevante informatie en/of documenten van niet alleen deze site maar ook van de andere portaal sites verzamelen. Wat uiteraard de vindbaarheid van deze informatie enorm ten goede komt. Daarnaast kan dit ook voor meer trafiek naar de andere portaal sites zorgen. Hoe? Wij raden jullie aan om onderaan de homepages ongeveer 1/3 van de ruimte m.b.v. widgets van de 3 portaal sites personaliseerbaar te maken. Standaard kunnen jullie bijvoorbeeld op portaal site X een widget van portaal site Y en een widget van portaal site Z tonen om het principe en de onderlinge relaties tussen de sites duidelijk te maken. Bezoekers kunnen vervolgens andere widgets toevoegen en/of weglaten. Op elk van de portaal sites zal een bezoeker steeds dezelfde door hem gekozen widgets terugvinden.

12/30


Afbeelding 9: wireframe homepage

13/30


1.4 HET VERBETEREN VAN DE INTERNE ZOEKMACHINE Wat? Wij zouden jullie ook willen aanraden om de relevantie van jullie zoekresultaten te verbeteren. Waarom? We zien immers dat een steeds groter wordende groep van jonge internetgebruikers (een van jullie doelgroepen) de traditionele manier van navigeren quasi volledig negeert en dadelijk de zoekfunctie gebruikt. Een goede zoekmachine is dan ook een erg efficiënte manier om informatie te vinden die verspreid is over verschillende gemeenschapscentra/rubrieken/sites en aldus de vindbaarheid van de informatie te verbeteren. Hoe? We raden jullie aan om de interne zoekmachine in staat te stellen te zoeken over alle portaal sites of enkel binnen 1 specifieke portaal sites. (zie afbeelding 10)

Afbeelding 10: Euractiv.com biedt de mogelijkheid om enkel op de site of ook op andere sites van het netwerk te zoeken Een standaard “out-of-box” implementatie zal bij de meeste interne zoekmachines echter niet volstaan om een goede vindbaarheid te garanderen. Daarom raden we jullie aan ook voldoende aandacht te besteden aan de zoek

14/30


interface, een verbetering van de zoekopdrachten en een verbetering van de weergave van de zoekresultaten & hun relevantie. (zie afbeelding 11)

Afbeelding 11: roadmap voor het optimaliseren van de interne zoekmachine Concreet raden we aan om: 1. Spellingcontrole te gebruiken voor betere zoekopdrachten; 2. Filters toe te voegen aan de zoekresultaten pagina, zodat de resultaten verder kunnen worden verfijnd; 3. “Best Bets” te ontwikkelen; 4. De zoekresultaten te clusteren (bijv. volgens content type of doelgroep); 5. Gerelateerde zoektermen te suggereren op basis van de thesaurus.

Afbeelding 12: Google suggereert gerelateerde zoektermen

15/30


Afbeelding 13: BBC groepeert de zoekresultaten in clusters en biedt “best bets” (i.e. Editor’s Choice) aan

Afbeelding 14: spellingscontrole op Google

2. EEN GOEDE, UNIFORME UX

16/30


2.1 HET UITGANGSPUNT Aangezien alle portaal sites uitgaan van de Vlaamse Gemeenschapscommissie en ze gebruik gaan maken van een gemeenschappelijke databank en CMS, lijkt het ons een goed idee om naast een gemeenschappelijke branding ook een uniforme en goede UX na te streven. Een goede, uniforme UX verlaagt immers niet alleen de leercurve van de bezoekers bij het ontdekken van een nieuwe portaal site, het heeft ook een directe correlatie met een positieve merkbeleving en het kan tenslotte ook kostenbesparend werken door de HTML templates van bepaalde gemeenschappelijke type pagina’s te hergebruiken. Concreet stellen wij daarom de volgende vierledige aanpak voor: 1. het ontwikkelen van een gemeenschappelijk profiel; 2. een uniforme personalisatie module; 3. het gebruik van een uniforme, conventionele lay-out; 4. het hergebruik van bestaande HTML templates voor alle gemeenschappelijke type pagina’s.

2.2 EEN GEMEENSCHAPPELIJK PROFIEL VOOR ALLE PORTAAL SITES Wat? 1 gebruiker = 1 profiel = 1 single sign-on Waarom? De basisnoden van een bezoeker veranderen niet of hij/zij nu portaal site X, Y of Z bezoekt. Wanneer een bezoeker dus op een van de portaal sites van VGC een profiel (met zijn voorkeuren) heeft aangemaakt (en eventueel ook reeds de homepage heeft gepersonaliseerd), zou het jammer zijn om deze kennis niet te gaan gebruiken om de UX te verbeteren door de relevantie van de getoonde informatie (op basis van de voorkeuren, tags en de locatie van de bezoeker) en de gebruiksvriendelijkheid (geen dubbel werk, contact gegevens kunnen automatisch worden toegevoegd aan formulieren, ...) te verbeteren. Hoe?  een single sign-on voor alle portaal sites: een bezoeker moet maar 1x inloggen. Een cookie zorgt voor identificatie, wanneer een bezoeker van de ene poraal site naar een andere surft. Slechts voor het aanpassen van gevoelige info of transactionele acties is opnieuw inloggen vereist.

17/30


 

inloggen m.b.v. een sociaal profiel: een bezoeker kan inloggen met zijn FaceBook of Netlog (de jongeren) profiel (zie afbeelding 15) een gemeenschappelijk profiel over alle portaal sites: een bezoeker neemt dezelfde profiel gegevens (o.a. contactgegevens en voorkeuren) mee over alle portaal sites (zie ook afbeelding 16): - de velden van inschrijvingsformulieren worden automatisch ingevuld; - er wordt (op basis van de voorkeuren) gerelateerde informatie getoond; - op basis het adres wordt relevante location based informatie getoond; - lijsten en zoekresultaten worden gefilterd op basis van de individuele voorkeuren.

De voordelen  een betere UX: - een profiel aanmaken wordt eenvoudiger; - een gebruiker moet maar 1 paswoord onthouden; - sommige taken kunnen geautomatiseerd worden.  een beter vindbaarheid van de informatie: - de website kan relevante informatie pushen  een betere toegankelijkheid voor kwetsbare groepen: - anderstaligen kunnen gemakkelijk inloggen m.b.v. hun sociaal profiel Tip! Voor het faciliteren van het inloggen via het sociaal profiel raden wij Janrain Engage en Capture aan.

18/30


Afbeelding 15: de sociale login op de US site van Toerisme Vlaanderen

Afbeelding 16: een gemeenschappelijk winkelwagentje en profiel voor Collishop.be, Cookozi.be en Dreamland.be (2 sites van de Colruyt Groep)

19/30


2.3 EEN UNIFORME PERSONALISATIE MODULE OP DE HOMEPAGE Wat? Een bezoeker kan op alle portaalsites op een uniforme manier een stuk van de inhoud van de homepage zelf kiezen > zie punt 1.3 Waarom? Niettegenstaande de vele voordelen van een gepersonaliseerde homepage zien we in de praktijk vaak dat de bezoekers van een site geen gebruik maken van deze mogelijkheid omdat de interactie voor niet ervaren internetgebruikers vaak te ingewikkeld is. Daarom raden we aan om m.b.v. een uniforme aanpak over alle portaal sites de leercurve te verlagen. Hoewel zowel de navigatie als de overige inhoud van de homepages van de portaal sites onderling erg verschillend zullen zijn, blijven de noden en voorkeuren van de bezoeker steeds hetzelfde. Een uniforme (zowel qua functionaliteit als inhoud) personalisatie module komt hieraan tegemoet. Hoe? zie punt 1.3

2.4 GEPERSONALISEERDE NIEUWSBRIEVEN Het sturen van gepersonaliseerde nieuwsbrieven is een efficiënte manier om de retentie (i.e. het aantal herhaalbezoeken) jullie bezoekers te verhogen en de UX te verbeteren. Mensen zijn immers lui en gaan meestal niet spontaan op zoek naar (nieuwe) informatie die ze niet dadelijk nodig hebben (cf. ook de wet van Mooers4). Daarnaast merken we ook in de praktijk dat wanneer nieuwsbrieven te weinig relevante informatie bevatten, mensen deze snel links laten liggen. Wij raden jullie dan ook aan om jullie bezoekers op - een door hen gekozen – frequentie (eenmaal per week, eenmaal om de twee weken, eenmaal per maand) op basis hun voorkeuren en hun surfgedrag (segmenten) een gepersonaliseerde nieuwsbrief te sturen met korte teaser teksten.

4 An information retrieval system will tend not to be used whenever it is more painful and troublesome for a customer to have information than for him not to have it.

20/30


Deze op maat gesneden nieuwsbrieven zullen weer nieuwe reacties losmaken, die u helpen om de online dialoog verder te optimaliseren. Tip! Om deze reacties in kaart te kunnen brengen en aldus nog volledigere profielen op te bouwen BlueConic aan (zie ook pagina 25).

2.5 EEN UNIFORME, CONVENTIONELE LAY-OUT Wat? Het implementeren van dezelfde conventionele 3 kolommen lay-out voor alle portaal sites. Deze lay-out bestaat uit een horizontale hoofdnavigatie in de header en een verticale locale navigatie in de linkerkolom, de primaire inhoud van de pagina in de centrale kolom en uitgaande links naar gerelateerde inhoud en secundaire inhoud in de rechterkolom. (zie afbeelding 17) Waarom? Hoe conventioneler de lay-out, hoe intuïtiever bezoekers navigeren. En door deze lay-out te implementeren voor alle portaal sites, creëren we voor de bezoeker een uniforme UX.

21/30


Hoe?

Afbeelding 17: de 3 kolommen lay-out

22/30


2.6 HET HERGEBRUIK VAN HTML TEMPLATES Wat? Het hergebruiken van sommige HTML templates, die reeds werden ontwikkeld voor andere portaal sites, voor gemeenschappelijke type pagina’s zoals bijv. een “zoekresultaten”-pagina. Waarom? Voor de meeste type pagina’s bestaan er conventionele design patterns5 , zodat we deze pagina’s niet opnieuw hoeven te ontwerpen voor elke portaal site. Hierdoor kan een site eigenaar besparen op zijn budget en verlaagt de leercurve van de bezoekers. Hoe? Voor onderstaande type pagina’s raden wij aan dezelfde HTML template te (her)gebruiken:  mijn gidsen (alle pagina's)  profiel (alle pagina’s)  zoekpagina  zoekresultaten pagina  publicaties overzichtspagina  publicaties detailpagina  FAQ  nieuws overzichtspagina  nieuws detailpagina  evenementen overzichtspagina  evenementen detailpagina  contact pagina  sitemap

Een design pattern is een herbruikbaar, algemeen aanvaard interactie ontwerp voor de meest voorkomende interacties op websites. Meer info: http://developer.yahoo.com/ypatterns/

5

23/30


3. VISIE IN PRATIJK GEBRACHT 3.1 ZONDER CMS, GEEN BOTTOM-UP NAVIGATIE OF PERSONALISATIE Onze hele visie is gebaseerd op de vaststelling dat de potentiële bezoekers van jullie verschillende portaalsites geen eendimensionale personages zijn die enkel in informatie over een bepaalde school of een gemeenschapscentrum geïnteresseerd zouden zijn maar complexe individuen die geïnteresseerd zijn in alles wat met leven en werken in Brussel te maken heeft en dat om een goede UX te kunnen garanderen de relevantie van de aangeboden informatie essentieel is. En om de relevantie van individuele brokjes informatie (bijv. de infofiche van een school) te verhogen, raadden we jullie aan om o.a. zo veel mogelijk gerelateerde informatie te tonen. Maar aangezien het hergebruik van inhoud – in functie van een bottom-up navigatie – over de verschillende portaalsites heen een uniforme manier van werken (zie pagina 5-7) vereist en men slechts efficiënte bezoekersprofielen & segmenten – in functie van de personalisatie van de inhoud – kan opbouwen wanneer men het gedrag van deze bezoekers over de verschillende sites heen in kaart brengt, lijkt het ons absoluut noodzakelijk om voor de nieuwe sites een gemeenschappelijk CMS en databank te gebruiken. Dit stelt jullie nl. in staat om :  op basis van de concrete behoeften van elk departement (of afdeling) uniforme publicatie workflows te gaan definiëren (zie afbeelding 18);  een gemeenschappelijke thesaurus te ontwikkelen;  content modellen met elkaar te verbinden;  templates te herbruiken voor een uniforme UX;  volledige gebruikersprofielen op te bouwen;  informatie te gaan personaliseren op basis van de individuele voorkeuren;  controle uit te oefenen op de kwaliteit en inhoud. We willen jullie ook aanraden om een overkoepelend redactie team in het leven te roepen dat de redactionele richtlijnen (SEO richtlijnen, naamconventies, gebruik van metadata, …) opstelt en toekijkt op een correctie toepassing ervan.

24/30


Afbeelding 18: content publication workflow matrix Extra voordelen van een CMS : Naast het feit dat een CMS dus absoluut noodzakelijk is om de hierboven beschreven visie in praktijk te brengen, heeft het gebruik ervan nog enkele extra voordelen:   

 



Meer informatie: jullie kunnen met minder mensen meer informatie in een nog kortere tijdsspanne publiceren; Meer kwaliteit: jullie kunnen de kwaliteit van de pagina's verhogen via QA (Quality Assurance) processen; Kosten verminderen : door het hergebruiken van content (logo's, tekst, beelden, enz.) & html templates (voor de type pagina’s) en het feit er minder tot geen assistentie meer nodig is van het IT departement; Betere samenwerking: m.b.v. praktische workflows kan de efficiëntie van mensen, die samenwerken aan een publicatie, verbeterd worden; Integratie van data van andere bronnen: jullie kunnen gestructureerde en ongestructureerde data van meerdere (externe) databanken combineren in één gecentraliseerd platform; Meerdere communicatiekanalen: jullie kunnen de informatie gemakkelijk naar verschillende communicatiekanalen (nieuwsbrief, mobiel, kiosken, iPad, ...) duwen;

25/30




Meertaligheid : op een betere manier de vertalingen en meertalige aspecten van uw publicaties beheren.

Besluit: Alhoewel de verschillende portaalsites als onafhankelijke sites ontwikkeld en gepositioneerd zullen worden, kan de hierboven beschreven visie dus enkel in praktijk gebracht worden door gebruik te maken van een gemeenschappelijke databank en CMS. Wij hebben tenslotte ook een lijst met criteria toegevoegd waar het nieuwe CMS en de zoekmachine moeten aan voldoen. Tip! Om nog volledigere profielen op te bouwen over alle communicatiekanalen heen raden wij BlueConic aan. BlueConic is een customer engagement tool die jullie in staat stelt om op basis van de in real-time verzamelde informatie over jullie (anonieme) bezoekers hen dynamisch segmenteren.

3.2 SELECTIECRITERIA VOOR HET CMS Bij het selecteren van het CMS dienen jullie rekening te houden met de volgende criteria: 1. Algemeen  Web applicatie : voor invoer in centrale databank, bij voorkeur op SQL gebaseerd  Data uitwisseling : o over portaalgrenzen heen binnen de databank in functie van het tonen van gerelateerde o import-tool die minstens volgende formaten van importbestanden ondersteund :  Excel  XML  Meertaligheid : mogelijkheid tot meertaligheid van de user-interface (veldnamen en knoppen) & van de metadata  Flexibiliteit : minimale wijzigingen van het metadataschema en de userinterface (invoermodules) door administrator (= beheerder bij de klant) : mogelijkheid om weinig gebruikte invoervelden onzichtbaar te maken (en terug tevoorschijn te halen), aanpassen van gecontroleerde lijsten, rechtenbeheer gebruikers  Duurzaamheid :

26/30


continuïteit gegarandeerd (digitale gegevens moeten blijvend toegankelijk en leesbaar zijn) o duidelijke exit procedure o geen vendor lock-in (voldoende documentatie van het system op niveau van gebruiker, administrator en ontwikkelaar, zodat iemand die vertrouwd is met de gebruikte technologieën ermee aan de slag kan) o support en hulpverlening bij inhoudelijke en technische problemen  Veiligheid : o loggen van alle wijzigingen o rollback-functie  Opleiding voorzien voor de administrator 2. Op objectniveau  Gebruiksvriendelijkheid invoermodules : o laagdrempelig : geen uitgebreide handleiding/opleiding nodig om te kunnen starten o voorzien van duidelijke handleiding of gebruiksaanwijzing o koppeling bijlagen in verschillende bestandsformaten (multimediaal): TIFF, JPEG2000, JPEG, GIF, WAV, MP3, MPEG2, PDF, Word, Excel, ODF o mediamanagement tool (opgeladen fotobestanden kunnen converteren, verkleinen, taggen, …) o meerdere bijlagen in één keer kunnen opladen o publicatie op het web kunnen bepalen op objectniveau  Gedifferentieerde invoermodules per portaal (profielen met eigen metadata schema’s, trefwoordlijsten… naargelang type object)  Efficiënt en doeltreffend databeheer : o zoeken vervangfunctionaliteit per veld o zoeken vervangfunctionaliteit per veld, met mogelijkheid om de vervanging per record (niet ‘blindelings’) door te voeren o binnen een selectie van objectfiches een leeg veld kunnen invullen in alle geselecteerde objectfiches (bulkinvoer) o kopieerfunctie van integrale objectfiche o mogelijkheid om bepaalde velden te kunnen herhalen (occurences toevoegen)  Mogelijkheid tot clustering van objectfiches 3. Zoekfunctionaliteiten  Eenvoudig zoeken : o over alle velden heen o binnen één vrij veld : selecteren uit een lijst / autocomplete o

27/30




Uitgebreid zoeken : o visualisering van een aantal velden van de objectfiche o verfijning zoekresultaten (visuele voorstelling van die verfijning) o semantische verbanden/relaties (bvb. alle objecten die met één gemeenschapscentrum in verband kunnen worden gebracht) o opslaan van zoekopdrachten 4. Rapportage- en afdrukfunctionaliteiten  Genereren van diverse rapporten (in PDF- en MS Office-formaat), waaronder : o overzichtslijst van geselecteerde objectfiches met korte object-ID (vast te leggen vij configuratie) en 1 afbeelding o detailfiche van een geregistreerd object met weergave van alle ingevulde velden alsook alle bijlagen die aan dit veld gekoppeld zijn (afbeeldingen, documentatie…) o rapport op basis van velden geselecteerd door gebruiker 5. Exportfunctionaliteiten  Universele connector (API) op databank toegankelijk voor derden  Toegankelijk maken van metadata voor hergebruik door te allen tijde export mogelijk te maken van alle gegevens ende samenhang ervan in XML gestructureerd volgens een erkend metadata model (minimale eis : XML/ Dublin Core)  Genereren van werkinstrumenten (minimaal in Excel-formaat) : o veldwerkfiche (lege objectfiche per invoermodule) o eigen thesaurus 6. Thesauri en gecontroleerde / gestandaardiseerde woordenlijsten  Externe standard thesaurus: AAT-ned : o verplicht gebruik door integratie in software of via webservice o hiërarchische structuur van de thesaurus visualiseren  Extra veld voor eigen thesaurus : o thesaurusbeheer gekoppeld aan rechtenbeheer o hiërarchische structuur van de thesaurus visualiseren o afbeeldingen aan de thesaurus koppelen o documentatie mogelijk maken  Lijst van personen en instellingen : o koppelen aan relevante velden o bij aanmaak nieuwe persoon / instelling mogelijkheid geven om URL te koppelen  Zoveel mogelijk gecontroleerde velden / velden met een keuzelijst om vervuiling te voorkomen (minimale eis : ontsluitingsvelden waarop gezocht kan worden)

28/30




Mogelijkheid tot inspelen op toekomstige evoluties zoals semantische web technologieën 7. Technische metadata  Mogelijkheid om informatie over auteursrechten op te nemen in de metadata van de gekoppelde mediabestanden  Mogelijkheid om publicatie van gekoppelde mediabestanden op het web te bepalen op stukniveau (per mediabestand) 8. Rechtenbeheer / gebruikersmanagement  beschikken over gebruikersprofielen (lees-en schrijfrechten vast te leggen bij configuratie)  gebruikersprofielen in te stellen door administrator  gebruikersbeheer door administrator  gebruikers rechten geven tot één of meerdere portaalsites en/of onderdelen van een individuele portaalsite  gebruikers rechten geven tot selectie objectfiches (ook over collectiegrenzen heen) 9. Testomgeving  Mogelijkheid om een testomgeving op te zetten. 10. SEF/SEO  Mogelijkheid om de tag te personaliseren  Mogelijkheid om de <meta> tags te personaliseren  Mogelijkheid om statische SEF URL’s aan te maken  301 server re-direct ondersteuning 10. Syndicatie  RSS feeds functionaliteit  Ondersteuning van “live bookmarking” in FireFox en IE browsers. 11. Ontsluitingsinterface / front-end  Generatie van XHTML compatibele markup code  Geen generatie van overbodige en voor bepaalde browsers storende code  Generatie van gestructureerde markup code  Scheiding van inhoud en vormgeving  De HTML editor voor het invoeren van teksten moet werken op een minimum aan browsers (IE 5.5+, Firefox 0.8+, Netscape 7+) op Windows en Macintosh  De HTML editor mag enkel toegelaten (beschreven) stylesheets gebruiken  De markup code, die door de HTML editor wordt gegenereerd, moet XHTML compatibel zijn 29/30 VGC PORTAAL SITES: GLOBALE VISIE DOCUMENT 12. Andere functionaliteiten  Mogelijkheid om op beelden in te zoomen  Mogelijkheid om als websitebezoeker te reageren op een object, met redactie en feedback op “user generated content” (web 2.0-toepassing)  Mogelijkheid tot het aanmaken van persoonlijke selecties /gidsen (+ exporteren, e-mailen…)  Linken naar sociale media (Facebook, Twitter, …)  In functie van auteursrechten op afbeeldingen : o Watermerkfunctionaliteit o automatische verkleining originele afbeeldingen  Anysurfer of WAI ondersteuning 3.3 SELECTIECRITERIA VOOR DE ZOEKMACHINE Bij het selecteren van de zoekmachine dienen jullie rekening te houden met de volgende criteria:           voldoende capaciteit; onderhoudsgemak; de mogelijkheid om het hele web te doorzoeken; de mogelijkheid om verschillende bestandsformaten (PDF, html pagina’s, ...) te doorzoeken; de mogelijkheid om beveiligde inhoud te doorzoeken; de aanwezigheid van een API om de weergave van de zoekresultaten te personaliseren; integratie met het gekozen CMS; het automatisch ontdekken/verwijderen van dubbele zoekresultaten; de mogelijkheid om de algoritmen voor het zoeken en de zoekresultaten te tweaken; de mogelijkheid om de resultaten van meerdere zoekmachines / databronnen samen te voegen. 30/30 KLANT: VGC JOBOMSCHRIJVING: portaalwebsite JOBNUMMER: BIJLAGE FUNCTIONEEL ONTWERP Deze bijlage beschrijft welke functionaliteiten voor content beheerders het CMS minimaal dient CONTACTPERSOON KLANT: te bevatten, de mogelijke rollen van een lokaal Content Management team, alsook een ... mogelijke publicatiecyclus. Aangezien het opzetten van een cyclus en de verdeling van de rollen voor een groot deel wordt bepaald door de bestaande manier van werken en de voorhanden DATUM: 11/10/2011 KUNSTMAAN-ACCOUNT: zijnde resources , dienen de rollen en de publicatiecyclus afgestemd te worden op de specifieke noden van de verschillende sporen van de VGC. Mattias Vermeire 1. ROLLEN LOKAAL CM TEAM Lokale content administrator: Korte beschrijving  Ontwikkelt de content- en publicatietemplates.  Zorgt ervoor dat de lokale en geïmporteerde content getagd wordt met de juiste meta-data.  Coördineert en/of beheert de content creatie, de goedkeuring en workflow.  Creëert en beheert lokale content management accounts/gebruikers. Content eigenaar: Korte beschrijving Deze gebruiker is de eigenaar van de content en geeft de definitieve goedkeuring voor het publiceren van de content. Hij is verantwoordelijk voor:  Om te bepalen wanneer content moet aangepast worden of wanneer er een nieuwe content is vereist.  Te waken over de frisheid en juistheid van de content.  Het opstarten van de CM workflow. Content auteur: Korte beschrijving Deze gebruiker is de auteur/schrijver van de inhoud. Hij creëert nieuwe content met behulp van de sjablonen. Hij voegt ook de metadata toe aan de inhoud of definieert taxonomie. Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 info@kunstmaan.be 1/5 Content meta-data auteur: Korte beschrijving Deze gebruiker creëert meta-data op basis van de gebruikte standaarden. Content approver: Korte beschrijving Deze gebruiker is verantwoordelijk voor een review van de content om ervoor te zorgen dat zij alle eisen voldoet. Deze rol wordt vaak vervuld door de content eigenaar. Maar deze rol kan ook gespeeld worden door de lokale content administrator. 2/5 2. PUBLICATIECYCLUS 1. De content auteur creëert nieuwe content. 2. De content auteur selecteert een content template. 3. De content auteur voert de meta-data in. 4. De content auteur selecteert een publicatie template. 5. De content auteur bekijkt een preview van de content. 6. De content auteur schrijft de content weg naar de repository. 7. De goedkeuring wordt gevraagd aan de content approver. 8. De content approver keurt de content goed. 9. De content auteur start het publicatie proces. 10. De content wordt gepubliceerd. 3/5 3. MINIMALE FUNCTIONELE VEREISTEN Vereiste Korte beschrijving User management De mogelijkheid om gebruikers aan te maken en deze gebruikers verschillende rollen en rechten toe te kennen. Log in De mogelijkheid om authenticatie processen op te zetten voor de verschillende rollen. Ondersteuning meertaligheid De ondersteuning van een Nederlandstalige, Franstalige, Engelstalige en Duitstalige content lifecycles. Content wijzigen De mogelijkheid om bestaande content te wijzigen. WYSIWIG content editor De via een editor aan niet technische gebruikers de mogelijkheid bieden om content toe te voegen en/of te wijzigen Content bewaren De mogelijkheid om toegevoegde content weg te schrijven naar de directory. Content publiceren De mogelijkheid om content te publiceren. Integratie van “rich content” De mogelijkheid om multimediale bestanden (bijv. Flash) toe te voegen aan de content. Preview van niet gepubliceerde content De mogelijkheid om content, die nog niet werd gepubliceerd, te bekijken in de publicatietemplate. Spellingcontrole De mogelijkheid om de content te checken op spellingsfouten. Content importeren en exporteren De mogelijkheid om content in een aantal standaard (DOC, RTF, XLS, PDF, ...) formaten te importeren en exporteren. Content indexen De mogelijkheid om content log files te genereren en updaten. Content zoeken De mogelijkheid om content van specifieke content auteurs op te vragen. Content goedkeuring aanvragen De mogelijkheid om een goedkeuring (voor publicatie) te vragen voor nieuwe content. Automatische archivering De automatische archivering van alle versies van de content in de repository. Enquêtes en formulieren aanmaken De mogelijkheid om enquêtes en formulieren aan te maken. Nieuwe pagina’s aanmaken De mogelijkheid om een nieuwe pagina’s toe te voegen. Workflows opzetten en De mogelijkheid om publicatie workflows op te zetten. 4/5 beheren E-mail notificatie Het versturen van e-mail notificaties voor bepaalde workflow of content lifecycle events. Beheer site structuur De mogelijkheid om nieuwe categorieën toe te voegen en om de structuur te wijzigen. SEF URL’s De mogelijkheid om search engine friendly URL’s aan te maken en te beheren. Sitemap De mogelijkheid om een sitemap te genereren. Meta-data ondersteuning De mogelijkheid om voor alle content meta-data toe te voegen, te wijzigen en te beheren. Meta-data validatie De mogelijkheid om validatie rules te definiëren voor het ingeven of importeren van meta-data. Thesaurus ondersteuning De mogelijkheid om een thesaurus aan te maken Link checker De mogelijkheid om interne en externe links te checken. Anysurfer richtlijnen checker De mogelijkheid om te checken of de content beantwoordt aan de Anysurfer/accessibility richtlijnen Rollback De mogelijkheid om de huidige versie van de content te vervangen door een vorige versie. 5/5 Oplijsting "datagegevens/databanken" VGC‐document ‐ 20 oktober 2011 Zie ook de richtlijn onder hoofdstuk 7 van het tweede deel van het lastenboek (functionele en technische eisen ‐ modulariteit en Integratie ‐ punt 80) Het CMS systeem kan data ophalen uit een SQL‐Server database van de VGC, evenals uit externe databanken zoals die van CultuurNet) en dit als gestructureerde content in een webpagina tonen. Content object Nieuwsbericht titel publicatiedatum publiceren tot datum publiceren Inleiding Detail Foto Foto tekst Document 1 Document 1 tekst Document 2 Document 2 tekst URL (meer info) URL tekst Open link in (target) Websites waar dit nieuwsbericht mag gepubliceerd worden aanvinken Activiteit Onderdelen titel datum van ‐ tot korte beschrijving lange beschrijving thumbnail (foto) afbeelding (foto) video URL (koop ticket) URL (website) locatie Gemeente gemeenschapscentrum categorie (type) ‐ Thema Onderwerp Bron VGC Interne databank : nieuwsmodule VGC Interne databank : Kalender 22 / Externe databank : planningssoftware praktisch (1) contact (2) Prijs aantal deelnemers MIVB plan taal doelgroep inschrijvingsdatum contactgegevens Cursus titel wanneer taal thema doelgroep WAAR e‐mail URL (website telefoon prijs leervorm opmerkingen In kader van In samenwerking met lesgever ……. VGC Interne databank : cursusaanbod / Externe databank : planningssoftware Naam beschrijving contactgegevens (3) URL (meer info) URL (website) e‐mail praktisch (7) zaalgebruik Google map contact ….. VGC Interne databank : organisatiedatabank / cursusaanbod / Externe databank : planningssoftware Organisatie / gemeenschapscentrum School getuigenis vacature link cultuurkrant aanvraagformulier partner publicatie contact subsidie getuigenis financiële ondersteuning procedure …. VGC Interne databank (zeer uitgebreid) : titel scholendatabank net gemeente schoolniveau aanbod organisatie sfeer ligging (Google map) vestigingen bereikbaarheid inschrijven contact …. Data die nog niet in een gestructureerde databank van de VGC zitten : CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do CMS / To do MuntPunt ‐ OPB Schema databanken en integratie met verschillende toepassingen (web en drukwerk) van huidige situatie. (Software voor planning allerhande activiteiten wordt begin 2012 opgestart.) - www.UitinBrussel.be www.gratisinBrussel.be - www.kidsinBrussel.be CultuurNet Eigen VGC‐databanken : Opgenomen in eigen sites en gebruikt als werkinstrument binnen Intranet van de VGC : - Agenda 22 GC’s - Cursusaanbod - Scholen (ook werkinstrument op intranet : lijsten, etiketten, mailing…) - Organisaties Scholen (ook werkinstrument op intranet : lijsten, etiketten, mailing…) - Telefoonrepertorium - Wonen in Brussel (buurtbeschrijving) - Nieuwsmodule op websites van VGC (incl. onderwijs, GC’s, …) - SPort Informatie Netwerk (SPIN) ‐ Brussel Agenda.be (tweetalig) Stichting voor de Kunsten - Bronks Abc Mim Bozar Kinepolis Beursschouwburg KVS Gemeenschapscentra… Digitale kaart - bibs gc’s sportinfrastructuur (SPin) scholen jeugdateliers jeugdhuizen kinderdagverblijven buurtbeschrijving Publicaties uit databanken - “Agenda 22” (tweejaarlijks) : Kalender GC “Talentmix” (tweejaarlijks) : Cursusaanbod Sportgids (cursussen, kampen, verenigingen…) Homepage Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Zoek Wat kan je doen in Brussel? Topic Topic Topic Topic Topic Topic Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Topic Topic Topic Topic Topic Topic Ouders > Volg ons ook op: Jeugdwerkers > Cheap city! Bel ons NU! 0800/92 98 98 Zwemweek! Ganse week aan 3 Euro! Image Nog toffe goedkope activiteiten > Interessante nieuwtjes Of mail naar:info@jeugdportaal.be Zeker de moeite: - Hulp bij subsidies - Brusselse jeugd op TV Brussel - Aanbod Meer aanbod in de kijker > Voorbeeld Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Voorbeeld Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Schrijf je in op de nieuwsbrief! - Daarom! - Daarom! - Daarom! Schrijf in! Wij helpen je met: Fuif organiseren? Voorbeeld Image Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Lorem ipsum Meer interessant nieuws > Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Welkom Michael Volg ons ook op: Pas profiel aan Zoek Flickr > Youtube > VGC Copyright 2011 / Terms of Use / Privacy Waar kunnen we nog helpen > Delicious > RSS > Contacteer ons! Marieke marieke@vgcjeugd.be 02/ 930 930 0 Design by Kunstmaan Themapagina Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak ZOMER!!!!! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Social sharing Bel ons NU! 0800/92 98 98 Of mail naar:info@jeugdportaal.be Zoek Wat kan je doen in Brussel? Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Ouders > Volg ons ook op: Jeugdwerkers > DE tofste activiteit deze zomer? Nieuwsbrief: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec 0 orci viverra tellus non orci. Nulla facilisi. Suspendisse sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. - Daarom - Daarom - Daarom Voorbeeld van toffe activiteit Enter email GO Zeker de moeite: - Aanbod - Aanbod - Aanbod - Aanbod - Aanbod Zomergids! Voorbeeld van een zomergids Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Relevante brochures: Voorbeeld Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Interessante nieuwtjes - Aanbod - Aanbod - Aanbod Hulp nodig met: Fuif organiseren? Voorbeeld Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Voorbeeld Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, Stel je eigen gids samen > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Lorem ipsum Wat kan je doen? Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak TOP 3 topics: Topic Topic Topic 1 14 21 Wat kan je doen in Brussel? Zoek Link naar social Toon alle categoriën > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Interne links Suggesties om te doen!!! Image Ouders > Artikel CHEAP CITY Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Interessant artikel: Image Wij helpen je! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Meer op onze Facebook pagina > Toffe activiteit in Anderlecht Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer hulp > Meer creative voorbeelden > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Jeugdwerkers > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Nieuwsbrief: - Daarom - Daarom - Daarom Enter email Activiteit: Image GO Waar kan je iets doen? Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak TOP 3 topics: Topic Topic Topic 1 14 21 Waar kan je iets doen? Fietsen Zoek Link naar social Toon alle categoriën > 145 resultaten voor ‘Fietsen’ Filter op basis van: Locatie Anderlecht (34) Sint Gillis (10) Meer > Toon alle opties > Type activiteit: Jeugdvakantie (34) Sportweek (10) Prijs: Oplopend Aflopend Interne links Topic Sport (44) Cultuur (9) Meer > Meer > > Afstand tov thuisadres > Afstand tov station Image Ouders > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Jeugdwerkers > Google Map Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Deze activiteit bevindt zich op: 5 km van thuis (Ongeveer 25min) Nieuwsbrief: - Daarom - Daarom - Daarom Enter email GO Zoekresultaat ‘wat kan je doen?’ Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak TOP 3 topics: Topic Topic Topic 1 14 21 Wat kan je doen in Brussel? Fietsen Zoek Link naar social Toon alle categoriën > 145 resultaten voor ‘Fietsen’ Filter op basis van: Locatie Anderlecht (34) Sint Gillis (10) Meer > Toon alle opties > Type activiteit: Prijs: Jeugdvakantie (34) Sportweek (10) Meer > Oplopend Aflopend Interne links Topic Sport (44) Cultuur (9) Meer > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. <Vorige123Volgende> Titel activiteit Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit Titel activiteit Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit Titel activiteit Image Image Ouders > Image Jeugdwerkers > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Nieuwsbrief: - Daarom - Daarom - Daarom Enter email GO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit Titel activiteit Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit Titel activiteit Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit Titel activiteit Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer over deze activiteit > Topic , Locatie, Type activiteit <Vorige123Volgende> Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Pas profiel aan Zoek Flickr > Youtube > VGC Copyright 2011 / Terms of Use / Privacy Welkom Michael Volg ons ook op: Delicious > RSS > Contacteer ons! Marieke marieke@vgcjeugd.be 02/ 930 930 0 Design by Kunstmaan Activiteit detail Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Categorie: Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic < Terug naar zoekoverzicht 1 14 21 13 3 52 7 11 92 7 1 2 39 2 41 6 4 380 Titel activiteit Onderwerp: Lorem ipsum dolorem Taal: NL Prijs: 2 euro/kind Leeftijd: vanaf 12 jaar Meer info: www.meeractiviteit.be Inschrijvingsdatum: ten laatste 12/11/2010 Waar inschrijven: Jeugddienst Grote straat 23 1000 Brussel 03/22 23 344 Link naar social Interne links Toon dichtstbijzijnde bushalte Toon dichtstbijzijnd station Schrijf je in! Image Ouders > Bewaar in ‘mijn gids’ > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Jeugdwerkers > Image Social sharing 918 Likes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Image Wie is al ingeschreven? (102 inschrijvingen) Image Image Image Social sharing Schrijf je in! Zie ook: Suggesties: Image Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. - Interne link - Interne link - Interne link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Nieuwsbrief: - Daarom - Daarom - Daarom Enter email GO Antwoorden overzicht Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Antwoorden Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Filter op type: Link naar social Selecteer Cheap city Image Interne links Image Image Ouders > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Meer info > Image Jeugdwerkers > Image Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Image Image Meer info > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Meer info > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Nieuwsbrief: - Daarom - Daarom - Daarom Enter email Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Meer info > GO Antwoorden – Cheap city Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Cheap city Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Link naar social Interne links Cheap Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Cheap Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Cheap Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Image Ouders > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Jeugdwerkers > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Cheap Cheap Cheap Nieuwsbrief: - Daarom - Daarom - Daarom Enter email Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. GO VGC – Brochures Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Publicaties Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Filter op type: Image Image Image Image Link naar social Selecteer Speelpleingids Lorem ipsum Download [PDF 277kb] Speelpleingids Lorem ipsum Download [PDF 277kb] Speelpleingids Lorem ipsum Download [PDF 277kb] Speelpleingids Lorem ipsum Download [PDF 277kb] Image Image Image Image Speelpleingids Lorem ipsum Download [PDF 277kb] Speelpleingids Lorem ipsum Download [PDF 277kb] Portfolio Speelpleingids Lorem ipsum Download [PDF 277kb] Portfolio Speelpleingids Lorem ipsum Download [PDF 277kb] Portfolio Portfolio Interne links Image Ouders > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Image Jeugdwerkers > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Donec viverra tellus non orci. Nulla facilisi. Nieuwsbrief: - Daarom - Daarom - Daarom Meer over dit item > Enter email Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Meer over dit item > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Meer over dit item > GO VGC – Brochures Nieuws | Publicaties |FAQ | Contact VGC NL | EN | FR | DE Wat is er te doen | Hulp nodig | Waar vind je ons | xx Contacteer ons! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Portfolio Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Suspendisse orci sem, viverra vitae, adipiscing sed, tincidunt a, tellus. Morbi a leo sed velit nonummy tristique. Eigen ruimte Nieuws | Publicaties |FAQ | Contact NL | EN | FR | DE Logo Zoek Wat kan je doen? | Waar kan je iets doen? | Antwoorden | Inspraak Michael Liekens Je profiel Bewaarde gidsen Activiteiten Saved searches Mensen met zelfde interesses: Image Icon Icon Icon Icon Icon Icon Icon Icon Bewaarde gidsen Zomergids Je profiel is voor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. 70% tab compleet. Lente 2010 Pas profiel aan Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Test 39 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Lente Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra tellus non orci. Nulla facilisi. Bekijk alle gidsen > Activiteiten op de kaart Kalender > Afstand tov thuisadres > Afstand tov station Google Map Deze activiteit bevindt zich op: 5 km van thuis (Ongeveer 25min) Navigatie Navigatie Navigatie Navigatie Navigatie Navigatie Pas profiel aan Zoek Flickr > Youtube > VGC Copyright 2011 / Terms of Use / Privacy Welkom Michael Volg ons ook op: Delicious > RSS > Contacteer ons! Marieke marieke@vgcjeugd.be 02/ 930 930 0 Design by Kunstmaan Webconcept VGC JEUGDPORTAAL 24 maart 2011 VERSIE 2.0 Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 Contact: Michael Liekens Michael.liekens@kunstmaan.be 0495/907749 Kunstmaan.be INHOUDSOPGAVE 1! Inleiding ..................................................................................................................................... 3! 2! Online strategie ...................................................................................................................... 4! 2.1! Hoe het bereik vergroten en de bezoekers activeren? 4! 2.1.1! Findable (SEO = Search Engine Optimised) 4! 2.1.2! Shareable (SMO, Social Media Optimised) 5! 2.1.3! Portable (MMO = Mobile Media Optimised) 6! 2.2! Doelgroepgerelateerde content aanbieden 7! 2.3! Steeds kennis, sensibiliseren, activeren linken 8! 2.4! Nieuwe ‘leden’ werving en database verrijking 8! 2.5! Bezoekers uit verschillende doelgroepen in contact brengen en laten netwerken.9! 3! Informatie architectuur ....................................................................................................... 10! 3.1! Homepage 10! 3.2! Themapagina 14! 3.3! Wat kan je doen 15! 3.4! Waar kan je iets doen 17! 3.5! Antwoorden 18! 3.6! Activiteitenpagina 19! 3.7! Cheap City 20! 3.8! Doelgroeppagina 21! 3.9! Publicaties 22! 2/22 1 INLEIDING In dit document wordt beschreven hoe het webconcept uitgewerkt wordt. Zowel strategie als informatiearchitectuur worden behandeld. We illustreren dit concept aan de hand van wireframes. De meest voorkomende types pagina’s zijn uitgetekend en worden in dit document besproken en verder toegelicht. 3/22 2 ONLINE STRATEGIE 2.1 HOE HET BEREIK VERGROTEN EN DE BEZOEKERS ACTIVEREN? Hieronder sommen we enkele zaken op die belangrijk zijn om deze doelstelling te bereiken. 2.1.1 Findable (SEO = Search Engine Optimised) Om het bereik van de site te vergroten, is het ‘findable’ zijn zeer belangrijk. Het lijkt inmiddels een evidentie: de site moet geoptimaliseerd zijn voor zoekmachines (Google, maar ook Facebook search bv.). Door een grondige analyse en optimalisatie van de content op deze SEO-optimised te maken, kan het bereik van een website met 30% stijgen. Het is dus belangrijk om dit regelmatig te evalueren en optimaliseren. Technologie keuze hier eveneens belangrijk. Daarom opteren we voor HTML 5 en beperken we zoveel mogelijk het gebruik van Flash. Onze oplossingenop vlak van CMS houden hier rekening mee: urls en SEO info zijn automatisch geoptimaliseerd voor zoekmachines. (Dit wordt later verder besproken in Fase 3 van dit project onder de Tools) Op het gebied van de content, werken we met veel tekst, met veel interne links, waarbij de keywords in de titels gebruikt worden. Bij het gebruik van foto’s, films wordt er steeds automatisch een duidelijke alt-tag voorzien. Indien we content overnemen of inbedden vanuit andere (social media) sites, kiezen we steeds voor de meest SEO-vriendelijke oplossing (bv. Youtube voor video, Flickr voor foto’s). De content staat op deze externe sites gehost en wordt ‘ge-embed’ in de VGC jeugdportaal site. We weten dat de meeste bezoekers niet noodzakelijk op de site terechtkomen via de homepage. De meesten zullen binnenkomen via search engines, via referring links en via shorturls die we in onze communicatie gebruiken. Zelfs als ze op een obscure binnenpagina landen, moeten ze zich nog een idee kunnen vormen van het kader waarin ze zich bevinden. Hiermee houden we rekening in de architectuur van de site: waar je je ook bevindt, er is steeds een duidelijke header en footer die je herkenning, structuur en links naar andere pagina’s aanbiedt. 4/22 Indien de bezoekers op een ‘interne pagina’ belanden, zonder dat ze weten wie VGC jeugdportaal site is, zullen ze intuïtief naar de homepage gaan, waar men met duidelijke doelgerichte ingangen heeft waar duidelijker wordt gemaaktwathet VGC jeugdportaal voor de bezoeker specifiek kan betekenen. De zoekfunctie van de site zelf wordt één van de belangrijkste “tools” van deze site. De zoek bevindt zich dan ook in onze voorgestelde structuur bovenaan de pagina op de homepage en steeds onderaan in de footer. Uit de analyse van wat bezoekers intypen in deze zoekbox kunnen we veel bijleren en waar nodig bijsturen. De website moet eveneens geoptimaliseerd zijn voor het Semantic Web. Door de site klaar te maken voor Semeantic Web toepassingen, wordt het mogelijk om kennis en data veel makkelijker en breder te gaan verspreiden en kan de VGC jeugdportaal site content eveneens makkelijk teruggevonden worden. (Dit wordt in het technische advies dat aan VGC gegeven wordt verder besproken) 2.1.2 Shareable (SMO, Social Media Optimised) Om de bezoekers te activeren, moet de website zoveel mogelijk ‘shareable’ zijn. Hiermee bedoelen we niet: het toevoegen van de klassieke Social Media sharebuttons bij elk artikel. Van zodra een content item een eigen url heeft, is het technisch gezien “shareable”. Zelfs een internet-leek weet ondertussen namelijk hoe je bijvoorbeeld op je Facebook profiel de url van een foto, artikel, filmpje of afbeelding kan plakken om het te delen met je netwerk. Met shareable bedoelen we: dat alle onderdelen van de site (artikels, foto’s, contactinformatie, filmpjes, evenementen, enz) de intrinsieke eigenschap hebben dat een bezoeker ze kan en wil delen via zijn sociale netwerken. Kan omdat o.m. het item een eigen url heeft. Wil omdat het de bezoeker een reden geeft om het te delen. Een voorbeeld: een bezoeker deelt een event url met zijn/haar vrienden omdat er vanaf 8 deelnemers een groepskorting is, omdat hij er dan zeker van is dat ze samen in groep iets kunnen doen, ... . De content moet zich met andere woorden gedragen als ‘social objects’ = content die: • Social Media Optimised is • Kort en krachtig is (zodat het makkelijker/sneller reactie en commentaar uitlokt bij de bezoeker) 5/22 • • • “Giving them something to talk about” is: niet het einde maar het begin van een conversatie; zet aan tot actie Klein en handig genoeg is om door te spelen (technisch: kleine byte size, embeddable, etc) Bijdraagt door duidelijke VGC jeugdportaal site branding tot functie van de site als archief en “hub” - “more where this came from” Concreet kan dit betekenen dat na een activiteit niet gewoon de hele video op de site wordt gezet, maar dat de meest frappante uitspraken eruit gelicht worden, voorzien van een transcript en bij voorkeur gehost op een social media platform om het vervolgens op de site te embedden. Indien we persacties organiseren, moet de geprinte content ook steeds terug te vinden zijn op de website, waar er stukken worden opgenomen die ‘shareable’ zijn. Op deze manier kan de content rond VGC jeugdportaal site zich gedragen als “zendeling” van de overkoepelende VGC jeugdportaal site boodschappen. Indien de bezoeker onze content kan en wil delen, moet er nog bekeken worden via welke kanalen we dit aanbieden. Op dit moment zijn Netlog, Facebook en dergelijke evidente kanalen, maar naar de toekomst toe, kan dit snel evolueren. De beste keuze van het kanaal moet steeds onderzocht worden . We stellen dan ook voor om hiervoor ‘conceptuele’ ruimte voor te voorzien, zodat we snel nieuwe media kunnen inschakelen indien die zich aandienen zonder de hele structuur en design van de website om te hoeven gooien. 2.1.3 Portable (MMO = Mobile Media Optimised) Om het bereik van de site te vergroten, moeten we er naar de toekomst toe terdege rekening mee houden dat het computerscherm niet het enige scherm zal blijven. De site mag niet langer uitgaan van een bezoeker met een Windows PC met 1024x768 schermresolutie, breedbandinternet en Internet Explorer of Firefox als browser. Het portable maken van een website is geen puur technische aangelegenheid maar zit mee in de kern van het website verhaal. De website wordt zo uitgedacht dat deze ook vlot op andere schermen gaat functioneren. Met de komst van smartphones, netbooks en de iPads moeten we rekening houden met “consumptie” van de site via allerlei andere platformen. Niet alle 6/22 schermen moeten dezelfde content en functies kunnen aanbieden als de “reguliere” site, maar bijvoorbeeld automatische detectie van browser, het aanbieden van een mobiele versie, en desnoods ook het ter beschikking stellen van de content en functionaliteiten via platformspecifieke applicaties kunnen we het bereik en de levensduur van deze site flink uitbreiden. We stellen dan ook voor om naar technologie toe voornamelijk HTML 5 te gebruiken en geen flash (aangezien dit niet mobiel kan bekeken worden), om steeds na te denken van welke content we ook apps kunnen aanbieden, enz. 2.2 DOELGROEPGERELATEERDE CONTENT AANBIEDEN Momenteel bieden de websites een schat aan informatie aan, maar vindt de gebruiker zijn weg niet goed genoeg meer terug en moet ieder voor zich relevante inhoud gaan zoeken. Om onze verschillende d oelgroepen en profielen beter te bereiken en te activeren, stellen we voor om in alle communicatie, maar zeker binnen de webcommunicatie onze content en lay-out beter af te stemmen op de doelgroepen. Dit werd ook in de gebruikersbevraging bevestigd. • • • • Dit op de volgende manieren: Op de homepage van de website willen we meteen aangeven wat de VGC jeugdportaal sitespecifiek kan betekenen voor de persoon in kwestie. Hoe de persoon ook binnenkomt op de website, via welke onderliggende pagina dan ook, op de homepage moet duidelijk zijn wat VGC jeugdportaal site doet en kan betekenen voor hem/haar. Deze doelgroep-insteek wordt doorgetrokken door het opzetten van doelgroep landingspages, waarop er enkel content wordt aangeboden relevant voor de doelgroep en in een specifieke lay-out voor de doelgroep. Elke persoon kan zich op de VGC jeugdportaal site nieuwsbrief inschrijven en heeft hierbij de keuze om enkele bepaalde content te ontvangen, die hem interesseert, op de manier waarop hij/zij die wil ontvangen. Via RSS: op verschillende plaatsen worden nieuwsberichten (vanuit de blog bijvoorbeeld) per doelgroep aangeboden. Indien we in de pers communiceren, geven we meteen ook een shorturl mee, waarmee men onmiddellijk terechtkomt op de relevante doelgroep pagina. 7/22 2.3 STEEDS KENNIS, SENSIBILISEREN, ACTIVEREN LINKEN Om de website bezoekers te activeren, moet we bij elke relevante content steeds de nodige links aanbieden naar praktische toepassingen, naar de volgende stap. Indien men een bepaalde tool gebruikt heeft, moet er opvolgingscommunicatie zijn. Zo gaan we de bestaande VGC jeugdportaal site incrowd en nieuwe bezoekers activeren. 2.4 NIEUWE ‘LEDEN’ WERVING EN DATABASE VERRIJKING Om de website bezoekers te activeren en het bereik van de website te vergroten, is ‘leden’ werving uiteraard belangrijk, maar we mogen de database verrijking eveneens niet vergeten. Om nieuwe ‘leden’ te werven, stellen we voor om op de volgende zaken in acht te nemen: • Login/aanmelden moet makkelijk en snel zijn. Geen ellenlange formulieren, maar makkelijke opt-in (login via Netlog, Facebook/Twitter/enz) • Vraag naar aanmelden/opt-in moet steeds op relevante plaatsen en wijze gesteld worden: steeds duidelijke voordelen aankaarten (bv. nieuws op maat indien men inschrijft op nieuwsbrief, enz). Momenteel beschikt de VGC reeds over een rijke database. We moeten hier optimaal gebruik van maken en ze nog verder gaan verrijken, zodat er nog meer communicatie op maat kan ontstaan. Wie mensen juist wil bereiken, moet ze juist (leren) kennen. Om deze database verrijking uit te voeren, stellen we het volgende voor: • Database verrijking via Social CRM. Indien we het social media profiel opvragen van de bezoekers kunnen we makkelijk zijn gegevens aanvullen (bv. op basis van Netlog in profiel). • Zelf-verrijking: op relevante plaatsen aan de gekende bezoekers vragen om hun profiel aan te vullen (principe van % status Linkedin profiel). Een ‘propere’ database met aangevulde data is een solidere basis om verder te werken aan de relatie en ze te activeren. Een erg goed preference center op de site, waarmee de klantenrelatie wordt beheerd, lijkt ons een must. Hierbij vragen we enkel die zaken die we ook 8/22 feitelijk zullen gebruiken in onze communicatie. Zo gaan we niet vragen om een type info(en in zo weinig mogelijke vrije velden) op te geven als je niet specifiek naar bepaalde profielen zult communiceren. 2.5 BEZOEKERS UIT VERSCHILLENDE DOELGROEPEN IN CONTACT BRENGEN EN LATEN NETWERKEN. De bezoekers van de VGC jeugdportaal site zijn zeer divers en komen uit verschillende doelgroepen. Momenteel vinden zij elkaar niet terug en kunnen zij niet met elkaar netwerken (tenzij op eigen platform zoals Netlog). De VGC jeugdportaal site kan echter evolueren naar een hub, waarop deze verschillende initiatieven, individuen elkaar kunnen vinden, kunnen stimuleren en activeren, zonder hierbij een nieuw Facebook of Netlog platform te bouwen. We moeten de VGC jeugdportaal site ‘leden’ gewoon de mogelijkheid bieden om in contact met elkaar te treden, via welk kanaal dan ook. Dit kan door: • De mogelijkheid te bieden om zich op de website aan te melden als zijnde ‘Ik ga hier aanwezig zijn’. Op deze manier geef je te kennen dat jij er zal zijn. Als mensen je willen contacteren kan dat op je social network. 9/22 3 INFORMATIE ARCHITECTUUR Hoe gaan we de informatie op de portaalsite weergeven? Hoe gaan we deze op het scherm brengen? We beschrijven de opbouw van de website op basis van de type pagina’s die uitgewerkt worden. Elke pagina heeft een eigen gedrag, dat beschreven wordt. 3.1 HOMEPAGE Zie wireframe “homepage” De homepage van VGC-Jeugd is opgebouwd vanuit de volgende principes : • Bezoekers zoeken naar de informatie die ze nodig hebben • Informatie en diensten worden door de beheerders gepromoot De structuur van de homepage kan onderverdeeld worden in een drietal zones : Onder de algemene zoekbutton (die een zoekactieuitvoert over de hele site, en niet alleen in de activeitendatabase) en de algemene knoppen voor Nieuws, Publicaties, FAQ en de contactpagina), is er allereerst is de header, die dadelijk de aandacht trekt naar het grote zoekveld waarmee bezoekers de informatie kunnen zoeken die ze wensen. De resultaten van deze zoekactie worden weergegeven in een facetted lijst, die de resultaten opdeelt in topics of informatietypen. Aan de hand hiervan kan de bezoeker zijn resultaten filteren of sorteren. Naast deze zoekbalk bemerken we de volgende elementen van deze zone : • Topics : een korte lijst voorbeeldzoekacties die gebruikers kunnen inspireren, of die ze dadelijk kunnen gebruiken in plaats van een eigen zoekactie. Als de bezoeker op één van deze topics klikt, komt hij op een gelijkaardige facetted lijst terecht, als waarvan boven sprake • Links naar de landingspagina’s voor ouders en jeugdwerkers. Deze doelgroepen hebben hun eigen pagina’s waarin informatie die specifiek voor hen van belang is, gepromoot wordt. Hoewel deze landingspagina’s zelf gecommuniceerd worden als de “homepage” van deze doelgroepen, is het belangrijk dat “toevallige” bezoekers ook dadelijk naar de informatie kunnen navigeren die hen aanbelangt. Deze pagina’s worden 10/22 opgeroepen door op de bijbehorende tab te klikken, maar hebben ook elk een eigen URL. • Social Media buttons – het is van vitaal belang de crowd op te zoeken waar ze zich bevindt, en dus ook op de belangrijkse social media een aanwezigheid creëren en tegelijk de band tussen deze media en de eigen site aantrekken. • Boven dit grafisch duidelijk in het oog springend blok vinden we ook de algemene hierarchische onderverdelingen van de website terug : Wat kan je doen, waar kan je iets doen, antwoorden, nieuws en inspraak (zie onder). Helemaal onderaan het scherm vinden we een zgn doormat, die drie grote functies heeft. • Ten eerste fungeert hij als een soort sitemap die de belangrijkste secties uit de website oplijst en op die manier shortcuts biedt voor de bezoeker (en ook vermijdt dat de bezoeker die onderaan de pagina terecht gekomen is, weer helemaal omhoog moet scrollen om verder te navigeren). • Ten tweede bevat hij de contactgegevens van de medewerker die met de inhouden van deze specifieke pagina bezig is. • Ten slotte (maar niet ten minste) is dit ook de hub vanwaar de bezoekers uitgenodigd worden zich te registreren, via hun favoriete sociale netwerk of anders. De bedoeling hierbij is om deze registratie stapsgewijs te laten verlopen, en enkel ide informatie te vragen die nodig is om een bepaalde actie uit te voeren (bv : registratie met naam en paswoord indien de bezoeker wil aangeven dat hij deelneemt aan een activiteit, of een mailadres indien hij zich op een nieuwsbrief inschrijft) Het leeuwendeel van de pagina wordt evenwel ingenomen door de zone met gepromote content. 11/22 Hier onderscheiden we weer een viertal elementen : • Cheap City : in dit onderdeel worden manueel een aantal evenementen gepromoot die budgetvriendelijk zijn voor jongeren. Deze managed content (de beheerder kiest welke evenementen worden gepromoot) wordt op een shareable, linkeable en likable manier aangeboden (met de registratie, waarvan boven sprake). De bezoeker kan doorklikken naar de detailpagina van het event zelf, of naar de volledige catalogus van de evenementen die onder de noemer “Cheap City” vallen. • Daaronder komt een korte lijst interessante nieuwtjes, die zowel betrekking hebben op de werking van VGC als op een andere manier relevant kunnen zijn voor de doelgroep. Ook hier wordt naar integratie met social media gestreefd (zie boven). • Een derde blok bevat een dynamische “Contacteer Ons” functie. Die is zo opgezet dat enkel de contactmogelijkheden die op een bepaald ogenblik van de dag relevant zijn, worden getoond. Tijdens kantooruren toont dit blok het telefoonnummer dat jongeren kunnen bellen, daarbuiten worden ze uitgenodigd een mailtje te sturen of hun nummer achter te laten. Ook kan hier bijvoorbeeld op gezette tijdstippen een link voorzien worden naar een live chat. • Het eigen aanbod wordt gepromoot in een blok “Zeker de moeite”. Hierin worden, op een gelijkaardige manier als bij Cheap City, eigen evenementen of initiatieven opgelijst die bijzonder onder de aandacht van de bezoeker geplaatst moeten worden. Deze items linken door naar detailpagina’s voor de specifieke events, en naar de volledige catalogus met het aanbod van de VGC. • Tenslotte plaatst het blok “We helpen je met” een aantal specifieke dossiers in de aandacht, waarbij VGC jongeren met heel specifieke vragen helpt (“hoe organiseer ik een fuif”, “wat zijn mijn rechten als 12/22 jobstudent”). Ook deze items worden door de beheerder op deze pagina geplaatst, en linken door naar de specifieke dossierpagina’s van de respectievelijke onderwerpen. Ook kan vanop dit blok doorgeklikt worden naar de algemene catalogus van de verschillende dossiers die door de inhoudelijke medewerkers werden gecreëerd. 13/22 3.2 THEMAPAGINA Zie wireframe “themapagina” Op gezette tijdstippen, bv in de zomer, of rond kerstmis kan gezorgd worden voor een “takeover” van de homepagina, waarbij events, aanbod en informatie rond dat thema in de aandacht gebracht wordt. Op die manier wordt niet alleen de site opnieuw onder de aandacht geplaatst, er wordt ook gezorgd voor een zekere vibe rond dat specifieke thema. Deze pagina is op dezelfde manier opgebouwd als de homepage, zij het dat een aantal blokken voorzien worden om activiteiten, events of informatie meer te benadrukken met tekst, beeld en video. Ook deze items worden op een shareable, linkeable en likable manier aangeboden (met de registratie, waarvan boven sprake). De bezoeker kan doorklikken naar de detailpagina van het event zelf, of naar de volledige catalogus van de evenementen die onder het thema vallen. Daarnaast wordt de bezoeker ook zeer expliciet uitgenodigd zich in te schrijven (via de getrapte registratie – zie eerder) op een (al dan niet specifiek voor dit thema uitgewerkte) nieuwsbrief. In de zomer verandert alles immers snel ! Een specifiek onderdeel van deze pagina is een tool die de bezoekers toelaat uit het totale aanbod hun eigen menu samen te stellen – een persoonlijke gids voor het thema, met andere woorden. En ook hier wordt een deel van het eigen aanbod benadrukt. Surfers die naar de url van de website surfen, krijgen deze pagina te zien. Door op de homeknop te klikken, komt men evenwel ook terecht op de klassieke homepage, die zijn functionaliteiten behoudt, en op zijn beurt weer aandacht besteedt aan de themapagina. 14/22 3.3 WAT KAN JE DOEN Zie wireframe “Wat kan je doen?” De “hierarchische” ingangen van het aanbod van VGC hebben elk hun eigen specifieke pagina. Via “Wat kan je doen” kan de bezoeker zich een beeld vormen van de verschillende events en initiatieven die in verschillende thema’s in de stad georganiseerd worden. We werken met 1 centrale zoekfunctie waar een zoekt erm in ingegeven wordt. Filtering op de resultaten gaat achteraf gebeuren. Bezoekers willen op voorhand niet kiezen tussen wat ze willen zoeken, maar willen zo snel mogelijk antwoord krijgen op hun vraag. Ik zoek iets, geef zoekterm in en krijg antwoord. Voor een bezoeker is het wel logisch om een resultatenlijst te filteren, want dit gaat hen werk besparen om de resultatenlijst te doorbrowsen. In de linkerkolom van de pagina worden de drie topics getoond waarin de meest bekeken / geliked / geshared evenementen horen. Door een klik op de knop kan de bezoeker deze lijst evenwel helemaal uitklappen. Als hij klikt op één van de topics, krijgt de bezoeker de lijst van evenementen die in deze topic vallen. Aan de rechterkant wordt de link gelegd naar de aanwezigheid op social media van het VGC, en naar de specifieke pagina’s voor ouders en jeugdwerkers (zie eerder). Ook wordt hier een call to action aangeboden voor de nieuwsbrief (met getrapte registratie – zie eerder). Deze elementen kunnen evenwel door de sitebeheerders regelmatig gevarieerd worden om bepaalde items in de aandacht te plaatsen, een snel bericht te promoten, etc. In de middenste zone van deze pagina vinden we opnieuw de prominente zoekbalk die we ook op de homepage opmerkten. Ook hier resulteert een zoekactie in een facetted list, die de bezoeker nog kan filteren. Een zoekactie op “Zwembad” levert bijvoorbeeld een aantal items aan die in het topic “sport” vallen, en die gefilterd kunnen worden op “locatie”, “prijs”, etc. 15/22 Onder de zoekbalk worden een aantal evenementen of initiatieven in de kijker geplaatst. Dit is managed content (dwz dat de sitebeheerders deze content hier plaatsen). Ook artikelen, nieuwsberichten, blogposts, links, etc. die belangrijk genoeg zijn kunnen op deze pagina getoond worden. De bedoeling hiervan moet zijn de bezoeker te inspireren en zijn intiele verwachtingen in zekere zin te overstijgen door hem te confronteren met een onverwachte hint. Vanzelfsprekend kunnen hier ook de eigen initiatieven speciaal onder de aandacht gebracht worden. 16/22 3.4 WAAR KAN JE IETS DOEN Zie wireframe “Waar kan je iets doen?” Deze pagina geeft een view op dezelfde informatie als de vorige, maar deze keer is die niet hierarchisch georganiseerd, maar juist geografisch. Op een google map mashup worden alle evenementen getoond die plaatsvinden in Brussel. Via gadgets kan met dit aanbod filteren op thema, doelgroep, prijs, etc. De items zelf linken door naar de detailpagina van dat specifieke event. In de rechterbalk komen dezelfde elementen terug die we in de vorige pagina al gezien hadden. 17/22 3.5 ANTWOORDEN Zie wireframe “Antwoorden” Deze catalogus van dossiers wordt op een aantrekkelijke manier getoond, als was het een rek met brochures waaruit de bezoeker kan kiezen. Elk van deze dossiers wordt met een visual en een korte beschrijving voorgesteld, en linkt door naar een specifieke pagina waarin verschillende content over dat onderwerp wordt verzameld – dit kan Created Content zijn (teksten en visuals, video’s die specifiek voor deze pagina’s vervaardigd werden), managed content (items uit andere luiken van de website), of linked content (content uit andere sites of andere bronnen die relevant zijn voor het onderwerp). Belangrijk is om hier de content, zowel op dossiervlak als dieper in de hierarchie, duidelijk naar social media te ontsluiten. Dit zijn immers de elementen waarmee de VGC vanuit haar expertise het verschil kan maken. Dit zijn ook de onderwerpen waar de meeste vragen over zouden moeten komen, en waarover bezoekers elkaar doorverwijzen naar de website. In de rechterbalk komen dezelfde elementen terug die we in de vorige pagina al gezien hadden. 18/22 3.6 ACTIVITEITENPAGINA Zie wireframe “Activiteit detail” Op de detailpagina van een activiteit vinden we links de algemene, uitgeklapte lijst met de topics waarin de verschillende activiteiten zijn ondergebracht. Het topic van deze specifieke activiteit wordt gehighlight. De bezoeker kan deze lijst ordenen volgens het aantal activiteiten, het aantal likes, etc. In de rechterbalk komen dezelfde elementen terug die we in de vorige pagina al gezien hadden. De activiteit zelf wordt steeds op dezelfde manier getoond, met een duidelijk overzicht van haar kenmerken (doelgroep, prijs, datum, plaats, …) en een kaartje waarmee niet alleen de locatie duidelijk wordt, maar ook hoe je er met het openbaar vervoer geraakt (via Google Maps mashups), en dat je meteen ook kan gebruiken als routeplanner. Verschillende calls to action nodigen uit je in te schrijven, waarbij de bezoeker extra informatie gevraagd wordt (zie de getrapte registratie, boven). Vanzelfsprekend kan de bezoeker ook de activiteit in zijn geheel, als de verschillende media die ermee verband houden, en op deze site worden getoond (foto’s, video’s, geluidsfragmenten, …) liken, sharen en linken. Bij de calls to actions wordt ook een selectie getoond van de bezoekers die zich al ingeschreven hebben. Deze informatie wordt met name ook bewaard om eventueel achteraf gerichte communicatie naar te verrichten. Tenslotte wordt op elke activiteitenpagina ook een blokje voorbehouden voor gelijkaardige activiteiten. Deze managed content heeft tot doel opnieuw de bezoeker te inspireren en zijn intiele verwachtingen in zekere zin te overstijgen door hem te confronteren met een onverwachte hint. 19/22 3.7 CHEAP CITY Zie wireframe “Antwoorden – cheap city” Cheap City is een voorbeeld van een thematische landingspagina die voor een specifieke campagne, of over een specifiek thema kan opgezet worden (zie themapagina). Deze pagina werkt op dezelfde manier als “Waar kunnen we u mee helpen”, maar in plaats van dossiers worden hier evenementen en activiteiten verzameld die omwille van hun verrassende prijs meer aandacht verdienen. Elk item linkt door naar een detailpagina, en kan op zijn beurt geliked, geshared en gelinkt worden. Het zou interessant zijn om initiatieven die op een pagina als deze getoond worden, ook op een of andere manier te branden in de “Wat kan je doen” sectie (via een logo, dat op zijn beurt weer naar deze pagina teruglinkt). In de rechterbalk komen dezelfde elementen terug die we in de vorige pagina al gezien hadden. 20/22 3.8 DOELGROEPPAGINA Wireframe wordt ontwikkeld nadat de strategie hier rond goedgekeurd is. De doelgroeppagina’s voor ouders en jeugdwerkers bieden een hierarchisch overzicht van content die specifiek voor die publieken gecreëerd of verzameld werd. Deze content kan tekst, foto, video of audio zijn. Ook hier dient gelet te worden op het “shareable, likeable, linkable” aspect van de content. Ook hier kan het VGC vanuit haar expertise het verschil uitmaken naar deze specifieke doelgroepen. Naast specifieke info voor deze doelgroepen, is het vanzelfsprekend ook mogelijk te voorzien dat op bepaalde pagina’s ook links voorzien worden naar initiatieven die met het thema van die pagina verband houden. De detailpagina van die initiatieven kan dan eventueel visueel gekaderd worden binnen de stijl van deze doelgroep om zo de experience niet te doorbreken. 21/22 3.9 PUBLICATIES Zie wireframe “Publicaties” De publicaties van VGC worden verzameld op een pagina die de bezoeker bereikt via de navigatie bovenaan elke pagina. De publicaties worden getoond als een rek brochures, met telkens een thumbnail, een titel en korte inhoud en een downloadlink. Doro middel van een selectietool kan de bezoeker evenwel een filter toepassen op de opgelijste items, om zo alleen die brochures over één onderwerp te tonen. Ook hier dient gelet te worden op het “shareable, likeable, linkable” aspect van de content. 22/22 Webconcept VGC ONDERWIJSPORTAAL 20 oktober 2011 VERSIE 1.0 Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 Contact: Mattias Vermeire Mattias.Vermeire@kunstmaan.be +32 (0)16 301 788 Kunstmaan.be 1 Inleiding 2 Online strategie 2.1 Hoe het bereik vergroten en de bezoekers activeren? 2.1.1 Findable (SEO = Search Engine Optimised) 2.1.2 Shareable (SMO, Social Media Optimised) 2.1.3 Portable (MMO = Mobile Media Optimised) 2.2 Doelgroepgerelateerde content aanbieden 2.3 Steeds kennis, sensibiliseren, activeren linken 2.4 Nieuwe ‘leden’ werving en database verrijking 2.5 Bezoekers uit verschillende doelgroepen in contact brengen en laten netwerken. 3 Informatie architectuur 3.1 Homepage 3.2 Landingspagina “Leren” 3.3 Landingspagina “Lesgevers” 3.4 Landingspagina “Directies & organisaties” 3.5 Zoek een school 3.6 Zoek een school (geavanceerd) 3.7 Zoek een school (resultaten) 3.8 Schoolfiche 3.9 Nieuwsarchief 3.10 Nieuwsbericht 3.11 Vacatures 3.12 Studierichtingen 3.13 Publicaties 3.14 Publicatie details 3.15 FAQ 3.16 FAQ (antwoord) Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 info@kunstmaan.be Kunstmaan.be 2/45 3 4 4 4 5 6 6 7 7 8 9 9 14 15 17 18 19 20 21 22 23 24 25 26 27 28 29 1. INLEIDING In dit document wordt beschreven hoe het webconcept uitgewerkt wordt. Zowel strategie als informatie architectuur worden behandeld. We illustreren dit concept aan de hand van wireframes. De meest voorkomende types pagina’s zijn uitgetekend en worden in dit document besproken en verder toegelicht. 3/45 2. ONLINE STRATEGIE 2.1 HOE HET BEREIK VERGROTEN EN DE BEZOEKERS ACTIVEREN? Hieronder sommen we enkele zaken op die belangrijk zijn om deze doelstelling te bereiken. 2.1.1 Findable (SEO = Search Engine Optimised) Om het bereik van de site te vergroten, is ‘findable’ zijn zeer belangrijk. Het is inmiddels een evidentie: een site moet geoptimaliseerd zijn voor zoekmachines (Google, maar bijvoorbeeld ook voor Facebook search). Door een grondige analyse en optimalisatie van de content om deze SEO-optimised te maken, kan het bereik van een website met 30% stijgen. Het is dus belangrijk om dit regelmatig te evalueren en optimaliseren. Technologie keuze is hier eveneens belangrijk. Daarom opteren we voor HTML 5 en beperken we zoveel mogelijk het gebruik van Flash. In jullie keuze van een CMS dienen jullie hier ook rekening mee te houden: URL’s dienen automatisch geoptimaliseerd te worden voor zoekmachines en de content beheerders dienen SEO gerelateerde meta data info te kunnen toevoegen aan de pagina’s. > zie ook het algemene visie document: punt 3.2 Op het gebied van de content, werken jullie daarom best met veel tekst, met veel interne links, waarbij de keywords in de titels gebruikt worden. Bij het gebruik van foto’s, films moet er steeds automatisch een duidelijke alt-tag voorzien worden. Indien jullie content overnemen of inbedden vanuit andere (social media) sites, kiezen jullie best steeds voor de meest SEO-vriendelijke oplossing (bv. Youtube voor video, Flickr voor foto’s). De content staat op deze externe sites gehost en wordt ‘ge-embed’ in de VGC Onderwijsportaal site. We weten dat de meeste bezoekers niet noodzakelijk op de site terechtkomen via de homepage. De meesten zullen binnenkomen via search engines, via referring links en via short URL’s, die jullie in jullie communicatie gebruiken. Zelfs als ze op een obscure interne pagina landen, moeten ze zich nog een idee kunnen vormen van de context waarin ze zich bevinden. Hiermee houden we rekening in de architectuur van de site: waar je je ook bevindt, er is steeds een duidelijke header, footer en kruimeltjespad die je herkenning, structuur en links naar andere pagina’s aanbiedt. Indien de bezoekers op een ‘interne pagina’ belanden, zonder dat ze weten wie VGC Onderwijsportaal site is, zullen ze intuïtief naar de homepage gaan, waar men met duidelijke doelgerichte ingangen heeft waar duidelijker wordt gemaakt wat het VGC Onderwijsportaal voor de bezoeker specifiek kan betekenen. De zoekfunctie van de site zelf wordt één van de belangrijkste “tools” van deze site. Het zoek venster bevindt zich dan ook in onze voorgestelde structuur bovenaan de pagina op de homepage en steeds onderaan in de footer. Uit de analyse van wat bezoekers intypen in dit zoek venster kunnen we veel bijleren (over naar welke inhoud de bezoeker op zoek is) en waar nodig bijsturen. 4/45 De website moet eveneens geoptimaliseerd zijn voor het Semantische Web. Door de site klaar te maken voor Semantische Web toepassingen, wordt het mogelijk om kennis en data veel makkelijker en breder te gaan verspreiden en kan de VGC Onderwijsportaal site content eveneens makkelijk teruggevonden worden. (Dit wordt in het technische advies dat aan VGC gegeven wordt verder besproken) 2.1.2 Shareable (SMO, Social Media Optimised) Om de bezoekers te activeren, moet de website zoveel mogelijk ‘shareable’ zijn. Hiermee bedoelen we niet: het toevoegen van de klassieke Social Media sharebuttons bij elk artikel. Van zodra een content item een eigen URL heeft, is het technisch gezien “shareable”. Zelfs een internet-leek weet ondertussen namelijk hoe je bijvoorbeeld op je Facebook profiel de URL van een foto, artikel, filmpje of afbeelding kan plakken om het te delen met zijn netwerk. Met shareable bedoelen we: dat alle onderdelen van de site (artikels, foto’s, contactinformatie, filmpjes, evenementen, enz) de intrinsieke eigenschap hebben zodat een bezoeker ze kan en wil delen via zijn sociale netwerken. Kan omdat o.m. het item een eigen URL heeft. Wil omdat het de bezoeker een reden geeft om het te delen. Een voorbeeld: een bezoeker deelt een event URL met zijn/haar vrienden omdat er vanaf 8 deelnemers een groepskorting is, omdat hij er dan zeker van is dat ze samen in groep iets kunnen doen, ... . De content moet zich met andere woorden gedragen als ‘social objects’ = content die: • Social Media Optimised is • Kort en krachtig is (zodat het makkelijker/sneller reactie en commentaar uitlokt bij de bezoeker) • “Giving them something to talk about” is: niet het einde maar het begin van een conversatie; zet aan tot actie • Klein en handig genoeg is om door te spelen (technisch: kleine byte size, embeddable, etc) • Bijdraagt door duidelijke VGC Onderwijsportaal site branding tot functie van de site als archief en “hub” - “more where this came from” Concreet kan dit betekenen dat na een activiteit niet gewoon de hele video op de site wordt gezet, maar dat de meest frappante uitspraken eruit gelicht worden, voorzien van een transcript en bij voorkeur gehost op een social media platform om het vervolgens op de site te embedden. Indien we pers acties organiseren, moet de geprinte content ook steeds terug te vinden zijn op de website, waar er stukken worden opgenomen die ‘shareable’ zijn. Op deze manier kan de content rond VGC Onderwijsportaal site zich gedragen als “zendeling” van de overkoepelende VGC Onderwijsportaal site boodschappen. Indien de bezoeker onze content kan en wil delen, moet er nog bekeken worden via welke kanalen we dit aanbieden. Op dit moment zijn Netlog, Facebook de meest evidente kanalen, maar naar de toekomst toe kan dit snel evolueren. De beste keuze van het kanaal moet steeds onderzocht worden . 5/45 We stellen dan ook voor om hiervoor ‘conceptuele’ ruimte voor te voorzien, zodat we snel nieuwe media kunnen inschakelen indien die zich aandienen zonder de hele structuur en design van de website om te hoeven gooien. 2.1.3 Portable (MMO = Mobile Media Optimised) Om het bereik van de site te vergroten, moeten we er naar de toekomst toe terdege rekening mee houden dat het computerscherm niet het enige scherm zal blijven. De site mag niet langer uitgaan van een bezoeker met een Windows PC met 1024x768 schermresolutie, breedband internet en Internet Explorer of Firefox als browser. Het portable maken van een website is geen puur technische aangelegenheid maar zit mee in de kern van het website verhaal. De website wordt zo uitgedacht dat deze ook vlot op andere schermen gaat functioneren. Met de komst van smartphones, netbooks en de iPads moeten we rekening houden met “consumptie” van de site via allerlei andere platformen. Niet alle schermen moeten dezelfde content en functies kunnen aanbieden als de “reguliere” site, maar bijvoorbeeld automatische detectie van browser, het aanbieden van een mobiele versie, en desnoods ook het ter beschikking stellen van de content en functionaliteiten via platform specifieke applicaties kunnen we het bereik en de levensduur van deze site flink uitbreiden. We stellen dan ook voor om naar technologie toe voornamelijk HTML 5 te gebruiken en geen flash (aangezien dit niet mobiel kan bekeken worden), om steeds na te denken van welke content we ook apps kunnen aanbieden, enz. 2.2 DOELGROEPGERELATEERDE CONTENT AANBIEDEN Momenteel bieden de websites een schat aan informatie aan, maar vindt de gebruiker zijn weg niet gemakkelijk genoeg weer terug en moet hij zelf op zoek relevante inhoud. Om onze verschillende doelgroepen en profielen beter te bereiken en te activeren, stellen we voor om in alle communicatie, maar zeker binnen de online communicatie onze content en lay-out beter af te stemmen op de doelgroepen. Dit werd ook in de gebruikersbevraging bevestigd. Dit op de volgende manieren: • Op de homepage van de website willen we meteen aangeven wat de VGC Onderwijsportaal site specifiek kan betekenen voor de persoon in kwestie. Hoe de persoon ook binnenkomt op de website, via welke onderliggende pagina dan ook, op de homepage moet duidelijk zijn wat VGC Onderwijsportaal site doet en kan betekenen voor hem/haar. Deze doelgroep-insteek wordt doorgetrokken door het opzetten van doelgroep landingspages, waarop er enkel content wordt aangeboden relevant voor de doelgroep en in een specifieke lay-out voor de doelgroep. • Elke persoon kan zich op de VGC Onderwijsportaal site nieuwsbrief inschrijven en heeft hierbij de keuze om enkele bepaalde content te 6/45 • • ontvangen, die hem interesseert, op de manier waarop hij/zij die wil ontvangen. Via RSS: op verschillende plaatsen worden nieuwsberichten (vanuit de blog bijvoorbeeld) per doelgroep aangeboden. Indien we in de pers communiceren, geven we meteen ook een short URL mee, waarmee men onmiddellijk terechtkomt op de relevante doelgroep pagina. 2.3 STEEDS KENNIS, SENSIBILISEREN, ACTIVEREN LINKEN Om de website bezoekers te activeren, moet we bij elke relevante content steeds de nodige links aanbieden naar praktische toepassingen, naar de volgende stap. Indien men een bepaalde tool gebruikt heeft, moet er opvolgingscommunicatie zijn. Zo gaan we de bestaande VGC Onderwijsportaal site incrowd en nieuwe bezoekers activeren. 2.4 NIEUWE ‘LEDEN’ WERVING EN DATABASE VERRIJKING Om de website bezoekers te activeren en het bereik van de website te vergroten, is ‘leden’ werving uiteraard belangrijk, maar we mogen de database verrijking eveneens niet vergeten. Om nieuwe ‘leden’ te werven, stellen we voor om op de volgende zaken in acht te nemen: • Login/aanmelden moet makkelijk en snel zijn. Geen ellenlange formulieren, maar makkelijke opt-in (login via Netlog, Facebook/Twitter/enz) • Vraag naar aanmelden/opt-in moet steeds op relevante plaatsen en wijze gesteld worden: steeds duidelijke voordelen aankaarten (bv. nieuws op maat indien men inschrijft op nieuwsbrief, enz). Momenteel beschikt de VGC reeds over een rijke database. We moeten hier optimaal gebruik van maken en ze nog verder gaan verrijken, zodat er nog meer communicatie op maat kan ontstaan. Wie mensen juist wil bereiken, moet ze juist (leren) kennen. Om deze database verrijking uit te voeren, stellen we het volgende voor: • Database verrijking via Social CRM. Indien we het social media profiel opvragen van de bezoekers kunnen we makkelijk zijn gegevens aanvullen (bv. op basis van Netlog in profiel). • Zelf-verrijking: op relevante plaatsen aan de gekende bezoekers vragen om hun profiel aan te vullen (principe van % status Linkedin profiel). Een ‘propere’ database met aangevulde data is een solidere basis om verder te werken aan de relatie en ze te activeren. Een erg goed preference center op de site, waarmee de klantenrelatie wordt beheerd, lijkt ons een must. Hierbij vragen we enkel die zaken die we ook 7/45 feitelijk zullen gebruiken in onze communicatie. Zo gaan we niet vragen om een type info (en in zo weinig mogelijke vrije velden) op te geven als je niet specifiek naar bepaalde profielen zult communiceren. 2.5 BEZOEKERS UIT VERSCHILLENDE DOELGROEPEN IN CONTACT BRENGEN EN LATEN NETWERKEN. De bezoekers van de VGC Onderwijsportaal site zijn zeer divers en komen uit verschillende doelgroepen. Momenteel vinden zij elkaar niet terug en kunnen zij niet met elkaar netwerken (tenzij op eigen platform zoals Netlog). De VGC Onderwijsportaal site kan echter evolueren naar een hub, waarop deze verschillende initiatieven, individuen elkaar kunnen vinden, kunnen stimuleren en activeren, zonder hierbij een nieuw Facebook of Netlog platform te bouwen. We moeten de VGC Onderwijsportaal site ‘leden’ gewoon de mogelijkheid bieden om in contact met elkaar te treden, via welk kanaal dan ook. Dit kan door: • De mogelijkheid te bieden om zich op de website aan te melden als zijnde • ‘Ik ga hier aanwezig zijn’. Op deze manier geef je te kennen dat jij er zal zijn. Als mensen je willen contacteren kan dat op je social network. 8/45 3. INFORMATIE ARCHITECTUUR Hoe gaan we de informatie op de portaalsite weergeven? Hoe gaan we deze op het scherm brengen? We beschrijven de opbouw van de website op basis van de wireframes, die voor de typepagina’s uitgewerkt werden. Elke pagina heeft een eigen gedrag, dat beschreven wordt. 3.1 HOMEPAGE Zie wireframe “homepage”. De homepage van VGC-Onderwijs is opgebouwd vanuit de volgende principes: • de bezoekers leiden naar de informatie die ze nodig hebben / zoeken; • het promoten van de aangeboden informatie en diensten. De structuur van de homepage kan onderverdeeld worden in 4 zones: • de header • de content zone • Mijn modules • de footer Helemaal bovenaan bevindt zich de header. We onderscheiden hier 4 elementen: • Bovenaan vinden we de functionele navigatie met links naar de homepage, “Publicaties” en “Contact”; de login link (die nogmaals in de footer wordt herhaald) en de taalkeuze knoppen. • Daaronder aan de linkse zijde van de header bevinden zich het VGC logo en het logo van de portaalsite. Wanneer een bezoeker het logo van de portaalsite klikt, wordt hij terug naar de homepage gestuurd. • Aan de rechterzijde bevindt zich een zoek venster. De bezoeker kan hier een interne zoekactie starten. Hij kan ook kiezen of er enkel binnen deze portaalsite, binnen alle VGC portaalsite of binnen nieuws wordt gezocht. • Helemaal onderaan bevindt zich de hoofdnavigatie onder vorm van 3 grote knoppen die een bezoeker toegang geven tot de landingspagina’s van de respectievelijke doelgroepen. 9/45 NB Aangezien de lay-out en functionaliteit van de header op alle onderliggende pagina’s identiek is aan deze van de homepage, wordt deze beschrijving niet meer herhaald. Het leeuwendeel van de pagina wordt ingenomen door de content zone. Hier onderscheiden we 6 elementen: • De carrousel: in dit onderdeel kunnen de content beheerders specifieke informatie, functionaliteiten, evenementen en nieuwtjes naar voren schuiven. Deze carrousel werkt als een autoplay diavoorstelling, wat betekend dat de dia’s automatisch met een interval van een 10tal seconden na mekaar worden getoond. Er zijn daarom een aantal controle knoppen voorzien: “1”, “2”, ... om direct naar een van de dia’s te springen en een “pauze/start “knop om de diavoorstelling te pauzeren en/of terug op te starten. Het aantal dia’s blijft best beperkt tot 5. Wanneer men meer items onder de aandacht wil plaatsen, gebruikt men best de “Focus” zone om de minder belangrijke items te promoten. > zie ook de beschrijving lager • Het blokje “Zoek een school” rechts van de carrousel: dit blokje biedt een bezoeker, die behoort tot de belangrijkste doelgroep (ouders, leerlingen, ...) van de site, de mogelijkheid om dadelijk vanaf de homepage een van de belangrijkste taken uit te voeren: i.e. het vinden van een school. Er zijn 3 zoekcriteria voorzien (onderwijsniveau, gemeente/postcode en naam van de school), een link naar een uitgebreid zoekscherm en een “Zoeken” knop. • Onder de carrousel bevindt zich een vrij editeerbare tekstzone “Welkom”: deze zone bevat standaard een welkom tekst, maar de inhoud kan in functie van bepaalde evenementen wordt aangepast. • Onder Welkom bevindt zich een blokje met een aantal shortcuts “Ga direct naar”: deze shortcuts brengen een bezoeker rechtstreeks naar informatie over het BNO, bijvoorbeeld beleidsteksten, onderwijsstatistieken, ... • Het blokje “Focus” stelt de content beheerders is staat naast de carrousel nog 4 bijkomende items voor alle doelgroepen/segmenten te promoten. Een bezoeker kan zich ook abonneren op RSS-feeds. 10/45 • Het blokje “Nieuws” biedt een overzicht van de meest recente nieuwsberichten. Via tabs kan het nieuws gefilterd worden op basis van de doelgroep. Van elk nieuwsbericht worden de publicatie datum, titel en een uitklap knop getoond. Wanneer een bezoeker op de uitklapknop klikt wordt een korte beschrijving (+ “Meer lezen” tekstlink) getoond. Wanneer een bezoeker op de “Meer lezen” tekstlink of titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief van de respectievelijke doelgroep “Meer nieuws voor ...” . Standaard wordt het nieuws voor de belangrijkste doelgroep (ouders, leerlingen, ...) van de site getoond. Een bezoeker kan zich ook abonneren op RSS-feeds. Onder de content zone vinden wij de zone met een aantal widgets “Mijn modules”, die vooral tot doel heeft een individuele bezoeker in staat te stellen de informatie, die wordt getoond op de homepage, te personaliseren en zo de relevantie te verhogen : Standaard kunnen jullie bijvoorbeeld op portaalsite een eigen widget en een widget van portaalsite Jeugd tonen om het principe en de onderlinge relaties tussen de sites duidelijk te maken. Een ingelogde bezoeker kan bovendien andere widgets toevoegen (“Voeg een module toe”) en/of weglaten (klikken op de sluit knop van een individuele widget). Een bezoeker kan er ook voor kiezen om heel deze zone te verbergen (“Verberg Mijn modules”) of een korte handleiding en FAQ raadplegen (“Help”). Op elk van de portaal sites zal een bezoeker dus steeds dezelfde door hem gekozen widgets terugvinden. > zie ook het algemene visie document: punt 1.3 en 2.3 Helemaal onderaan het scherm vinden we een zgn. footer, die 6 functies heeft: • Ten eerste fungeert hij als een soort sitemap, die de belangrijkste secties van de hoofdnavigatie oplijst en zo de bezoeker shortcuts biedt naar de belangrijkste informatie en/of diensten (waardoor de bezoeker, die onderaan een lange pagina is terecht gekomen niet opnieuw helemaal naar boven moet scrollen om verder te navigeren). • Ten tweede wordt ook het zoek veld vanuit de header hier opnieuw herhaald (waardoor de bezoeker, die onderaan een lange pagina is terecht gekomen niet opnieuw helemaal naar boven moet scrollen om een zoekactie te starten). 11/45 • Ten derde bevat hij naast het zoek veld een aantal social media knoppen. Het is immers van cruciaal belang om zoveel mogelijk potentiële bezoeker van deze site te bereiken en dus een belangrijke aanwezigheid op de sociale netwerk sites te creëren en tegelijkertijd de band tussen deze sites en de eigen site te versterken. • Ten vierde bevat hij de contactgegevens van de medewerker, die verantwoordelijk is voor de inhoud van de pagina. • Ten vijfde is dit ook een soort hub waar bezoekers uitgenodigd worden om zicht te registreren via hun favoriete sociale netwerksite (bijv. Facebook) of op een andere manier. De bedoeling is om deze registratie stapsgewijs te laten verlopen en enkel die informatie te vragen die nodig is om een bepaalde actie uit te voeren, bijvoorbeeld registratie met naam en paswoord indien de bezoeker wil deelnemen een bepaalde activiteit of een e-mail adres wanneer hij zicht inschrijft op een nieuwsbrief (op deze manier houden we de drempel zo laag mogelijk en trachten we zoveel mogelijk bezoekers te overtuigen) > zie ook het algemene visie document: punt 2.2 • Tenslotte wordt helemaal onderaan de copyright informatie weergegeven. NB Aangezien de lay-out en functionaliteit van de footer op alle onderliggende pagina’s identiek is aan deze van de homepage, wordt deze beschrijving niet meer herhaald. 12/45 3.2 LANDINGSPAGINA “LEREN” Zie wireframe “landingspagina leren”. De structuur van deze landingspagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer In de content zone onderscheiden we 12 elementen: Helemaal bovenaan links vinden we het kruimeltjes pad dat aan de bezoeker de navigatie context (i.e. de plaats in de boomstructuur waar hij zich bevindt) toont. Helemaal rechts bovenaan bevindt zich een “share” knop en “Print” link. Daaronder vinden we het blokje “Focus”. Dit blokje bevat een manuele carrousel wat de content beheerders is staat stelt om 6 items (informatie, functionaliteit, nieuws, evenement) voor deze specifieke doelgroep te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Een bezoeker kan zich ook abonneren op RSS-feeds. Daaronder bevinden zich 4 inhoudelijke blokjes, die elk een hoofdcategorie en per hoofdcategorie de respectievelijk subcategorieën visualiseren. Voor elk van de subcategorieën is er een tab voorzien, die een overzicht geeft van de inhoud van deze subcategorie. Dit overzicht heeft ofwel de vorm van een icoon + een (klikbare) titel + een korte beschrijving, ofwel de vorm van een beschrijving + een “Meer info” link. Wanneer een bezoeker op de titel of de “Meer info” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Soms bevat een tab ook de belangrijkste functionaliteit van een bepaalde subcategorie, zoals bijvoorbeeld het “Studierichting” zoek veld in de tab “Studierichtingen”. Zowel het aantal hoofden subcategorieën als de inhoud zijn vrij editeerbaar (i.e. items kunnen gewijzigd, gewist of toegevoegd worden). Het blokje “Nieuws” links biedt een overzicht van de meest recente nieuwsberichten voor deze doelgroep. Van elk nieuwsbericht worden de publicatie 13/45 datum, titel en een uitklap knop getoond. Wanneer een bezoeker op de uitklapknop klikt wordt een korte beschrijving (+ “Meer lezen” tekstlink) getoond. Wanneer een bezoeker op de “Meer lezen” tekstlink of titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief van de respectievelijke doelgroep “Archief” . Een bezoeker kan zich ook abonneren op RSS-feeds. Het blokje “Financiële ondersteuning” bevat naast een titel en een korte beschrijving een “Lees meer” link. Deze link leidt de bezoeker naar een pagina met informatie over studietoelagen. Via het blokje “Publicaties” kunnen de content beheerders een specifieke brochure onder de aandacht van de bezoeker brengen. De bezoeker ziet de klikbare titel, de klikbare cover, een korte beschrijving en een “Meer lezen” tekstlink en een “Downloaden” tekstlink. Wanneer de bezoeker op de “Meer lezen” link klikt, wordt hij doorgestuurd naar de detail pagina van de brochure. Wanneer hij op de “Downloaden” link klikt, start het downloaden van de brochure. Het blokje “Contacteer ons” tenslotte geeft content beheerders de mogelijkheid om de contactgegevens van de medewerker, die verantwoordelijk is voor een bepaalde dienst te publiceren. De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. 14/45 3.3 LANDINGSPAGINA “LESGEVERS” Zie wireframe “landingspagina lesgevers”. De structuur van deze ladingspagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer In de content zone onderscheiden we 6 elementen: Helemaal bovenaan vinden we het blokje “Focus”. Dit blokje bevat een manuele carrousel wat de content beheerders is staat stelt om 6 items (informatie, functionaliteit, nieuws, evenement) voor deze specifieke doelgroep te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Een bezoeker kan zich ook abonneren op RSS-feeds. Daaronder bevinden zich 2 inhoudelijke blokjes, die elk een hoofdcategorie en per hoofdcategorie de respectievelijk subcategorieën visualiseren. Voor elk van de subcategorieën is er een tab voorzien, die een overzicht geeft van de inhoud van deze subcategorie. Dit overzicht heeft ofwel de vorm van een icoon + een (klikbare) titel + een korte beschrijving, ofwel de vorm van een beschrijving + een “Meer info” link. Wanneer een bezoeker op de titel of de “Meer info” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Soms kan een tab ook de belangrijkste functionaliteit van een bepaalde subcategorie bevatten. Zowel het aantal hoofden subcategorieën als de inhoud zijn vrij editeerbaar (i.e. items kunnen gewijzigd, gewist of toegevoegd worden). Het blokje “Nieuws” links biedt een overzicht van de meest recente nieuwsberichten voor deze doelgroep. Van elk nieuwsbericht wordt de klikbare titel getoond. Wanneer een bezoeker op de titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief van de respectievelijke doelgroep “Archief” . Een bezoeker kan zich ook abonneren op RSS-feeds. 15/45 Via het blokje “Vacatures in de kijker” kunnen de content beheerders via een autoplay carrousel een aantal vacatures onder de aandacht van de bezoeker brengen. Een vacature bestaat uit een klikbare titel, de naam van de school, de gemeente en het aantal uren. Wanneer de bezoeker op de titel klikt, wordt hij doorgestuurd naar de detail pagina van de vacature. Deze vacatures komen liefst uit VDAB-databank en de OTW-databank van tracebrussel.be. Indien dit niet mogelijk is, komen ze uit een eigen databank. Via het blokje “Getuigenis” kunnen de content beheerders een specifieke getuigenis van leerkrachten, instructeurs, begeleiders, die getuigen over de steun die de VGC geeft aan het Brusselse werkveld, onder de aandacht van de bezoeker brengen. De bezoeker ziet de klikbare naam en functie, en een korte beschrijving. Wanneer de bezoeker op de naam/functie link klikt, wordt hij doorgestuurd naar de detail pagina van de getuigenis. Wanneer hij op de “Meer getuigenissen” link klikt, wordt hij doorgestuurd naar de overzichtspagina met alle getuigenissen. Via het blokje “Nieuwsbrief” kan de bezoeker zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. Van zodra de bezoeker op de “Verzend” knop heeft geklikt, wordt hij naar een achterliggende pagina met een aantal vrijblijvende marketing vragen geleid. > zie ook beschrijving van de registratie functionaliteit van de footer 16/45 3.4 LANDINGSPAGINA “DIRECTIES & ORGANISATIES” Zie wireframe “landingspagina Directies & organisaties”. De structuur van deze ladingspagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer In de content zone onderscheiden we 7 elementen: Helemaal bovenaan vinden we het blokje “Focus”. Dit blokje bevat een manuele carrousel wat de content beheerders is staat stelt om 6 items (informatie, functionaliteit, nieuws, evenement) voor deze specifieke doelgroep te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Een bezoeker kan zich ook abonneren op RSS-feeds. Daaronder bevinden zich 3 inhoudelijke blokjes, die elk een hoofdcategorie en per hoofdcategorie de respectievelijk subcategorieën visualiseren. Voor elk van de subcategorieën is er een tab voorzien, die een overzicht geeft van de inhoud van deze subcategorie. Dit overzicht heeft ofwel de vorm van een icoon + een (klikbare) titel + een korte beschrijving, ofwel de vorm van een beschrijving + een “Meer info” link. Wanneer een bezoeker op de titel of de “Meer info” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Soms kan een tab ook de belangrijkste functionaliteit van een bepaalde subcategorie bevatten. Zowel het aantal hoofden subcategorieën als de inhoud zijn vrij editeerbaar (i.e. items kunnen gewijzigd, gewist of toegevoegd worden). Het blokje “Nieuws” links biedt een overzicht van de meest recente nieuwsberichten voor deze doelgroep. Van elk nieuwsbericht wordt de klikbare titel getoond. Wanneer een bezoeker op de titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief van de respectievelijke doelgroep “Archief” . Een bezoeker kan zich ook abonneren op RSS-feeds. 17/45 Via het blokje “Vacatures in de kijker” kunnen de content beheerders via een autoplay carrousel een aantal vacatures onder de aandacht van de bezoeker brengen. Een vacature bestaat uit een klikbare titel, de naam van de school, de gemeente en het aantal uren. Wanneer de bezoeker op de titel klikt, wordt hij doorgestuurd naar de detail pagina van de vacature. Deze vacatures komen liefst uit VDAB-databank en de OTW-databank van tracebrussel.be. Indien dit niet mogelijk is, komen ze uit een eigen databank. Er is ook een link voorzien naar een pagina om vacatures te voegen. Via het blokje “Nieuwsbrief” kan de bezoeker zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. Van zodra de bezoeker op de “Verzend” knop heeft geklikt, wordt hij naar een achterliggende pagina met een aantal vrijblijvende marketing vragen geleid. > zie ook beschrijving van de registratie functionaliteit van de footer 3.5 ZOEK EEN SCHOOL Zie wireframe “Zoek een school”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. 18/45 NB Aangezien de lay-out en functionaliteit van de linker kolom op alle “zoek een school” pagina’s identiek is aan deze pagina, wordt deze beschrijving voor deze pagina’s niet meer herhaald. In de midden kolom wordt het zoek formulier getoond met 4 zoekcriteria (onderwijsniveau, onderwijstype, naam van de school en postcode/gemeente), een “Meer opties” link en een “Zoeken” knop. Afhankelijk van de opties, die de bezoeker selecteert in de drop down lijst “Onderwijsniveau” wordt er onder het formulier een beschrijvende tekst, die de bezoeker meer uitleg verschaft over de zoekcriteria (verborgen achter de link “Meer opties”) die verbonden zijn aan de respectievelijke onderwijsniveaus, evenals informatie over mogelijke follow-up acties. Wanneer de bezoeker op de “Zoeken” knop klikt, stuurt hij de data van het formulier naar de server en wordt zelf doorgestuurd naar de zoekresultaten pagina. Er is ook een externe link voorzien voor de bezoeker die op zoek is naar hoger onderwijs. In de rechter kolom onderscheiden we 3 elementen: • Het “Zie ook” blokje: hier worden op basis van meta data een aantal gerelateerde interne en externe links en brochures getoond. > zie ook het algemene visie document: punt 1.2 • Het “Nieuwsbrief” blokje: de bezoeker zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer • De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. NB Aangezien de lay-out en functionaliteit van de rechter kolom op alle “zoek een school” pagina’s identiek is aan deze pagina, wordt deze beschrijving voor deze pagina’s niet meer herhaald. 19/45 3.6 ZOEK EEN SCHOOL (GEAVANCEERD) Zie wireframe “Zoek een school (geavanceerd)”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de midden kolom wordt het zoek formulier getoond met de 4 standaard zoekcriteria (onderwijsniveau, onderwijstype, naam van de school en postcode/gemeente), en daaronder - afhankelijk van het onderwijsniveau - een 4tal extra zoekcriteria, een “Minder opties” link en een “Zoeken” knop. Wanneer de bezoeker op de “Minder opties” link klikt, worden de extra zoekopties verborgen. Wanneer de bezoeker op de “Zoeken” knop klikt, stuurt hij de data van het formulier naar de server en wordt zelf doorgestuurd naar de zoekresultaten pagina. Er is ook een externe link voorzien voor de bezoeker die op zoek is naar hoger onderwijs. 3.7 ZOEK EEN SCHOOL (RESULTATEN) Zie wireframe “Zoek een school (resultaten)”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de midden kolom wordt het zoek formulier getoond met de 4 standaard zoekcriteria (onderwijsniveau, onderwijstype, naam van de school en postcode/gemeente), en daaronder eventueel - afhankelijk van het onderwijsniveau - een 4tal extra zoekcriteria, een “Minder/Meer opties” link en een “Zoeken” knop. Er is ook een externe link voorzien voor de bezoeker die op 20/45 zoek is naar hoger onderwijs. Onder het zoekformulier worden eerst de zoekresultaten via markers op een Google Map getoond en vervolgens in lijstvorm. Per zoekresultaat wordt de klikbare naam van de school, de gemeente en het adres van de school getoond. De cijfers in de markers komen overeen met de cijfers van de lijst. Wanneer de bezoeker op een marker klikt, dan wordt de klikbare naam van de school, de gemeente en het adres van de school in een info window getoond. Wanneer de bezoeker op de naam van de school klikt, wordt hij naar de detail pagina (fiche) van de bewuste school gestuurd. 3.8 SCHOOLFICHE Zie wireframe “Schoolfiche”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de midden kolom wordt een “Terug naar de zoekresultaten” link, de naam van de school, de USP, meta data (onderwijsvorm, net, gemeente), de schoolfiche, een Google Map met scholen in de buurt en buitenschoolse activiteiten getoond evenals in lijstvorm. De fiche bevat een aantal categorieën en per categorie een vrij editeerbare content. De content van elk van deze categorieën wordt via mouse-over over tabs zichtbaar. Onder de schoolfiche worden eerst scholen in de buurt en buitenschoolse activiteiten via markers op een Google Map getoond en vervolgens in lijstvorm. Per school wordt de klikbare naam van de school, de gemeente en het adres van de school getoond. Per buitenschoolse activiteit wordt de klikbare titel, een korte beschrijving en een “Meer lezen” link getoond. De cijfers in de markers komen overeen met de cijfers van de lijst. Wanneer de bezoeker op een marker klikt, dan wordt de klikbare naam van de school, de gemeente en het adres van de school of de titel van de activiteit in een info window getoond. Wanneer de bezoeker op de naam van de school klikt, wordt hij naar de detail pagina (fiche) van de bewuste school gestuurd. Wanneer de bezoeker op de titel van de activiteit of de “Meer lezen” 21/45 link klikt, wordt hij naar de detail pagina (fiche) van de bewuste activiteit gestuurd. 3.9 NIEUWSARCHIEF Zie wireframe “Nieuwsarchief”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de midden kolom wordt bovenaan een aantal filters getoond, die de bezoeker toelaten om de lijst (met zoekresultaten) verder te verfijnen. Voorlopig kan er gefilterd worden op: publicatiedatum, thema en onderwijsniveau. Daaronder wordt een lijst met pager met de zoekresultaten getoond. De zoekresultaten kunnen gesorteerd worden op datum en alfabet. Voor elk zoekresultaat is er: een publicatiedatum, titel, korte beschrijving, een “Lees meer” link en meta data. Wanneer de bezoeker op de “Lees meer” link klikt, wordt hij doorgestuurd naar de nieuwsbericht pagina. In de rechter kolom onderscheiden we 2 elementen: • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te 22/45 abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer • De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. 3.10 NIEUWSBERICHT Zie wireframe “Nieuws details”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom vindt een bezoeker een “Terug naar nieuwsoverzicht” link, de titel, meta data (thema, publicatiedatum en auteur), een samenvatting, het nieuwsbericht (met eventueel bijhorende foto, video, tekstlinks, die door de content beheerder vrij kunnen worden toegevoegd), tags, links om de bijhorende documenten te downloaden, CTA’s (Call To Actions: “Bewaar in mijn gids”, “Print” en “Exporteer als PDF”) en een aantal social sharing knoppen. In de rechter kolom onderscheiden we 4 elementen: • De CTA (Call To Action) zone verzamelt alle CTA’s en de social sharing knoppen, die ook onder het nieuwsbericht worden weergegeven. • Het blokje “Contacteer ons” geeft content beheerders de mogelijkheid om de contactgegevens van de medewerker, die verantwoordelijk is voor een bepaalde dienst te publiceren. • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een 23/45 nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer • De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. 3.11 VACATURES Zie wireframe “Vacatures”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de midden kolom wordt bovenaan een aantal filters getoond, die de bezoeker toelaten om de lijst (met zoekresultaten) verder te verfijnen. Voorlopig kan er gefilterd worden op: functie, gemeente en onderwijsniveau. Daaronder wordt een lijst met pager met de zoekresultaten getoond. De zoekresultaten kunnen gesorteerd worden op publicatiedatum, gemeente en functie. Voor elk zoekresultaat is er: een klikbare titel, gemeente, uren per week, periode en de datum van plaatsing. Wanneer de bezoeker op de titel link klikt, wordt hij doorgestuurd naar de vacature detail pagina. 24/45 In de rechter kolom onderscheiden we 2 elementen: • Het “Geen vacature gevonden” blokje: wanneer de bezoeker geen passende vacature heeft gevonden, kan hij zijn e-mail adres achterlaten om via e-mail op de hoogte worden gebracht van nieuwe vacatures. • Het “Zie ook” blokje: hier worden enkele shortcuts naar “Vrijwilligers”, “Stages” en “Vakantiewerk”. 3.12 STUDIERICHTINGEN Zie wireframe “Studierichtingen”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de midden kolom wordt bovenaan een aantal links naar wizards getoond. Deze wizards leiden de bezoeker in een aantal stappen – afhankelijk van de gekozen wizard - tot een bepaalde studierichting. Daaronder vinden we een zoek veld en een index, die de bezoeker in staat stelt een specifieke studierichting op te zoeken. Standaard wordt daaronder de lijst van klikbare studierichtingen, die met een a beginnen, getoond. Wanneer de bezoeker op een studierichting klikt, wordt hij naar een pagina gestuurd die alle scholen toont die deze richting aanbieden. Helemaal onderaan bevindt zicht een info blokje dat de 4 vormen van secundair onderwijs toelicht. 25/45 In de rechter kolom onderscheiden we 3 elementen: • Het “Zie ook” blokje: hier worden op basis van meta data een aantal gerelateerde interne en externe links en brochures getoond. > zie ook het algemene visie document: punt 1.2 • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer • De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. 3.13 PUBLICATIES Zie wireframe “Publicaties”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom wordt bovenaan een aantal filters getoond, die de bezoeker toelaten om de lijst (met publicaties) verder te verfijnen. Voorlopig kan er gefilterd worden op: doelgroep, thema en type. Daaronder wordt een lijst met pager met alle publicaties getoond. Voor elke publicatie is er: een titel, een korte beschrijving, en een “Meer lezen” en “Downloaden” link. Wanneer de bezoeker op de “Meer lezen” link klikt, wordt hij doorgestuurd naar de publicatie detail pagina. 26/45 Wanneer de bezoeker op de “Downloaden” link klikt, start automatisch het downloaden van de publicatie. In de rechter kolom onderscheiden we 1 element: • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer 3.14 PUBLICATIE DETAILS Zie wireframe “Publicatie details”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom vinden we een “Terug naar publicaties overzicht” link, links om vooruit en/of achter te browsen in het overzicht, de titel, een afbeelding van de cover, een samenvatting, het thema, het onderwerp, de uitgever, de publicatiedatum, de geldigheidsperiode, het gewicht van de publicatie, een download knop, een knop om een print versie te bestellen en een drop down om het aantal gewenste publicaties om te geven en tenslotte een aantal social sharing knoppen en een herhaling van de links om vooruit en/of achter te browsen in het overzicht. Wanneer de bezoeker op de “Download publicatie” knop klikt, start automatisch het downloaden van de publicatie. Wanneer de bezoeker op de “Bestel print-versie” knop klikt, wordt hij naar een formulier gestuurd. 27/45 In de rechter kolom onderscheiden we 2 elementen: • Het blokje “Contacteer ons” geeft content beheerders de mogelijkheid om de contactgegevens van de medewerker, die verantwoordelijk is voor een bepaalde dienst te publiceren. • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer 3.15 FAQ Zie wireframe FAQ”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de midden kolom worden 10 klikbare FAQ’s getoond. Wanneer de bezoeker op een van de FAQ links klikt, wordt het antwoord getoond. Onder deze FAQ’s bevindt zich een formulier waarmee de bezoeker zijn niet beantwoorde vraag naar VGC kan sturen. 28/45 In de rechter kolom onderscheiden we 3 elementen: • Het “Zie ook” blokje: hier worden op basis van meta data een aantal gerelateerde interne en externe links en brochures getoond. > zie ook het algemene visie document: punt 1.2 • Het “Nieuwsbrief” blokje: de bezoeker kan zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer • De “Nederlands leren” carrousel: hier worden automatisch een wervend tekstje i.v.m. Nederlands leren voor volwassenen en voor kinderen in 3 talen getoond, evenals 3 controle knoppen. Wanneer de bezoeker klikt op de “Nederlands leren voor volwassenen” link of de “Nederlands leren voor kinderen” link, wordt hij naar een landingspagina met informatie over taalleren gestuurd. 3.15 FAQ ANTWOORD Zie wireframe FAQ”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de midden kolom worden 10 klikbare FAQ’s getoond. Wanneer de bezoeker op een van de FAQ links klikt, wordt het antwoord getoond. Dit antwoord bevat eventueel ook een “Meer info” link en de mogelijkheid om het antwoord te waarderen (van “zeer nuttig”, over “redelijk nuttig” tot “niet nuttig”). Wanneer de bezoeker op de “Meer info” link klikt, wordt hij naar een interne of externe pagina gestuurd. Onder deze FAQ’s bevindt zich een formulier waarmee de bezoeker zijn niet beantwoorde vraag naar VGC kan sturen. 29/45 Homepage 30/45 Landingspagina “Leren” 31/45 Landingspagina “Lesgevers” 32/45 Landingspagina “Directies & organisaties” 33/45 Zoek een school 34/45 Zoek een school (geavanceerd) Zoek een school (resultaten) 35/45 36/45 Schoolfiche 37/45 Nieuwsarchief 38/45 Nieuwsbericht 39/45 Vacatures 40/45 Studierichtingen 41/45 Publicaties 42/45 Publicatie details 43/45 FAQ 44/45 FAQ antwoord 45/45 Webconcept VGC GC PORTAAL 20 oktober 2011 VERSIE 1.0 Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 Contact: Mattias Vermeire Mattias.Vermeire@kunstmaan.be +32 (0)16 301 788 Kunstmaan.be 1 Inleiding 2 Online strategie 2.1 Hoe het bereik vergroten en de bezoekers activeren? 2.1.1 Findable (SEO = Search Engine Optimised) 2.1.2 Shareable (SMO, Social Media Optimised) 2.1.3 Portable (MMO = Mobile Media Optimised) 2.2 Doelgroepgerelateerde content aanbieden 2.3 Steeds kennis, sensibiliseren, activeren linken 2.4 Nieuwe ‘leden’ werving en database verrijking 2.5 Bezoekers uit verschillende doelgroepen in contact brengen en laten netwerken. 3 Informatie architectuur 3.1 Portaal homepage 3.2 Landingspagina “Programma” 3.3 Programma zoekresultaten 3.4 Evenement details 3.5 Landingspagina “Cursussen” 3.6 Cursussen zoekresultaten 3.7 Landingspagina gemeenschapscentrum 3.8 Gemeenschapscentrum details 3.9 Gemeenschapscentrum homepage Kunstmaan nv Tervuursevest 362-1 3000 Leuven Phone +32 (0)16 300 780 Fax +32 (0)16 300 789 info@kunstmaan.be Kunstmaan.be 2/45 3 4 4 4 5 6 6 7 7 8 9 9 13 14 15 17 18 18 19 20 1. INLEIDING In dit document wordt beschreven hoe het webconcept uitgewerkt wordt. Zowel strategie als informatie architectuur worden behandeld. We illustreren dit concept aan de hand van wireframes. De meest voorkomende types pagina’s zijn uitgetekend en worden in dit document besproken en verder toegelicht. 3/45 2. ONLINE STRATEGIE 2.1 HOE HET BEREIK VERGROTEN EN DE BEZOEKERS ACTIVEREN? Hieronder sommen we enkele zaken op die belangrijk zijn om deze doelstelling te bereiken. 2.1.1 Findable (SEO = Search Engine Optimised) Om het bereik van de site te vergroten, is ‘findable’ zijn zeer belangrijk. Het is inmiddels een evidentie: een site moet geoptimaliseerd zijn voor zoekmachines (Google, maar bijvoorbeeld ook voor Facebook search). Door een grondige analyse en optimalisatie van de content om deze SEO-optimised te maken, kan het bereik van een website met 30% stijgen. Het is dus belangrijk om dit regelmatig te evalueren en optimaliseren. Technologie keuze is hier eveneens belangrijk. Daarom opteren we voor HTML 5 en beperken we zoveel mogelijk het gebruik van Flash. In jullie keuze van een CMS dienen jullie hier ook rekening mee te houden: URL’s dienen automatisch geoptimaliseerd te worden voor zoekmachines en de content beheerders dienen SEO gerelateerde meta data info te kunnen toevoegen aan de pagina’s. > zie ook het algemene visie document: punt 3.2 Op het gebied van de content, werken jullie daarom best met veel tekst, met veel interne links, waarbij de keywords in de titels gebruikt worden. Bij het gebruik van foto’s, films moet er steeds automatisch een duidelijke alt-tag voorzien worden. Indien jullie content overnemen of inbedden vanuit andere (social media) sites, kiezen jullie best steeds voor de meest SEO-vriendelijke oplossing (bv. Youtube voor video, Flickr voor foto’s). De content staat op deze externe sites gehost en wordt ‘ge-embed’ in de VGC Gemeenschapscentraportaal site. We weten dat de meeste bezoekers niet noodzakelijk op de site terechtkomen via de homepage. De meesten zullen binnenkomen via search engines, via referring links en via short URL’s, die jullie in jullie communicatie gebruiken. Zelfs als ze op een obscure interne pagina landen, moeten ze zich nog een idee kunnen vormen van de context waarin ze zich bevinden. Hiermee houden we rekening in de architectuur van de site: waar je je ook bevindt, er is steeds een duidelijke header, footer en kruimeltjespad die je herkenning, structuur en links naar andere pagina’s aanbiedt. Indien de bezoekers op een ‘interne pagina’ belanden, zonder dat ze weten wie VGC Gemeenschapscentraportaal site is, zullen ze intuïtief naar de homepage gaan, waar men met duidelijke doelgerichte ingangen heeft waar duidelijker wordt gemaakt wat het VGC Gemeenschapscentraportaal voor de bezoeker specifiek kan betekenen. De zoekfunctie van de site zelf wordt één van de belangrijkste “tools” van deze site. Het zoek venster bevindt zich dan ook in onze voorgestelde structuur bovenaan de pagina op de homepage en steeds onderaan in de footer. Uit de analyse van wat bezoekers intypen in dit zoek venster kunnen we veel bijleren (over naar welke inhoud de bezoeker op zoek is) en waar nodig bijsturen. De website moet eveneens geoptimaliseerd zijn voor het Semantische Web. Door de site klaar te maken voor Semantische Web toepassingen, wordt het mogelijk om kennis en data veel makkelijker en breder te gaan verspreiden en kan de VGC Gemeenschapscentraportaal site content eveneens makkelijk 4/45 teruggevonden worden. (Dit wordt in het technische advies dat aan VGC gegeven wordt verder besproken) 2.1.2 Shareable (SMO, Social Media Optimised) Om de bezoekers te activeren, moet de website zoveel mogelijk ‘shareable’ zijn. Hiermee bedoelen we niet: het toevoegen van de klassieke Social Media sharebuttons bij elk artikel. Van zodra een content item een eigen URL heeft, is het technisch gezien “shareable”. Zelfs een internet-leek weet ondertussen namelijk hoe je bijvoorbeeld op je Facebook profiel de URL van een foto, artikel, filmpje of afbeelding kan plakken om het te delen met zijn netwerk. Met shareable bedoelen we: dat alle onderdelen van de site (artikels, foto’s, contactinformatie, filmpjes, evenementen, enz) de intrinsieke eigenschap hebben zodat een bezoeker ze kan en wil delen via zijn sociale netwerken. Kan omdat o.m. het item een eigen URL heeft. Wil omdat het de bezoeker een reden geeft om het te delen. Een voorbeeld: een bezoeker deelt een event URL met zijn/haar vrienden omdat er vanaf 8 deelnemers een groepskorting is, omdat hij er dan zeker van is dat ze samen in groep iets kunnen doen, ... . De content moet zich met andere woorden gedragen als ‘social objects’ = content die: • Social Media Optimised is • Kort en krachtig is (zodat het makkelijker/sneller reactie en commentaar uitlokt bij de bezoeker) • “Giving them something to talk about” is: niet het einde maar het begin van een conversatie; zet aan tot actie • Klein en handig genoeg is om door te spelen (technisch: kleine byte size, embeddable, etc) • Bijdraagt door duidelijke VGC Gemeenschapscentraportaal site branding tot functie van de site als archief en “hub” - “more where this came from” Concreet kan dit betekenen dat na een activiteit niet gewoon de hele video op de site wordt gezet, maar dat de meest frappante uitspraken eruit gelicht worden, voorzien van een transcript en bij voorkeur gehost op een social media platform om het vervolgens op de site te embedden. Indien we pers acties organiseren, moet de geprinte content ook steeds terug te vinden zijn op de website, waar er stukken worden opgenomen die ‘shareable’ zijn. Op deze manier kan de content rond VGC Gemeenschapscentraportaal site zich gedragen als “zendeling” van de overkoepelende VGC Gemeenschapscentraportaal site boodschappen. Indien de bezoeker onze content kan en wil delen, moet er nog bekeken worden via welke kanalen we dit aanbieden. Op dit moment zijn Netlog, Facebook de meest evidente kanalen, maar naar de toekomst toe kan dit snel evolueren. De beste keuze van het kanaal moet steeds onderzocht worden . We stellen dan ook voor om hiervoor ‘conceptuele’ ruimte voor te voorzien, zodat we snel nieuwe media kunnen inschakelen indien die zich aandienen zonder de hele structuur en design van de website om te hoeven gooien. 5/45 2.1.3 Portable (MMO = Mobile Media Optimised) Om het bereik van de site te vergroten, moeten we er naar de toekomst toe terdege rekening mee houden dat het computerscherm niet het enige scherm zal blijven. De site mag niet langer uitgaan van een bezoeker met een Windows PC met 1024x768 schermresolutie, breedband internet en Internet Explorer of Firefox als browser. Het portable maken van een website is geen puur technische aangelegenheid maar zit mee in de kern van het website verhaal. De website wordt zo uitgedacht dat deze ook vlot op andere schermen gaat functioneren. Met de komst van smartphones, netbooks en de iPads moeten we rekening houden met “consumptie” van de site via allerlei andere platformen. Niet alle schermen moeten dezelfde content en functies kunnen aanbieden als de “reguliere” site, maar bijvoorbeeld automatische detectie van browser, het aanbieden van een mobiele versie, en desnoods ook het ter beschikking stellen van de content en functionaliteiten via platform specifieke applicaties kunnen we het bereik en de levensduur van deze site flink uitbreiden. We stellen dan ook voor om naar technologie toe voornamelijk HTML 5 te gebruiken en geen flash (aangezien dit niet mobiel kan bekeken worden), om steeds na te denken van welke content we ook apps kunnen aanbieden, enz. 2.2 DOELGROEPGERELATEERDE CONTENT AANBIEDEN Momenteel bieden de websites een schat aan informatie aan, maar vindt de gebruiker zijn weg niet gemakkelijk genoeg weer terug en moet hij zelf op zoek relevante inhoud. Om onze verschillende doelgroepen en profielen beter te bereiken en te activeren, stellen we voor om in alle communicatie, maar zeker binnen de online communicatie onze content en lay-out beter af te stemmen op de doelgroepen. Dit werd ook in de gebruikersbevraging bevestigd. Dit op de volgende manieren: • Op de homepage van de website willen we meteen aangeven wat de VGC Gemeenschapscentraportaal site specifiek kan betekenen voor de persoon in kwestie. Hoe de persoon ook binnenkomt op de website, via welke onderliggende pagina dan ook, op de homepage moet duidelijk zijn wat VGC Gemeenschapscentraportaal site doet en kan betekenen voor hem/haar. Deze doelgroep-insteek wordt doorgetrokken door het opzetten van doelgroep landingspages, waarop er enkel content wordt aangeboden relevant voor de doelgroep en in een specifieke lay-out voor de doelgroep. • Elke persoon kan zich op de VGC Gemeenschapscentraportaal site nieuwsbrief inschrijven en heeft hierbij de keuze om enkele bepaalde content te ontvangen, die hem interesseert, op de manier waarop hij/zij die wil ontvangen. • Via RSS: op verschillende plaatsen worden nieuwsberichten (vanuit de blog bijvoorbeeld) per doelgroep aangeboden. • Indien we in de pers communiceren, geven we meteen ook een short URL mee, waarmee men onmiddellijk terechtkomt op de relevante doelgroep pagina. 6/45 2.3 STEEDS KENNIS, SENSIBILISEREN, ACTIVEREN LINKEN Om de website bezoekers te activeren, moet we bij elke relevante content steeds de nodige links aanbieden naar praktische toepassingen, naar de volgende stap. Indien men een bepaalde tool gebruikt heeft, moet er opvolgingscommunicatie zijn. Zo gaan we de bestaande VGC Gemeenschapscentraportaal site incrowd en nieuwe bezoekers activeren. 2.4 NIEUWE ‘LEDEN’ WERVING EN DATABASE VERRIJKING Om de website bezoekers te activeren en het bereik van de website te vergroten, is ‘leden’ werving uiteraard belangrijk, maar we mogen de database verrijking eveneens niet vergeten. Om nieuwe ‘leden’ te werven, stellen we voor om op de volgende zaken in acht te nemen: • Login/aanmelden moet makkelijk en snel zijn. Geen ellenlange formulieren, maar makkelijke opt-in (login via Netlog, Facebook/Twitter/enz) • Vraag naar aanmelden/opt-in moet steeds op relevante plaatsen en wijze gesteld worden: steeds duidelijke voordelen aankaarten (bv. nieuws op maat indien men inschrijft op nieuwsbrief, enz). Momenteel beschikt de VGC reeds over een rijke database. We moeten hier optimaal gebruik van maken en ze nog verder gaan verrijken, zodat er nog meer communicatie op maat kan ontstaan. Wie mensen juist wil bereiken, moet ze juist (leren) kennen. Om deze database verrijking uit te voeren, stellen we het volgende voor: • Database verrijking via Social CRM. Indien we het social media profiel opvragen van de bezoekers kunnen we makkelijk zijn gegevens aanvullen (bv. op basis van Netlog in profiel). • Zelf-verrijking: op relevante plaatsen aan de gekende bezoekers vragen om hun profiel aan te vullen (principe van % status Linkedin profiel). Een ‘propere’ database met aangevulde data is een solidere basis om verder te werken aan de relatie en ze te activeren. Een erg goed preference center op de site, waarmee de klantenrelatie wordt beheerd, lijkt ons een must. Hierbij vragen we enkel die zaken die we ook feitelijk zullen gebruiken in onze communicatie. Zo gaan we niet vragen om een type info (en in zo weinig mogelijke vrije velden) op te geven als je niet specifiek naar bepaalde profielen zult communiceren. 2.5 BEZOEKERS UIT VERSCHILLENDE DOELGROEPEN IN CONTACT BRENGEN EN LATEN NETWERKEN. De bezoekers van de VGC Gemeenschapscentraportaal site zijn zeer divers en komen uit verschillende doelgroepen. Momenteel vinden zij elkaar niet terug en kunnen zij niet met elkaar netwerken (tenzij op eigen platform zoals Netlog). De VGC Gemeenschapscentraportaal site kan echter evolueren naar een hub, waarop deze verschillende initiatieven, individuen elkaar kunnen vinden, kunnen 7/45 stimuleren en activeren, zonder hierbij een nieuw Facebook of Netlog platform te bouwen. We moeten de VGC Gemeenschapscentraportaal site ‘leden’ gewoon de mogelijkheid bieden om in contact met elkaar te treden, via welk kanaal dan ook. Dit kan door: • De mogelijkheid te bieden om zich op de website aan te melden als zijnde • ‘Ik ga hier aanwezig zijn’. Op deze manier geef je te kennen dat jij er zal zijn. Als mensen je willen contacteren kan dat op je social network. 8/45 3. INFORMATIE ARCHITECTUUR Hoe gaan we de informatie op de portaalsite weergeven? Hoe gaan we deze op het scherm brengen? We beschrijven de opbouw van de website op basis van de wireframes, die voor de typepagina’s uitgewerkt werden. Elke pagina heeft een eigen gedrag, dat beschreven wordt. 3.1 PORTAAL HOMEPAGE Zie wireframes “Homepage en “Homepage fly-out”. De homepage van VGC Gemeenschapscentraportaal site is opgebouwd vanuit de volgende principes: • de bezoekers leiden naar de informatie die ze nodig hebben / zoeken; • het promoten van de aangeboden informatie en diensten. De structuur van de homepage kan onderverdeeld worden in 4 zones: • de header • de content zone • Mijn modules • de footer Helemaal bovenaan bevindt zich de header. We onderscheiden hier 4 elementen: • Bovenaan vinden we de functionele navigatie met links naar de “Info & tickets”, “Zaalverhuur”, “Publicaties”, “Jobs”, Links”, “Nieuws”, “Nieuwsbrief” en “Contact”; de login link (die nogmaals in de footer wordt herhaald) en de taalkeuze knoppen. • Daaronder aan de linkse zijde van de header bevinden zich het VGC logo en het logo van de portaalsite. Wanneer een bezoeker het logo van de portaalsite klikt, wordt hij terug naar de homepage gestuurd. • Aan de rechterzijde bevindt zich een zoek venster. De bezoeker kan hier een interne zoekactie starten. Hij kan ook kiezen of er enkel binnen deze portaalsite of binnen alle VGC portaalsites wordt gezocht. • Helemaal onderaan bevindt zich de hoofdnavigatie onder vorm van een navigatiebalk van 6 grote knoppen die een bezoeker toegang geven tot de landingspagina’s van de respectievelijke secties. 9/45 NB Aangezien de lay-out en functionaliteit van de header op alle onderliggende pagina’s identiek is aan deze van de homepage, wordt deze beschrijving niet meer herhaald. Het leeuwendeel van de pagina wordt ingenomen door de content zone. Hier onderscheiden we 8 elementen: • De carrousel: in dit onderdeel kunnen de content beheerders specifieke informatie, functionaliteiten, evenementen, cursussen en nieuwtjes naar voren schuiven. Deze carrousel werkt als een autoplay diavoorstelling, wat betekend dat de dia’s automatisch met een interval van een 10tal seconden na mekaar worden getoond. Elk van de dia’s heeft een titel, een korte beschrijving en CTA knop. Er zijn daarom een aantal controle knoppen voorzien: “1”, “2”, ... om direct naar een van de dia’s te springen en een “pauze/start “knop om de diavoorstelling te pauzeren en/of terug op te starten. Het aantal dia’s blijft best beperkt tot 5. Wanneer men meer items onder de aandacht wil plaatsen, gebruikt men best de “Focus” zone om de minder belangrijke items te promoten. Wanneer de bezoeker op de CTA knop klikt, wordt hij naar de bewuste pagina gestuurd. > zie ook de beschrijving lager • Het blokje “Vind een activiteit” rechts van de carrousel: dit blokje biedt een bezoeker, van de site, de mogelijkheid om dadelijk vanaf de homepage een van de belangrijkste taken uit te voeren: i.e. het vinden van een evenement of cursus. De bezoeker kan via tabs kiezen welk type zoekopdracht hij wenst uit te voeren. Er zijn zowel voor cursussen als evenementen een aantal zoekcriteria voorzien en een “Zoeken” knop. • Onder “Vind een activiteit” bevindt zich een blokje met een aantal shortcuts “Quick links”: deze shortcuts brengen een bezoeker rechtstreeks naar meest populaire informatie (pagina’s). • Het blokje “Focus” stelt de content beheerders is staat naast de carrousel nog 12 bijkomende items voor alle doelgroepen/segmenten via een manuele carrousel te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Een bezoeker kan zich ook abonneren op RSS-feeds. 10/45 • Het blokje “Multimedia” stelt de content beheerders in staat om een aantal video’s en foto’s op de homepage te publiceren. Er wordt telkens één grote thumbnail getoond en 4 kleinere thumbs met titel. Wanneer de bezoeker op de thumb of titel klikt, opent de videoplayer/fotoviewer zich in een lightbox. Er is ook een link “Bekijk alle video’s/foto’s” die toegang geeft tot het video/foto archief. • Het blokje “Nieuws” biedt een overzicht van de meest recente nieuwsberichten. Van elk nieuwsbericht wordt de titel getoond. Wanneer de bezoeker op de titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief “Meer nieuws” . Een bezoeker kan zich ook abonneren op RSS-feeds. • Het blokje “Getuigenissen” is een autoplay carrousel die de bezoeker een aantal getuigenissen toont. Elke getuigenis bestaat uit een thumbnail (foto), de klikbare voornaam en naam, quote en een “Meer lezen” link. Wanneer de bezoeker op de naam of “Meer lezen” link klikt wordt hij naar de detail pagina van de getuigenis gestuurd. Er is ook een link “Meer getuigenissen” die toegang geeft tot een pagina met meer getuigenissen. • Het blokje “De 22 centra” bevat een thumbnail van een Google Map waarop de 22 centra via markers staan aangegeven. Deze markers zijn dus niet klikbaar. De bezoeker kan wel via de link “Ontdek de 22 centra” link doorklikken naar de pagina die o.a. een grote volledige functionele Google map bevat. Onder de content zone vinden wij de zone met een aantal widgets “Mijn modules”, die vooral tot doel heeft een individuele bezoeker in staat te stellen de informatie, die wordt getoond op de homepage, te personaliseren en zo de relevantie te verhogen : Standaard kunnen jullie bijvoorbeeld op portaalsite een eigen widget en een widget van portaalsite Jeugd tonen om het principe en de onderlinge relaties tussen de sites duidelijk te maken. Een ingelogde bezoeker kan bovendien andere widgets toevoegen (“Voeg een module toe”) en/of weglaten (klikken op de sluit knop van een individuele widget). Een bezoeker kan er ook voor kiezen om heel deze zone te verbergen (“Verberg Mijn modules”) of een korte handleiding en FAQ raadplegen (“Help”). Op elk van de portaal sites zal een bezoeker dus steeds dezelfde door hem gekozen widgets terugvinden. > zie ook het algemene visie document: punt 1.3 en 2.3 11/45 Helemaal onderaan het scherm vinden we een zgn. footer, die 7 functies heeft: • Ten eerste bevat hij de links naar de sites van de respectievelijke partners en per partner een korte beschrijving. • Ten tweede wordt ook het zoek veld vanuit de header hier opnieuw herhaald (waardoor de bezoeker, die onderaan een lange pagina is terecht gekomen niet opnieuw helemaal naar boven moet scrollen om een zoekactie te starten). • Ten derde bevat hij naast het zoek veld een aantal social media knoppen. Het is immers van cruciaal belang om zoveel mogelijk potentiële bezoeker van deze site te bereiken en dus een belangrijke aanwezigheid op de sociale netwerk sites te creëren en tegelijkertijd de band tussen deze sites en de eigen site te versterken. • Ten vierde bevat hij de contactgegevens van de medewerker, die verantwoordelijk is voor de inhoud van de pagina. • Ten vijfde is dit ook een soort hub waar bezoekers uitgenodigd worden om zicht te registreren via hun favoriete sociale netwerksite (bijv. Facebook) of op een andere manier. De bedoeling is om deze registratie stapsgewijs te laten verlopen en enkel die informatie te vragen die nodig is om een bepaalde actie uit te voeren, bijvoorbeeld registratie met naam en paswoord indien de bezoeker wil deelnemen een bepaalde activiteit of een e-mail adres wanneer hij zicht inschrijft op een nieuwsbrief (op deze manier houden we de drempel zo laag mogelijk en trachten we zoveel mogelijk bezoekers te overtuigen) > zie ook het algemene visie document: punt 2.2 • De footer bevat ook de chat module. Wanneer de VGC deze module activeert, wordt er een boodschap dat de medewerker online is getoond evenals het chatvenster. • Tenslotte wordt helemaal onderaan de copyright informatie weergegeven. NB Aangezien de lay-out en functionaliteit van de footer op alle onderliggende pagina’s identiek is aan deze van de homepage, wordt deze beschrijving niet meer herhaald. 12/45 3.2 LANDINGSPAGINA “PROGRAMMA” Zie wireframe “landingspagina programma”. De structuur van deze landingspagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: Helemaal bovenaan links vinden we het kruimeltjes pad dat aan de bezoeker de navigatie context (i.e. de plaats in de boomstructuur waar hij zich bevindt) toont. In de linker kolom vinden we het blokje “Vind een evenement” dit blokje biedt een bezoeker, van de site, de mogelijkheid een evenement te zoeken. Er zijn een aantal zoekcriteria voorzien en een “Zoeken” knop. In de rechter kolom vinden we het blokje “De evenementen van vandaag”. Dit blokje bevat een manuele carrousel wat de content beheerders is staat stelt om 6 evenementen, die op de dag van het bezoek plaats vinden, te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina van het evenement. Een bezoeker kan via het formulier achter de link “Personaliseer” ook aangeven welk type evenementen hij vooral in geïnteresseerd is. Deze voorkeur wordt voor bezoekers zonder account bijgehouden in een cookie en voor bezoekers met een account in hun profiel. Daaronder bevinden zich een aantal thematische blokjes, die de content beheerders toelaten om per type evenement een evenement naar voren te schuiven. Elk evenement bestaat uit een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link. Wanneer de bezoeker op de titel of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de detail pagina in kwestie. Er is ook telkens een “Meer evenementen” link aanwezig. Wanneer de bezoeker op deze link klikt, wordt hij doorgestuurd naar de programma zoekresultaten pagina waar de evenementen werden gefilterd op basis van het bewuste type. 13/45 3.3 PROGRAMMA ZOEKRESULTATEN Zie wireframe “Programma zoekresultaten”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom wordt een aantal filters getoond, die de bezoeker toelaten om de lijst (met zoekresultaten) verder te verfijnen. Voorlopig kan er gefilterd worden op: datum, thema, gemeente en centrum. In de rechter kolom wordt een lijst met pager met de zoekresultaten getoond. De zoekresultaten kunnen gesorteerd worden op datum en alfabetisch. Voor elk zoekresultaat is er: een klikbare thumbnail, een klikbare titel, een korte beschrijving, de datum, het gemeenschapscentrum, de gemeente , het evenement type en een “Meer lezen” link. Wanneer de bezoeker op de titel link, thumbnail of “Meer lezen” link klikt, wordt hij doorgestuurd naar de evenement detail pagina. Individuele evenementen kunnen door de content provider ook voorzien worden van de tag “aanrader”: visueel wordt dit weergegeven door een diagonale banner. 14/45 3.4 EVENEMENT DETAILS Zie wireframes “Evenement details tab 1-4”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom wordt een “Terug naar de zoekresultaten” knop, de naam van het evenement, de informatie over het evenement en helemaal onderaan een manuele carrousel met gerelateerde evenementen. De informatie over het evenement bevat een aantal categorieën (“Overzicht”, “Praktisch”, “Contact”, “Foto’s”, “Video’s” en “Koop een ticket”) en voor sommige categorieën (“Overzicht”, “Foto’s” en “Video’s”) is de content gedeeltelijk vrij editeerbaar. De content van elk van deze categorieën wordt via een klik op de tab zichtbaar. De “Overzicht” tab: Bovenaan bevindt zich naast een foto, structurele meta data type, locatie, gemeenschapscentrum, prijs en datum), daaronder de beschrijving van het evenement, dan een aantal tags (via deze tags kunnen de content beheerders deze inhoud linken aan andere gerelateerde inhoud binnen deze portaal site, maar ook met de inhoud op de andere VGC portaalsites), dan de “Koop een ticket”, “Bewaar in mijn gids” CTA knoppen en de social sharing knoppen. Wanneer de bezoeker op een van de tags klikt, wordt hij naar de naar de programma zoekresultaten pagina gestuurd waar de evenementen werden gefilterd op basis van de bewuste tag. De “Praktisch” tab: Hier wordt per type specifieke gestructureerde praktische informatie getoond. Onderaan worden de CTA en social sharing knoppen herhaald. De “Contact” tab: Hier wordt een Google Map, het adres van het gemeenschapscentrum en de bereikbaarheidsinformatie getoond getoond. Onderaan worden de CTA en social sharing knoppen herhaald. De “Foto’s” tab: Hier wordt een aantal thumbnails van foto’s – indien er werden opgeladen door 15/45 de content beheerder – en een pager getoond. Wanneer de bezoeker op de thumb klikt, opent de fotoviewer zich in een lightbox. Onderaan worden de CTA en social sharing knoppen herhaald. De “Video’s” tab: Hier wordt een aantal thumbnails van video’s – indien er werden opgeladen door de content beheerder – en een pager getoond. Wanneer de bezoeker op de thumb klikt, opent de videoplayer zich in een lightbox. Onderaan worden de CTA en social sharing knoppen herhaald. In de rechter kolom onderscheiden we 3 elementen: • Het “Andere evenementen in deze locatie” blokje: hier worden op andere evenementen van het gemeenschapscentrum getoond. > zie ook het algemene visie document: punt 1.2 • Het “Deelnemerslijst” blokje: hier kan de bezoeker met een account vrijwillig aangeven of hij al-dan-niet wenst deel te nemen aan het evenement. Van de bezoekers, die hebben aangevinkt dat ze “zeker wel” gaan deelnemen worden de thumbnails en een pager getoond. • Het “Nieuwsbrief” blokje: de bezoeker zich inschrijven op de nieuwsbrief voor deze doelgroep. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. > zie ook beschrijving van de registratie functionaliteit van de footer 16/45 3.5 LANDINGSPAGINA “CURSUSSEN” Zie wireframe “landingspagina cursussen”. De structuur van deze landingspagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom vinden we het blokje “Vind een cursus” dit blokje biedt een bezoeker, van de site, de mogelijkheid een cursus te zoeken. Er zijn een aantal zoekcriteria voorzien en een “Zoeken” knop. In de rechter kolom vinden we het blokje “Laatste plaatsen”. Dit blokje bevat een manuele carrousel wat de content beheerders is staat stelt om 6 cursussen, die nog maar enkele plaatsen beschikbaar hebben, te promoten. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina van de cursus. Een bezoeker kan via het formulier achter de link “Personaliseer” ook aangeven welk type cursus hij vooral in geïnteresseerd is. Deze voorkeur wordt voor bezoekers zonder account bijgehouden in een cookie en voor bezoekers met een account in hun profiel. Daaronder bevinden zich een aantal thematische blokjes, die de content beheerders toelaten om per type cursus een cursus naar voren te schuiven. Elke cursus bestaat uit een (klikbare) titel, een foto, de datum, een korte beschrijving en een “Meer lezen” link. Wanneer de bezoeker op de titel of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de detail pagina in kwestie. Er is ook telkens een “Meer cursussen” link aanwezig. Wanneer de bezoeker op deze link klikt, wordt hij doorgestuurd naar de programma zoekresultaten pagina waar de cursussen werden gefilterd op basis van het bewuste type. 17/45 3.6 CURSUSSEN ZOEKRESULTATEN Zie wireframe “Cursussen zoekresultaten”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom wordt een aantal filters getoond, die de bezoeker toelaten om de lijst (met zoekresultaten) verder te verfijnen. Voorlopig kan er gefilterd worden op: datum, thema, onderwerp, gemeente, centrum, doelgroep en lesmoment. In de rechter kolom wordt een lijst met pager met de zoekresultaten getoond. De zoekresultaten kunnen gesorteerd worden op datum en alfabetisch. Voor elk zoekresultaat is er: een klikbare thumbnail, een klikbare titel, een korte beschrijving, de datum, het gemeenschapscentrum, de gemeente , het evenement type en een “Meer lezen” link. Wanneer de bezoeker op de titel link, thumbnail of “Meer lezen” link klikt, wordt hij doorgestuurd naar de cursus detail pagina. Individuele cursussen kunnen door de content provider ook voorzien worden van de tag “aanrader”: visueel wordt dit weergegeven door een diagonale banner. 3.7 LANDINGSPAGINA GEMEENSCHAPSCENTRA Zie wireframe “GC landingspagina”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 2 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. 18/45 Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de rechter kolom wordt een titel een korte beschrijving (van de functionaliteit van de Google Map) een Google Map getoond en vervolgens alle gemeenschapscentra in lijstvorm. Per gemeenschapscentrum wordt de klikbare naam van het centrum en de gemeente, het adres van het centrum, een “Meer info” link, het e-mail adres en de URL van de website getoond. Wanneer de bezoeker op de naam van het centrum klikt, wordt hij naar de site van het bewuste centrum gestuurd, wanneer hij op de “Meer info” link klikt, wordt hij naar de detail pagina van het centrum gestuurd. De cijfers in de markers komen overeen met de cijfers van de lijst. Wanneer de bezoeker op een marker klikt, dan wordt de klikbare naam van het centrum, de gemeente en het adres van het centrum in een info window getoond. Wanneer de bezoeker op de naam van het centrum klikt, wordt hij naar de site van het bewuste centrum gestuurd. 3.8 GEMEENSCHAPSCENTRUM DETAILS Zie wireframe “Gemeenschapscentrum”. De structuur van deze pagina kan onderverdeeld worden in 3 zones: • de header • de content zone • de footer De content zone wordt onderverdeeld in 3 kolommen: In de linker kolom vindt een bezoeker de lokale navigatie. Deze lokale navigatie toont de volledige boomstructuur van een van de 3 secties uit de hoofdnavigatie. Wanneer er onder een bepaalde categorie nog subcategorieën zitten, wordt dit visueel weergeven door een naar rechts wijzend driehoekje achter de link. Wanneer de bezoeker op zo’n link klikt, wordt de onderliggende boom getoond. Idem voor de subcategorieën. In de midden kolom wordt de naam van het centrum, de basis informatie en een Google Map. De informatie over het centrum bevat een aantal categorieën (“Overzicht”, “Praktisch”, “Zaalgebruik”, “Ligging” en “Contact”) en voor sommige categorieën (“Overzicht” en “Zaalgebruik”) is de content gedeeltelijk vrij editeerbaar. De content van elk van deze categorieën wordt via een klik op de tab 19/45 zichtbaar. In de Google Map worden de 21 andere centra via markers getoond. Wanneer de bezoeker op een marker klikt, dan wordt de klikbare naam van het centrum, de gemeente en het adres van het centrum in een info window getoond. Wanneer de bezoeker op de naam van het centrum klikt, wordt hij naar de site van het bewuste centrum gestuurd. In de linker kolom vinden we 2 elementen: Het blokje “Vind een evenement” dit blokje biedt een bezoeker, van de site, de mogelijkheid een evenement te zoeken. Er zijn een aantal zoekcriteria voorzien en een “Zoeken” knop. Het blokje “Vind een cursus” dit blokje biedt een bezoeker, van de site, de mogelijkheid een cursus te zoeken. Er zijn een aantal zoekcriteria voorzien en een “Zoeken” knop. 3.9 GEMEENSCHAPSCENTRUM HOMEPAGE Zie wireframe “GC homepage”. De homepage van een Gemeenschapscentrum is opgebouwd vanuit de volgende principes: • de bezoekers leiden naar de informatie die ze nodig hebben / zoeken; • het promoten van de aangeboden informatie en diensten. De structuur van de homepage kan onderverdeeld worden in 4 zones: • de header • de content zone • Mijn modules • de footer Helemaal bovenaan bevindt zich de header. We onderscheiden hier 4 elementen: • Bovenaan vinden we de functionele navigatie met links naar de “Info & tickets”, “Zaalverhuur”, “Bibliotheek”, “Maandblad”, “Nieuwsbrief”, “Links”, “Praktisch” en “Contact”; de login link (die nogmaals in de footer wordt herhaald) en de taalkeuze knoppen. 20/45 • Daaronder aan de linkse zijde van de header bevinden zich het VGC logo en het logo van het centrum. Wanneer een bezoeker het logo van de centrum klikt, wordt hij terug naar de homepage gestuurd. • Aan de rechterzijde bevindt zich een zoek venster. De bezoeker kan hier een interne zoekactie starten. Hij kan ook kiezen of er enkel binnen deze site, binnen de overkoepelende portaalsite of binnen alle VGC portaalsites wordt gezocht. • Helemaal onderaan bevindt zich de hoofdnavigatie onder vorm van een navigatiebalk van aantal grote knoppen die een bezoeker toegang geven tot de landingspagina’s van de respectievelijke secties. Het leeuwendeel van de pagina wordt ingenomen door de content zone. Hier onderscheiden we 9 elementen: • De carrousel: in dit onderdeel kunnen de content beheerders specifieke informatie, functionaliteiten, evenementen, cursussen en nieuwtjes naar voren schuiven. Deze carrousel werkt als een autoplay diavoorstelling, wat betekend dat de dia’s automatisch met een interval van een 10tal seconden na mekaar worden getoond. Elk van de dia’s heeft een titel, een korte beschrijving en CTA knop. Er zijn daarom een aantal controle knoppen voorzien: “1”, “2”, ... om direct naar een van de dia’s te springen en een “pauze/start “knop om de diavoorstelling te pauzeren en/of terug op te starten. Het aantal dia’s blijft best beperkt tot 5. Wanneer men meer items onder de aandacht wil plaatsen, gebruikt men best de “Focus” zone om de minder belangrijke items te promoten. Wanneer de bezoeker op de CTA knop klikt, wordt hij naar de bewuste pagina gestuurd. > zie ook de beschrijving lager • Het blokje “Vind een activiteit” rechts van de carrousel: dit blokje biedt een bezoeker, van de site, de mogelijkheid om dadelijk vanaf de homepage een van de belangrijkste taken uit te voeren: i.e. het vinden van een evenement of cursus. De bezoeker kan via tabs kiezen welk type zoekopdracht hij wenst uit te voeren. Er zijn zowel voor cursussen als evenementen een aantal zoekcriteria voorzien en een “Zoeken” knop. • Onder “Vind een activiteit” bevindt zich een blokje met een aantal shortcuts “Quick links”: deze shortcuts brengen een bezoeker rechtstreeks naar meest populaire informatie (pagina’s). • Het blokje “Focus” stelt de content beheerders is staat naast de carrousel nog 12 bijkomende items voor alle doelgroepen/segmenten via 21/45 een manuele carrousel te promoten. Content afkomstig van partners en/of lokale verenigingen kan door de content beheerders voorzien worden van een speciale tag. Deze tag wordt gevisualiseerd als een banner met de naam van de partner of de lokale vereniging. Aangezien de carrousel geen autoplay heeft, dient een bezoeker m.b.v. 2 grote controle knoppen (links en rechts) door de inhoud scrollen. Per item worden een (klikbare) titel, een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer een bezoeker op de titel, foto of de “Meer lezen” link klikt, wordt hij doorgestuurd naar de pagina in kwestie. Een bezoeker kan zich ook abonneren op RSS-feeds. • Het blokje “Multimedia” stelt de content beheerders in staat om een aantal video’s en foto’s op de homepage te publiceren. Er wordt telkens één grote thumbnail getoond en 4 kleinere thumbs met titel. Wanneer de bezoeker op de thumb of titel klikt, opent de videoplayer/fotoviewer zich in een lightbox. Er is ook een link “Bekijk alle video’s/foto’s” die toegang geeft tot het video/foto archief. • Het blokje “Lokale vereniging van de maand” stelt de content beheerders in staat om een lokale vereniging voor te stellen aan de bezoeker. Er wordt een foto, een korte beschrijving en een “Meer lezen” link getoond. Wanneer de bezoeker op de “Meer lezen” link klikt, wordt hij doorgestuurd naar de detail pagina van de vereniging. • Het blokje “De 22 centra” bevat een thumbnail van een Google Map waarop de 22 centra via markers staan aangegeven. Deze markers zijn dus niet klikbaar. De bezoeker kan wel via de link “Ontdek de 22 centra” link doorklikken naar de pagina die o.a. een grote volledige functionele Google map bevat. • Het blokje “Nieuws” biedt een overzicht van de meest recente nieuwsberichten. Van elk nieuwsbericht wordt de titel getoond. Wanneer de bezoeker op de titel klikt wordt hij naar de detail pagina van het nieuwsbericht gestuurd. Helemaal onderaan bevindt zich een link naar het nieuwsarchief “Meer nieuws” . Een bezoeker kan zich ook abonneren op RSS-feeds. • Via het blokje “Nieuwsbrief” kan de bezoeker zich inschrijven op de nieuwsbrief van het centrum. Een kort tekstje beschrijft de inhoud/voordelen voor de bezoeker. Daarnaast wordt er ook een nieuwsbrief icoontje of nieuwsbrief cover getoond. Om zicht te abonneren is enkel het e-mail adres is vereist. Van zodra de bezoeker op de “Verzend” knop heeft geklikt, wordt hij naar een achterliggende 22/45 pagina met een aantal vrijblijvende marketing vragen geleid. Onder de content zone vinden wij de zone met een aantal widgets “Mijn modules”, die vooral tot doel heeft een individuele bezoeker in staat te stellen de informatie, die wordt getoond op de homepage, te personaliseren en zo de relevantie te verhogen : Standaard kunnen jullie bijvoorbeeld op portaalsite een eigen widget en een widget van portaalsite Jeugd tonen om het principe en de onderlinge relaties tussen de sites duidelijk te maken. Een ingelogde bezoeker kan bovendien andere widgets toevoegen (“Voeg een module toe”) en/of weglaten (klikken op de sluit knop van een individuele widget). Een bezoeker kan er ook voor kiezen om heel deze zone te verbergen (“Verberg Mijn modules”) of een korte handleiding en FAQ raadplegen (“Help”). Op elk van de portaal sites zal een bezoeker dus steeds dezelfde door hem gekozen widgets terugvinden. > zie ook het algemene visie document: punt 1.3 en 2.3 Helemaal onderaan het scherm vinden we een zgn. footer, die 7 functies heeft: • Ten eerste bevat hij de links naar de sites van de respectievelijke partners en per partner een korte beschrijving. • Ten tweede wordt ook het zoek veld vanuit de header hier opnieuw herhaald (waardoor de bezoeker, die onderaan een lange pagina is terecht gekomen niet opnieuw helemaal naar boven moet scrollen om een zoekactie te starten). • Ten derde bevat hij naast het zoek veld een aantal social media knoppen. Het is immers van cruciaal belang om zoveel mogelijk potentiële bezoeker van deze site te bereiken en dus een belangrijke aanwezigheid op de sociale netwerk sites te creëren en tegelijkertijd de band tussen deze sites en de eigen site te versterken. • Ten vierde bevat hij de contactgegevens van de medewerker, die verantwoordelijk is voor de inhoud van de pagina. • Ten vijfde is dit ook een soort hub waar bezoekers uitgenodigd worden om zicht te registreren via hun favoriete sociale netwerksite (bijv. Facebook) of op een andere manier. De bedoeling is om deze registratie stapsgewijs te laten verlopen en enkel die informatie te vragen die nodig is om een bepaalde actie uit te voeren, bijvoorbeeld registratie met naam en paswoord indien de bezoeker wil deelnemen een bepaalde activiteit of een e-mail adres wanneer hij zicht inschrijft op een 23/45 nieuwsbrief (op deze manier houden we de drempel zo laag mogelijk en trachten we zoveel mogelijk bezoekers te overtuigen) > zie ook het algemene visie document: punt 2.2 • De footer bevat ook de chat module. Wanneer de VGC deze module activeert, wordt er een boodschap dat de medewerker online is getoond evenals het chatvenster. • Tenslotte wordt helemaal onderaan de copyright informatie weergegeven. NB Aangezien de lay-out en functionaliteit van de andere wireframes identiek is aan deze van de portaalsite, wordt deze beschrijving niet meer herhaald. Ter informatie hebben we wel de wireframes toegevoegd. 24/45 Portaal homepage 25/45 Portaal homepage (flyout) 26/45 Landingspagina “Programma” 27/45 Zoekresultaten programma 28/45 Evenement details (tab 1) 29/45 Evenement details (tab 2) 30/45 Evenement details (tab 3) 31/45 Evenement details (tab 4) 32/45 Landingspagina “Cursussen” 33/45 Cursussen zoekresultaten 34/45 Landingspagina Gemeenschapscentra 35/45 Gemeenschapscentrum details 36/45 Gemeenschapscentrum homepage 37/45 Landingspagina “Programma” 38/45 Zoekresultaten programma 39/45 Evenement details (tab 1) 40/45 Evenement details (tab 2) 41/45 Evenement details (tab 3) 42/45 Evenement details (tab 4) 43/45 Landingspagina “Cursussen” 44/45 Cursussen zoekresultaten 45/45 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/vgc-portaal-sites-18-juli-2011-een-globale-visie-op-de-infor" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "VGC portaal sites. 18 juli 2011 EEN GLOBALE VISIE OP DE INFORMATIE ARCHITECTUUR & UX"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <a href="https://adoc.pub/about">About Us</a> | <a href="https://adoc.pub/privacy">Privacy Policy</a> | <a href="https://adoc.pub/term">Terms of Service</a> | <a href="https://adoc.pub/copyright">Copyright</a> | <a href="https://adoc.pub/contact">Contact Us</a> | <a href="https://adoc.pub/cookie_policy">Cookie Policy</a> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

VGC portaal sites. 18 juli 2011 EEN GLOBALE VISIE OP DE INFORMATIE ARCHITECTUUR & UX

Recommend Documents