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

1. 7 TIPS DER GIVER
FLERE SALG
PÅ MOBILEN

2. MOBILEN ER STØRST
Kilde: Monetate, Ecommerce Quartely , Benchmarks, Q2 2019

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. MOBILEN ER STØRST
Kilde: E-handel I Norden 2018, PostNord

5. USTABIL KONVERTERINGSRATE

6. MOBIL KONVERTERINGSRATE ER FALDENDE…

7. Kilde: comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement

8. Kilde: comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement

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. 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. TIP 1: GØR DET NEMMERE
AT KONVERTERE PÅ MOBIL
- VED AT FORSTÅ BRUGERENS
ADFÆRD PÅ MOBILENHEDEN

12. SELVOM MOBILSKÆRMEN BLIVER STØRRE, HAR VI STADIG IKKE MEGET PLADS
AT GØRE GODT MED
Kilde: UX Matters

13. DER ER FLERE OMRÅDER PÅ SKÆRMEN, SOM ER SVÆRE AT TILGÅ

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

16. 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)

17. VI ER DOVNE – DET SKAL GÅ HURTIGT
Vi er “effektiv dovne” à Vi søger at få
maksimal værdi med minimum indsats.

18. LØSNINGSFORSLAG (APPS) – RYK DEN PRIMÆRE MENU (ELLER FEKS CTA) I
BUNDEN AF FEEDET

19. LØSNINGSFORSLAG (BROWSER) – FACEBOOK HAR IKKE RYKKET MENU NED HER, MEN
LINKEDIN FØLGER GODT MED

20. Kilde: UXPlanet
RYK DERFOR DEN PRIMÆRE NAVIGATION NED – SÅ BRUGERNE NEMT KAN TILGÅ DEM

21. LØSNINGSFORSLAG – DOUBLE TAP
Apple indførte dobbeltap
mulighed i 2014, som rykker
viewporten ned på skærmen
med ca 400 px

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

23. LØSNINGSFORSLAG – HORISONTALT FOKUS (MENUER ELLER
ELEMENTER SOM KAN TILGÅS VED AT SWIPE)

24. LØSNINGSFORSLAG – HORISONTALT FOKUS
Brugerne har ofte en
forventning om, at billeder på
produktsider kan swipes til
venstre/højre. Imødekom
brugernes behov.

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

26. TJEK DERFOR ALTID MOBILWEBSITET PÅ MOBILENHED

27. VISITKORT = VORES (CA) VIEWPORT

28. OG HUSK: DER ER MANGE DISTRAKTIONER – BRUGEREN SER JERES WEBSITE (NOK)
IKKE I ÉN SAMMENHÆNGENDE SESSION

29. TIP 2: GIV BRUGEREN
OVERBLIK OVER DET VIGTIGSTE

30. 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).

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

32. EKSEMPEL: TYDELIGE USP’ER, IKONER+BESKRIVELSE, TYDELIG SØGEFUNKTION
SAMT BILLEDE SOM VISER NUVÆRENDE KAMPAGNE (UDNYTTET MED OVERSKRIFT,
BRØDTEKST + TYDELIG CTA)

33. EKSEMPEL: IKONER I MENUELEMENTER UNDERSTØTTER CLARITY

34. EKSEMPEL
kategorielementer som ikoner
giver brugerne en forståelse
for, hvad de kan forvente på
siden – allerede fra toppen af
feedet

35. EKSEMPEL: FORSIDEN HOS ASOS
ASOS’s forside består af få
elementer – meningen er at
segmentere brugerne tidligt

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

37. 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)

38. EKSEMPLER: SEGMENTERENDE ELEMENTER UNDERSTØTTER BRUGERREJSEN

39. TIP 3: SERVÉR MWR FOR
BRUGERNE IGENNEM FEEDET

40. STICKY MENU FØLGER MED BRUGEREN – SÅ DE KAN KOMME TIL DET VIGTIGSTE
CONTENT SAMT MWR

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

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

43. HUSK AT GIVE CLARITY, NÅR BRUGER HAR LAGT PRODUKT I KURVEN FEKS POPUP
ELLER POWERSTEP
Powerstep

44. STICKY CTA I BUNDEN AF FEEDET KAN OGSÅ BRUGES – MEN PAS PÅ PLADSEN, HVIS
HEADER OGSÅ ER STICKY

45. 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!

46. TIP 4: VIS BRUGERNE
TYDELIGT NÅR DE HAR
AKTIVERET NOGET

47. BRUGERNE SKAL IKKE VÆRE I TVIVL OM DE HAR AKTIVERET NOGET

48. EKSEMPEL
Før produktet er lagt i kurven Efter produktet er lagt i kurven

49. EKSEMPEL: CLARITY VHA TEKST, IKON + EKSTRA TRYGHEDSELEMENT I BUNDEN AF
FEEDET (PRODUKT ER RESERVERET)

50. TIP 5: GØR DET NEMT FOR
BRUGERNE AT NAVIGERE RUNDT
PÅ JERES SITE

51. FORSKELLIGE MÅDER AT FINDE PRODUKTER PÅ

52. GØR SØGEFELTET SYNLIGT OG FÅ FLERE SØGNINGER (= FLERE SESSION SOM KAN
ENDE I KONVERTERINGER (OG MIKRO KONVERTERINGER)

53. MOBILMENU – STYLING KAN HJÆLPE MED AT TYDELIGGØRE KATEGORIER

54. EKSEMPEL: MENU ER SVÆR AT AFKODE

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

56. …MEN MENU I FOOTEREN FUNGERER TIL GENGÆLD RIGTIG GODT.

57. FOOTEREN ER BRUGERENS SEKUNDÆRE MENU

58. ET SKRIDT FORAN: SVAR PÅ SPØRGSMÅL, LINK TIL POPULÆRE/VIGTIGE SIDER, OG
VIS TRYGHEDSELEMENTER
Kilde: Mobify

59. Kilde: Mobify
HUSK AT BRUGE EN ANDEN TYPE FOOTER I CHECKOUTFLOW – VI VIL JO IKKE HAVE,
AT BRUGEREN FORLADER FLOWET.

60. • 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

61. CASE: GISLEV REJSER

62. TIP 6: FJERN STØJ OG
PRIORITÉR INDHOLD

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

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

65. CASE: STYLEPIT

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

68. CASE: STYLEPIT

69. CASE: STYLEPIT

70. CASE: STYLEPIT
Brug ikke ikoner, som
er svære at afkode

71. CASE: STYLEPIT
Hvordan kommer jeg
hen til kassen?

72. CASE: STYLEPIT
….man skal lige scrolle
en smule, for at
aktivere den sticky CTA

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

74. TIP 7: SPÆND IKKE BEN FOR
BRUGEREN I INPUT FIELDS

75. HVORFOR FALDER BRUGERE FRA I CHECKOUTFLOW?
Kilde: Baymard Institute

76. FJERN AUTOCORRECT FRA INPUTFELTER
Kilde: Baymard Institute

77. KONFIGURÉR STORE BOGSTAVER – SELVOM EMAIL IKKE ER CASE SENSITIV
Kilde: Baymard Institute

78. Kilde: Think with Google

79. CASE: NIELS BROCK

80. CASE: NIELS BROCK

81. CASE: NIELS BROCK

82. CASE: NIELS BROCK
Håndtering af fejlmeddelelser kan i høj
grad påvirke brugeroplevelsenEj udfyldt Ej udfyldt men klik på “tilmeld” CTA

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

84. Gør det nemt at konvertere – optimering af formular
Anbefalet

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

86. TAK FORDI I LYTTEDE MED!