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.

Yasamin Malikshahi om 7 tips til mobilsalg - december 2019

Yasamin's præsentation om 7 tips til øget salg på mobilen ved CRO morning brief d. 11. december.

  • Login to see the comments

  • Be the first to like this

Yasamin Malikshahi om 7 tips til mobilsalg - december 2019

  1. 1. 7 TIPS DER GIVER FLERE SALG PÅ MOBILEN
  2. 2. MOBILEN ER STØRST Kilde: Monetate, Ecommerce Quartely , Benchmarks, Q2 2019
  3. 3. STADIG UDVIKLING Kilde: DR Medieudvikling 2018 I 2011 havde to ud af fem danskere en smartphone I 2018 havde ni ud af ti danskere en smartphone
  4. 4. MOBILEN ER STØRST Kilde: E-handel I Norden 2018, PostNord
  5. 5. USTABIL KONVERTERINGSRATE
  6. 6. MOBIL KONVERTERINGSRATE ER FALDENDE…
  7. 7. Kilde: comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement
  8. 8. Kilde: comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement
  9. 9. DET KAN VÆRE SVÆRT AT HÅNDTERE MOBILBESØGENDE… …. De har en forventning om at sites fungerer ligeså godt (hvis ikke bedre!) på mobil - Er kræsne - Utålmodige - Ufokuserede og ukoncentrerede (mange distraktioner!)
  10. 10. DET KAN VÆRE SVÆRT AT HÅNDTERE MOBILBESØGENDE… …. De har en forventning om at sites fungerer ligeså godt (hvis ikke bedre!) på mobil - Er kræsne - Utålmodige - Ufokuserede og ukoncentrerede (mange distraktioner!)
  11. 11. TIP 1: GØR DET NEMMERE AT KONVERTERE PÅ MOBIL - VED AT FORSTÅ BRUGERENS ADFÆRD PÅ MOBILENHEDEN
  12. 12. SELVOM MOBILSKÆRMEN BLIVER STØRRE, HAR VI STADIG IKKE MEGET PLADS AT GØRE GODT MED Kilde: UX Matters
  13. 13. DER ER FLERE OMRÅDER PÅ SKÆRMEN, SOM ER SVÆRE AT TILGÅ
  14. 14. De fleste holder mobilen med én hånd og bruger tommelfinger til at navigere rundt på – designet på mobilen skal altså understøtte én finger
  15. 15. MWR & SECOND MWR SKAL VÆRE NEMME AT TILGÅ – MED ÉN FINGER Kilde: UX Matters + crazyegg …det skal altså være nemt for brugerne at tilgå MWR ca midt i feedet (og andre nøgleelementer)
  16. 16. VI ER DOVNE – DET SKAL GÅ HURTIGT Vi er “effektiv dovne” à Vi søger at få maksimal værdi med minimum indsats.
  17. 17. LØSNINGSFORSLAG (APPS) – RYK DEN PRIMÆRE MENU (ELLER FEKS CTA) I BUNDEN AF FEEDET
  18. 18. LØSNINGSFORSLAG (BROWSER) – FACEBOOK HAR IKKE RYKKET MENU NED HER, MEN LINKEDIN FØLGER GODT MED
  19. 19. Kilde: UXPlanet RYK DERFOR DEN PRIMÆRE NAVIGATION NED – SÅ BRUGERNE NEMT KAN TILGÅ DEM
  20. 20. LØSNINGSFORSLAG – DOUBLE TAP Apple indførte dobbeltap mulighed i 2014, som rykker viewporten ned på skærmen med ca 400 px
  21. 21. LØSNINGSFORSLAG – CHROME HAR INDSAT IKON TIL SØGEFELTET I BUNDEN Chrome har ligeledes rykket menuen ned i bunden af feedet sammen med søgefeltet.
  22. 22. LØSNINGSFORSLAG – HORISONTALT FOKUS (MENUER ELLER ELEMENTER SOM KAN TILGÅS VED AT SWIPE)
  23. 23. LØSNINGSFORSLAG – HORISONTALT FOKUS Brugerne har ofte en forventning om, at billeder på produktsider kan swipes til venstre/højre. Imødekom brugernes behov.
  24. 24. LØSNINGSFORSLAG – HORISONTALT FOKUS Men husk at tjekke, om funktionaliteten giver mening for brugerne (kan de forstå/se, at man kan slide?) Content på mobilfeed Er det tydeligt, at CTA er gemt i en slider på denne side?
  25. 25. TJEK DERFOR ALTID MOBILWEBSITET PÅ MOBILENHED
  26. 26. VISITKORT = VORES (CA) VIEWPORT
  27. 27. OG HUSK: DER ER MANGE DISTRAKTIONER – BRUGEREN SER JERES WEBSITE (NOK) IKKE I ÉN SAMMENHÆNGENDE SESSION
  28. 28. TIP 2: GIV BRUGEREN OVERBLIK OVER DET VIGTIGSTE
  29. 29. DET ER NEMMERE AT VISE HVEM VI ER PÅ DESKTOP På desktop er det nemmere at vise, hvem vi er (Value Proposition, fokus på brand value) og hvad vi tilbyder. Eksemplet her på desktop viser fint, hvad Biltema tilbyder (tydelig menu + sekundær menu under søgefeltet, navigation til eksisterende brugere i toppen og fin brug af billeder).
  30. 30. DET ER NEMMERE AT VISE HVEM VI ER PÅ DESKTOP På mobilen er det en lidt anden historie – i og med der er mindre plads at gøre godt med, mister man både muligheden for brand-value og de konkrete navigationsmuligheder. Ikonet for “Indkøbsliste” ligner f.eks en burger-menu. Det mest prominente på siden er billedet med cyklerne. Hvad er det præcist Biltema altså tilbyder?
  31. 31. EKSEMPEL: TYDELIGE USP’ER, IKONER+BESKRIVELSE, TYDELIG SØGEFUNKTION SAMT BILLEDE SOM VISER NUVÆRENDE KAMPAGNE (UDNYTTET MED OVERSKRIFT, BRØDTEKST + TYDELIG CTA)
  32. 32. EKSEMPEL: IKONER I MENUELEMENTER UNDERSTØTTER CLARITY
  33. 33. EKSEMPEL kategorielementer som ikoner giver brugerne en forståelse for, hvad de kan forvente på siden – allerede fra toppen af feedet
  34. 34. EKSEMPEL: FORSIDEN HOS ASOS ASOS’s forside består af få elementer – meningen er at segmentere brugerne tidligt
  35. 35. EKSEMPEL: MENU ASOS Mobilmenuen er tung, men er med til at give brugeren en fornemmelse for, hvad for nogle typer produkter de kan se. Billeder understøtter clarity i menuen (denne type mobilmenu bliver brugt sjældent, da det godt kan blive meget tungt). Under menuen kan man desuden stadig tilgå ”Men fashion”, så man ikke skal tilbage til forsiden.
  36. 36. EKSEMPEL: TUI TUI har en simpel, men effektiv forside. Den understøtter fin brandvalue (USP’er i toppen af feedet, prominent brug af brandfarver og billede, der giver ferieassociationer) samt Value Proposition (kampagne med tydelig CTA samt søgefelt med mulighed for at søge efter forskellige type rejser)
  37. 37. EKSEMPLER: SEGMENTERENDE ELEMENTER UNDERSTØTTER BRUGERREJSEN
  38. 38. TIP 3: SERVÉR MWR FOR BRUGERNE IGENNEM FEEDET
  39. 39. STICKY MENU FØLGER MED BRUGEREN – SÅ DE KAN KOMME TIL DET VIGTIGSTE CONTENT SAMT MWR
  40. 40. HVAD SKER DER UDEN STICKY MENU PÅ SIDER MED LANGT FEED? Trollbead eksempel: Under produktkategoriet ”Kugler” ser brugeren som det første (oven over folden) filtreringsmulighed, og derefter et langt feed med en masse produkter. Når et produkt er lagt i kurven, er brugeren overladt til sig selv. Feedet på denne side er ekstremt langt, og uden sticky menu får brugeren selv lov til at scrolle hele vejen op til toppen – for at tilgå kurv og indhold.
  41. 41. HVAD SKER DER UDEN STICKY MENU PÅ SIDER MED LANGT FEED? ….Og det er et stort problem når feedet på denne side er SÅ langt. Der bliver vist 60 produkter. Det er desuden ikke sikkert, at de besøgende bruger filtreringsmuligheden i toppen. Mange kan godt lide at browse.
  42. 42. HUSK AT GIVE CLARITY, NÅR BRUGER HAR LAGT PRODUKT I KURVEN FEKS POPUP ELLER POWERSTEP Powerstep
  43. 43. STICKY CTA I BUNDEN AF FEEDET KAN OGSÅ BRUGES – MEN PAS PÅ PLADSEN, HVIS HEADER OGSÅ ER STICKY
  44. 44. EKSEMPEL - ASOS • ASOS har en forholdsvis tung, sticky område i toppen – dog følger den ikke med, når brugeren scroller nedad. Så snart de begynder at scrolle opad, kommer den frem (da brugeren eventuel viser interesse for at gå tilbage og tjekke andre produkter). • Filtrering er en del af deres sticky header. • Læg mærke til, at Chrome også ”gemmer” vigtige elementer når der scrolles ned af feedet!
  45. 45. TIP 4: VIS BRUGERNE TYDELIGT NÅR DE HAR AKTIVERET NOGET
  46. 46. BRUGERNE SKAL IKKE VÆRE I TVIVL OM DE HAR AKTIVERET NOGET
  47. 47. EKSEMPEL Før produktet er lagt i kurven Efter produktet er lagt i kurven
  48. 48. EKSEMPEL: CLARITY VHA TEKST, IKON + EKSTRA TRYGHEDSELEMENT I BUNDEN AF FEEDET (PRODUKT ER RESERVERET)
  49. 49. TIP 5: GØR DET NEMT FOR BRUGERNE AT NAVIGERE RUNDT PÅ JERES SITE
  50. 50. FORSKELLIGE MÅDER AT FINDE PRODUKTER PÅ
  51. 51. GØR SØGEFELTET SYNLIGT OG FÅ FLERE SØGNINGER (= FLERE SESSION SOM KAN ENDE I KONVERTERINGER (OG MIKRO KONVERTERINGER)
  52. 52. MOBILMENU – STYLING KAN HJÆLPE MED AT TYDELIGGØRE KATEGORIER
  53. 53. EKSEMPEL: MENU ER SVÆR AT AFKODE
  54. 54. - Logo som det mest prominente element - Lille font - Visuelt hierarki - Kontekst? (“læs mere” hører ikke til i en menu) EKSEMPEL: MENU ER SVÆR AT AFKODE
  55. 55. …MEN MENU I FOOTEREN FUNGERER TIL GENGÆLD RIGTIG GODT.
  56. 56. FOOTEREN ER BRUGERENS SEKUNDÆRE MENU
  57. 57. ET SKRIDT FORAN: SVAR PÅ SPØRGSMÅL, LINK TIL POPULÆRE/VIGTIGE SIDER, OG VIS TRYGHEDSELEMENTER Kilde: Mobify
  58. 58. Kilde: Mobify HUSK AT BRUGE EN ANDEN TYPE FOOTER I CHECKOUTFLOW – VI VIL JO IKKE HAVE, AT BRUGEREN FORLADER FLOWET.
  59. 59. • Generelt indikerer brugerinteraktionerne, at brugerne har svært ved at bruge mobilwebsitet – mange af elementerne er for små, og brugerne har svært ved at klikke på feks CTA eller bruge filtreringen. • Søgefunktionen forvirrer brugerne; designmæssigt ligner det en forlængelse af filtreringen • Nogle afsnit bliver meget smalle, information bliver derfor presset meget sammen – husk på at jeres målgruppe er 65+ CASE: GISLEV REJSER
  60. 60. CASE: GISLEV REJSER
  61. 61. TIP 6: FJERN STØJ OG PRIORITÉR INDHOLD
  62. 62. DESIGN OG LAYOUT SKAL UNDERSTØTTE BRUGERENS KØBSREJSE Husk at prioritere indhold. Her er indholdet meget rodet – selvom MWR er meget tydelig, støtter omkringliggende content ikke MWR.
  63. 63. Checkoutflow burde optimeres og have fokus på de rigtige elementer for at støtte op om brugerrejsen. • Her ses indhold af kurven – det mest prominent element er “Opdater kurv” knappen, da den er grøn og springer i øjnene før de andre elementer på siden. • Stort inputfelt til at indtaste rabatkode • “Gå til betaling” CTA er ikke særlig tydelig, selvom den er større. PRIORITER INDHOLD MED VISUELT HIERARKI
  64. 64. CASE: STYLEPIT
  65. 65. CASE: STYLEPIT • Fjern rabat- eller kuponkodefelt fra kurven à tilføj i checkoutflow (brugerne mere commited) • Tilføj som et link og ikke et input-felt (mindre prominent som link
  66. 66. CASE: STYLEPIT • Fjern rabat- eller kuponkodefelt fra kurven à tilføj i checkoutflow (brugerne mere commited) • Tilføj som et link og ikke et input-felt (mindre prominent som link
  67. 67. CASE: STYLEPIT
  68. 68. CASE: STYLEPIT
  69. 69. CASE: STYLEPIT Brug ikke ikoner, som er svære at afkode
  70. 70. CASE: STYLEPIT Hvordan kommer jeg hen til kassen?
  71. 71. CASE: STYLEPIT ….man skal lige scrolle en smule, for at aktivere den sticky CTA
  72. 72. CASE: STYLEPIT • I første step i flowet bliver brugerne præsenteret for betalingssymboler. Dog er betaling og adresse kombineret, og derfor ændrer inputfelterne sig, når der er valgt en betalingsmåde. • Dette er ikke særlig hensigtsmæssig for burgerne; reelt skal de ikke betale på denne side, hvilket det godt kunne tyde på med de store betalingssymboler. • Brugerne kan få en forvetning om, at de skal betale inden de har kigget ordren igennem (med adresse- og leveringsoplysninger osv.). • Undersøgelser I checkoutflows har vist, at konverteringsraten stiger (samt er brugerne mere committed) når de bliver spurgt om betalingsoplysninger efter leveringsoplysninger.
  73. 73. TIP 7: SPÆND IKKE BEN FOR BRUGEREN I INPUT FIELDS
  74. 74. HVORFOR FALDER BRUGERE FRA I CHECKOUTFLOW? Kilde: Baymard Institute
  75. 75. FJERN AUTOCORRECT FRA INPUTFELTER Kilde: Baymard Institute
  76. 76. KONFIGURÉR STORE BOGSTAVER – SELVOM EMAIL IKKE ER CASE SENSITIV Kilde: Baymard Institute
  77. 77. Kilde: Think with Google
  78. 78. CASE: NIELS BROCK
  79. 79. CASE: NIELS BROCK
  80. 80. CASE: NIELS BROCK
  81. 81. CASE: NIELS BROCK Håndtering af fejlmeddelelser kan i høj grad påvirke brugeroplevelsenEj udfyldt Ej udfyldt men klik på “tilmeld” CTA
  82. 82. CASE: NIELS BROCK Håndtering af fejlmeddelelser kan i høj grad påvirke brugeroplevelsen • Brug inline fejlmeddelelser (framing) og ikke listeangivelse – angiv alle de felter, som skal udfyldes korrekt ud • Fejlmeddelelser skal være specifikke (e.g “Udfyld venligst fornavn” versus “Udfyld dette felt”). • Skriv som en person og ikke robot • Bebrejd ikke brugeren for deres fejl Ej udfyldt Ej udfyldt men klik på “tilmeld” CTA
  83. 83. Gør det nemt at konvertere – optimering af formular Anbefalet
  84. 84. Farver er med til at styrke clarity. Der kan hurtigere skelnes imellem udfyldte og ikke-udfyldte felter. Positive associationer med checkmark og grøn farve.
  85. 85. TAK FORDI I LYTTEDE MED!

×