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.

Webinar verhoog je conversie met deze mobile usability optimalisaties

369 views

Published on

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.

Published in: Marketing
  • Be the first to comment

Webinar verhoog je conversie met deze mobile usability optimalisaties

  1. 1. Verhoog je conversie met deze Mobile Usability optimalisaties
  2. 2. Danny Loeffen Webanalytics & Conversie optimalisatie consultant | ISM eCompany 7 jaar ervaring met: • Usability (onderzoeken) • Front-end Development • Webanalytics • Conversie-optimalisatie d.loeffen@ism.nl linkedin.com/in/dannyloeffen
  3. 3. “Design is not how it looks like and feels like. Design is how it works.” - Steve Jobs, 2003
  4. 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. 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. Inhoudsopgave 1. Introductie 2. Effect van Usability op A. Fysiek gebruik B. Perceptie C. Functionaliteit 3. Key takeaways
  8. 8. 1. Introductie
  9. 9. • 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?
  10. 10. User Experience 1. Introductie | Wat is User Experience? Look Usability Feel
  11. 11. 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
  12. 12. 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
  13. 13. 1. Introductie | Verandering maatschappij
  14. 14. Smartphone is de snelst groeiende techniek ooit 1. Introductie | Evolutionair tijdperk
  15. 15. 1. Introductie | Dagelijkse tijd op smartphone Bron: comScore
  16. 16. 1. Introductie | Dagelijks gebruik van smartphone Bron: Apple 80 unlocks 14 uur standby 2.600 touches
  17. 17. 1. Introductie | Aandeel verkeer per device Q1 2015 t/m Q2 2017 Bron: ISM.nl
  18. 18. 1. Introductie | Conversiepercentage per device Q1 2015 t/m Q2 2017 Bron: ISM.nl
  19. 19. 1. Introductie | Poll! Bron: Thuiswinkel.org – Sept 2017 7% 30% Hoe groot is het aandeel van totale mobiele omzet in Nederland in 2017?
  20. 20. 1. Introductie We maken met z’n alle slechte mobiele shops! Hoe kan dat nou?
  21. 21. 2. Effect van Usability op A. Fysiek gebruik
  22. 22. 2. Effect Usability op Fysiek gebruik | Het vasthouden Bron: Steve Hoober 49% ‘one-handed’ 15% ‘two-handed’ 36% ‘cradled’
  23. 23. 2. Effect Usability op Fysiek gebruik | Het vasthouden van de interacties wordt met de duim gedaan 75%
  24. 24. 2. Effect Usability op Fysiek gebruik | “Thumb Reach” Bron: lukew.com
  25. 25. 2. Effect Usability op Fysiek gebruik | “Thumb Zone” Bron: Smashing Magazine
  26. 26. 2. Effect Usability op Fysiek gebruik | “Thumb Gestures” Bron: Smashing Magazine
  27. 27. 2. Effect Usability op Fysiek gebruik | Usability Onderzoek ISM
  28. 28. 2. Effect Usability op Fysiek gebruik | Productpagina Coolblue.nl
  29. 29. 2. Effect Usability op Fysiek gebruik | Productpagina Coolblue.nl Weg! Oktober ‘17Augustus ‘17
  30. 30. 2. Effect Usability op Fysiek gebruik Houd rekening met het fysieke gebruik!
  31. 31. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu” Facebook did it! + engagement + tevredenheid + ‘snelheid’ + omzet
  32. 32. 2. Effect Usability op Fysiek gebruik | “Top menu to Bottom menu” Spotify did it! +30% gebruik
  33. 33. 2. Effect Usability op Fysiek gebruik | Bottom Bar Menu Bottom menu
  34. 34. 2. Effect Usability op Fysiek gebruik | Bottom Bar Menu A/B Test Bottom menu Top menu
  35. 35. 2. Effect van Usability op B. Perceptie
  36. 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. 37. 27% verlaat de checkout als deze complex is of lijkt 2. Effect van Usability op Perceptie | Cognitive Load Bron: Baymard Institute
  38. 38. 2. Effect van Usability op Perceptie | Cognitive Load “Pfoe, dit ziet er complex uit…” “Makkie!” VS
  39. 39. 2. Effect van Usability op Perceptie | Cognitive Load Zorg ervoor dat taken zo eenvoudig mogelijk zijn of lijken
  40. 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. 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. 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. 43. 1 van de Usability Heuristic Principles van Jakob Nielsen Show System Status 2. Effect van Usability op Perceptie | Micro-interacties
  44. 44. 2. Effect van Usability op Perceptie | Micro-interacties Maak middels ‘micro-interactions’ duidelijk wat de status is!
  45. 45. 2. Effect van Usability op C. Functies
  46. 46. 2. Effect van Usability op Functies | Mobile inputs TelefoonnummerNaam E-mailadresURL
  47. 47. 2. Effect van Usability op Functies | Mobile inputs Kan de gebruiker nog beter gestuurd worden?
  48. 48. 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!
  49. 49. 2. Effect van Usability op Functies | Mobile inputs Gebruik de juiste (dynamische) toetsenborden!
  50. 50. 2. Effect van Usability op Functies | “Responsive” @darylginn Twitter A B
  51. 51. 2. Effect van Usability op Functies | “Responsive” Geen goed voorbeeld
  52. 52. 2. Effect van Usability op Functies | “Responsive” Wél goed voorbeeld
  53. 53. 2. Effect van Usability op Functies | ”Responsive” Begin met de mobiele weergave en vergeet de muis!
  54. 54. 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
  55. 55. 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?
  56. 56. 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”
  57. 57. 2. Effect van Usability op Functies | Mobile Labels Verberg nooit de input labels
  58. 58. 3. Key takeaways
  59. 59. 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
  60. 60. 3. Key Takeaways “Mobile First User First” - Danny Loeffen
  61. 61. Danny Loeffen Webanalytics & Conversie-optimalisatie consultant d.loeffen@ism.nl Linkedin.com/in/dannyloeffen Bedankt!

×