Vuistregels voor een goede (agenda)website

Als je zelf volledig alles mocht bepalen dan koos je best voor ...

Verloop1. De bezoeker

wie is hij, wat bezielt hem?

2. Type pagina'skeuzepagina vs. detailpagina

3. Vaste elementenzoekbox, verfijningen, titel,...

4. Concrete issues bij agenda integratiesagendasite vs. site met agenda

Hij leest niet, hij scant

De bezoeker

heatmap eye-tracking onderzoek

heatmaps liegen niet

Hoe kunnen we hierbij helpen?1. Respecteer basisregels

- links onderlijnen en in kleur- tekst die geen link is NOOIT onderlijnen- algemene typografie (font, breedte, interlinie)

2. Zorg voor reliëf- grote vette titels - zuinig met (achtergrond)kleuren, lijnen, kaders,...- voldoende witruimte (creëert blokken + samenhang)- korte en bondige teksten- minder relevante elementen op achtergrond of weg!

Hoe kunnen we hierbij helpen?3. Wees consistent

- hergebruik stijl voor items met zelfde gewicht- gebruik overal dezelfde linkkleur- gebruik de linkkleur enkel voor links - plaats vaste elementen op vaste plaatsen

SamengevatHou het sober en wees selectief met wat je wil laten opvallen. Het zal des te makkelijker zijn om er te laten uitspringen wat echt belangrijk is.

Hij komt met een concreet doel

De bezoeker

Minder dan 25% komt op de homepage om te klikken op het inspirerende en prikkelende aanbod

Hij heeft geen geduld

De bezoeker

Hoe doel snel laten bereiken?1. Geen afleiding

focus op wat bezoeker belangrijk vindt, niet op wat marketingafdeling of redactie belangrijk vindt (zie cijfers homepage UiV)

2. Vermijd ballast- geen welkomstteksten- geen lange en saaie introducties van pagina's- niet relevante elementen weg!

Experiment: zoek op www.tielt.be eens de openingsuren op van de dienst ruimtelijke ordening of het telefoonnummer van de belbus

De keuzepagina

Type pagina's

De keuzepagina1. Wat is het?

- elke pagina waar bezoeker een lijst met keuzes heeft- typisch: categorie- of zoekresultatenpagina- maar ook: homepagina en overzichtspagina van een bepaalde dienst of afdeling

2. Wat moet ze doen?- zo snel mogelijk naar detailpagina brengen

- compact, helder, scanbaar, reliëf- schrap overbodige elementen (contextgebonden)- schrap overbodige tussenpagina's- (voorbeeld gent, tielt)

Experiment: zoek op www.gent.be de contactgegevens van de dienst ruimtelijke ordening

De detailpagina

Type pagina's

De detailpagina1. Wat is het?

- de belangrijkste pagina- hier vindt bezoeker antwoord op zijn vraag- meestal ook ingangspagina (vanuit Google)

2. Wat moet ze doen?- moet binnen 2 à 4 sec overtuigen- ook deze helder en makkelijk scanbaar- duidelijke titel- essentie binnen trechter of F-vorm- geen nieuwe keuzes pushen- ev. nieuwe keuzes ondergeschikt aan content

zet de essentie in de F-zone, maak extra keuzes ondergeschikt

De zoekbox

Vaste elementen

De zoekbox1. Positie

- ideaal: rechtsbovenaan- relatie met content die ermee doorzoekbaar is- op alle pagina's op dezelfde plaats

2. Vorm- ideaal: 1 invulveld (leeg + wit) + 1 knop ("Zoek")- soms meerdere invulvelden verantwoord- kijk naar context (spreiding in tijd, regio en aantal

items van het complete aanbod) om te zien of invulvelden of zelfs volledig zoekbox niet weggelaten kan worden

Verfijningen

Vaste elementen

Verfijningen1. Positie

- ideaal: links van zoekresultaten (F-patroon)- relatie met content die ermee filterbaar is- op alle pagina's op dezelfde plaats

2. Vorm- per criterium: titel + lijst opties & aantallen- lege filters weglaten of uitschakelen- actieve filters moeten goed leesbaar zijn- liefst bovenaan in paginatitel- kan ook in filteropties zelf, apart blokje (of combinatie)

Verfijningen3. Altijd nodig?

- niet bij beperkt aanbod- niet als exact dezelfde opties al in zoekbox zitten- zoekbox en verfijningen als communicerende vaten

De titel

Vaste elementen

De titel1. Positie

- ideaal: zo hoog mogelijk- vooral op detailpagina’s maar ook op keuzepagina’s- zeer belangrijk element om bezoeker binnen 2 à 4 seconden de bevestiging te geven dat hij/zij juist zit- beter geen teasers (nieuwe keuzes) boven de titel

2. Vorm- groot en vet- niet in linkkleur zetten- consistente vorm op verschillende type pagina's

voorbeeld geen zoekresultaten UiTinWestVlaanderen

Teasers

Vaste elementen

Teasers1. Que?

- verzamelnaam voor elementen die dienen als ingang voor agenda

- eens binnen niet te hard meer pushen- voorbeelden: tips van de redactie, in de kijker, geen

duit toch uit,...

2. Positie- plaatsen waar bezoeker geïnspireerd wil worden of

afnemende aandacht onderschept kan worden- niet op plaatsen waar bezoeker taakgericht bezig is

(bovenaan detailpagina of gefilterde zoekresultaten)

Agendasite vs. site met agenda

Concrete issues bij agenda-integraties

Agendasite vs. site met agendaHet verschil

AgendasiteEen site waar de agenda het enige (of toch voornaamste) onderdeel is. vb. UiTinVlaanderen.be

Site met een agendaHet merendeel van de widgettoepassingen zijn geen zuivere agendasites, maar sites waar de agenda slechts een onderdeel is van een site met een eigen navigatie, subnavigatie, zoekbox, rechterkolom,... (vb. elke gemeentesite)

Dubbele zoekbox

Concrete issues bij agenda-integraties

Dubbele zoekbox1. Probleem

In ideaal geval is er 1 zoekbox die in alle soorten content zoekt, maar meestal technische beperking

2. Mogelijke oplossing / alternatieven

zet de zoekbox van de widget die slechts in een beperkt del van de content zoekt best in de rechterbovenhoek van de zone die deze beperkt content inneemt. En zorg voor een duidelijke visuele scheiding met rest van de site en voldoende samenhang met agendacontent.

Zoekbox als teaser

Concrete issues bij agenda-integraties

Zoekbox als teaser1. Probleem

Door de zoekbox als teaser op een homepage of keuzepagina (vb. Vrije tijd & Cultuur) te gebruiken, kan het zijn dat deze hier op een andere positie staat als op zoekresultaten en/of detailpagina’s van agenda staat -> niet consistent

2. Mogelijke oplossing / alternatieven

Gebruik een “in de kijker”-widget met een meer-link als ingang naar de agenda.

Vaste linker- of rechterkolom

Concrete issues bij agenda-integraties

Vaste linker- of rechterkolom1. Probleem

- te weinig ruimte om zoekbox rechts te plaatsen en/of verfijningen links

2. Mogelijke oplossing / alternatieven- probeer partner te overtuigen om overbodige ballast

weg te laten en volledige breedte te mogen benutten- zoekbox bovenaan, maar dan zo compact mogelijk- verfijningen weglaten en alles in zoekbox stoppen (als

deze rechts kan)- zoekbox weglaten en alle opties in verfijningen

stoppen (als deze links kunnen)