Workshop Usability Engineering voor Marketingfacts Academy door Martin van Kranenburg van Libralab en Stefan Wobben van Concept7

1. Cursus Usability
Engineering
Martin van Kranenburg en Stefan Wobben
26 juni 2008

2. Leerdoelen:
De basisprincipes van usability
Usability methodieken en testing
Tips en trucs om usability te verbeteren
Ga denken vanuit, praten met, en leren van je bezoekers
(Don’t make them think)
m.van.kranenburg@libralab.nl stefan@concept7.nl

3. Usability
m.van.kranenburg@libralab.nl stefan@concept7.nl

4. Dagindeling
Martin van Kranenburg
10:00 - 10:30 Introductie
10:30 - 11:30 De basisprincipes van usability | Persona’s
11:30 - 11:45 Koffie/Thee Pauze
11:45 - 12:45 Usability richtlijnen | checklist en voorbeelden
12:45 - 13:45 Lunch
m.van.kranenburg@libralab.nl stefan@concept7.nl

5. Dagindeling
Stefan Wobben
13:45 - 14:45 UCD proces
14:45 - 15:00 Koffie/thee
15:00 - 16:00 Gebruikerstesten en eyetracking
16:00 - 17:00 a/b testen
17:00 Borrel
m.van.kranenburg@libralab.nl stefan@concept7.nl

6. Martin van Kranenburg
Opleiding
MTRO > HEAO > Post doctoraal E-commerce (Erasmus) > Creative Innovation in
Marketing (de Baak)
Werkervaring 11 jaar D-reizen
Reisbureau Manager > projectleider internet > website manager > ecommerce manager
Libralab.nl (Internet en IT bureau - Utrecht)
Online marketing & sales > internet adviseur > Klanten: Elmar Reizen, Tassenmuseum,
Holiday Cars, NS Internationaal, Thika Travel, Mediaflex, Hasselhoff, Horloges en sieraden
Kennis over e-commerce
Blogger Marketingfacts > docent leergang online marketeer & Internet manager Lectric >
Columnist Reisrevue, Conversie workshop Marketingfacts, http://ecommerce.startpunt.nl
en http://reismanagers.wordpress.com
m.van.kranenburg@libralab.nl stefan@concept7.nl

7. Stefan Wobben
Opleiding
HBO Personeel en Arbeid
Werkervaring 9 jaar ondernemerschap
Oprichter Concept7. Concept ontwikkelaar. Usability Expert.
Concept7, gebruiksvriendelijke websites
Bouw en advies. Wij verhogen conversie. Klanten: FBTO, Menzis, Bosch, Nuon, Wegener,
Gasunie, TNO, Ferio, ...
Kennis over usability
9 jaar ervaring. Pionier met Usabilityweb.nl.Voorloper Eyetrack. Gastdocent
Hanzehogeschool, RuG, Lectric
m.van.kranenburg@libralab.nl stefan@concept7.nl

8. Jullie doelen
m.van.kranenburg@libralab.nl stefan@concept7.nl

9. Waarom een website?
m.van.kranenburg@libralab.nl stefan@concept7.nl

10. verstrekken verlenen
van informatie van service

11. verkrijgen
van leads en prospects

12. verkopen
van producten en diensten

13. verbinden
van mensen

14. Succesvolle website?
omzet - kosten = winst
m.van.kranenburg@libralab.nl stefan@concept7.nl

15. Succesvolle website?
m.van.kranenburg@libralab.nl stefan@concept7.nl

16. Factoren succesvolle website
1.Vindbaarheid 11. Upselling en cross-selling
2. Toegankelijkheid 12. Service en community
3. Performance 13. Beveiliging (hackersafe)
4. Navigatie 14. Onderhoudbaarheid
5. Betrouwbaarheid 15. Meetbaarheid
6. Kwaliteit van informatie 16. Actualiteit
7. Usability (gebruiker centraal) 17. Funfactor
8. Layout en design 18.Verhuisplan
9. Call to action (conversei)
10. Kwaliteit van formulieren
m.van.kranenburg@libralab.nl stefan@concept7.nl

17. Succesvolle website?
Good business
or
Bad business
m.van.kranenburg@libralab.nl stefan@concept7.nl

18. Succesvolle website?
Good business
or
Bad business
m.van.kranenburg@libralab.nl stefan@concept7.nl

19. Succesvolle website?
Heldere doelen en tevreden gebruikers
vormen de basis!
Praat met je gebruikers om inzicht te krijgen
in hun doelen!
m.van.kranenburg@libralab.nl stefan@concept7.nl

20. Wat zijn jullie site doelen?
m.van.kranenburg@libralab.nl stefan@concept7.nl

21. Voorbeelden doelen
Conversie doelstellingen bepaal je zelf. Maar
maak het meetbaar en stel concrete doelen
1. Aantal inschrijvingen op een nieuwsbrief
2. Aantal nieuwe abonnees
3. Tijd op site, aantal bekeken pagina’s (bounce rate)
m.van.kranenburg@libralab.nl stefan@concept7.nl

22. Dashboard
De eerste stap is het bepalen van
de doelstellingen van de site om
deze daarna te vertalen naar
meetbare doelstellingen. Het
vaststellen van de verschillende
conversie doelstellingen staat hier
centraal. Maar hou het beperkt
m.van.kranenburg@libralab.nl stefan@concept7.nl

23. Doelen in verhouding?
m.van.kranenburg@libralab.nl stefan@concept7.nl

24. De centrale vragen
Bezoeker komt niet zomaar op een site. Heeft een specifieke
vraag, probleem of is op zoek naar informatie. Hoe makkelijk
kan hij dat vinden en zaak taak volbrengen?
Twee belangrijke vragen
1. Wat zoekt een bezoeker op deze pagina? Wat is zijn
wens/vraag? Hoe kun je hem verder helpen
2. Wat wil je dat een bezoeker gaat doen? De conversie
doelen.
m.van.kranenburg@libralab.nl stefan@concept7.nl

25. Persona’s
Persona’s zijn een hulpmiddel op basis van een oude techniek
uit de reclamewereld.
Persona’s helpen je om in de huid te kruipen van één of
meerdere bezoekers van je site
m.van.kranenburg@libralab.nl stefan@concept7.nl

26. Hoe maak je een persona
We gaan een mens verzinnen. En dat doe je in
eerste instantie niet alleen: dat doe je samen met
de mensen in je team, dus zowel marketingmensen
als ontwerpers en developers. Het belangrijkste
van deze oefening is namelijk dat jullie een gedeeld
idee krijgen van voor wie je dit allemaal doet, voor
wie je de site aan het maken bent.
m.van.kranenburg@libralab.nl stefan@concept7.nl

27. Focus op de belangrijkste
doelgroep
Het is de bedoeling dat je in je overleg een aantal
primaire persona’s definieert:
De mensen die het belangrijkst zijn voor je site en
de meeste cruciale doelgroepen
m.van.kranenburg@libralab.nl stefan@concept7.nl

28. Hoe maak je een persona
Je begint met de vraag ‘wie zijn de mensen waar
we deze site voor maken’? Waarin lijken ze op
elkaar? Wat zijn de verschillen? Welke groepen
wensen kunnen we onderscheiden? Kunnen we
die wensen groeperen naar (bijvoorbeeld) drie
verschillende mensen?
m.van.kranenburg@libralab.nl stefan@concept7.nl

29. Het eindresultaat
m.van.kranenburg@libralab.nl stefan@concept7.nl

30. Kruip in de huid van je doelgroep
m.van.kranenburg@libralab.nl stefan@concept7.nl

31. Kruip in de huid van je doelgroep
m.van.kranenburg@libralab.nl stefan@concept7.nl

32. Het resultaat
In plaats van “de gebruiker” heb je nu echt fictieve
personen gemaakt waardoor iedereen die deelneemt in
het project een betere voorstelling kan maken en er
een centraal referentiekader ontstaat.
In plaats van “de gebruiker” zijn er nu meerdere fictieve
personen met meerdere wensen en behoeftes die
worden meegenomen in de verdere ontwikkeling van
de site
m.van.kranenburg@libralab.nl stefan@concept7.nl

33. Inzicht door persona’s
Niet iedereen beslist op dezelfde manier
De een wil veel feiten de ander wil persoonlijk contact
De een beslist op emotie de ander op koude informatie
Laat iedereen in de organisatie met eenzelfde blik naar
de bezoekers van de site kijken
m.van.kranenburg@libralab.nl stefan@concept7.nl

34. Usability
1. Tevreden gebruikers verhogen de omzet
2. Praat met je gebruikers (ga de dialoog aan)
3. Jij bent niet de gebruiker
4. Meet de gebruikerstaken en leer van de gebruiker
m.van.kranenburg@libralab.nl stefan@concept7.nl

35. Een internet bezoeker
Onrustig
Onzeker
Ongeduldig
m.van.kranenburg@libralab.nl stefan@concept7.nl

36. Keep it simple stupid
42% Kan niet de juiste info vinden
62% Kan niet het gezochte product vinden
67% Van de winkelwagens wordt niet besteld
1-6% Doet echt een aankoop
m.van.kranenburg@libralab.nl stefan@concept7.nl

37. Meest gemaakte fouten!
1. Site niet ontworpen vanuit probleem van de
bezoeker
2. Pagina’s die nergens toe leiden, geen call to action
3. Te veel tekst, bezoekers scannen
4. Ongebruiksvriendelijke boeking/contactformulieren
m.van.kranenburg@libralab.nl stefan@concept7.nl

38. Usability start al vroeg!
1. Eenvoudig te onthouden domeinnaam?
2. Domeinnaam onder diverse extensies vastgelegd?
3.Verschillende schrijfwijzen nagelopen?
4. Hoe wordt je vermeld in Google?
m.van.kranenburg@libralab.nl stefan@concept7.nl

39. m.van.kranenburg@libralab.nl stefan@concept7.nl

40. m.van.kranenburg@libralab.nl stefan@concept7.nl

41. m.van.kranenburg@libralab.nl stefan@concept7.nl

42. Toegankelijkheid
1. Internet Explorer vanaf 6.0
2. Firefox vanaf 1.0
3. Hoe wordt de site getoond zonder www. ervoor?
4. Keuze beeldschermresoluties www.anybrowser.com
5. Toegankelijk voor de Mac?
6. Stichting waarmerk drempelvrij
www.bartimeus.nl
www.drempelvrij.nl
www.accessibility.nl/internet/artikelen/audiovideo
m.van.kranenburg@libralab.nl stefan@concept7.nl

43. m.van.kranenburg@libralab.nl stefan@concept7.nl

44. Vergeet de 404 niet
m.van.kranenburg@libralab.nl stefan@concept7.nl

45. Opdracht
1. Hoe is de vindbaarheid van je site?
2. En de toegankelijkheid?
m.van.kranenburg@libralab.nl stefan@concept7.nl

46. Checklist teksten:
1.Voor wie schrijf ik?
2. Scanbaarheid
3. Schrijf met een Call to action!
4.Verspreid de tekst / maak korte alinea’s
5.Voorkom klik hier
6. Pas op met sfeerbeelden als achtergrond
m.van.kranenburg@libralab.nl stefan@concept7.nl

47. m.van.kranenburg@libralab.nl stefan@concept7.nl

48. m.van.kranenburg@libralab.nl stefan@concept7.nl

49. Handige links
http://www.webrichtlijnen.nl
http://www.w3.org/WAI/EO/2003/ucd
http://www.usabilityfirst.nl
http://www.anybrowser.com
http://www.bartimeus.nl
http://www.drempelvrij.nl
http://www.browsealoud.nl
http://www.accessibility.nl/internettools
http://www.sigchi.nl
http://www.jjg.net/elements/translations/elements_nl.pdf
m.van.kranenburg@libralab.nl stefan@concept7.nl

50. Literatuur
http://www.sensible.com - Don’t make me think - Steve Krug
http://www.useit.com - Designing Web Usability - Jakob Nielsen
http://www.semanticstudio.com - Ambient Findability - Peter Morville
m.van.kranenburg@libralab.nl stefan@concept7.nl

51. • Ontwikkelt gebruiksvriendelijke websites/shops/applicaties die
aansluiten bij de gebruikersbeleving van de doelgroep
• Met 25 experts gevestigd in Paterswolde en Amersfoort
• Werkt landelijk voor plm. 150 klanten waaronder Bosch,
Tele2, Nuon, de Telefoongids, Menzis, Ferio.nl, FBTO, RDW,
Syntens, TNO, Kras Vakanties, Gasunie, Eduhub, Store.nl,
Gemeente Groningen

52. m.van.kranenburg@libralab.nl stefan@concept7.nl

53. m.van.kranenburg@libralab.nl stefan@concept7.nl

54. m.van.kranenburg@libralab.nl stefan@concept7.nl

55. m.van.kranenburg@libralab.nl stefan@concept7.nl

56. m.van.kranenburg@libralab.nl stefan@concept7.nl

57. m.van.kranenburg@libralab.nl stefan@concept7.nl

58. m.van.kranenburg@libralab.nl stefan@concept7.nl

59. m.van.kranenburg@libralab.nl stefan@concept7.nl

60. m.van.kranenburg@libralab.nl stefan@concept7.nl

61. m.van.kranenburg@libralab.nl stefan@concept7.nl

62. m.van.kranenburg@libralab.nl stefan@concept7.nl

63. m.van.kranenburg@libralab.nl stefan@concept7.nl

64. m.van.kranenburg@libralab.nl stefan@concept7.nl

65. m.van.kranenburg@libralab.nl stefan@concept7.nl

66. m.van.kranenburg@libralab.nl stefan@concept7.nl

67. m.van.kranenburg@libralab.nl stefan@concept7.nl

68. m.van.kranenburg@libralab.nl stefan@concept7.nl

69. m.van.kranenburg@libralab.nl stefan@concept7.nl

70. m.van.kranenburg@libralab.nl stefan@concept7.nl

71. m.van.kranenburg@libralab.nl stefan@concept7.nl

72. m.van.kranenburg@libralab.nl stefan@concept7.nl

73. m.van.kranenburg@libralab.nl stefan@concept7.nl

74. m.van.kranenburg@libralab.nl stefan@concept7.nl

75. m.van.kranenburg@libralab.nl stefan@concept7.nl

76. m.van.kranenburg@libralab.nl stefan@concept7.nl

77. m.van.kranenburg@libralab.nl stefan@concept7.nl

78. Conclusie
Het is slecht gesteld met website usability
m.van.kranenburg@libralab.nl stefan@concept7.nl

79. maar als je goed kijkt
m.van.kranenburg@libralab.nl stefan@concept7.nl

80. zie je soms ‘gebruiksvriendelijke’ dingen
m.van.kranenburg@libralab.nl stefan@concept7.nl

81. m.van.kranenburg@libralab.nl stefan@concept7.nl

82. m.van.kranenburg@libralab.nl stefan@concept7.nl

83. m.van.kranenburg@libralab.nl stefan@concept7.nl

84. m.van.kranenburg@libralab.nl stefan@concept7.nl

85. m.van.kranenburg@libralab.nl stefan@concept7.nl

86. door vroegtijdig in het ontwikkelproces
eindgebruikers in te schakelen verhoog je
je succeskans.
m.van.kranenburg@libralab.nl stefan@concept7.nl

87. m.van.kranenburg@libralab.nl stefan@concept7.nl

88. wacht zo lang mogelijk met
programmeren!
m.van.kranenburg@libralab.nl stefan@concept7.nl

89. kies de juiste berg
m.van.kranenburg@libralab.nl stefan@concept7.nl

90. breng de ideeënstroom op gang
m.van.kranenburg@libralab.nl stefan@concept7.nl

91. prioritering met gebruikers
m.van.kranenburg@libralab.nl stefan@concept7.nl

92. Cardsorting
m.van.kranenburg@libralab.nl stefan@concept7.nl

93. Oefening
www.websort.net
m.van.kranenburg@libralab.nl stefan@concept7.nl

94. prototyping (low fidelity)
m.van.kranenburg@libralab.nl stefan@concept7.nl

95. prototyping (medium fidelity)
m.van.kranenburg@libralab.nl stefan@concept7.nl

96. prototyping (high fidelity)
m.van.kranenburg@libralab.nl stefan@concept7.nl

97. en we hebben nog geen
programmeur gezien!
m.van.kranenburg@libralab.nl stefan@concept7.nl

98. user testing
m.van.kranenburg@libralab.nl stefan@concept7.nl

99. User testing
Geheime ingrediënten
Testmateriaal (schets tot website)
4 à 8 deelnemers (one is enough!)
Relevante taken (interview based - gestuurd)
Observator en een notitieblok (+ en -)
m.van.kranenburg@libralab.nl stefan@concept7.nl

100. Je eigen lab
m.van.kranenburg@libralab.nl stefan@concept7.nl

101. Tijdens de test
Do’s en dont’s
Stel de deelnemer op zijn/haar gemak
vergeet de M&M’s niet!
Laat de deelnemer hard-op denken
Stel geen suggestieve vragen
Grijp niet te snel in
m.van.kranenburg@libralab.nl stefan@concept7.nl

102. voorbeeld
m.van.kranenburg@libralab.nl stefan@concept7.nl

103. zelf oefenen!/?
m.van.kranenburg@libralab.nl stefan@concept7.nl

104. wat voegt
eyetracking toe?
m.van.kranenburg@libralab.nl stefan@concept7.nl

105. m.van.kranenburg@libralab.nl stefan@concept7.nl

106. Aloud!
m.van.kranenburg@libralab.nl stefan@concept7.nl

107. m.van.kranenburg@libralab.nl stefan@concept7.nl

108. m.van.kranenburg@libralab.nl stefan@concept7.nl

109. je website is live en nu...
m.van.kranenburg@libralab.nl stefan@concept7.nl

110. je website is live en nu...
m.van.kranenburg@libralab.nl stefan@concept7.nl

111. kwalitatief onderzoek
usability testen Solve
problems kwantitatief onderzoek
Web Analytics data
(A/B en multivariate testen)
Usability Evaluate
solutions
Engineering
Track
problems
kwantitatief onderzoek
Web Analytics data
m.van.kranenburg@libralab.nl stefan@concept7.nl

112. website ontwikkeling
als iteratief proces
doel
tijd
m.van.kranenburg@libralab.nl stefan@concept7.nl

113. zoek de drie verschillen
m.van.kranenburg@libralab.nl stefan@concept7.nl

114. m.van.kranenburg@libralab.nl stefan@concept7.nl

115. m.van.kranenburg@libralab.nl stefan@concept7.nl

116. kleine wijzigingen met grote impact
m.van.kranenburg@libralab.nl stefan@concept7.nl

117. A/B testing
A/B testing meet verschillen tussen twee versies van een
website. Het geeft antwoord op vragen als: welke kopjes zijn het
meest effectief, welke foto levert meer rendement op of wat is
het beste formulier.
Bezoekers van uw website worden willekeurig ingedeeld in groep
A of groep B. Elke groep krijgt een andere versie te zien van de
website. Op beide versies wordt dezelfde specifieke actie
gemeten. Denk aan het aanvragen van een offerte. De techniek
meet bij welke versie de meeste offertes worden aangevraagd.
Doordat met A/B testing het werkelijke gedrag wordt gemeten
wordt direct de beste oplossing zichtbaar.
m.van.kranenburg@libralab.nl stefan@concept7.nl

118. praktijkvoorbeeld
m.van.kranenburg@libralab.nl stefan@concept7.nl

119. Stap 1: kies een testpagina
m.van.kranenburg@libralab.nl stefan@concept7.nl

120. Geschikte testpagina’s
Pagina met veel traffic
Pagina in een proces
Pagina die niet goed presteren
m.van.kranenburg@libralab.nl stefan@concept7.nl

121. Google analytics truc
m.van.kranenburg@libralab.nl stefan@concept7.nl

122. Gratis knelpunten analyse
Hoe gebruiksvriendelijk is uw website?
Vraag de gratis scan aan!
m.van.kranenburg@libralab.nl stefan@concept7.nl

123. Stap 2: bepaal wat je wilt testen
m.van.kranenburg@libralab.nl stefan@concept7.nl

124. Gratis knelpunten analyse
Hoe gebruiksvriendelijk is uw website?
Vraag de gratis scan aan!
m.van.kranenburg@libralab.nl stefan@concept7.nl

125. Stap 3: maak een variatie
m.van.kranenburg@libralab.nl stefan@concept7.nl

126. m.van.kranenburg@libralab.nl stefan@concept7.nl

127. Stap 4: voer het experiment uit
m.van.kranenburg@libralab.nl stefan@concept7.nl

128. demo: http://services.google.com/training/websiteoptimizeroverview/2995095/
m.van.kranenburg@libralab.nl stefan@concept7.nl

129. A/B resultaat
+99% +24%
m.van.kranenburg@libralab.nl stefan@concept7.nl

130. schets een aantal variaties
voor je website
m.van.kranenburg@libralab.nl stefan@concept7.nl

131. m.van.kranenburg@libralab.nl stefan@concept7.nl

132. meer weten?
stefan@concept7.nl
http://www.usabilityweb.nl
http://ma.gnolia.com/groups/usabilityweb
http://www.flickr.com/groups/usabilityweb
m.van.kranenburg@libralab.nl stefan@concept7.nl