Mobile guldkorn - oplæg på UX Camp CPH
•
1 like•1,101 views
40 mobile e-handelssites gennemgået - de vigtigste resultater
Mobile guldkorn - oplæg på UX Camp CPH
- 1. MOBILE GULDKORN UX Camp CPH HENNING NIELSEN SENIOR UX-KONSULENT, VERTICA JENS HOFMAN HANSEN DIGITAL FORRETNINGSUDVIKLER, VERTICA
- 3. 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.co m 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
- 4. HEADER § Logo § Menu § Kurv § Søgefelt 40 af 40 34 af 40 32 af 40 24 af 40
- 5. ANDRE ELEMENTER § Login § Profil § Find butik § Ønskeliste § Huskeliste HEADER
- 6. STICKY HEADER På 7 af 40 sites
- 7. BURGERMENU Genkendelig for mange, MEN ikke et vidundermiddel
- 8. SPØRGSMÅL § Hvor mange har brugt burgermenuen i et projekt? § Hvor mange har splittestet om det er den bedste løsning?
- 9. BURGERMENU SPLITTEST #1 WHICH TEST WON #2 http://exisweb.net/mobile-menu-abtestBlogindlæg:
- 10. Crate & Barrel BURGERMENU Sommer 2013 Forår 2014
- 11. LOGO Ofte placeret til venstre eller i midten. Fungere som link til forsiden.
- 12. LOGO + MENU
- 13. KURV Anbefaling til valg af ikon: #1: Indkøbsvogn #2: Indkøbskurv
- 14. SØGNING 35 af 40 netbutikker anvender søgning 32 af 40 netbutikker har søgefeltet i headeren z
- 15. 23 af 29 søgefelter er synlige 6 af 29 søgefelter er skjulte SØGNING 29 af 40 netbutikker har et søgefelt med fuld bredde
- 16. INSPIRATION En gennemgående tendens for de mobile netbutikker er at grafiske elementer er nedtonet. Fokus på findability.
- 17. Er det en god ide at ”slanke” forsiden på denne måde?
- 18. ON-PAGE-NAVIGATION Giver kunderne et godt overblik over hvad de kan forvente at finde i butikken. NAVIGATION Hm.com
- 19. ON-PAGE-NAVIGATION Gør det let at opdage og finde ting på den lille skærm. NAVIGATION Nike.com
- 20. OFF-CANVAS NAVIGATION Hvis burgermenuen er placeret til venstre anvendes ofte off-canvas-navigation
- 21. OVERLAY NAVIGATION Bruges ofte på websider baseret på Twitter bootstrap. Derfor genkendelig fra mange blogs og websites med responsive design.
- 23. OPSUMMERING AF OBSERVATIONER § Forsiden på mobilen er slanket ift. desktop. § IKKE en designskabelon til mobile netbutikker. MOBIL E-HANDEL
- 24. KATEGORISIDE § Gallerivisning og listevisning anvendes stort set lige meget § Få informationer: gallerivisning § Mange informationer: listevisning
- 25. § Basisopbygning med: Billede, navn og pris. § Udvidet opbygning med: Rating, brand, tilbud, førpris og forsendelsesinformationer. KATEGORISIDE
- 26. 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
- 28. FILTRERING OG SORTERING 20 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.
- 29. Filtrering og sortering Smartguy.dk Sortering via ”picker” Filtrering på en side for sig.
- 30. 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.
- 31. Placering af Læg i kurv knap: § Grøn streg: iPhone 4 § Blå streg: iPhone 5
- 32. INDKØBSKURV § Ofte samme info som på desktop § Produkter § Leverings- og købsbetingelser § Fragtinformation § Kundeservice § Relaterede produkter § Sidst sete produkter
- 33. TUNNEL-DESIGN I PRAKSIS § Fjern menu, søgefelt, huskeliste, kurv m.m. § Tilføj trin-indikator og kundeservice. CHECK-OUT
- 34. 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.
- 35. Vil du vide mere? § Hent hele rapporten på http://Blog.vertica.dk/2013/10/09/dos- and-donts-inden-for-mobil-e- handel-2013/
- 36. TAK :) HENNING NIELSEN SENIOR UX-KONSULENT, VERTICA @henningnielsen JENS HOFMAN HANSEN http://www.slideshare.net/jenshofman/ DIGITAL FORRETNINGSUDVIKLER, VERTICA