Konventioner i mobil e-handel

Transkript

1 Konventioner i mobil e-handel J Boye Erfa 17. juni 2014 JENS HOFMAN HANSEN DIGITAL FORRETNINGSUDVIKLER, VERTICA

2 40 MOBILE NETBUTIKKER

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 af af af 40

5 HEADER ANDRE ELEMENTER Login Profil Find butik Ønskeliste Huskeliste

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 WHICH TEST WON BURGERMENU SPLITTEST #1 #2 Blogindlæg:

10 BURGERMENU Crate & Barrel 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 z SØGNING 35 af 40 netbutikker anvender søgning 32 af 40 netbutikker har søgefeltet i headeren

15 SØGNING 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

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 NAVIGATION ON-PAGE-NAVIGATION Giver kunderne et godt overblik over hvad de kan forvente at finde i butikken. Hm.com

19 NAVIGATION ON-PAGE-NAVIGATION Gør det let at opdage og finde ting på den lille skærm. Nike.com

20 NAVIGATION OFF-CANVAS Hvis burgermenuen er placeret til venstre anvendes ofte off-canvas-navigation

21 NAVIGATION OVERLAY Bruges ofte på websider baseret på Twitter bootstrap. Derfor genkendelig fra mange blogs og websites med responsive design.

22 NAVIGATION FANER Ofte målrettet en kundegruppe. Zalando.dk

23 MOBIL E-HANDEL OPSUMMERING AF OBSERVATIONER Forsiden på mobilen er slanket ift. desktop. IKKE en designskabelon til mobile netbutikker.

24 KATEGORISIDE Gallerivisning og listevisning anvendes stort set lige meget Få informationer: gallerivisning Mange informationer: listevisning

25 KATEGORISIDE Basisopbygning med: Billede, navn og pris. Udvidet opbygning med: Rating, brand, tilbud, førpris og forsendelsesinformationer.

26 KATEGORISIDE LÆG I KURV Kun få netbutikker med Læg i kurvknapper 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

27 FILTRERING OG SORTERING

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 CHECK-OUT TUNNEL-DESIGN I PRAKSIS Fjern menu, søgefelt, huskeliste, kurv m.m. Tilføj trin-indikator og kundeservice.

34 CHECK-OUT TUNNEL-DESIGN Med tunnel-design Uden tunnel-design Ingen data 23 af 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å

36 JENS HOFMAN HANSEN DIGITAL FORRETNINGSUDVIKLER, VERTICA TAK :)