mobile guldkorn v.2 - sigchi
DESCRIPTION
Mobile guldkorn v.2 - SIGCHITRANSCRIPT
![Page 1: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/1.jpg)
OKTOBER 2014 MOBILE GULDKORN v.2 PIA SCHØTT GREGERSEN & HENNING NIELSEN
![Page 2: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/2.jpg)
Agenda
§ 16.40 Oplæg: Mobile guldkorn
§ 17.25 Pause
§ 17.45 Oplæg: Egne løsninger
§ 18.30 Sandwich + drikke
![Page 3: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/3.jpg)
Hvem er vi?
Henning Nielsen Senior
UX Konsultent [email protected]
Pia Schøtt Gregersen User Experience-
Konsulent [email protected]
![Page 4: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/4.jpg)
40 MOBILE NETBUTIKKER
2013 & 2014
![Page 5: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/5.jpg)
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
![Page 6: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/6.jpg)
FORSIDE-ELEMENTER
![Page 7: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/7.jpg)
HEADER § Logo § Menu § Kurv § Søgefelt
40 af 40 34 af 40 32 af 40 33 af 40
![Page 8: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/8.jpg)
ANDRE ELEMENTER § Login § Profil § Find butik § Ønskeliste § Huskeliste
HEADER
![Page 9: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/9.jpg)
STICKY HEADER
9 af 40 sites
![Page 10: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/10.jpg)
BURGERMENU
Genkendelig for mange, MEN ikke et vidundermiddel
20 af 40 sites
![Page 11: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/11.jpg)
SPØRGSMÅL § Hvor mange har brugt burgermenuen
i et projekt?
§ Hvor mange har splittestet om det er den bedste løsning?
![Page 12: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/12.jpg)
BURGERMENU SPLITTEST
#1
EXISWEB
#2
http://exisweb.net/mobile-menu-abtest Blogindlæg:
![Page 13: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/13.jpg)
BURGERMENU SPLITTEST
BOOKING.COM
ORIGINAL
VARIATION
http://blog.booking.com/hamburger-menu.html Blogindlæg:
![Page 14: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/14.jpg)
Crate & Barrel
BURGERMENU
Sommer 2013 Sommer 2014
![Page 15: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/15.jpg)
![Page 16: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/16.jpg)
LOGO Ofte placeret til venstre eller i midten. Fungere som link til forsiden.
![Page 17: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/17.jpg)
LOGO + MENU
![Page 18: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/18.jpg)
KURV Anbefaling til valg af ikon:
#1: Indkøbsvogn
#2: Indkøbskurv
![Page 19: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/19.jpg)
SØGNING 35 af 40
Netbutikker har søgning
33 af de 35 Placerer søgefeltet i
headeren
![Page 20: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/20.jpg)
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
![Page 21: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/21.jpg)
ON-PAGE-NAVIGATION Gør det let at opdage og finde ting på den lille skærm.
NAVIGATION
Nike.com
![Page 22: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/22.jpg)
ON-PAGE-NAVIGATION
NAVIGATION
Hm.dk Veromoda.dk
![Page 23: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/23.jpg)
INSPIRATION En gennemgående tendens for de mobile netbutikker er at grafiske elementer er nedtonet. Fokus på findability.
Kaufmann.dk
![Page 24: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/24.jpg)
OFF-CANVAS MENU
NAVIGATION
Hvis menu’en er placeret til venstre anvendes ofte off-canvas-navigation
Wupti.com
![Page 25: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/25.jpg)
OVERLAY
NAVIGATION
Kaufmann.dk
![Page 26: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/26.jpg)
FANER
Ofte målrettet en kundegruppe.
NAVIGATION
Zalando.dk
![Page 27: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/27.jpg)
FANER OFF-CANVAS
NAVIGATION
Asos.com
![Page 28: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/28.jpg)
FOOTER
NAVIGATION
Veromoda.dk
![Page 29: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/29.jpg)
OPSUMMERING AF OBSERVATIONER
§ Forsiden på mobilen er slanket ift. desktop.
§ IKKE en designskabelon til mobile netbutikker.
MOBIL E-HANDEL
![Page 30: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/30.jpg)
ANDRE SIDER & ELEMENTER
![Page 31: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/31.jpg)
Kategorisider
Amazon.com Kaufmann.dk
![Page 32: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/32.jpg)
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
![Page 33: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/33.jpg)
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.
![Page 34: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/34.jpg)
Filtrering og sortering
Stylepit.dk
Sortering via ”picker”
Filtrering overtager skærmen
![Page 35: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/35.jpg)
PRODUKTDETALJESIDE
§ Stort produktbillede
§ LÆG I KURV knap § Over eller under folden? § 1 eller 2 knapper?
§ Produktdetaljer
![Page 36: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/36.jpg)
Placering af Læg i kurv knap:
§ Grøn streg: iPhone 4
§ Blå streg: iPhone 5
![Page 37: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/37.jpg)
LÆG I KURV INTERAKTION PÅ PRODUKTDETALJESIDEN
Ellos.com
Nike.com
Macys.com
![Page 38: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/38.jpg)
INDKØBSKURV § Ofte samme info som på desktop
§ Produkter § Leverings- og købsbetingelser § Fragtinformation § Kundeservice § Relaterede produkter § Sidst sete produkter
![Page 39: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/39.jpg)
CHECK-OUT TUNNEL-DESIGN
§ Fjern menu, søgefelt, huskeliste, kurv m.m.
§ Tilføj trin-indikator og kundeservice.
![Page 40: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/40.jpg)
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.
![Page 41: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/41.jpg)
PAUSE
![Page 42: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/42.jpg)
Mobile løsninger § COOP § GLOBAL § Brøderne Dahl
m. RWD App
![Page 43: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/43.jpg)
COOP
![Page 44: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/44.jpg)
GLOBAL
![Page 45: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/45.jpg)
Brøderne Dahl
![Page 46: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/46.jpg)
TAK :)
![Page 47: Mobile guldkorn v.2 - SIGCHI](https://reader033.vdocuments.net/reader033/viewer/2022052905/55857033d8b42a512c8b4a0f/html5/thumbnails/47.jpg)
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