Presentatie van Charlotte van Dael tijdens het seminar 'Steeds Betere Website' op 24 november in 'De Verdraagzaamheid' in Zaltbommel. Een seminar van Colours en het Colours Optimalisatielab. Ook verscheen een artikel op Frankwatching over dit seminar: http://bit.ly/752hRc

1. Usability onderzoek
Oog fixaties
&
Quick wins
Charlotte van Dael Senior usability consultant

2. Usability onderzoek
Quick wins
&
Eyetracking

3. Usability

4. Waarom usability?

5. Waarom usability?
Charlotte van Dael | 10 februari 2009

6. Waarom usability?
Charlotte van Dael | 10 februari 2009

7. Waarom usability?
Charlotte van Dael | 10 februari 2009

12. Inspelen op doelgroep

15. Ogen als toegang tot hersenen
Hypothese:
Waar je naar kijkt, daar denk je aan.

16. Eyetracking

21. tekst

24. Onduidelijke calls to action

25. Onderzoeksopzet
 Testen met echte gebruikers uit doelgroep
 Aan de hand van taken
 Hardop denken
 Observatie & analyse live interactie
 Identificatie knelpunten
 Inzicht in oplossingen:
 Verwachtingen
 Twijfel
 Overwegingen

26. Hardop denk Zonder hardop denken

27. Kwalitatieve variant
Wanneer?
 Optimalisatie website
 Over gehele breedte: belangrijkste type pagina’s zoals
homepage, overzichtspagina’s en detailpagina’s,
navigatie, zoekfunctie en andere specifieke
functionaliteiten
Opzet
 Ongeveer 8 proefpersonen
 45 minuten per persoon
 Ongeveer 7 uitgebreide klikopdrachten over
belangrijkste onderdelen van de site

28. Case: Luxaflex

29. Naar home
1,3 sec 4,4 sec
7,4 sec
1,7 sec
3,3 sec

30. Positie zoekmachine

31. Achtergrond arcering
eerste 8 seconden tweede 8 seconden laatste 2 seconden

32. Kwantitatieve variant
Wanneer?
 Bij specifieke ontwerpvragen
 Ontwerpvarianten (vergelijkingstesten)
 Enkele te testen schermen
Opzet
 Ongeveer 20 proefpersonen
 10 minuten per persoon
 Gerichte taken:
 Meerdere 1-scherm-1-klik opdrachten
 Enkele doorklik opdrachten

33. Case: SNS Fundcoach

34. SNS Fundcoach

35. Case: SNS Fundcoach

36. Case: SNS Fundcoach

37. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

38. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

39. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

40. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

41. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

42. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

43. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

44. 5 seconden test
Ondersteunt ontwerp de doelstellingen?

45. Nóóit meer doen: usability geboden

47. Webconventies negeren

49. Webconventies negeren

50. Webconventies negeren
 Logo links boven & aanklikbaar
 Zoekmachine rechtsboven
En: met 27 karakters breed dek je 90% zoekopdrachten!*
 Contact rechtsboven
 Inloggen / uitloggen rechtsboven
 Navigatie horizontaal boven of verticaal links
 Hyperlinks: afwijkend, liefst blauw onderstreept
* Nielsen: Prioritizing Web Usability

51. Webconventies negeren
Handige links Route Contact

53. Meeste bezoekers scrollen niet
 77% van uw bezoekers scrollt niet *
 Effect het sterkst bij ouderen en onervaren
internetgebruikers
 25% van webpagina's wordt minder dan 4 sec getoond **
 52% minder dan 10 sec **
Plaats de belangrijkste zaken vouw de vouw!
550 / 600 pixels hoogte
* Jacob Nielsen, 2009
* Studie uit 2006 van Weinreich & Herder

54. First view

56. First view

57. First view

58. First view

59. First view

60. KAPITALEN: niet gebruiken!
 Leesonderzoek toont aan AANkapitalen veel minder
LEESONDERZOEK TOONT dat DAT KAPITALEN MINDER
prettig lezen dan normale letters.
PRETTIG LEZEN DAN NORMALE LETTERS.
 Recent onderzoek naar effectiviteit nieuwsbrieven:
25% minder mensen klikt door bij titels in kapitalen

67. Spreek de taal van uw doelgroep
 Geen jargon
 Geen afspiegeling van uw organigram
Achterhaal de taal van uw doelgroep:
 Zoekwoorden (intern / extern)
 Gebruikersonderzoek: cardsorting
 Google Trends

68. Gemeente Utrecht

69. Zakelijk, midzakelijk of grootzakelijk?

70. Spreek de taal van uw doelgroep
Filmpje Binck

73. Bannerblindheid
Veel bezoekers negeren:
 Rechter kolom
 Alles wat op banner lijkt!
Plaats eigen content niet in de vorm van banners!

76. Bied scanbare pagina’s aan
 Bezoekers lezen nauwelijks: ze scannen vooral op:
 koppen
 hyperlinks
 Knoppen
Maak pagina’s scanbaar door:
 Betekenisvolle koppen, hyperlinks en knoppen
 Betekenisvolle koppen, hyperlinks en knoppen
 Elke alinea een tussenkop

86. Positie knoppen
* Matteo Penzo: Label Placement in Forms

87. Positie labels
* Luke Wroblewski: Web Application Form Design

88. Positie labels
 Label en veld in 1 oogopslag
 Bij lange formulieren: rommelig
 Gebruiken bij korte formulieren

89. Positie labels
 Labels goed scanbaar tov elkaar
 Maar: afstand tussen label en veld groter
 Gebruiken bij veel nieuwe bezoekers / gebruikers

90. Positie labels
 Afstand tussen label en veld klein
 Maar: labels niet goed scanbaar tov elkaar
 Gebruiken bij veel vaste bezoekers / gebruikers

96. Lijnen en vlakken sturen kijkgedrag

97. Lijnen en vlakken sturen kijkgedrag

98. Lijnen en vlakken sturen kijkgedrag

101. Niemand houdt van wachten
 25% webpagina's wordt minder dan 4 sec getoond
 52% minder dan 10 sec
Kortere laadtijden resulteren in:
 lagere de bouncerate
 meer bekeken pagina’s
 hogere ROI
* OAUG ResearchLine studie door Unisphere Research in samenwerking met Oracle, juli 2009
** Onderzoek van Akamai/Forrester, september 2009

102. Niemand houdt van wachten
 26% verlaat website direct bij verstoringen
(zoals trage laadtijd, foutmeldingen, site niet beschikbaar
of gegevens opnieuw moeten invoeren)*
 Bezoekers eCommerce sites verwachten laadtijd van 2
seconden, in 2006: 4 seconden**
 Experimenten van Google en Bing:
vertraging 0,2 seconden sterk negatieve invloed op:
 aantal zoekopdrachten
 omzet
 time-to-click per bezoeker
 tot twee weken na na experiment!
* OAUG ResearchLine studie door Unisphere Research in samenwerking met Oracle, juli 2009
** Onderzoek van Akamai/Forrester, september 2009