40 mobile e-handelssites gennemgået - de vigtigste resultater

1. MOBILE GULDKORN
UX Camp CPH
HENNING NIELSEN
SENIOR UX-KONSULENT, VERTICA
JENS HOFMAN HANSEN
DIGITAL FORRETNINGSUDVIKLER, VERTICA

2. 40 MOBILE
NETBUTIKKER

3. 40 MOBILE NETBUTIKKER
§ 1800contacts.com
§ m.autozone.com
§ m.nike.com
§ amazon.com
§ m.billetlugen.dk
§ m.onlinegolf.co.uk
§ barnesandnoble.com
§ m.crateandbarrel.com
§ m.saxo.com
§ billund-airport.dk
§ m.dell.com
§ m.smartguy.dk
§ blockbuster.dk
§ m.drugstore.com
§ m.toysrus.com
§ brandfair.com
§ m.ellos.dk
§ m.zalando.dk
§ cdon.com
§ m.gamestop.com
§ mobil.tdc.dk
§ coastal.com
§ m.gilt.com
§ mobile.walmart.com
§ designdelicatessen.dk
§ m.hm.com
§ net-a-porter.com
§ greenmountaincoffee.co
m m.inwear.com
§ spartoo.dk
§ harryanddavid.com
§ m.macys.com
§ toysrus.dk
§ interflora.dk
§ m.matas.dk
§ veromoda.dk
§ kaufmann.dk
§ m.momondo.dk
§ aarstiderne.com
§ m.asos.com

4. HEADER
§ Logo
§ Menu
§ Kurv
§ Søgefelt
40 af 40
34 af 40
32 af 40
24 af 40

5. ANDRE ELEMENTER
§ Login
§ Profil
§ Find butik
§ Ønskeliste
§ Huskeliste
HEADER

6. STICKY HEADER
På 7 af 40 sites

7. BURGERMENU
Genkendelig for mange,
MEN ikke et vidundermiddel

8. SPØRGSMÅL
§ Hvor mange har brugt burgermenuen
i et projekt?
§ Hvor mange har splittestet om det er
den bedste løsning?

9. BURGERMENU SPLITTEST
#1
WHICH TEST WON
#2
http://exisweb.net/mobile-menu-abtestBlogindlæg:

10. Crate & Barrel
BURGERMENU
Sommer 2013 Forår 2014

11. LOGO
Ofte placeret
til venstre
eller i midten.
Fungere som link til forsiden.

12. LOGO + MENU

13. KURV
Anbefaling til valg
af ikon:
#1: Indkøbsvogn
#2: Indkøbskurv

14. SØGNING
35 af 40
netbutikker
anvender søgning
32 af 40
netbutikker har
søgefeltet i
headeren
z

15. 23 af 29
søgefelter er
synlige
6 af 29
søgefelter er
skjulte
SØGNING
29 af 40 netbutikker har et søgefelt med
fuld bredde

16. INSPIRATION
En gennemgående
tendens for de mobile
netbutikker er at
grafiske elementer
er nedtonet.
Fokus på findability.

17. Er det en god
ide at ”slanke”
forsiden på
denne måde?

18. ON-PAGE-NAVIGATION
Giver kunderne et
godt overblik over
hvad de kan
forvente at finde i
butikken.
NAVIGATION
Hm.com

19. ON-PAGE-NAVIGATION
Gør det let at
opdage og finde
ting på den lille
skærm.
NAVIGATION
Nike.com

20. OFF-CANVAS
NAVIGATION
Hvis burgermenuen
er placeret til venstre
anvendes ofte
off-canvas-navigation

21. OVERLAY
NAVIGATION
Bruges ofte på
websider baseret på
Twitter bootstrap.
Derfor genkendelig
fra mange blogs og
websites med
responsive design.

22. FANER
Ofte målrettet en
kundegruppe.
NAVIGATION
Zalando.dk

23. OPSUMMERING AF OBSERVATIONER
§ Forsiden på mobilen er
slanket ift. desktop.
§ IKKE en designskabelon
til mobile netbutikker.
MOBIL E-HANDEL

24. KATEGORISIDE
§ Gallerivisning og listevisning anvendes
stort set lige meget
§ Få informationer: gallerivisning
§ Mange informationer: listevisning

25. § Basisopbygning med: Billede, navn og pris.
§ Udvidet opbygning med: Rating, brand, tilbud,
førpris og forsendelsesinformationer.
KATEGORISIDE

26. LÆG I KURV
§ Kun få netbutikker med Læg i kurv-
knapper på kategorisiderne
§ Fungerer godt til dagligvarer hvor man
let kan handle fra en liste
§ Fungerer knap så godt på varer der
kræver flere overvejelser
KATEGORISIDE

27. FILTRERING OG SORTERING

28. FILTRERING OG SORTERING
20 af 40
netbutikker
har både
filtrering og
sortering.
6 af 40
netbutikker
har kun
filtrering.
7 af 40
netbutikker
har kun
sortering.
§ Netbutikker, der både anvender filtrering og sortering har ofte et stort
varekatalog, hvor behovet for at skabe overblik og hurtig indsnævring er stort.

29. Filtrering og sortering
Smartguy.dk
Sortering
via ”picker”
Filtrering på en
side for sig.

30. PRODUKTDETALJESIDE
§ LÆG I KURV knap
§ 28 af 40 sider har knappen ”under
folden”
§ Anbefaling: 2 Læg i kurv knapper.
Én efter produktbilledet og én igen
efter produktdetaljer.

31. Placering af
Læg i kurv knap:
§ Grøn streg:
iPhone 4
§ Blå streg:
iPhone 5

32. INDKØBSKURV
§ Ofte samme info som på desktop
§ Produkter
§ Leverings- og købsbetingelser
§ Fragtinformation
§ Kundeservice
§ Relaterede produkter
§ Sidst sete produkter

33. TUNNEL-DESIGN I PRAKSIS
§ Fjern menu, søgefelt,
huskeliste, kurv m.m.
§ Tilføj trin-indikator og
kundeservice.
CHECK-OUT

34. TUNNEL-DESIGN
§ Med tunnel-design
§ Uden tunnel-design
§ Ingen data
CHECK-OUT
23 af 40
11 af 40
6 af 40
Anbefaling: Skabe et fokuseret tunnel-design så snart kunden
forlader kurven og begynder sit check-out.

35. Vil du vide mere?
§ Hent hele rapporten på
http://Blog.vertica.dk/2013/10/09/dos-
and-donts-inden-for-mobil-e-
handel-2013/

36. TAK :)
HENNING NIELSEN
SENIOR UX-KONSULENT, VERTICA
@henningnielsen
JENS HOFMAN HANSEN
http://www.slideshare.net/jenshofman/
DIGITAL FORRETNINGSUDVIKLER, VERTICA