1. MOBIL E-HANDEL
FEBRUAR 2014
HENNING NIELSEN
SENIOR UX KONSULENT, VERTICA

2. MOBIL E-HANDEL
AGENDA




Konventioner
Mobil e-handel
PAUSE
Konventioner og deres rolle i
designpraksis

3. KONVENTIONER

Uskrevene regler og normer

Relaterer sig til usability og user experience design

Skaber genkendelighed og sikrer at vi imødekommer brugerens
forventninger til designet og interaktionsmuligheder

Nielsen:

Standarder (Mere end 80%)

Konventioner (Mere end 50%)

Forvirring (Mindre end 50%)

4. E-HANDEL FLYTTER
OVER
PÅ MOBILEN

5. 40 MOBILE
NETBUTIKKER

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

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

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

9. STICKY HEADER
På 7 af 40 sites

10. BURGERMENU
Genkendelig for mange,
MEN ikke et vidundermiddel

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

12. WHICH TEST WON
BURGERMENU
SPLITTEST
#1
#2
Blogindlæg: http://exisweb.net/mobile-menu-abtest

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

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

15. LOGO + MENU

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

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

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

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

20. NAVIGATION
 Header menu

Produktkategorier og servicenavigation
 On-page navigation

Produktkategorier
 Footer navigation

Ofte kundeservice, hjælp, betingelser m.m.

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

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

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

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

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

26. NAVIGATION
FANER
Gør fanerne
tydelige
Asos.com

27. NAVIGATION
FOLD-UD / FOLD-IND
Macys.com
 De forskellige navigationsformer kan kombineres
med fold-ud/fold-ind-navigation for at reduceret
antallet af sideskift.

28. NAVIGATION
FOLD-UD / FOLD-IND
+ Fold ud
- Fold ind
> Navigere til ny side

29. NAVIGATION
TILBAGE-PIL
9 af 40
netbutikker
anvender en
tilbage-knap
på siden
Anbefaling:
Modsat undersøgelsens
resultat anbefaler vi at
tænke en tilbage-knap
ind i designet.

30. NAVIGATION
BRØDKRUMMESTI
 Ofte nedprioriteret på
mobil
 Opgør med traditionel
e-handel
25 af 40
netbutikker
anvender ikke en
brødkrummesti

31. NAVIGATION
FOOTER
Smartguy.dk
Macys.com
 Kundeservice, kontakinformation, salgsbetingelser,
sociale links, datapolitik, log ind, download app,
indkøbskurv og link til desktop ses ofte i footeren.

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

33. KATEGORISIDE
 Gallerivisning og listevisning anvendes
stort set lige meget
 Få information: gallerivisning
 Mange information: listevisning

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

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

36. FILTRERING OG
SORTERING
20 af 40
6 af 40
7 af 40
netbutikker
har både
filtrering og
sortering.
netbutikker
har kun
filtrering.
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.

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

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

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

40. PRODUKTDETALJESIDE
Ekstra
Ratings,
sociale links,
relaterede
produkter osv.
anvendes i høj
grad på
produktdetaljesiderne

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

42. CHECK-OUT
 Sideskift efter hvert step
31 af 40
 One-page check-out
5 af 40
 Ingen data
4 af 40

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

44. CHECK-OUT
TUNNEL-DESIGN I
PRAKSIS

Væk med menu,
søgefelt, huskeliste,
kurv m.m.
(Alt der fjerne fokus
fra selve check-out)

Ind med progress
steps og kundeservice.
(Skab overblik og
tryghed)

45. TAK :)

46. DOWNLOAD RAPPORTEN
DO’S AND DONT’S INDEN FOR MOBIL
E-HANDEL 2013
Blog.vertica.dk/2013/10/09/dos-and-donts-inden-for-mobile-handel-2013/
HENNING NIELSEN
SENIOR UX KONSULENT, VERTICA
hni@vertica.dk
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
Slideshare.net/henningnielsen