Successfully reported this slideshow.

Webinar bol.com usability 28 mei 2013

308 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Webinar bol.com usability 28 mei 2013

  1. 1. 1Usability
  2. 2. Wie ben ik?
  3. 3. Dat je het weet• Vragen stellen via• Interactie tussen docent en deelnemers• Voorbeelden bekijken
  4. 4. Huishoudelijke zaken• Start 19 uur• Einde 21 uurVragen stellen a.u.b. wanneer ik dat aangeef.Dit i.v.m. overzichtAntwoord geven op vragen (overlap voorkomen)Niet met elkaar chatten tijdens webinar a.u.b.Graag vragen stellen over usability gerelateerdezaken a.u.b.
  5. 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. 6Introductie usability
  7. 7. Introductie usability
  8. 8. Introductie usability
  9. 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. 10. Introductie usabilityAan wat voor een zaken kan je jezelf ergerenwanneer je een site, blog, webshop bekijkt?………………
  11. 11. Introductie usabilityAan wat voor een zaken kan je jezelf ergerenwanneer 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. 12. Navigatie klikken• In content 43%• Bovenaan pagina 18%• Linkerkant 18%• Rechterkant 15%• Onderaan (de vouw) 6%
  13. 13. Navigatie klikken achterhalen in GoogleAnalytics
  14. 14. Navigatie klikken achterhalen inMouseflow
  15. 15. Navigatie klikken achterhalen inMouseflow
  16. 16. Navigatie klikken achterhalen inMouseflowhttp://www.youtube.com/watch?v=JSPF4I2vie8
  17. 17. 17Basis van gebruiksvriendelijke sites
  18. 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. 19. Effectief
  20. 20. Efficiënt
  21. 21. Efficiënt
  22. 22. Makkelijk te leren
  23. 23. Persona’s MBTI
  24. 24. Art. Raymond Klompsma
  25. 25. Persona’sDe competitieve bezoekerHebben de voorkeur om snel te beslissen op basis vanfeiten. Vragen zich af waarom ze juist hier zoudenmoeten zijn. Ben je geloofwaardig en hoe help je meom mijn doelen te bereiken?De spontane bezoekerKiezen snel op basis van emotie. Ze laten zich nietleiden door feiten maar door gevoel. Ze vinden hetbelangrijk dat je een product naar eigen wens kuntaanpassen. Goede service is belangrijk. Ze zijngevoelig aanbieden en acties.
  26. 26. Competitieve bezoeker
  27. 27. Spontane bezoeker
  28. 28. Spontane bezoeker
  29. 29. Persona’sDe humanistische bezoekerBeslist 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 ikje vertrouwen en wie gebruiken je productenallemaal?De methodische bezoekerBeslist langzaam, op basis van feiten. Zijn benieuwdnaar het hele proces, naar de achtergronden van eenproduct, gaan niet over één nacht ijs. Maken bewustekeuzes en willen graag bewijzen en garanties zien.
  30. 30. Humanistische bezoeker
  31. 31. Methodische bezoeker
  32. 32. Vooronderzoek via bijv. Google Analytics
  33. 33. Vooronderzoek via bijv. Google Analytics
  34. 34. visueel ontwerpZaken om rekening mee te houdenOppervlakteGeraamteStrategieStructuurAfbakeningConcreetAbstractVoltooiingIdeegebruikerswensenorganisatiedoelenfunctionelespecificatiesinteractie-ontwerpinformatie-architectuurinterface-ontwerpnavigatie-ontwerpinformatie-ontwerpinhoudelijkespecificatiesApplicatie Informatie
  35. 35. ToelichtingFunctionele specificaties = welkefunctionaliteit nodig om doel bereiken? Bijv.contactformulier, print functie,..Inhoudelijk specificaties = welke informatieheeft bezoeker nodig om doel te bereiken?Interactie ontwerp: Hoe gaat bezoeker doorhet proces op de siteBeschrijf hoe de informatie zó geordend engepresenteerd wordt, dat de gebruiker daarsnel en makkelijk toegang tot kan krijgen
  36. 36. ToelichtingInformatie architectuur = beschrijf hoe deinformatie zó geordend en gepresenteerdwordt, dat de gebruiker daar snel en makkelijktoegang tot kan krijgen (navigatie opbouw, ..)Interface ontwerp =Wat kunnen bezoekers hier doen?Beschrijf hoe de gebruikte interface-elementen worden gepresenteerd zodat deinteractie met het systeem zo makkelijkmogelijk is.
  37. 37. ToelichtingInformatie ontwerp =Hoe presenteer je de informatie zó datonmiddellijk duidelijk is wat er op een paginastaat?Hoe moeten we de informatie presenterenzodat mensen het kunnen begrijpen engebruiken ?Wat is belangrijke informatie en wat isondersteunend
  38. 38. Navigeren, onderzoek d.m.v. cardsorting
  39. 39. Navigeren, onderzoek d.m.v. cardsorting
  40. 40. Indeling40
  41. 41. Indeling41
  42. 42. Indeling42
  43. 43. Indeling43
  44. 44. Wireframe ontwerp
  45. 45. Wireframe ontwerphttp://www.enexiscampagnes.nl/jem2/?Page=Wijk_resulaten
  46. 46. Wireframe ontwerp tool
  47. 47. Wireframe ontwerp tool
  48. 48. 48Do’s and dont’s usability
  49. 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. 50. Dont’s• Pop-ups• Welkomstteksten• Plug-ins installeren voor kunnen gebruikenbepaalde functionaliteiten• Belangrijke content eruit laten zien als eenbanner (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. 51. Rust d.m.v. witruimte
  52. 52. Namen in navigatie menu
  53. 53. Goede zoekmachine op de site
  54. 54. Goede zoekmachine op de site
  55. 55. Goede zoekmachine op de site
  56. 56. Lengte invoerveld zoekmachine op desite
  57. 57. Kruimelpad
  58. 58. Linktekst
  59. 59. Link naar homepage consistentgebruiken
  60. 60. Contactgegevens makkelijk vindbaar
  61. 61. Contactgegevens makkelijk vindbaar
  62. 62. Laadsnelheid Google Page Speed
  63. 63. Laadsnelheid Google Page Speed
  64. 64. Laadsnelheid Google Analytics
  65. 65. Koppen voor teksten gebruiken
  66. 66. Koppen voor teksten gebruiken
  67. 67. Mensen kijken van links naar rechts
  68. 68. Consistentie
  69. 69. Buttons met contrast
  70. 70. Relevante foto’s
  71. 71. Kleur verschil links
  72. 72. Gebruik waarnodig thumbnails
  73. 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. 74. Zichtbaarheid systeem status
  75. 75. Matcht met echte wereld
  76. 76. Matcht met echte wereld
  77. 77. Matcht met echte wereld
  78. 78. Gebruikers controle en vrijheid
  79. 79. Consistentie en standaarden
  80. 80. Consistentie en standaarden
  81. 81. Foutmeldingen voorkomen
  82. 82. Foutmeldingen voorkomen
  83. 83. Esthetisch en minimalistisch ontwerp
  84. 84. Help bij foutmeldingen
  85. 85. Help bij foutmeldingen
  86. 86. Help bij foutmeldingen
  87. 87. Help en documentatie
  88. 88. Help en documentatie
  89. 89. 89Verhogen van conversie
  90. 90. Zaken om te testen• Teksten (kopteksten, subkopteksten, vet,cursief, onderstreept, ..)• Afbeeldingen (formaat, positie, ..)• Buttons (formaat, plaats, kleur)• Kleurgebruik (buttons, links, ..)
  91. 91. Verhogen van conversie d.m.v.Mouseflow
  92. 92. Verhogen van conversie d.m.v. GoogleAnalytics experimenten
  93. 93. 93Responsive, Apps en mobile sites
  94. 94. Responsive design
  95. 95. Voordelen responsive• Goed zichtbaar op ieder formaat en iederapparaat• Content onderhouden via één site
  96. 96. Nadeel responsive• Grote websites met veel content kaningewikkelder zijn
  97. 97. Responsive templates
  98. 98. Mobiele site
  99. 99. Mobiele site
  100. 100. Mobiele sitehttps://m.bol.com/nl/
  101. 101. Voordelen mobiele site• Snelle laadtijd• Speciaal ontworpen voor smartphone en tablet
  102. 102. Nadelen mobiele site• Lange ontwikkeltijd• Een hele nieuwe site vanaf de grond opbouwen• Vindbaarheid in zoekmachines
  103. 103. App
  104. 104. App
  105. 105. App• Bied met een app toegevoegde waarde -> bijv.ondersteunend bij lezen magazine (Ikea),tijdens shoppen (Amazon)• Ontwikkel nooit een app die eigenlijk hetzelfdeis als de website, maar dan in de vorm van eenapp
  106. 106. Voordelen App• Eenmaal gedownload, makkelijk en snelbereikbaar• Ook te gebruiken zonder internetbereik• Beleving
  107. 107. Nadelen App• Hoge ontwikkelingskosten• Voor ieder platform een andere app• Informatie niet vindbaar zonder installatie
  108. 108. 108Bijblijven over usability
  109. 109. Blogs
  110. 110. Blogs
  111. 111. Blogs
  112. 112. Blogs
  113. 113. Blogs
  114. 114. Boeken
  115. 115. Boeken
  116. 116. Boeken
  117. 117. Zijn er nog vragen?!E-mail: bob@soethart.nlLinkedin:http://nl.linkedin.com/in/bobvandevoorenTwitter:http://twitter.com/soethartFacebook:http://www.facebook.com/soethart

×