Upload
henningnielsen
View
360
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
MOBIL E-HANDELFEBRUAR 2014
HENNING NIELSENSENIOR UX KONSULENT, VERTICA
AGENDA Konventioner Mobil e-handel PAUSE Konventioner og deres rolle i
designpraksis
MOBIL E-HANDEL
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%)
E-HANDEL FLYTTER OVER PÅ MOBILEN
40 MOBILE NETBUTIKKER
40 MOBILE NETBUTIKKER
1800contacts.com
m.autozone.com
m.nike.com
amazon.com
m.billetlugen.dk
m.onlinegolf.co.uk
barnesandnoble.com
m.crateandbarrel.co
m
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.d
k
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
HEADER Logo Menu Kurv Søgefelt
40 af 4034 af 4032 af 4024 af 40
ANDRE ELEMENTER Login Profil Find butik Ønskeliste Huskeliste
HEADER
STICKY HEADER
På 7 af 40 sites
BURGERMENU
Genkendelig for mange, MEN ikke et vidundermiddel
SPØRGSMÅL Hvor mange har brugt
burgermenuen i et projekt?
Hvor mange har splittestet om det er den bedste løsning?
BURGERMENU SPLITTEST#1
WHICH TEST WON
#2
http://exisweb.net/mobile-menu-abtestBlogindlæg:
Crate & Barrel
BURGERMENU
Sommer 2013 Forår 2014
LOGO
Ofte placerettil venstreeller i midten.
Fungere som link til forsiden.
LOGO + MENU
KURVAnbefaling til valg af ikon:
#1: Indkøbsvogn
#2: Indkøbskurv
SØGNING35 af 40 netbutikker
anvender søgning
32 af 40 netbutikker har
søgefeltet i headeren
z
23 af 29 søgefelter er
synlige
6 af 29søgefelter er
skjulte
SØGNING
29 af 40 netbutikker har et søgefelt med fuld bredde
INSPIRATIONEn gennemgående tendens for de mobile netbutikker er at grafiske elementer er nedtonet.
Fokus på findability.
NAVIGATION Header menu
Produktkategorier og servicenavigation
On-page navigation Produktkategorier
Footer navigation Ofte kundeservice, hjælp, betingelser
m.m.
OFF-CANVAS
NAVIGATION
Hvis
burgermenuen
er placeret til
venstre
anvendes ofte
off-canvas-
navigation
OVERLAY
NAVIGATION
Bruges ofte på websider baseret på Twitter bootstrap.
Derfor genkendelig fra mange blogs og websites med responsive design.
ON-PAGE-NAVIGATION
Giver kunderne et godt overblik over hvad de kan forvente at finde i butikken.
NAVIGATION
Hm.com
ON-PAGE-NAVIGATION
Gør det let at opdage og finde ting på den lille skærm.
NAVIGATION
Nike.com
FANER
Ofte målrettet en kundegruppe.
NAVIGATION
Zalando.dk
FANER
Gør fanerne tydelige
NAVIGATION
Asos.com
FOLD-UD / FOLD-IND
De forskellige navigationsformer kan kombineres med fold-ud/fold-ind-navigation for at reduceret antallet af sideskift.
NAVIGATION
Macys.com
FOLD-UD / FOLD-IND
+ Fold ud- Fold ind> Navigere til ny side
NAVIGATION
TILBAGE-PIL
Anbefaling: Modsat undersøgelsens resultat anbefaler vi at tænke en tilbage-knap ind i designet.
NAVIGATION
9 af 40 netbutikker anvender en tilbage-knap
på siden
BRØDKRUMMESTI
Ofte nedprioriteret på mobil
Opgør med traditionel e-handel
NAVIGATION
25 af 40 netbutikker
anvender ikke en
brødkrummesti
FOOTER
Kundeservice, kontakinformation, salgsbetingelser, sociale links, datapolitik, log ind, download app, indkøbskurv og link til desktop ses ofte i footeren.
NAVIGATION
Smartguy.dk Macys.com
OPSUMMERING AF OBSERVATIONER Forsiden på mobilen
er slanket ift. desktop.
IKKE en designskabelon til mobile netbutikker.
MOBIL E-HANDEL
KATEGORISIDE Gallerivisning og listevisning
anvendes stort set lige meget
Få information: gallerivisning
Mange information: listevisning
Basisopbygning med: Billede, navn og pris.
Udvidet opbygning med: Rating, brand, tilbud, førpris og forsendelsesinformationer.
KATEGORISIDE
LÆG 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
KATEGORISIDE
FILTRERING OG SORTERING20 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.
Filtrering og sortering
Smartguy.dk
Sortering via
”picker”
Filtrering på en side for sig.
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.
Placering afLæg i kurv knap:
Grøn streg: iPhone 4
Blå streg: iPhone 5
Ekstra Ratings, sociale links, relaterede produkter osv. anvendes i høj grad på produkt-detaljesiderne
PRODUKTDETALJESIDE
INDKØBSKURV Ofte samme info som på desktop
Produkter Leverings- og købsbetingelser Fragtinformation Kundeservice Relaterede produkter Sidst sete produkter
CHECK-OUT Sideskift efter hvert
step
One-page check-out
Ingen data
31 af 40
5 af 40
4 af 40
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.
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)
CHECK-OUT
TAK :)
HENNING NIELSENSENIOR UX KONSULENT, [email protected]
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
DOWNLOAD RAPPORTENDO’S AND DONT’S INDEN FOR MOBIL E-HANDEL 2013
Blog.vertica.dk/2013/10/09/dos-and-donts-inden-for-mobil-e-handel-2013/
Slideshare.net/henningnielsen