Standarder og trends i mobil e-handel 2014
-
Upload
jens-hofman-hansen -
Category
Design
-
view
187 -
download
1
description
Transcript of Standarder og trends i mobil e-handel 2014
![Page 1: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/1.jpg)
MOBILE GULDKORN Juni 2014
JENS HOFMAN HANSEN & HENNING NIELSEN
![Page 2: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/2.jpg)
40 MOBILE NETBUTIKKER
![Page 3: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/3.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
m.momondo.dk
aarstiderne.com
m.asos.com
m.stylepit.dk
etzy.com
jysk.dk
homedepot.com
wupti.com
![Page 4: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/4.jpg)
TRENDS
KONVENTIONER
![Page 5: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/5.jpg)
HEADER § Logo § Menu § Kurv § Søgefelt
40 af 40 34 af 40 32 af 40 24 af 40
![Page 6: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/6.jpg)
ANDRE ELEMENTER § Login § Profil § Find butik § Ønskeliste § Huskeliste
HEADER
![Page 7: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/7.jpg)
STICKY HEADER
2013: På 7 af 40 sites 2014: På 9 af 40 sites
![Page 8: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/8.jpg)
BURGERMENU
Genkendelig for mange, MEN ikke et vidundermiddel
![Page 9: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/9.jpg)
SPØRGSMÅL § Hvor mange har brugt burgermenuen
i et projekt?
§ Hvor mange har splittestet om det er den bedste løsning?
![Page 10: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/10.jpg)
BURGERMENU SPLITTEST
#1
WHICH TEST WON
#2
http://exisweb.net/mobile-menu-abtest Blogindlæg:
![Page 11: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/11.jpg)
Crate & Barrel
BURGERMENU
Sommer 2013 Sommer 2014
![Page 12: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/12.jpg)
LOGO Ofte placeret til venstre eller i midten. Fungere som link til forsiden.
![Page 13: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/13.jpg)
LOGO + MENU
![Page 14: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/14.jpg)
KURV Anbefaling til valg af ikon:
#1: Indkøbsvogn
#2: Indkøbskurv
![Page 15: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/15.jpg)
SØGNING 35 af 40
netbutikker anvender søgning
33 af 40 netbutikker har
søgefeltet placeret ved headeren
z
![Page 16: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/16.jpg)
5 af 33 søgefelter er skjulte
bag en knap
4 af 29 søgefelter findes i off-canvas menu
SØGNING
24 af 33 søgefelter i headeren er synlige direkte i headeren
![Page 17: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/17.jpg)
INSPIRATION En gennemgående tendens for de mobile netbutikker er at grafiske elementer er nedtonet. Fokus på findability.
![Page 18: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/18.jpg)
Er det en god ide at ”slanke” forsiden på denne måde?
![Page 19: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/19.jpg)
ON-PAGE-NAVIGATION Giver kunderne et godt overblik over hvad de kan forvente at finde i butikken.
NAVIGATION
Spartoo.dk
![Page 20: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/20.jpg)
ON-PAGE-NAVIGATION Gør det let at opdage og finde ting på den lille skærm.
NAVIGATION
Nike.com
![Page 21: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/21.jpg)
OFF-CANVAS
NAVIGATION
Hvis burgermenuen er placeret til venstre anvendes ofte off-canvas-navigation
![Page 22: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/22.jpg)
OVERLAY
NAVIGATION
Bruges ofte på websider baseret på Twitter bootstrap. Derfor genkendelig fra mange blogs og websites med responsive design.
![Page 23: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/23.jpg)
FANER
Ofte målrettet en kundegruppe.
NAVIGATION
Zalando.dk
![Page 24: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/24.jpg)
OPSUMMERING AF OBSERVATIONER
§ Forsiden på mobilen er slanket ift. desktop.
§ IKKE en designskabelon til mobile netbutikker.
MOBIL E-HANDEL
![Page 25: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/25.jpg)
KATEGORISIDE § Gallerivisning og listevisning anvendes
stort set lige meget
§ Få informationer: gallerivisning
§ Mange informationer: listevisning
![Page 26: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/26.jpg)
§ Basisopbygning med: Billede, navn og pris.
§ Udvidet opbygning med: Rating, brand, tilbud, førpris og forsendelsesinformationer.
KATEGORISIDE
![Page 27: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/27.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
![Page 28: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/28.jpg)
FILTRERING OG SORTERING
![Page 29: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/29.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 30: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/30.jpg)
Filtrering og sortering
Stylepit.dk
Sortering via ”picker”
(2014: 50%)
Filtrering på en side for sig.
![Page 31: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/31.jpg)
PRODUKTDETALJESIDE § LÆG I KURV knap
§ 18 af 40 sider har knappen ”over folden” i 2014 = fordobling
§ Anbefaling: 2 Læg i kurv knapper. Én efter produktbilledet og én igen efter produktdetaljer.
![Page 32: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/32.jpg)
Placering af Læg i kurv knap:
§ Grøn streg: iPhone 4
§ Blå streg: iPhone 5
![Page 33: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/33.jpg)
INDKØBSKURV § Ofte samme info som på desktop
§ Produkter § Leverings- og købsbetingelser § Fragtinformation § Kundeservice § Relaterede produkter § Sidst sete produkter
![Page 34: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/34.jpg)
TUNNEL-DESIGN I PRAKSIS § Fjern menu, søgefelt,
huskeliste, kurv m.m.
§ Tilføj trin-indikator og kundeservice.
CHECK-OUT
![Page 35: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/35.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 36: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/36.jpg)
Vil du vide mere? § Hent hele rapporten på
http://blog.vertica.dk/2014/06/27/standarder-og-trends-i-mobil-e-handel-2014/#more-2564
![Page 37: Standarder og trends i mobil e-handel 2014](https://reader031.fdocuments.us/reader031/viewer/2022020207/559bb6151a28ab80538b465d/html5/thumbnails/37.jpg)
http://www.slideshare.net/jenshofman/
TAK :)