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.

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

83 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

×