MOBILE GULDKORN UX Camp CPH

HENNING NIELSEN SENIOR UX-KONSULENT, VERTICA

JENS HOFMAN HANSEN DIGITAL FORRETNINGSUDVIKLER, VERTICA

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

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

På 7 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 Forår 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

32 af 40 netbutikker har

søgefeltet i headeren

z

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

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

Hm.com

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

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.

Filtrering og sortering

Smartguy.dk

Sortering via ”picker”

Filtrering på en side for sig.

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.

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

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.

Vil du vide mere? §  Hent hele rapporten på

http://Blog.vertica.dk/2013/10/09/dos-and-donts-inden-for-mobil-e-handel-2013/

TAK :)

HENNING NIELSEN SENIOR UX-KONSULENT, VERTICA @henningnielsen

JENS HOFMAN HANSEN http://www.slideshare.net/jenshofman/ DIGITAL FORRETNINGSUDVIKLER, VERTICA