Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Danny Loefffen
Usability, CRO & Webanalytics consultant
Mobile Usability
Verhoog je conversie met deze tips
“Design is not how it
looks like and feels like.
Design is how it works”
- Steve Jobs, 2003
Full colour
afbeelding
plaatsen
Danny Loeffen
Usability, CRO & Webanalytics consultant
8 jaar ervaring met:
• Usability & ...
Onze diensten
STRATEGIE
Audit op CRO proces
Business case CRO
CRO team bouwen
CRO maturity begeleiding
CRO toolselectie
Customer journey...
Usability Lab
Wij zijn trots te werken voor:
De Vragenvogel
Vandaag..
1. Introductie
2. Effect van Usability op
A. Fysiek gebruik
B. Perceptie
C. Functies
3. Key Takeaways
1. Introductie
1/3
Usability is de kunst waarin software gemaakt wordt
zodat gebruikers de software effectief, efficiënt en
naar tevredenheid...
1. Introductie | User Experience ≠ Usability
Look
Usability
Feel
Inzichten
Prioriteren
Test backlog
HoogLaag
Hypothese opstellen
Testplan maken
Testvarianten maken
A/B test live
Analysere...
1. Introductie | Waar staat Usability in de Conversie-pyramide?
Technologie
Functionaliteit
Usability
Intuïtie
Emotie
Klan...
1. Introductie | Verandering maatschappij
Smartphone is de snelst groeiende techniek ooit
1. Introductie | Evolutionair tijdperk
1. Introductie | Dagelijkse tijd op smartphone
Bron:	comScore
1. Introductie | Dagelijks gebruik van smartphone
Bron:	Apple
Deze afbeelding kan nu niet worden weergegeven.
80 unlocks
1...
1. Introductie | Aandeel verkeer per device Q1 2015 t/m Q4 2017
Bron:	ISM.nl
1. Introductie | Conversiepercentage per device Q1 2015 t/m Q4 2017
Bron:	ISM.nl
We maken met z’n alle
slechte mobiele shops!
2. Effect van Usability
op
A. Fysiek gebruik
2/3
2. Effect Usability op Fysiek gebruik | Het vasthouden
Bron:	Steve	Hoober
49%
‘one-handed’
15%
‘two-handed’
36%
‘cradled’
75%
2. Effect Usability op Fysiek gebruik | “Thumb Reach”
Bron:	lukew.com
2. Effect Usability op Fysiek gebruik | “Thumb Zone”
Bron:	Smashing	Magazine
Weg!
08-2017 10-2017 03-2018
Beter?
Houd rekening met het
fysieke gebruik!
1/8
2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu”
Facebook did it!
+ engagement
+ tevredenheid
+ ‘snelheid...
2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu”
+30%
gebruik
Spotify did it!
2. Effect Usability op Fysiek gebruik | Bottom Bar Menu
Bottom menu
Bottom menu
Top menu
De Vragenvogel
2. Effect van Usability
op
B. Perceptie
2/3
35
• “Don’t make me
think!”
• Eén tap door met
bestellen
+3,5% conversie
2. Effect van Usability op Perceptie | A/B Test
Orig...
27% verlaat de checkout als deze complex is of lijkt
2. Effect van Usability op Perceptie | Cognitive Load
Bron:	Baymard	I...
2. Effect van Usability op Perceptie | Cognitive Load
“Pfoe, dit ziet er complex uit…” “Makkie!”
VS
Zorg ervoor dat taken
zo eenvoudig mogelijk
zijn of lijken
2/8
2. Effect van Usability op Perceptie | (Gevoel van) Snelheid
Zonder feedback Met feedback
~38 seconden TWT5 – 8 seconden T...
Voorkom langzame websites
Hoger vertrouwen in de website
Hogere verwachting van de kwaliteit
Minder frustratie
Interessant...
2. Effect van Usability op Perceptie | Micro-interacties
1.
“Hier	wil	ik	
naartoe”	
*TAP*
3.
“Hallo,	doe	
het	eens!”	
*TAP...
1 van de Usability
Heuristic Principles
van Jakob Nielsen
Show System Status
2. Effect van Usability op Perceptie | Micro-...
Maak middels ‘micro-
interactions’ duidelijk
wat de status is
3/8
De Vragenvogel
2. Effect van Usability
op
C. Functies
2/3
46
2. Effect van Usability op Functies | Mobile inputs
TelefoonnummerNaam E-mailadresURL
• Gebruiker wisselt niet zelf
van toetsenbord
• Als we het format van een
invoerveld weten, waarom
helpen we onze gebruike...
2. Effect van Usability op Functies | Mobile inputs
• Gebruiker wisselt niet zelf
van toetsenbord
• Nederlands postcode
fo...
Gebruik de juiste
(dynamische)
toetsenborden
4/8
2. Effect van Usability op Functies | Design van functies
• Teveel ruis
• Hoge uitval
• Veel gebruik van + en -
buttons
2. Effect van Usability op Functies | Design van functies
+22%
Transacties
+10%
Gebruik!
Laat je designer en je
Usability specialist
nauwkeurig
samenwerken!
5/8
@darylginn
Twitter
2. Effect van Usability op Functies | “Responsive”
A B
2. Effect van Usability op Functies | “Responsive”
Geen goed
voorbeeld
2. Effect van Usability op Functies | “Responsive”
Wél goed
voorbeeld
Begin met de mobiele
weergave en vergeet de
muis
5/8
2. Effect van Usability op Functies | Mobile Labels
• Geen idee waarom dit fout is
• Het is toch mijn adres?Naam
E-mailadr...
2. Effect van Usability op Functies | Mobile Labels
Naam
E-mailadres
Straat Huisnr
Postcode
Plaats
Ga	verder	naar	de	volge...
2. Effect van Usability op Functies | Mobile Labels
2. Effect van Usability op Functies | Mobile Labels
10 seconden
later…
2. Effect van Usability op Functies | Mobile Labels
Nog een keer
2. Effect van Usability op Functies | Mobile Labels
Opgelost!
2. Effect van Usability op Functies | Mobile Labels
“Floating labels”
Verberg nooit de input
labels
7/8
2. Effect van Usability op Functies | Horizontal Scrolling
A BSubjective Contours
Toon een ‘stukje’ van
het volgende element
om horizontaal scrollen
intuïtiever te maken
8/8
3. Key Takeaways
3/3
1. Houd rekening met het fysieke gebruik (75% duim, 49% one-handed)
2. Zorg voor (het gevoel van) een snelle website
3. Ma...
Mobile First
- Danny Loeffen
User First
Evenementen – meld u aan www.ism.nl/evenementen:
Masterclass online marketingstrategie
Donderdag 17 mei, 10:30 – 15:15
SEO...
Bedankt!
Vragen?
Van Nelleweg 1, 3044 BC Rotterdam +31 (0)10 243 60 000 info@ism.nl www.ism.nl
Digital Marketing Live 2018 - Verhoog de conversie met deze tips voor mobile usability-optimalisatie - Danny Loeffen
Upcoming SlideShare
Loading in …5
×

Digital Marketing Live 2018 - Verhoog de conversie met deze tips voor mobile usability-optimalisatie - Danny Loeffen

76 views

Published on

Hoe kunt u (big) data inzetten om de conversie van uw mobiele webshop te optimaliseren? Na deze presentatie kunt u aan de slag met concrete actiepunten en heeft u meer inzicht waar zich de knelpunten bevinden voor mobiele gebruikers.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Digital Marketing Live 2018 - Verhoog de conversie met deze tips voor mobile usability-optimalisatie - Danny Loeffen

  1. 1. Danny Loefffen Usability, CRO & Webanalytics consultant Mobile Usability Verhoog je conversie met deze tips
  2. 2. “Design is not how it looks like and feels like. Design is how it works” - Steve Jobs, 2003
  3. 3. Full colour afbeelding plaatsen Danny Loeffen Usability, CRO & Webanalytics consultant 8 jaar ervaring met: • Usability & UX • Webanalytics & Tag Management • Conversie-optimalisatie • Front-end Development
  4. 4. Onze diensten
  5. 5. STRATEGIE Audit op CRO proces Business case CRO CRO team bouwen CRO maturity begeleiding CRO toolselectie Customer journey mapping CONSULTANCY CRO consultancy (FE) Development UX design Wireframing Webanalytics Data-analyse Content Usability onderzoek OPLEIDING CRO masterclass Incompany training Persuasion trainingen UX workshops Webanalytics trainingen A/B test trainingen DETACHERING CRO consultant Webanalist Designer (FE) Developer Usability consultant Psycholoog UX researcher Data scientist Conversie-optimalisatie (CRO) services
  6. 6. Usability Lab
  7. 7. Wij zijn trots te werken voor:
  8. 8. De Vragenvogel
  9. 9. Vandaag.. 1. Introductie 2. Effect van Usability op A. Fysiek gebruik B. Perceptie C. Functies 3. Key Takeaways
  10. 10. 1. Introductie 1/3
  11. 11. Usability is de kunst waarin software gemaakt wordt zodat gebruikers de software effectief, efficiënt en naar tevredenheid kunnen gebruiken Simpelweg: Het moet intuïtief zijn voor jouw gebruiker! 1. Introductie | Wat is Usability?
  12. 12. 1. Introductie | User Experience ≠ Usability Look Usability Feel
  13. 13. Inzichten Prioriteren Test backlog HoogLaag Hypothese opstellen Testplan maken Testvarianten maken A/B test live Analyseren Learnings delen Test herhalen Informeren team Rapportage o # bezoekers en conversie per variant o Segment analyse o Significantie niveau o Impact op KPI Verandering doorvoeren?Nee JaVerwerpen en naar volgende test Maak ticket voor Development Hoog LIVE Change backlog o Webanalytics data o Externe expert analyses o Sessie recording analyses o Onsite klantfeedback o Usability onderzoek o Gedragsonderzoek o Analyse klantenservice vragen o Interviews met klanten o Etc. Bronnen voor conversieverbeteringen ONDERDEEL A ONDERDEEL B ONDERDEEL C 1. Introductie | CRO-proces ISM
  14. 14. 1. Introductie | Waar staat Usability in de Conversie-pyramide? Technologie Functionaliteit Usability Intuïtie Emotie Klantpropositie Bron: Meer omzet uit je webshop, Jurjen Jongejan Hier staat Usability Om deze redenen kopen bezoekers Denk aan snelheid, “werken alle functionaliteiten?”/BUGS Denk aan kwaliteit zoekresultaten, “Wishlist”-functie Verleidingstechnieken zoals “17 anderen kochten dit vandaag ook” Efficiënt, effectief en naar tevredenheid
  15. 15. 1. Introductie | Verandering maatschappij
  16. 16. Smartphone is de snelst groeiende techniek ooit 1. Introductie | Evolutionair tijdperk
  17. 17. 1. Introductie | Dagelijkse tijd op smartphone Bron: comScore
  18. 18. 1. Introductie | Dagelijks gebruik van smartphone Bron: Apple Deze afbeelding kan nu niet worden weergegeven. 80 unlocks 14 uur standby 2.600 touches
  19. 19. 1. Introductie | Aandeel verkeer per device Q1 2015 t/m Q4 2017 Bron: ISM.nl
  20. 20. 1. Introductie | Conversiepercentage per device Q1 2015 t/m Q4 2017 Bron: ISM.nl
  21. 21. We maken met z’n alle slechte mobiele shops!
  22. 22. 2. Effect van Usability op A. Fysiek gebruik 2/3
  23. 23. 2. Effect Usability op Fysiek gebruik | Het vasthouden Bron: Steve Hoober 49% ‘one-handed’ 15% ‘two-handed’ 36% ‘cradled’
  24. 24. 75%
  25. 25. 2. Effect Usability op Fysiek gebruik | “Thumb Reach” Bron: lukew.com
  26. 26. 2. Effect Usability op Fysiek gebruik | “Thumb Zone” Bron: Smashing Magazine
  27. 27. Weg! 08-2017 10-2017 03-2018 Beter?
  28. 28. Houd rekening met het fysieke gebruik! 1/8
  29. 29. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu” Facebook did it! + engagement + tevredenheid + ‘snelheid’ + omzet
  30. 30. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu” +30% gebruik Spotify did it!
  31. 31. 2. Effect Usability op Fysiek gebruik | Bottom Bar Menu Bottom menu
  32. 32. Bottom menu Top menu
  33. 33. De Vragenvogel
  34. 34. 2. Effect van Usability op B. Perceptie 2/3 35
  35. 35. • “Don’t make me think!” • Eén tap door met bestellen +3,5% conversie 2. Effect van Usability op Perceptie | A/B Test Origineel Variant
  36. 36. 27% verlaat de checkout als deze complex is of lijkt 2. Effect van Usability op Perceptie | Cognitive Load Bron: Baymard Institute
  37. 37. 2. Effect van Usability op Perceptie | Cognitive Load “Pfoe, dit ziet er complex uit…” “Makkie!” VS
  38. 38. Zorg ervoor dat taken zo eenvoudig mogelijk zijn of lijken 2/8
  39. 39. 2. Effect van Usability op Perceptie | (Gevoel van) Snelheid Zonder feedback Met feedback ~38 seconden TWT5 – 8 seconden TWT* *TWT staat voor “Tolerable Wait Time”
  40. 40. Voorkom langzame websites Hoger vertrouwen in de website Hogere verwachting van de kwaliteit Minder frustratie Interessanter Aantrekkelijker 2. Effect van Usability op Perceptie | (Gevoel van) Snelheid Bron
  41. 41. 2. Effect van Usability op Perceptie | Micro-interacties 1. “Hier wil ik naartoe” *TAP* 3. “Hallo, doe het eens!” *TAP*TAP* 2. “Doet ‘ie het niet?” *TAP* 4. “Oh, hij is aan het laden..!” *PFF*
  42. 42. 1 van de Usability Heuristic Principles van Jakob Nielsen Show System Status 2. Effect van Usability op Perceptie | Micro-interacties
  43. 43. Maak middels ‘micro- interactions’ duidelijk wat de status is 3/8
  44. 44. De Vragenvogel
  45. 45. 2. Effect van Usability op C. Functies 2/3 46
  46. 46. 2. Effect van Usability op Functies | Mobile inputs TelefoonnummerNaam E-mailadresURL
  47. 47. • Gebruiker wisselt niet zelf van toetsenbord • Als we het format van een invoerveld weten, waarom helpen we onze gebruikers daar dan niet mee? • 8 taps minder! 2. Effect van Usability op Functies | Mobile inputs
  48. 48. 2. Effect van Usability op Functies | Mobile inputs • Gebruiker wisselt niet zelf van toetsenbord • Nederlands postcode format is altijd hetzelfde • 5 taps minder!
  49. 49. Gebruik de juiste (dynamische) toetsenborden 4/8
  50. 50. 2. Effect van Usability op Functies | Design van functies • Teveel ruis • Hoge uitval • Veel gebruik van + en - buttons
  51. 51. 2. Effect van Usability op Functies | Design van functies +22% Transacties +10% Gebruik!
  52. 52. Laat je designer en je Usability specialist nauwkeurig samenwerken! 5/8
  53. 53. @darylginn Twitter 2. Effect van Usability op Functies | “Responsive” A B
  54. 54. 2. Effect van Usability op Functies | “Responsive” Geen goed voorbeeld
  55. 55. 2. Effect van Usability op Functies | “Responsive” Wél goed voorbeeld
  56. 56. Begin met de mobiele weergave en vergeet de muis 5/8
  57. 57. 2. Effect van Usability op Functies | Mobile Labels • Geen idee waarom dit fout is • Het is toch mijn adres?Naam E-mailadres Straat Huisnr Postcode Plaats Ga verder naar de volgende stap > Waar mag de bestelling naartoe? Danny Loeffen d.loeffen@ism.nl Van Nelleweg 1 Rotterdam 3044BC Rotterdam 3044BC
  58. 58. 2. Effect van Usability op Functies | Mobile Labels Naam E-mailadres Straat Huisnr Postcode Plaats Ga verder naar de volgende stap > Waar mag de bestelling naartoe?
  59. 59. 2. Effect van Usability op Functies | Mobile Labels
  60. 60. 2. Effect van Usability op Functies | Mobile Labels 10 seconden later…
  61. 61. 2. Effect van Usability op Functies | Mobile Labels Nog een keer
  62. 62. 2. Effect van Usability op Functies | Mobile Labels Opgelost!
  63. 63. 2. Effect van Usability op Functies | Mobile Labels “Floating labels”
  64. 64. Verberg nooit de input labels 7/8
  65. 65. 2. Effect van Usability op Functies | Horizontal Scrolling A BSubjective Contours
  66. 66. Toon een ‘stukje’ van het volgende element om horizontaal scrollen intuïtiever te maken 8/8
  67. 67. 3. Key Takeaways 3/3
  68. 68. 1. Houd rekening met het fysieke gebruik (75% duim, 49% one-handed) 2. Zorg voor (het gevoel van) een snelle website 3. Maak middels micro-interacties duidelijk wat de status is 4. Zorg ervoor dat taken zo eenvoudig mogelijk zijn of lijken 5. Gebruik de juiste (dynamische) toetsenborden 6. Laat je designer en Usability specialist nauwkeurig samenwerken 7. Verberg nooit de input labels 8. Toon een ‘stukje’ van het volgende element om horizontaal scrollen intuïtiever te maken 3. Key Takeaways
  69. 69. Mobile First - Danny Loeffen User First
  70. 70. Evenementen – meld u aan www.ism.nl/evenementen: Masterclass online marketingstrategie Donderdag 17 mei, 10:30 – 15:15 SEO, SEA, Social & Display, E-mail | ISM eCompany [Webinar] Hoe zet u linkbuilding succesvol in als online retailer? Donderdag 24 mei, 14:30 – 15:30 Mark Trieling, SEO Consultant | ISM eCompany E-commerce Live! Woensdag 30 mei Jurjen Jongejan en Sander Berlinski | ISM eCompany Digital Marketing Live! Donderdag 31 mei Siebren van Bruggen en Danny Loeffen | ISM eCompany What’s Going on in Retailing Donderdag 31 mei Jurjen Jongejan | ISM eCompany Masterclass SEO Donderdag 21 juni Team SEO | ISM eCompany
  71. 71. Bedankt! Vragen?
  72. 72. Van Nelleweg 1, 3044 BC Rotterdam +31 (0)10 243 60 000 info@ism.nl www.ism.nl

×