Enkele vuistregels voor een goede (agenda)website
1 like413 views
Enkele basisregels voor een gebruiksvriendelijke (agenda)site, en meer specifiek voor de integratie van agendawidgets in een bestaande website.
Enkele vuistregels voor een goede (agenda)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
- 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
- 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
- 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
- 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
- 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 detailpaginas maar ook op keuzepaginas - 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 detailpaginas 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)