mobile guldkorn v.2 - sigchi

OKTOBER 2014 MOBILE GULDKORN v.2 PIA SCHØTT GREGERSEN & HENNING NIELSEN

Agenda

§  16.40 Oplæg: Mobile guldkorn

§  17.25 Pause

§  17.45 Oplæg: Egne løsninger

§  18.30 Sandwich + drikke

Hvem er vi?

Henning Nielsen Senior

UX Konsultent hni@vertica.dk

Pia Schøtt Gregersen User Experience-

Konsulent pgr@vertica.dk

40 MOBILE NETBUTIKKER

2013 & 2014

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

aarstiderne.com

m.asos.com

m.stylepit.dk

etzy.com

jysk.dk

homedepot.com

wupti.com

FORSIDE-ELEMENTER

HEADER §  Logo §  Menu §  Kurv §  Søgefelt

40 af 40 34 af 40 32 af 40 33 af 40

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

HEADER

STICKY HEADER

9 af 40 sites

BURGERMENU

Genkendelig for mange, MEN ikke et vidundermiddel

20 af 40 sites

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

EXISWEB

#2

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

BURGERMENU SPLITTEST

BOOKING.COM

ORIGINAL

VARIATION

http://blog.booking.com/hamburger-menu.html 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 har søgning

33 af de 35 Placerer søgefeltet i

headeren

5 af 33 søgefelter er skjulte

bag en knap

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

SØGNING

24 af 33 er synlige direkte i

headeren

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

NAVIGATION

Nike.com

ON-PAGE-NAVIGATION

NAVIGATION

Hm.dk Veromoda.dk

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

Kaufmann.dk

OFF-CANVAS MENU

NAVIGATION

Hvis menu’en er placeret til venstre anvendes ofte off-canvas-navigation

Wupti.com

OVERLAY

NAVIGATION

Kaufmann.dk

FANER

Ofte målrettet en kundegruppe.

NAVIGATION

Zalando.dk

FANER OFF-CANVAS

NAVIGATION

Asos.com

FOOTER

NAVIGATION

Veromoda.dk

OPSUMMERING AF OBSERVATIONER

§  Forsiden på mobilen er slanket ift. desktop.

§  IKKE en designskabelon til mobile netbutikker.

MOBIL E-HANDEL

ANDRE SIDER & ELEMENTER

Kategorisider

Amazon.com Kaufmann.dk

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

Læg  i  kurv  

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”

Filtrering overtager skærmen

PRODUKTDETALJESIDE

§  Stort produktbillede

§  LÆG I KURV knap §  Over eller under folden? §  1 eller 2 knapper?

§  Produktdetaljer

Placering af Læg i kurv knap:

§  Grøn streg: iPhone 4

§  Blå streg: iPhone 5

LÆG I KURV INTERAKTION PÅ PRODUKTDETALJESIDEN

Ellos.com

Nike.com

Macys.com

INDKØBSKURV §  Ofte samme info som på desktop

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

CHECK-OUT TUNNEL-DESIGN

§  Fjern menu, søgefelt, huskeliste, kurv m.m.

§  Tilføj trin-indikator og kundeservice.

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.

PAUSE

Mobile løsninger §  COOP §  GLOBAL §  Brøderne Dahl

m. RWD App

COOP

GLOBAL

Brøderne Dahl

TAK :)

Rapporten: Slideshare:

VIL DU VIDE MERE?

Henning Nielsen Senior UX Konsultent

E-mail: hni@vertica.dk

Tlf. 60 15 10 85 Linkedin.com/in/henningnielsen

Twitter.com/henningnielsen

Pia Schøtt Gregersen User Experience-Konsulent

E-mail: pgr@vertica.dk

Tlf. 41 17 03 77 Linkedin.com/in/piaschoett

Twitter.com/piaschoett

http://www.vertica.dk/nyheder/whitepapers/mobil-ehandel

http://slideshare.net/henningnielsen