Enkele basisregels voor een gebruiksvriendelijke (agenda)site, en meer specifiek voor de integratie van agendawidgets in een bestaande website.

1. Vuistregels voor een
goede (agenda)website
Als je zelf volledig alles mocht bepalen dan
koos je best voor ...

2. Verloop
1. De bezoeker
wie is hij, wat bezielt hem?
2. Type pagina's
keuzepagina vs. detailpagina
3. Vaste elementen
zoekbox, verfijningen, titel,...
4. Concrete issues bij agenda integraties
agendasite vs. site met agenda

3. De bezoeker
Hij leest niet, hij scant

4. heatmap eye-tracking onderzoek

5. heatmaps liegen niet

6. 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!

9. 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
Samengevat
Hou 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.

10. De bezoeker
Hij komt met een concreet doel

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

12. De bezoeker
Hij heeft geen geduld

13. 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!

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

16. Type pagina's
De keuzepagina

17. De keuzepagina
1. 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)

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

19. Type pagina's
De detailpagina

20. De detailpagina
1. 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

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

22. Vaste elementen
De zoekbox

23. De zoekbox
1. 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

24. Vaste elementen
Verfijningen

25. Verfijningen
1. 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)

26. Verfijningen
3. Altijd nodig?
- niet bij beperkt aanbod
- niet als exact dezelfde opties al in zoekbox zitten
- zoekbox en verfijningen als communicerende vaten

27. Vaste elementen
De titel

28. De titel
1. 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

29. voorbeeld geen zoekresultaten UiTinWestVlaanderen

31. Vaste elementen
Teasers

32. Teasers
1. 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)

33. Concrete issues bij agenda-integraties
Agendasite vs. site met agenda

34. Agendasite vs. site met agenda
Het verschil
Agendasite
Een site waar de agenda het enige (of toch voornaamste)
onderdeel is. vb. UiTinVlaanderen.be
Site met een agenda
Het 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)

35. Concrete issues bij agenda-integraties
Dubbele zoekbox

36. Dubbele zoekbox
1. 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.

37. Concrete issues bij agenda-integraties
Zoekbox als teaser

38. Zoekbox als teaser
1. 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.

39. Concrete issues bij agenda-integraties
Vaste linker- of rechterkolom

40. Vaste linker- of rechterkolom
1. 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)