Tips om van je overheidswebsite een echt goede website te maken. Vooral bedoeld voor steden en gemeenten, maar bruikbaar voor elke website.
Een website is namelijk een website. En de basisprincipes voor een goede website zijn universeel.
20 tips voor bruikbare websites van lokale overheden
1. 20 tips voor bruikbare websites van
lokale overheden
16 september 2010
Karl Gilis – De 'G' in AGConsult
Web usability & Informatiearchitectuur
Twitter: @AGConsult
E-mail: karl.gilis@agconsult.be
2. Omdat slides zonder de presentatie
vaak mooi zijn om naar te kijken, maar
moeilijk om te begrijpen, zal je af en
toe deze tekstballonnen zien opduiken.
Hopelijk wordt het verhaal zo iets
duidelijker.
3. Wekelijks post ik op http://usability-
blog.be 1 of 2 artikels over hoe
websites beter kunnen. Veel beter.
Zonder die blog zal je er nooit in slagen
een goede website te maken.
Bekijken dus!
4. Na 10 jaar in de usability
business en de observatie
van zowat 2.000
gebruikers, weet ik 1 ding
zeker: experts weten niet
alles.
Lees ook: http://usability-
blog.be/expertkennis-
goede-website/
“Ik weet het niet. Moeten we aan de
gebruikers vragen.”
5. Domme beweringen over websites
- Elke pagina bereikbaar in 3 kliks
- Website moet antwoord bieden op alle vragen
- Alle info evenwaardig behandeld
- Homepage moet vooral informeren
- Lange pagina’s zijn not done
- De rechterbalk is de ideale plaats voor calls-
to-action
- Foto’s van lachende mensen zijn geweldig
6. In de 20 tips die nu volgen,
ga ik deze domme
uitspraken proberen te
counteren en te
nuanceren.
Oké, nuanceren is
misschien niet het juiste
woord…
8. Jouw mening over de website is onbelangrijk.
Net als mijn mening.
Ook de mening van de gemeentesecretaris, burgemeester,
schepen is onbelangrijk.
Uiteraard mogen ze een mening hebben.
Maar jouw website mag daar niet op gebaseerd zijn.
De website is er voor de burgers en bezoekers.
Niet voor het bestuur.
Ze moet gebaseerd zijn op feiten en onderzoek.
Niet op meningen.
Meningen zijn goed voor op café.
www.agconsult.be www.usability-blog.be www.webusability-blog.com www.blog-ergonomieweb.be
9. ‘Klant is koning’.
Het klinkt mooi.
Maar op internet is de klant
meer dan dat…
2. Klant is koning
10. Op internet is de klant
de dictator.
2. Klant is koning dictator
11. Het wereldbeeld van een heel
slimme mens: Aristoteles.
Hij had het helemaal mis.
Het verhaaltje op deze en
volgende slides komt van
Gerry McGovern.
Lees zijn artikels op
http://www.gerrymcgovern.
com/new_thinking.htm
16. Deze leuze zorgt ervoor
dat je niet gaat zweven.
“Wij zijn niet het middelpunt van de wereld
De bezoeker is.”
www.agconsult.be www.usability-blog.be www.webusability-blog.com www.blog-ergonomieweb.be
17. En dat je geen
egocentrische websites
maakt.
Dit is pure horror voor
de bezoeker.
18. Stop met de diensten voor te stellen
en over jezelf te praten.
Diensten horen niet op websites.
Op de website van Delhaize stelt de
dienst boekhouding of logistiek zich
toch ook niet voor? (Hoop ik.)
19. 4. Geef het volk wat het volk vraagt
Voor mij de kern van
overheidscommunicatie.
Waarom komen mensen naar
jouw website?
Onderzoek dat en beantwoordt
die vragen.
Dat is de basis.
20. Hoe onderzoek je dat?
- Analyse logfiles (= Google Analytics)
- Korte, online enquête
- Waarvoor komen mensen naar loket?
- Waarvoor bellen ze?
- Ga zelf eens luisteren
21. Op de volgende slides 2 voorbeelden van enquêtes die wij
aanbieden. (Kopieer ze niet of allerlei onheil zal je
overkomen…)
Ze hebben een responsratio van 10 tot 25%.
De eerste enquête zou wettelijk verplicht moeten worden.
Ze geeft je inzicht in wie je bezoekers zijn en wat ze
komen doen (in hun bewoordingen).
De tweede enquête is vooral handig om te weten hoe
goed je website het doet tegenover andere websites.
Contacteer karl.gilis@agconsult.be als je meer info wil.
24. Omdat jullie zo’n geweldig publiek zijn een
speciale actie voor jullie.
Beide enquêtes voor 750 euro, inclusief
basisrapportering.
Contacteer karl.gilis@agconsult.be als je
meer info wil.
Ik meen het: je gaat spijt hebben als je deze
kans laat liggen.
26. 6. Het gaat om de dienstverlening, niet de dienst
Mensen komen naar je
website om iets te doen,
niet om te lezen wat je
doet.
27. Ik heb dit al eerder vermeld (tip 3), maar het
verdient extra aandacht.
Het is dé plaag van veel gemeentelijke
websites.
Ze zijn ingedeeld volgens de interne structuur.
De diensten.
Dit is fout omdat de burger vaak niet weet wat
elke dienst doet.
Wel héél goed dat de gemeentesecretaris
bovenaan staat. Want die is echt
superbelangrijk. Not.
28. Bekijk de navigatie. Lees de tekst. En huiver.
Kijk dan naar je eigen website… en schrap
alle dienstenpagina’s.
29. “De dienst communicatie is verantwoordelijk
voor de informatie naar en de communicatie
met de bevolking.”
Dat had ik nu nooit gedacht.
Weg ermee!
31. Deze cartoon (van het departement Landbouw & Visserij) is een
illusie.
Mensen komen niet naar je website voor het e-loket.
Ze komen om een antwoord te vinden op een vraag of een taak
te vervullen.
Ze gaan dat niet zoeken in het ‘e-loket’.
Neen, ze willen dat zoeken in een thematische navigatie.
En op de pagina met bv. aangifte geboorte moet dan staan hoe
ze dat kunnen (elektronisch, via een pdf en/of door naar het
gemeentehuis te gaan.)
De dienstverlening moet dus volledig geïntegreerd worden, niet
verstopt in een aparte rubriek.
32. “Waar moet ik wat gaan zoeken?” Dat is wat een
gebruiker denkt als hij dit soort ingangen ziet.
Wat vind je in het ‘E-loket’? Wat staat er onder
‘Bestuur’? En wat onder ‘Gemeentediensten’?
Hoe kan de burger in godsnaam weten welke
formaliteiten al in het ‘e-loket’ zitten en welke
niet?
33. Hoeveel ingangen kun je nog uitvinden?
En waarom zijn de diensten in het
middendeel anders dan de diensten
rechts?
Zou het anders te transparant zijn?
34. 8. Bouw je navigatie rond toptaken of thema’s
Uw interne keuken is uw
probleem.
35. In Gent is de navigatie opgebouwd
rond enkele hoofdthema’s.
Die thematische indeling wordt
verder doorgezet binnen de
subnavigatie.
Zo hoort het.
36. Het is duidelijk waar Mechelen de mosterd haalde.
Maar dat is niet erg. Want het idee is zeer goed.
Ik vind ook de inwerking van ‘populaire links’ in de
navigatie een goed idee. (Maar dat is een mening, ik heb
het nog niet getest.)
39. Welke versie had de voorkeur van gebruikers?
Inderdaad. De kale versie scoorde beter.
Het is cleaner. Minder zwaar. Speelt meer in op wat
mensen komen doen. Iets zoeken om te doen.
Stel je voor dat Google op zijn homepage zou
zeggen ‘Bezoek ook eens deze websites’. Dat zou
toch een geweldig slecht idee zijn?
40. Vraag: Vind jij Google een complex bedrijf?
www.agconsult.be www.usability-blog.be
41. De meeste mensen antwoorden neen.
Omdat de homepage van Google zo
ontzettend eenvoudig is.
42. Google heeft naast zijn index van miljarden
pagina’s (toch ook geen eenvoudige taak)
ook nog tientallen andere tools en
programma’s.
43. • Waar zijn al die tools en oplossingen?
• Waar is al het nieuws over hun nieuwe tools en hun zoektechnologie?
• Waarom tonen ze dat niet?
• Is de web manager van Google dom?
• Is hij enkele jaren geleden gestorven?
• Weten de bazen van Google wel dat die homepage zo leeg en gedateerd is?
44. Het is er niet omdat het geen top taak is voor 'de' bezoeker.
Bij Google zijn ze niet dom. Integendeel.
Ze meten wel alles. Ze doen niets gebaseerd op meningen of buikgevoel.
Daarom heeft hun homepage die duidelijke focus.
45. Op de volgende slide toon ik hoe Google er
volgens mij zou uitzien als jij hun
homepage zou gemaakt hebben.
Meer uitleg krijg je in een filmpje dat ik
hierover maakte op http://usability-
blog.be/google-door-marketingmanager/
Oh ja, het idee voor deze alternatieve
versie van Google kreeg ik op een lezing
van Gerry McGovern.
46. About us | News | Research | Advertise with us | Tools | Software | World Wide Search | Blog | Jobs
Welcome to Google In the picture
Since 1998 Google is the world leader in On June 5th Google launched an
global web search solutions. Our even better search.
sophisticated bots are crawling over 8 What's new?
billion pages. We index those pages with - More pages indexed.
an algorithm created by our founders
- Improved algorythm.
Larry Page and Sergey Brin.
- Faster results
Read more. Much more.
Read more.
Try the search
Google hot news
•Google still the biggest.
•Google does not fear Wolfram.
Discover our tools
• Orkut
•Six Degrees of Google Search Appliance:
now searching billions of documents • Google Talk.
•Google Launches New, Data-Rich • Google Docs
Dashboard in Local Business Center • Picasa Free newsletter
More news • Gmail Subscribe now! It's free!
Even more very exciting news. • Google Pack Click here
More tools
47. Om de toptaken van je website te vinden, zijn er
verschillende handige en eigenlijk zelfs leuke
methoden.
Lees zeker eens volgende artikels:
- Top taken van je website achterhalen
- Website proces – Stap 1: vooronderzoek
- Informatiearchitectuur: wat, waarom en hoe?
- Homepage focus: Lukoil versus Esso
- Homepage focus: Google
48. 10. Zet je website op dieet
- Pagina’s met verouderde info weg ermee
- Pagina’s die zelden bezocht worden bye bye
- Blablateksten schrappen
49. Je website moet niet alle informatie bevatten die er is.
Dat maakt de structuur alleen maar zwaarder en dus
moeilijker om te vinden wat je nodig hebt.
Daarom moet je website vooral inspelen op de toptaken van
je bezoekeres.
Onlangs ontdekten we dat op een overheidswebsite van
10.000 pagina’s meer dan 80% van de pagina’s in een
periode van 6 maanden tijd minder dan 50 keer bekeken
werden. Daar liggen kansen voor optimalisatie.
Over hoe je weinig bezochte pagina’s kan opsporen en wat je
ermee moet doen, lees je alles in het artikel ‘Zet je website
op dieet’.
50. Typisch voorbeeld van een totaal
overbodige pagina.
Blablabla. Weg ermee. Niet twijfelen.
Delete.
51. Geeuw. Snurk.
Stop met op te scheppen over je diensten.
Zet de dienstverlening centraal.
En maak van de zaken in het vet die
onderlijnd zijn links.
52. De 5 minuten die werden besteed aan de
inleidende paragraaf zijn verloren moeite.
Pure bladvulling, die niemand leest.
Spendeer die 5 minuten aan het nog beter
beschrijven van de 4 keuzemogelijkheden.
53. Wie in augustus 2010 zocht naar ‘Temse in
de wolken’ kreeg dit resultaat in Google.
Proficiat trouwens aan het webteam van
Temse. Ze staan op 1 in Google.
Ontkurk de champagne!
54. Alleen jammer dat de site in kwestie al een
jaar niet bijgewerkt was.
Dit zijn de data van 2009.
Schrap dus oude pagina’s. En maak geen
miniwebsites.
55. 11. Laat bezoekers geen doelgroep kiezen
Dit is een zeer oud voorbeeld van
Vlaanderen.be.
Wat doe je als je een jonge, lesbische
vrouw bent met een handicap die op een
ambassade werkt in het buitenland en ‘s
avonds naar de Aldi wilt gaan?
www.agconsult.be www.usability-blog.be
56. Tijd voor een quiz
Oudenaarde: welke foto voor bewoners, welke voor
ondernemers?
www.agconsult.be www.usability-blog.be
57. Het antwoord
De verklaring voor deze fotokeuze vind je
op http://usability-blog.be/oudenaarde-fot/
www.agconsult.be www.usability-blog.be
58. Los van de vreemde fotokeuze is de indeling in doelgroepen
geen goed idee.
Waar moet je klikken als je wil verhuizen naar Oudenaarde?
Wat doe je als je in Oudenaarde woont en je wilt zien of er
een stadswandeling is of wanneer je het museum kan
bezoeken?
Ik ben ondernemer en ik woon in Oudenaarde waar ik de
kerk wil gaan bezoeken…
60. De homepage van de gemiddelde
gemeentelijke website is gevuld met nieuws
en kalenderitems.
61. Bezoekers verwachten meer van de homepage.
Die pagina moet hen helpen het antwoord te vinden op hun
vragen.
De navigatie alleen is daarvoor niet voldoende.
62. Plaats nieuws en kalender zeker op de
homepage, maar geef ook ruimte aan je
rubrieken.
63. De uitwerking van Vlaamsbrabant.be en
Belgium.be zijn goede voorbeelden.
64. Wist je dat een website in essentie maar 2 paginatypes
heeft?
Keuzepagina’s en detailpagina’s.
That’s it.
Ik leg het uit op de volgende slides.
65. 13. Paginatype 1: keuzepagina’s
Wat is een keuzepagina?
– Homepage
– Elke pagina tussen de homepage en een detailpagina
Doel van een keuzepagina
– Bezoekers zo snel mogelijk brengen naar de juiste
detailpagina. De pagina die een antwoord biedt op zijn vraag
of nood.
2 belangrijke aandachtspunten:
– Heldere lay-out
• 'Blokken' zijn een goed idee
• Horizontale rustpunten bevorderen de scanbaarheid
– Betekenisvolle links
www.agconsult.be www.usability-blog.be
67. Op het tweede niveau loopt het helaas fout.
Op de volgende slide lees je waarom.
68. - Rechterbalk moet weg. Het enige doel van
deze pagina is de gebruiker helpen de juiste
keuze te maken.
- Linkernavigatie moet weg. Alle keuzes staan
ook in het middendeel.
- Blokjes zijn niet duidelijk afgelijnd.
- Afbeelding op de achtergrond.
Pas die zaken aan en je hebt een duidelijke
keuzepagina in plaats van het drukke boeltje
van nu.
www.agconsult.be www.usability-blog.be www.webusability-blog.com www.blog-ergonomieweb.be
70. Als je heel veel keuzes hebt, kan je ze ook
onder elkaar zetten zoals hier.
Hier heeft de linkernavigatie wel zin, omdat
ze het hogere niveau toont.
71. Dit is een ramp.
Een contentdeel met blabla-tekst en zonder
links.
Uit onderzoek blijkt dat de helft van de
mensen na een klik in de navigatie kijken
naar het middendeel van de pagina.
72. Zo mogelijk nog erger.
Centraal enkele items en links en totaal
andere items in de subnavigatie.
Onthoud het: het enige doel van een
keuzepagina is de gebruiker laten kiezen.
73. 14. Paginatype 2: detailpagina’s
Wat is een detailpagina?
– Eindpagina binnen website met uitleg over een topic
Doel van een detailpagina
– Bezoeker informeren
– Anwtoord geven op zijn vraag
– Doorverwijzen naar verwante informatie
– Aansporen tot actie
2 belangrijke aandachtspunten
– Heldere lay-out
– Belangrijkste info bovenaan
– Bevat alle info over dat onderwerp
– Overtuigen binnen 4 seconden
www.agconsult.be www.usability-blog.be
74. Zet alle info over 1 onderwerp op 1 pagina.
Dat kan natuurlijk ook resulteren in
megalange pagina’s.
Denk jij dat zo’n lange pagina als hiernaast
goed of slecht is?
?
75. In tegenstelling tot wat jij dacht, is het niet slecht.
Het is een productpagina van Amazon.
De grootste webshop van de wereld.
76. Het straffe is dat als je die pagina ziet, niets wijst op het feit dat
het zo’n lange pagina is.
Omdat Amazon de bovenkant van de pagina erg zuiver houdt.
Daar staat alleen wat echt telt.
Dat moet jij ook proberen.
Lees in dat verband eens ons artikel over scrollen: feiten en
fictie.
77. Surfers hebben weinig geduld.
Ze beslissen binnen de 4 seconden (meestal eerder 2) of ze
op een pagina willen blijven of niet.
Elke webpagina moet de surfer binnen de 4 seconden bij de
lurven grijpen.
Bekijk volgende pagina’s eens gedurende 4 seconden.
Het zijn pagina’s van verzekeringsmaatschappijen over een
woningverzekering.
Dat weet je dus al. Je was daarnaar op zoek in Google.
78.
79.
80.
81. Wat vond je de slechtste pagina?
Axa?
En de beste?
KBC?
Weet je ook waarom?
- Minder zwaar
- Tekst in bullets
- Ziet er makkelijk verteerbaar uit
Bekijk nu ook nog eens een pagina van Amazon (op de
volgende slide). En verbaas jezelf over hoe snel je alles vindt
wat echt belangrijk is (welk merk, welk model, hoeveel
megapixels, de prijs en of je het nu kan kopen).
83. Wat doen op pagina’s met vooral
tekst?
Korte tussentitels.
De vraagvorm werkt vaak heel
goed.
84. Op lange pagina’s plaats je de tussentitels best
bovenaan als springlinks.
Zo weet de bezoeker meteen wat er allemaal op de
pagina staat.
Lees er alles over op http://usability-
blog.be/springlinks-anker-links-tips/
85. Let op je taalgebruik.
Beroep instellen? Geen enkele
burger wil een ‘beroep instellen’.
Die wil in beroep gaan. Gebruik de
taal van de burger!
86. 15. De rechterbalk is dood
Wij schreven er al in 2003 een artikel over.
Jakob Nielsen bewees het via eyetracking in 2007 en gaf nog
meer cijfers in 2010.
En we zien het bij elke gebruikerstest opnieuw.
Op detailpagina’s kijken mensen amper naar de rechterbalk.
Op keuzepagina’s valt de situatie best mee (al hangt veel af
van het design).
Op de volgende pagina zie je het resultaat van het eyetracking
onderzoek van Nielsen. De rode zones geven aan waar meer
dan 80% van de mensen naar kijkt. Donkerblauw is nog 20 tot
40%.
Geen kleur = niemand.
87.
88. Belangrijke links, contactinfo etc. in
de rechterbalk plaatsen is dus een
heel slecht idee.
Even effectief als olie blussen met
water.
89. Plaats die zaken onderaan je pagina.
Daar verwachten surfers dat.
Dat is de plaats waar ze die zaken
nodig hebben. Na het kort scannen
van de info op de pagina.
90. 16. Pas op met lachende mensen
Lachende mensen trekken niet
echt de aandacht.
91. Als een foto van een mens dan al de aandacht
trekt, zien we dat de blik van de afgebeelde
persoon bepalend is voor waar de bezoeker naar
kijkt.
In dit geval kijkt de baby naar de lezer en vangt
hij de blik van de lezer.
Leuk. Maar niet de bedoeling van je campagne.
92. Door de baby te laten kijken naar de tekst,
bekijken zowat alle bezoekers ook de tekst.
Lees meer over deze techniek op http://usability-
blog.be/fotos-kijkrichting/
93. 17. Stop met volzinnen te schrijven
Onaangenaam om te lezen.
Te veel ballast.
www.agconsult.be www.usability-blog.be
94. Bullets: het geheim van online copywriting
Beter scanbaar.
Aangepast aan hoe mensen lezen op internet.
www.agconsult.be www.usability-blog.be
95. Een voorstel dat ik ooit binnenkreeg voor een
tekst van een toeristische website.
Geeuw. Tegen dat je dit allemaal hebt gelezen
kan je niet meer gaan wandelen want is het al
weer aan het regenen in ons landje.
96. Een zeer snelle herwerking van het vorige.
Sneller scanbaar. Je kan de tekst absorberen zonder dat
je moeite moet doen.
Dat is mijn basisadvies. Als je een hersenscan doet bij
iemand die een webpagina ‘leest’, zou er nauwelijks
activiteit mogen zijn. Als copywriter ben je dan geslaagd
in je opdracht.
97. 18. Wees altijd beleefd!
Kijk foutmeldingen bij formulieren altijd na.
Druk eens op de knop ‘Verzenden’ zonder iets
in te vullen en kijk of je foutboodschappen
beleefd en verstaanbaar zijn.
Lees ook mijn artikel over klantvriendelijke
foutmeldingen.
101. Als elke gemeente 500 euro in een potje
steekt, kan je voor eens en altijd deftig laten
onderzoeken wat de beste structuur is voor
een gemeentelijke of stedelijke website (of
van een OCMW, politiezone, …).
Waar iemand info wil zoeken over de
geboorteaangifte of de afvalkalender, is
hetzelfde in Boom, Antwerpen, Zwevezele,
Diest of Koksijde.
102. Zelfs de productfiches (over bijvoorbeeld de
geboorteaangifte, vernieuwing paspoort, etc.)
kunnen volgens mij gestandaardiseerd
worden.
Stop met wedijveren om de beste te zijn.
Word allemaal de beste door samen te
werken.
Hey, dit was al in 2002 ons besluit van ons
onderzoek naar lokale overheden.
103. Zet je nu schrap voor de beste tip.
Het hoogtepunt van de presentatie.
104. 20. Laat je bijstaan door AGConsult
Usability & informatiearchitectuur Training
– Expert review – Usability
– User testing – Schrijven voor internet
– Gebruikersonderzoek – Intranet
– Informatiearchitectuur – Nieuwsbrieven
– Aanmaak mock-up of prototype – Informatiearchitectuur
– Schrijven lastenboek – Scoren in Google
– Copywriting
Bezoek ons Contacteer ons
– Online: www.agconsult.be – 03 293 39 96
– Twitter: – karl.gilis@agconsult.be
www.twitter.com/agconsult
– Blog:www.usability-blog.be
www.agconsult.be www.usability-blog.be