1. 1
Usability

2. Wie ben ik?

3. Dat je het weet
• Vragen stellen via
• Interactie tussen docent en deelnemers
• Voorbeelden bekijken

4. Huishoudelijke zaken
• Start 19 uur
• Einde 21 uur
Vragen stellen a.u.b. wanneer ik dat aangeef.
Dit i.v.m. overzicht
Antwoord geven op vragen (overlap voorkomen)
Niet met elkaar chatten tijdens webinar a.u.b.
Graag vragen stellen over usability gerelateerde
zaken a.u.b.

5. Programma
• Introductie usability
• De basis van gebruiksvriendelijke sites
• Do’s and dont’s
• Verhogen van conversie (verkoop, ..)
• Responsive design, apps en mobile sites
• Bijblijven over usability

6. 6
Introductie usability

7. Introductie usability

8. Introductie usability

9. Gebruiksvriendelijkheid
• Is de (potentiële) klant tevreden met de site?
• Vinden er interessante acties plaats?
• Worden ze een FAN?!
• Mond - tot - Mond reclame!

10. Introductie usability
Aan wat voor een zaken kan je jezelf ergeren
wanneer je een site, blog, webshop bekijkt?
…
…
…
…
…
…

11. Introductie usability
Aan wat voor een zaken kan je jezelf ergeren
wanneer je een site, blog, webshop bekijkt?
• Welkomstpagina
• Uitzetten van de rechtermuisknop
• Automatisch afspelen video, muziek, ..
• Laadsnelheid (meer dan 2 sec.)
• Veel (bewegende..) afbeeldingen
• Stockfoto’s. Originele foto’s (beter)

12. Navigatie klikken
• In content 43%
• Bovenaan pagina 18%
• Linkerkant 18%
• Rechterkant 15%
• Onderaan (de vouw) 6%

13. Navigatie klikken achterhalen in Google
Analytics

14. Navigatie klikken achterhalen in
Mouseflow

15. Navigatie klikken achterhalen in
Mouseflow

16. Navigatie klikken achterhalen in
Mouseflow
http://www.youtube.com/watch?v=JSPF4I2vie8

17. 17
Basis van gebruiksvriendelijke sites

18. Gebruiksvriendelijke site
• Effectief -> doel bereiken -> contact opnemen
• Efficiënt -> snel iets regelen via site
• Makkelijk te leren -> geen handleiding nodig
• Goed te onthouden

19. Effectief

20. Efficiënt

21. Efficiënt

22. Makkelijk te leren

23. Persona’s MBTI

24. Art. Raymond Klompsma

25. Persona’s
De competitieve bezoeker
Hebben de voorkeur om snel te beslissen op basis van
feiten. Vragen zich af waarom ze juist hier zouden
moeten zijn. Ben je geloofwaardig en hoe help je me
om mijn doelen te bereiken?
De spontane bezoeker
Kiezen snel op basis van emotie. Ze laten zich niet
leiden door feiten maar door gevoel. Ze vinden het
belangrijk dat je een product naar eigen wens kunt
aanpassen. Goede service is belangrijk. Ze zijn
gevoelig aanbieden en acties.

26. Competitieve bezoeker

27. Spontane bezoeker

28. Spontane bezoeker

29. Persona’s
De humanistische bezoeker
Beslist op basis van emotie maar zeker weldoordacht.
Wil graag weten wie het bedrijf achter een website is.
Ervaring van anderen zijn erg belangrijk. Hoe kan ik
je vertrouwen en wie gebruiken je producten
allemaal?
De methodische bezoeker
Beslist langzaam, op basis van feiten. Zijn benieuwd
naar het hele proces, naar de achtergronden van een
product, gaan niet over één nacht ijs. Maken bewuste
keuzes en willen graag bewijzen en garanties zien.

30. Humanistische bezoeker

31. Methodische bezoeker

32. Vooronderzoek via bijv. Google Analytics

33. Vooronderzoek via bijv. Google Analytics

34. visueel ontwerp
Zaken om rekening mee te houden
Oppervlakte
Geraamte
Strategie
Structuur
Afbakening
Concreet
Abstract
Voltooiing
Idee
gebruikerswensen
organisatiedoelen
functionele
specificaties
interactie-
ontwerp
informatie-
architectuur
interface-
ontwerp
navigatie-ontwerp
informatie-ontwerp
inhoudelijke
specificaties
Applicatie Informatie

35. Toelichting
Functionele specificaties = welke
functionaliteit nodig om doel bereiken? Bijv.
contactformulier, print functie,..
Inhoudelijk specificaties = welke informatie
heeft bezoeker nodig om doel te bereiken?
Interactie ontwerp: Hoe gaat bezoeker door
het proces op de site
Beschrijf hoe de informatie zó geordend en
gepresenteerd wordt, dat de gebruiker daar
snel en makkelijk toegang tot kan krijgen

36. Toelichting
Informatie architectuur = beschrijf hoe de
informatie zó geordend en gepresenteerd
wordt, dat de gebruiker daar snel en makkelijk
toegang tot kan krijgen (navigatie opbouw, ..)
Interface ontwerp =
Wat kunnen bezoekers hier doen?
Beschrijf hoe de gebruikte interface-
elementen worden gepresenteerd zodat de
interactie met het systeem zo makkelijk
mogelijk is.

37. Toelichting
Informatie ontwerp =
Hoe presenteer je de informatie zó dat
onmiddellijk duidelijk is wat er op een pagina
staat?
Hoe moeten we de informatie presenteren
zodat mensen het kunnen begrijpen en
gebruiken ?
Wat is belangrijke informatie en wat is
ondersteunend

38. Navigeren, onderzoek d.m.v. cardsorting

39. Navigeren, onderzoek d.m.v. cardsorting

40. Indeling
40

41. Indeling
41

42. Indeling
42

43. Indeling
43

44. Wireframe ontwerp

45. Wireframe ontwerp
http://www.enexiscampagnes.nl/jem2/
?Page=Wijk_resulaten

46. Wireframe ontwerp tool

47. Wireframe ontwerp tool

48. 48
Do’s and dont’s usability

49. Top 7 meest gemaakte fouten
• Geen of slechte zoekfunctie
• Teksten slecht leesbaar. Bijv. te klein
• Te lange teksten (te lange alinea’s)
• Gebruik van woorden die onbekend zijn bijv.
vaktermen, moeilijke woorden, …
• Geen of slechte vindbare contact informatie
• Niet beantwoorden van gebruikersvragen
• Niet bruikbaar in internet browsers

50. Dont’s
• Pop-ups
• Welkomstteksten
• Plug-ins installeren voor kunnen gebruiken
bepaalde functionaliteiten
• Belangrijke content eruit laten zien als een
banner (banner blindheid)
• Video’s die langer duren dan 60 seconden
• Geen 404 pagina inzetten (verkeerde pagina)
• Gebruik van Captcha’s bij formulieren
• Niet geschikt voor tablets en smartphones

51. Rust d.m.v. witruimte

52. Namen in navigatie menu

53. Goede zoekmachine op de site

54. Goede zoekmachine op de site

55. Goede zoekmachine op de site

56. Lengte invoerveld zoekmachine op de
site

57. Kruimelpad

58. Linktekst

59. Link naar homepage consistent
gebruiken

60. Contactgegevens makkelijk vindbaar

61. Contactgegevens makkelijk vindbaar

62. Laadsnelheid Google Page Speed

63. Laadsnelheid Google Page Speed

64. Laadsnelheid Google Analytics

65. Koppen voor teksten gebruiken

66. Koppen voor teksten gebruiken

67. Mensen kijken van links naar rechts

68. Consistentie

69. Buttons met contrast

70. Relevante foto’s

71. Kleur verschil links

72. Gebruik waarnodig thumbnails

73. Vuistregels Jakob Nielsen
• Zichtbaarheid systeem status
• Matcht met echte wereld & systeem
• Gebruikers controle en vrijheid
• Consistentie en standaarden
• Foutmeldingen voorkomen
• Esthetisch en minimalistisch ontwerp
• Help bij foutmeldingen
• Help en documentatie

74. Zichtbaarheid systeem status

75. Matcht met echte wereld

76. Matcht met echte wereld

77. Matcht met echte wereld

78. Gebruikers controle en vrijheid

79. Consistentie en standaarden

80. Consistentie en standaarden

81. Foutmeldingen voorkomen

82. Foutmeldingen voorkomen

83. Esthetisch en minimalistisch ontwerp

84. Help bij foutmeldingen

85. Help bij foutmeldingen

86. Help bij foutmeldingen

87. Help en documentatie

88. Help en documentatie

89. 89
Verhogen van conversie

90. Zaken om te testen
• Teksten (kopteksten, subkopteksten, vet,
cursief, onderstreept, ..)
• Afbeeldingen (formaat, positie, ..)
• Buttons (formaat, plaats, kleur)
• Kleurgebruik (buttons, links, ..)

91. Verhogen van conversie d.m.v.
Mouseflow

92. Verhogen van conversie d.m.v. Google
Analytics experimenten

93. 93
Responsive, Apps en mobile sites

94. Responsive design

95. Voordelen responsive
• Goed zichtbaar op ieder formaat en ieder
apparaat
• Content onderhouden via één site

96. Nadeel responsive
• Grote websites met veel content kan
ingewikkelder zijn

97. Responsive templates

98. Mobiele site

99. Mobiele site

100. Mobiele site
https://m.bol.com/nl/

101. Voordelen mobiele site
• Snelle laadtijd
• Speciaal ontworpen voor smartphone en tablet

102. Nadelen mobiele site
• Lange ontwikkeltijd
• Een hele nieuwe site vanaf de grond opbouwen
• Vindbaarheid in zoekmachines

103. App

104. App

105. App
• Bied met een app toegevoegde waarde -> bijv.
ondersteunend bij lezen magazine (Ikea),
tijdens shoppen (Amazon)
• Ontwikkel nooit een app die eigenlijk hetzelfde
is als de website, maar dan in de vorm van een
app

106. Voordelen App
• Eenmaal gedownload, makkelijk en snel
bereikbaar
• Ook te gebruiken zonder internetbereik
• Beleving

107. Nadelen App
• Hoge ontwikkelingskosten
• Voor ieder platform een andere app
• Informatie niet vindbaar zonder installatie

108. 108
Bijblijven over usability

109. Blogs

110. Blogs

111. Blogs

112. Blogs

113. Blogs

114. Boeken

115. Boeken

116. Boeken

117. Zijn er nog vragen?!
E-mail: bob@soethart.nl
Linkedin:
http://nl.linkedin.com/in/bobvandevooren
Twitter:
http://twitter.com/soethart
Facebook:
http://www.facebook.com/soethart