OKTOBER 2014 MOBILE GULDKORN v.2 PIA SCHØTT GREGERSEN & HENNING NIELSEN
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 [email protected]
Pia Schøtt Gregersen User Experience-
Konsulent [email protected]
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: [email protected]
Tlf. 60 15 10 85 Linkedin.com/in/henningnielsen
Twitter.com/henningnielsen
Pia Schøtt Gregersen User Experience-Konsulent
E-mail: [email protected]
Tlf. 41 17 03 77 Linkedin.com/in/piaschoett
Twitter.com/piaschoett
http://www.vertica.dk/nyheder/whitepapers/mobil-ehandel
http://slideshare.net/henningnielsen