MOBIL E-HANDEL - UX meetup - Februar 2014

MOBIL E-HANDELFEBRUAR 2014

HENNING NIELSENSENIOR UX KONSULENT, VERTICA

AGENDA Konventioner Mobil e-handel PAUSE Konventioner og deres rolle i

designpraksis

MOBIL E-HANDEL

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%)

E-HANDEL FLYTTER OVER PÅ MOBILEN

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

m

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

k

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

HEADER Logo Menu Kurv Søgefelt

40 af 4034 af 4032 af 4024 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-abtestBlogindlæg:

Crate & Barrel

BURGERMENU

Sommer 2013 Forår 2014

LOGO

Ofte placerettil venstreeller i midten.

Fungere som link til forsiden.

LOGO + MENU

KURVAnbefaling til valg af ikon:

#1: Indkøbsvogn

#2: Indkøbskurv

SØGNING35 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 29søgefelter er

skjulte

SØGNING

29 af 40 netbutikker har et søgefelt med fuld bredde

INSPIRATIONEn gennemgående tendens for de mobile netbutikker er at grafiske elementer er nedtonet.

Fokus på findability.

NAVIGATION Header menu

Produktkategorier og servicenavigation

On-page navigation Produktkategorier

Footer navigation Ofte kundeservice, hjælp, betingelser

m.m.

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.

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

FANER

Ofte målrettet en kundegruppe.

NAVIGATION

Zalando.dk

FANER

Gør fanerne tydelige

NAVIGATION

Asos.com

FOLD-UD / FOLD-IND

De forskellige navigationsformer kan kombineres med fold-ud/fold-ind-navigation for at reduceret antallet af sideskift.

NAVIGATION

Macys.com

FOLD-UD / FOLD-IND

+ Fold ud- Fold ind> Navigere til ny side

NAVIGATION

TILBAGE-PIL

Anbefaling: Modsat undersøgelsens resultat anbefaler vi at tænke en tilbage-knap ind i designet.

NAVIGATION

9 af 40 netbutikker anvender en tilbage-knap

på siden

BRØDKRUMMESTI

Ofte nedprioriteret på mobil

Opgør med traditionel e-handel

NAVIGATION

25 af 40 netbutikker

anvender ikke en

brødkrummesti

FOOTER

Kundeservice, kontakinformation, salgsbetingelser, sociale links, datapolitik, log ind, download app, indkøbskurv og link til desktop ses ofte i footeren.

NAVIGATION

Smartguy.dk Macys.com

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å information: gallerivisning

Mange information: 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

Fungere godt til dagligvarer hvor man let kan handle fra en liste

Fungere knap så godt på varer der kræver flere overvejelser

KATEGORISIDE

FILTRERING OG SORTERING20 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 afLæg i kurv knap:

Grøn streg: iPhone 4

Blå streg: iPhone 5

Ekstra Ratings, sociale links, relaterede produkter osv. anvendes i høj grad på produkt-detaljesiderne

PRODUKTDETALJESIDE

INDKØBSKURV Ofte samme info som på desktop

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

CHECK-OUT Sideskift efter hvert

step

One-page check-out

Ingen data

31 af 40

5 af 40

4 af 40

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.

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)

CHECK-OUT

TAK :)

HENNING NIELSENSENIOR UX KONSULENT, VERTICAhni@vertica.dk

Twitter.com/henningnielsen

Linkedin.com/in/henningnielsen

DOWNLOAD RAPPORTENDO’S AND DONT’S INDEN FOR MOBIL E-HANDEL 2013

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

Slideshare.net/henningnielsen