Bezoekers rekenen af met webshops die niet goed presteren op smartphones. Een onduidelijk menu of verstopte call-to-actions: voorbeelden van boosdoeners waardoor bezoekers een webshop verlaten. Zonde, want zo lekt omzet weg.

1. Verhoog je conversie met deze
Mobile Usability optimalisaties

2. Danny Loeffen
Webanalytics & Conversie optimalisatie consultant | ISM eCompany
7 jaar ervaring met:
• Usability (onderzoeken)
• Front-end Development
• Conversie-optimalisatie
• Webanalytics
d.loeffen@ism.nl
linkedin.com/in/dannyloeffen

3. “Design is not how it looks like and feels like.
Design is how it works.”
- Steve Jobs, 2003

4. STRATEGY
Omnichannel
Business case
Operations
International
Big data
Branding
DESIGN
Identity
Wireframing
UX
Visual
Style guide
Campaigns
Content
ONLINE MARKETING
SEO
SEA
Emailmarketing
Display Advertising
Web Analytics
Conversion Optimization
Social Media Advertising
DEVELOPMENT
Magento
Sana
Umbraco
Wordpress
Interfacing
Frontend
Backend
+ 400 e-Commerce professionals

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. Usability Lab

8. De vragenvogel

9. Inhoudsopgave
1. Introductie
2. Effect van Usability op
A. Fysiek gebruik
B. Perceptie
C. Functionaliteit
3. Key takeaways

10. 1. Introductie

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. User Experience
1. Introductie | Wat is User Experience?
Look
Usability
Feel

13. 1. Introductie | CRO-proces ISM
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

14. 1. Introductie | Waar staat Usability in de Conversie-pyramide?
Technologie
Functionaliteit
Usability
Intuïtie
Emotie
Unieke waarde propositie
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. 1. Introductie | Verandering maatschappij

16. Smartphone is de snelst groeiende techniek ooit
1. Introductie | Evolutionair tijdperk

17. 1. Introductie | Dagelijkse tijd op smartphone
Bron: comScore

18. 1. Introductie | Aandeel verkeer per device Q1 2015 t/m Q2 2017
Bron: ISM.nl

19. 1. Introductie | Aandeel transacties per device Q1 2015 t/m Q2 2017
Bron: ISM.nl

20. 1. Introductie
We maken met z’n alle slechte mobiele shops!
Hoe kan dat nou?

21. 2. Effect van Usability op
A. Fysiek gebruik

22. 2. Effect Usability op Fysiek gebruik | Het vasthouden
Bron: Steve Hoober
49%
‘one-handed’
15%
‘two-handed’
36%
‘cradled’

23. 2. Effect Usability op Fysiek gebruik | Het vasthouden
van de interacties wordt met de duim gedaan
75%

24. 2. Effect Usability op Fysiek gebruik | “Thumb Reach”
Bron: lukew.com

25. 2. Effect Usability op Fysiek gebruik | “Thumb Zone”
Bron: Smashing Magazine

26. 2. Effect Usability op Fysiek gebruik | “Thumb Gestures”
Bron: Smashing Magazine

27. 2. Effect Usability op Fysiek gebruik | Usability Onderzoek ISM

28. 2. Effect Usability op Fysiek gebruik | Productpagina Coolblue.nl

29. 2. Effect Usability op Fysiek gebruik
Houd rekening met het fysieke gebruik!

30. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu”
Facebook did it!
+ engagement
+ tevredenheid
+ ‘snelheid’
+ omzet

31. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu”
Spotify did it!
+30%
gebruik

32. 2. Effect Usability op Fysiek gebruik | Bottom Bar Menu
Bottom menu

33. 2. Effect Usability op Fysiek gebruik | Bottom Bar Menu A/B Test
Bottom menu
Top menu

34. Vragen tussendoor?

35. 2. Effect van Usability op
B. Perceptie

36. • “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

37. 27% verlaat de checkout als deze complex is of lijkt
2. Effect van Usability op Perceptie | Cognitive Load
Bron: Baymard Institute

38. 2. Effect van Usability op Perceptie | Cognitive Load
“Pfoe, dit ziet er complex uit…” “Makkie!”
VS

39. 2. Effect van Usability op Perceptie | Cognitive Load
Zorg ervoor dat taken zo eenvoudig mogelijk zijn of lijken

40. 2. Effect van Usability op Perceptie | (Gevoel van) Snelheid
Zonder feedback Met feedback
5 – 8 seconden TWT*
*TWT staat voor “Tolerable Wait Time”
~38 seconden TWT

41. 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

42. 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*

43. 1 van de Usability Heuristic Principles van Jakob Nielsen
Show System Status
2. Effect van Usability op Perceptie | Micro-interacties

44. 2. Effect van Usability op Perceptie | Micro-interacties
Maak middels ‘micro-interactions’ duidelijk
wat de status is!

45. Vragen tussendoor?

46. 2. Effect van Usability op
C. Functies

47. 2. Effect van Usability op Functies | Mobile inputs
TelefoonnummerNaam E-mailadresURL

48. 2. Effect van Usability op Functies | Mobile inputs
Kan de gebruiker nog beter gestuurd worden?

49. 2. Effect van Usability op Functies | Mobile inputs
Jazeker. • 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!

50. 2. Effect van Usability op Functies | Mobile inputs
Gebruik de juiste (dynamische) toetsenborden!

51. 2. Effect van Usability op Functies | “Responsive”
@darylginn
Twitter
A B

52. 2. Effect van Usability op Functies | “Responsive”
Geen goed
voorbeeld

53. 2. Effect van Usability op Functies | “Responsive”
Wél goed
voorbeeld

54. 2. Effect van Usability op Functies | ”Responsive”
Begin met de mobiele weergave en vergeet de muis!

55. 2. Effect van Usability op Functies | Mobile Labels
Naam
E-mailadres
Straat Huisnr
Postcode
Plaats
• Geen idee waarom dit fout is
• Het is toch mijn adres?
Ga verder naar de volgende stap >
Waar mag de bestelling naartoe?
Danny Loeffen
d.loeffen@ism.nl
Van Nelleweg 1
Rotterdam
3044BC
Rotterdam
3044BC

56. 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?

57. 2. Effect van Usability op Functies | Mobile Labels
IXXI snapt het! • Label is altijd zichtbaar!
• Designer blij
• Gebruiker blij
• Minder fouten, meer
conversies!
“Floating
labels”

58. 2. Effect van Usability op Functies | Mobile Labels
Verberg nooit de input labels

59. 3. Key takeaways

60. 1. Begin met je mobiele weergave en vergeet de muis
2. Houd rekening met het fysieke gebruik (75% duim, 49% one-handed)
3. Zorg voor (het gevoel van) een snelle website
4. Maak middels micro-interacties duidelijk wat de status is
5. Zorg ervoor dat taken zo eenvoudig mogelijk zijn of lijken
6. Gebruik de juiste (dynamische) toetsenborden
7. Verberg nooit de input labels
3. Key Takeaways

61. 3. Key Takeaways
“Mobile First User First”
- Danny Loeffen

62. • [Webinar] “10 Online Marketing Musthaves Voor Webshops”
• 12 september 2017 | 14.30- 15.30 uur
• Shopping Today, meerdere sprekers en stand
• 21 september 2017 | DeFabrique, Utrecht
• [Event] Het Omnichannel Event van 2017!
• 14 november 2017
Evenementen van ISM eCompany
Vragen?

63. Danny Loeffen
Webanalytics & Conversie-optimalisatie consultant
d.loeffen@ism.nl
Linkedin.com/in/dannyloeffen
Bedankt!