MOBIL E-HANDEL - UX meetup - Februar 2014
- 1. MOBIL E-HANDEL FEBRUAR 2014 HENNING NIELSEN SENIOR UX KONSULENT, VERTICA
- 2. MOBIL E-HANDEL AGENDA Konventioner Mobil e-handel PAUSE Konventioner og deres rolle i designpraksis
- 3. KONVENTIONER Uskrevene regler og normer Relaterer sig til usability og user experience design Skaber genkendelighed og sikrer at vi im淡dekommer brugerens forventninger til designet og interaktionsmuligheder Nielsen: Standarder (Mere end 80%) Konventioner (Mere end 50%) Forvirring (Mindre end 50%)
- 7. HEADER Logo Menu Kurv S淡gefelt 40 af 40 34 af 40 32 af 40 24 af 40
- 9. STICKY HEADER P奪 7 af 40 sites
- 10. BURGERMENU Genkendelig for mange, MEN ikke et vidundermiddel
- 11. SPRGSML Hvor mange har brugt burgermenuen i et projekt? Hvor mange har splittestet om det er den bedste l淡sning?
- 12. WHICH TEST WON BURGERMENU SPLITTEST #1 #2 Blogindl脱g: http://exisweb.net/mobile-menu-abtest
- 13. BURGERMENU Crate & Barrel Sommer 2013 For奪r 2014
- 14. LOGO Ofte placeret til venstre eller i midten. Fungere som link til forsiden.
- 15. LOGO + MENU
- 16. KURV Anbefaling til valg af ikon: #1: Indk淡bsvogn #2: Indk淡bskurv
- 17. z SGNING 35 af 40 netbutikker anvender s淡gning 32 af 40 netbutikker har s淡gefeltet i headeren
- 18. SGNING 29 af 40 netbutikker har et s淡gefelt med fuld bredde 23 af 29 s淡gefelter er synlige 6 af 29 s淡gefelter er skjulte
- 19. INSPIRATION En gennemg奪ende tendens for de mobile netbutikker er at grafiske elementer er nedtonet. Fokus p奪 findability.
- 20. NAVIGATION Header menu Produktkategorier og servicenavigation On-page navigation Produktkategorier Footer navigation Ofte kundeservice, hj脱lp, betingelser m.m.
- 21. NAVIGATION OFF-CANVAS Hvis burgermenuen er placeret til venstre anvendes ofte off-canvas-navigation
- 22. NAVIGATION OVERLAY Bruges ofte p奪 websider baseret p奪 Twitter bootstrap. Derfor genkendelig fra mange blogs og websites med responsive design.
- 23. NAVIGATION ON-PAGE-NAVIGATION Giver kunderne et godt overblik over hvad de kan forvente at finde i butikken. Hm.com
- 24. NAVIGATION ON-PAGE-NAVIGATION G淡r det let at opdage og finde ting p奪 den lille sk脱rm. Nike.com
- 27. NAVIGATION FOLD-UD / FOLD-IND Macys.com De forskellige navigationsformer kan kombineres med fold-ud/fold-ind-navigation for at reduceret antallet af sideskift.
- 28. NAVIGATION FOLD-UD / FOLD-IND + Fold ud - Fold ind > Navigere til ny side
- 29. NAVIGATION TILBAGE-PIL 9 af 40 netbutikker anvender en tilbage-knap p奪 siden Anbefaling: Modsat unders淡gelsens resultat anbefaler vi at t脱nke en tilbage-knap ind i designet.
- 30. NAVIGATION BRDKRUMMESTI Ofte nedprioriteret p奪 mobil Opg淡r med traditionel e-handel 25 af 40 netbutikker anvender ikke en br淡dkrummesti
- 31. NAVIGATION FOOTER Smartguy.dk Macys.com Kundeservice, kontakinformation, salgsbetingelser, sociale links, datapolitik, log ind, download app, indk淡bskurv og link til desktop ses ofte i footeren.
- 32. MOBIL E-HANDEL OPSUMMERING AF OBSERVATIONER Forsiden p奪 mobilen er slanket ift. desktop. IKKE en designskabelon til mobile netbutikker.
- 33. KATEGORISIDE Gallerivisning og listevisning anvendes stort set lige meget F奪 information: gallerivisning Mange information: listevisning
- 34. KATEGORISIDE Basisopbygning med: Billede, navn og pris. Udvidet opbygning med: Rating, brand, tilbud, f淡rpris og forsendelsesinformationer.
- 35. KATEGORISIDE LG I KURV Kun f奪 netbutikker med L脱g i kurv knapper p奪 kategorisiderne Fungere godt til dagligvarer hvor man let kan handle fra en liste Fungere knap s奪 godt p奪 varer der kr脱ver flere overvejelser
- 36. FILTRERING OG SORTERING 20 af 40 6 af 40 7 af 40 netbutikker har b奪de filtrering og sortering. netbutikker har kun filtrering. 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.
- 37. Filtrering og sortering Smartguy.dk Sortering via picker Filtrering p奪 en side for sig.
- 38. PRODUKTDETALJESIDE LG 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.
- 39. Placering af L脱g i kurv knap: Gr淡n streg: iPhone 4 Bl奪 streg: iPhone 5
- 40. PRODUKTDETALJESIDE Ekstra Ratings, sociale links, relaterede produkter osv. anvendes i h淡j grad p奪 produktdetaljesiderne
- 41. INDKBSKURV Ofte samme info som p奪 desktop Produkter Leverings- og k淡bsbetingelser Fragtinformation Kundeservice Relaterede produkter Sidst sete produkter
- 42. CHECK-OUT Sideskift efter hvert step 31 af 40 One-page check-out 5 af 40 Ingen data 4 af 40
- 43. CHECK-OUT TUNNEL-DESIGN Med tunnel-design 23 af 40 Uden tunnel-design 11 af 40 Ingen data 6 af 40 Anbefaling: Skabe et fokuseret tunnel-design s奪 snart kunden forlader kurven og begynder sit check-out.
- 44. CHECK-OUT TUNNEL-DESIGN I PRAKSIS V脱k med menu, s淡gefelt, huskeliste, kurv m.m. (Alt der fjerne fokus fra selve check-out) Ind med progress steps og kundeservice. (Skab overblik og tryghed)
- 45. TAK :)
- 46. DOWNLOAD RAPPORTEN DOS AND DONTS INDEN FOR MOBIL E-HANDEL 2013 Blog.vertica.dk/2013/10/09/dos-and-donts-inden-for-mobile-handel-2013/ HENNING NIELSEN SENIOR UX KONSULENT, VERTICA hni@vertica.dk Twitter.com/henningnielsen Linkedin.com/in/henningnielsen 際際滷share.net/henningnielsen