Mobile guldkorn v.2 - SIGCHI

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

2. Agenda
§ 16.40 Oplæg: Mobile guldkorn
§ 17.25 Pause
§ 17.45 Oplæg: Egne løsninger
§ 18.30 Sandwich + drikke

3. Hvem er vi?
Henning Nielsen
Senior
UX Konsultent
hni@vertica.dk
Pia Schøtt Gregersen
User Experience-
Konsulent
pgr@vertica.dk

4. 40 MOBILE
NETBUTIKKER
2013 & 2014

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

6. FORSIDE-ELEMENTER

7. HEADER
§ Logo
§ Menu
§ Kurv
§ Søgefelt
40 af 40
34 af 40
32 af 40
33 af 40

8. HEADER
ANDRE ELEMENTER
§ Login
§ Profil
§ Find butik
§ Ønskeliste
§ Huskeliste

9. STICKY HEADER
9 af 40 sites

10. BURGERMENU
Genkendelig for mange,
MEN ikke et vidundermiddel
20 af 40 sites

11. SPØRGSMÅL
§ Hvor mange har brugt burgermenuen
i et projekt?
§ Hvor mange har splittestet om det er
den bedste løsning?

12. EXISWEB
BURGERMENU SPLITTEST
#1
#2
http://exisweb.net/Blogindlæg: mobile-menu-abtest

13. BOOKING.COM
BURGERMENU SPLITTEST
ORIGINAL
VARIATION
http://blog.booking.com/Blogindlæg: hamburger-menu.html

14. BURGERMENU
Crate & Barrel
Sommer 2013 Sommer 2014

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

17. LOGO + MENU

18. KURV
Anbefaling til valg
af ikon:
#1: Indkøbsvogn
#2: Indkøbskurv

19. SØGNING
35 af 40
Netbutikker har
søgning
33 af de 35
Placerer søgefeltet i
headeren

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

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

22. NAVIGATION
ON-PAGE-NAVIGATION
Hm.dk Veromoda.dk

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

24. NAVIGATION
OFF-CANVAS MENU
Hvis menu’en er
placeret til venstre
anvendes ofte
off-canvas-navigation
Wupti.com

25. NAVIGATION
OVERLAY
Kaufmann.dk

26. NAVIGATION
FANER
Ofte målrettet en
kundegruppe.
Zalando.dk

27. NAVIGATION
FANER
OFF-CANVAS
Asos.com

28. NAVIGATION
FOOTER
Veromoda.dk

29. MOBIL E-HANDEL
OPSUMMERING AF OBSERVATIONER
§ Forsiden på mobilen er
slanket ift. desktop.
§ IKKE en designskabelon
til mobile netbutikker.

30. ANDRE SIDER & ELEMENTER

31. Kategorisider
Kaufmann.dk Amazon.com

32. KATEGORISIDE
LÆG I KURV
§ Kun få netbutikker med Læg i kurv-knapper
på kategorisiderne
Læg
i
kurv
§ Fungerer godt til dagligvarer, hvor
man let kan handle fra en liste
§ Fungerer knap så godt på varer, der
kræver flere overvejelser

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

34. Filtrering og sortering
Stylepit.dk
Sortering via
”picker”
Filtrering overtager
skærmen

35. PRODUKTDETALJESIDE
§ Stort produktbillede
§ LÆG I KURV knap
§ Over eller under folden?
§ 1 eller 2 knapper?
§ Produktdetaljer

36. Placering af
Læg i kurv knap:
§ Grøn streg:
iPhone 4
§ Blå streg:
iPhone 5

37. LÆG I KURV INTERAKTION PÅ PRODUKTDETALJESIDEN
Ellos.com
Nike.com
Macys.com

38. INDKØBSKURV
§ Ofte samme info som på desktop
§ Produkter
§ Leverings- og købsbetingelser
§ Fragtinformation
§ Kundeservice
§ Relaterede produkter
§ Sidst sete produkter

39. CHECK-OUT
TUNNEL-DESIGN
§ Fjern menu, søgefelt,
huskeliste, kurv m.m.
§ Tilføj trin-indikator og
kundeservice.

40. CHECK-OUT
TUNNEL-DESIGN
§ Med tunnel-design
§ Uden tunnel-design
§ Ingen data
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.

41. PAUSE

42. Mobile løsninger
§ COOP
§ GLOBAL
§ Brøderne Dahl
m.
RWD
App

43. COOP

44. GLOBAL

45. Brøderne Dahl

46. TAK :)

47. 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
Rapporten:
Slideshare:
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