Your SlideShare is downloading. ×
Webinar bol.com usability 28 mei 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webinar bol.com usability 28 mei 2013

159

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
159
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1Usability
  • 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 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. 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. 6Introductie 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 usabilityAan wat voor een zaken kan je jezelf ergerenwanneer je een site, blog, webshop bekijkt?………………
  • 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. Navigatie klikken• In content 43%• Bovenaan pagina 18%• Linkerkant 18%• Rechterkant 15%• Onderaan (de vouw) 6%
  • 13. Navigatie klikken achterhalen in GoogleAnalytics
  • 14. Navigatie klikken achterhalen inMouseflow
  • 15. Navigatie klikken achterhalen inMouseflow
  • 16. Navigatie klikken achterhalen inMouseflowhttp://www.youtube.com/watch?v=JSPF4I2vie8
  • 17. 17Basis 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’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. Competitieve bezoeker
  • 27. Spontane bezoeker
  • 28. Spontane bezoeker
  • 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. Humanistische bezoeker
  • 31. Methodische bezoeker
  • 32. Vooronderzoek via bijv. Google Analytics
  • 33. Vooronderzoek via bijv. Google Analytics
  • 34. visueel ontwerpZaken om rekening mee te houdenOppervlakteGeraamteStrategieStructuurAfbakeningConcreetAbstractVoltooiingIdeegebruikerswensenorganisatiedoelenfunctionelespecificatiesinteractie-ontwerpinformatie-architectuurinterface-ontwerpnavigatie-ontwerpinformatie-ontwerpinhoudelijkespecificatiesApplicatie Informatie
  • 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. 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. 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. Navigeren, onderzoek d.m.v. cardsorting
  • 39. Navigeren, onderzoek d.m.v. cardsorting
  • 40. Indeling40
  • 41. Indeling41
  • 42. Indeling42
  • 43. Indeling43
  • 44. Wireframe ontwerp
  • 45. Wireframe ontwerphttp://www.enexiscampagnes.nl/jem2/?Page=Wijk_resulaten
  • 46. Wireframe ontwerp tool
  • 47. Wireframe ontwerp tool
  • 48. 48Do’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 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. 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 desite
  • 57. Kruimelpad
  • 58. Linktekst
  • 59. Link naar homepage consistentgebruiken
  • 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. 89Verhogen 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. GoogleAnalytics experimenten
  • 93. 93Responsive, Apps en mobile sites
  • 94. Responsive design
  • 95. Voordelen responsive• Goed zichtbaar op ieder formaat en iederapparaat• Content onderhouden via één site
  • 96. Nadeel responsive• Grote websites met veel content kaningewikkelder zijn
  • 97. Responsive templates
  • 98. Mobiele site
  • 99. Mobiele site
  • 100. Mobiele sitehttps://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 hetzelfdeis als de website, maar dan in de vorm van eenapp
  • 106. Voordelen App• Eenmaal gedownload, makkelijk en snelbereikbaar• Ook te gebruiken zonder internetbereik• Beleving
  • 107. Nadelen App• Hoge ontwikkelingskosten• Voor ieder platform een andere app• Informatie niet vindbaar zonder installatie
  • 108. 108Bijblijven 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.nlLinkedin:http://nl.linkedin.com/in/bobvandevoorenTwitter:http://twitter.com/soethartFacebook:http://www.facebook.com/soethart

×