Standarder og trends i mobil e-handel 2014

MOBILE GULDKORN Juni 2014

JENS HOFMAN HANSEN & HENNING NIELSEN

40 MOBILE NETBUTIKKER

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

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

m.stylepit.dk

etzy.com

jysk.dk

homedepot.com

wupti.com

TRENDS

KONVENTIONER

HEADER §  Logo §  Menu §  Kurv §  Søgefelt

40 af 40 34 af 40 32 af 40 24 af 40

ANDRE ELEMENTER §  Login §  Profil §  Find butik §  Ønskeliste §  Huskeliste

HEADER

STICKY HEADER

2013: På 7 af 40 sites 2014: På 9 af 40 sites

BURGERMENU

Genkendelig for mange, MEN ikke et vidundermiddel

SPØRGSMÅL §  Hvor mange har brugt burgermenuen

i et projekt?

§  Hvor mange har splittestet om det er den bedste løsning?

BURGERMENU SPLITTEST

#1

WHICH TEST WON

#2

http://exisweb.net/mobile-menu-abtest Blogindlæg:

Crate & Barrel

BURGERMENU

Sommer 2013 Sommer 2014

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

LOGO + MENU

KURV Anbefaling til valg af ikon:

#1: Indkøbsvogn

#2: Indkøbskurv

SØGNING 35 af 40

netbutikker anvender søgning

33 af 40 netbutikker har

søgefeltet placeret ved headeren

z

5 af 33 søgefelter er skjulte

bag en knap

4 af 29 søgefelter findes i off-canvas menu

SØGNING

24 af 33 søgefelter i headeren er synlige direkte i headeren

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

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

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

NAVIGATION

Spartoo.dk

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

NAVIGATION

Nike.com

OFF-CANVAS

NAVIGATION

Hvis burgermenuen er placeret til venstre anvendes ofte off-canvas-navigation

OVERLAY

NAVIGATION

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

FANER

Ofte målrettet en kundegruppe.

NAVIGATION

Zalando.dk

OPSUMMERING AF OBSERVATIONER

§  Forsiden på mobilen er slanket ift. desktop.

§  IKKE en designskabelon til mobile netbutikker.

MOBIL E-HANDEL

KATEGORISIDE §  Gallerivisning og listevisning anvendes

stort set lige meget

§  Få informationer: gallerivisning

§  Mange informationer: listevisning

§  Basisopbygning med: Billede, navn og pris.

§  Udvidet opbygning med: Rating, brand, tilbud, førpris og forsendelsesinformationer.

KATEGORISIDE

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

FILTRERING OG SORTERING

FILTRERING OG SORTERING

18 af 40 netbutikker

har både filtrering og sortering.

9 af 40 netbutikker

har kun filtrering.

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

Filtrering og sortering

Stylepit.dk

Sortering via ”picker”

(2014: 50%)

Filtrering på en side for sig.

PRODUKTDETALJESIDE §  LÆG I KURV knap

§  18 af 40 sider har knappen ”over folden” i 2014 = fordobling

§  Anbefaling: 2 Læg i kurv knapper. Én efter produktbilledet og én igen efter produktdetaljer.

Placering af Læg i kurv knap:

§  Grøn streg: iPhone 4

§  Blå streg: iPhone 5

INDKØBSKURV §  Ofte samme info som på desktop

§  Produkter §  Leverings- og købsbetingelser §  Fragtinformation §  Kundeservice §  Relaterede produkter §  Sidst sete produkter

TUNNEL-DESIGN I PRAKSIS §  Fjern menu, søgefelt,

huskeliste, kurv m.m.

§  Tilføj trin-indikator og kundeservice.

CHECK-OUT

TUNNEL-DESIGN

§  Med tunnel-design

§  Uden tunnel-design

§  Ingen data

CHECK-OUT

24 af 40

15 af 40

1 af 40

Anbefaling: Skabe et fokuseret tunnel-design så snart kunden forlader kurven og begynder sit check-out.

Vil du vide mere? §  Hent hele rapporten på

http://blog.vertica.dk/2014/06/27/standarder-og-trends-i-mobil-e-handel-2014/#more-2564

http://www.slideshare.net/jenshofman/

TAK :)