Presentatie voor EROV over: - het belang van usability - 8 basisprincipes voor goeie websites - meten is weten

1. EEN WEBSITE DIE WERKT
13 maart 2012 – EROV

2. 1. Online klanten bereiken
2. Het belang van usability
3. Usability: 8 basisprincipes
4. Meten is weten

3. 1. Online klanten bereiken
Wat zijn de mogelijkheden?

4. Een website... is dat nu echt zo belangrijk?

5. Particulieren en internet
In België in 2011
Heeft thuis internettoegang 78% (EU: 73%)
Surft elke dag 65% (EU: 55%)
Surft minstens één maal per week 80% (EU: 70%)
Kocht iets via internet in 2011 53% (EU: 58%)

6. Bedrijven en internet
In Europa in 2011
Heeft een website 70%
Online bestellen, reserveren of boeken 20%

7. Online aanwezig zijn
‣ Eigen website
‣ Google Maps
‣ Sociale netwerken
‣ Forums

13. De eigen website is meestal het
centrale punt.

14. Eigen website
1. Vertrouwen naar klanten
2. Controle
3. Onderscheid van concurrenten

15. 1. Vertrouwen naar klanten
‣ Deze gegevens kloppen
‣ Dit bedrijf is professioneel bezig

16. 2. Controle
‣ Inhoud van de website
‣ Wat mensen vinden via Google
‣ Onafhankelijk van externe diensten

17. 3. Onderscheid van concurrenten
‣ Gebruiksvriendelijk
‣ Ontwerp op maat
‣ (Online) dienst op maat

18. Ok, een eigen website dus. En wanneer is dat
nu een goeie website?

19. Een goeie website
‣ Op nummer 1 in Google!
‣ Veel bezoekers!
‣ Een mooi ontwerp!

20. Een goeie website
‣ Op nummer 1 in Google!
‣ Veel bezoekers!
‣ Een mooi ontwerp!

21. Een goeie website
‣ Scoren op de juiste zoekwoorden
‣ Van bezoekers klanten maken
‣ Positieve ROI

22. Vandaag:
‣ Scoren op de juiste zoekwoorden
‣ Van bezoekers klanten maken
‣ Positieve ROI

23. www.wijs.be

24. 2. Het belang van usability
Waarom usability je geld kan opleveren... of kosten.

25. Usability... wat is dat eigenlijk?

26. “Iets is gebruiksvriendelijk wanneer een beoogde
eindgebruiker het effectief, efficiënt en naar
tevredenheid kan gebruiken.”
Wikipedia

32. Gebruiksvriendelijk...
‣ Eenvoudig te leren
‣ Efficiënt in gebruik
‣ Makkelijk onthouden hoe het werkt
‣ Fouten voorkomend en duidelijke feedback
‣ ‘Plezant’ om te gebruiken

33. User-centered werken
‣ Aandacht voor eindgebruiker
‣ Testen met échte gebruikers
‣ Duurzaam
‣ Kwaliteit

34. 3. Usability: 8 basisprincipes
Waar moet je zéker op letten?

35. 8
consistentie inhoud
typografie toegankelijkheid
portability technologie
snelheid interactie

36. 1. Consistentie

37. Verwachtingen
‣ Logo ‣ Navigatie
‣ Taalselectie ‣ Broodkruimel
‣ Home-knop ‣ Zoekveld

38. Logo
‣ Links boven
‣ Link naar homepage
‣ Optioneel met tagline

39. Logo

40. Taalselectie
‣ Rechts boven
‣ ISO (NL - FR - EN)
‣ Toon alle opties, ook de actieve taal
‣ Geen vlagjes!

41. taalselectie

42. Home-knop
‣ Eerste knop in hoofdnavigatie
‣ Altijd ‘home’

43. home-knop

44. Navigatie
‣ Hoofdnavigatie horizontaal bovenaan
‣ Subnavigatie links
‣ Vermijden: onderaan of rechts

45. Secundaire navigatie
‣ Helemaal onderaan, in de footer
‣ Privacy statement, disclaimer, sitemap

46. hoofdnavigatie
subnavigatie

47. secundaire navigatie

48. Broodkruimel
‣ Toont actieve pagina in hiërarchie
‣ Onder de hoofdnavigatie
‣ Klikbaar, behalve actieve pagina
‣ Zonder ‘je bent hier: ’

49. broodkruimel

50. Zoekveld
‣ Rechts boven
‣ Gevaarlijk!
‣ Bezoekers verwachten Google-niveau

51. zoekveld

52. Consistentie geeft houvast
Het is duidelijk
‣ waar je vandaan kwam
‣ waar je nu bent
‣ waar je naartoe kan gaan
in de visuele taal die andere websites ook
spreken

53. 2. Typografie

54. Leeslengte
‣ Ideaal: tot ongeveer 55 karakters per regel
‣ Flexibele layout: gebruik maximumbreedte

57. Lettergrootte
‣ Minstens 12px voor broodtekst
‣ Moderne browsers schalen alles
‣ “ A A A ” is overbodig

58. Geschreefd of schreefloos?
Op een scherm: schreefloos (sans-serif)
Ed ut perspiciatis unde Ed ut perspiciatis unde
omnis iste natus error sit omnis iste natus error sit
voluptatem accusantium voluptatem accusantium
doloremque laudantium. doloremque laudantium.

59. 3. Portability

60. Mohammed en de berg
‣ Bezoekers komen niet spontaan
naar je website.
‣ Verspreid inhoud op plaatsen waar
potentiële klanten vertoeven.

67. API
‣ Application Programming Interface
‣ Toegangspoort tot een website
‣ Data toevoegen en/of data afhalen

69. Social Media plugins
‣ Makkelijk te integreren
‣ 1 klik
‣ “Mond-aan-mond”

70. 4. Snelheid

71. Wat volgt is de hoeveelheid tijd
die een bezoeker wil spenderen
om uit te zoeken hoe een website
werkt:

72. 0

73. Bezoekers hebben geen geduld
‣ Snel laden (technisch)
‣ Focus (inhoud)
‣ Scanbaar (structuur)

74. 5. Inhoud

75. Vers en fris!

76. Een website is zoals ondergoed.
Ververs elke dag.

77. Publiceer op regelmatige basis
‣ Kies relevante onderwerpen
‣ Relevant nieuws
‣ SEO vs. bezoeker

78. Hou statische inhoud vers
‣ Schrap pagina’s die niet bezocht worden
‣ Kijk af en toe of inhoud nog up-to-date is
‣ SEO vs. bezoeker

79. Publiceren, updaten, ...
Iedere keer langs IT-dienst of webbouwer?

81. CMS
‣ Content Management System
‣ De motor van de website
‣ Makkelijk zélf inhoud bewerken
‣ SEO!

84. Een CMS moet je toelaten om het dagelijkse
beheer van je website onafhankelijk en
zonder technische kennis uit te voeren.

85. 6. Toegankelijkheid

86. Bouw een toegankelijke website
‣ Cross-browser, cross-platform
‣ Anysurfer
‣ Google
‣ Facebook

87. Cross-browser, cross-device
‣ IE8, IE9, Chrome, Firefox, ...
‣ tablets & smartphones!
‣ muis en keyboard of touch
‣ Webstandaarden!

89. Anysurfer
‣ Kwaliteitslabel
‣ Website toegankelijk voor iedereen,
ook voor mensen met een
functiebeperking

90. Google
‣ Grootste bron van traffiek
‣ SEO!

91. Facebook
‣ ‘Like’ + Open Graph
‣ Zoekmachine

92. 7. Technologie

93. Altijd nieuwe technologie
‣ Flash
‣ Ajax
‣ Video
‣ HTML 5

94. Technologie mag geen drijfveer zijn.
Denk na over de waarde.

95. 8. Interactie

96. Laat bezoekers participeren
‣ Poll, testjes, ...
‣ Feedback mechanismen
‣ Reacties plaatsen, forum
‣ Zelf inhoud toevoegen

98. + interactie met het merk verhoogd
+ ‘gratis’ input voor web en print
+ workload webredactie verminderd
+ rijke data over voorkeuren van leden

99. De gebruiker staat centraal
‣ Ontwerpen & bouwen
‣ Observeren
‣ Optimaliseren

100. 4. Meten is weten
Hoe weet je of je website goed werkt?

101. Een website is zoals een schip

102. Meten, evalueren, bijsturen
1. Statistieken
2. Expert audit
3. Gebruikerstest

103. 1. Statistieken
‣ Google Analytics
‣ Hoeveel, van waar, welk pad, ...
‣ Kwantiteit, geen kwaliteit
‣ Continu
‣ Gratis (doe-het-zelf)

104. 2. Expert audit
‣ Analyse van bestaande website
‣ Basisfouten komen naar boven
‣ Toetsing aan de theorie
‣ Praktisch advies en tips
‣ Gemiddeld: 10 tot 30 manuren

105. 3. Gebruikerstest
‣ Ervaren van échte gebruikers
‣ Toetsing aan de praktijk
‣ Ideale methode
‣ Praktisch advies en tips
‣ Gemiddeld: 30 tot 50 manuren

106. Conclusie

107. Conclusie
‣ Begin met een goeie strategie
‣ Bezoekers aantrekken heeft alleen
zin bij optimale usability!
‣ Usability beïnvloedt conversie
‣ Meten is weten

108. Vragen?
twitter.com/bram_
www.wijs.be