STANDARDER OG TRENDS I MOBIL E-HANDEL 2014

Transkript

1 STANDARDER OG TRENDS I MOBIL E-HANDEL 2014 GUIDELINES TIL DIG DER VIL ETABLERE ELLER FORBEDRE MOBIL E-HANDEL ET WHITEPAPER AF HENNING NIELSEN, PIA SCHØTT GREGERSEN OG JENS HOFMAN HANSEN FRA VERTICA

2 INDHOLDSFORTEGNELSE 1. Forfattere Hvad er der sket siden 2013? : Endnu tydeligere standarder i mobilt design De nyeste tendenser Quick-and-dirty opsummering: Alt kogt ned til 3 sider E-handel flytter over på mobilen Mobile e-handelskonventioner former sig i disse år mobile e-handelssites gennemgået Header Menu Logo Kurv Søgefelt Bannerkampagner Navigation Off-canvas-navigation Overlay-navigation On-page-navigation Fane-navigation Fold-ud/fold-ind-navigation Brødkrummesti Tilbage-pil Footer navigation Forside / 54

3 INDHOLDSFORTEGNELSE 9. Kategoriside Gallerivisning vs. listevisning Læg i kurv Antal produkter Filtrering og sortering Produktdetaljeside Læg i kurv Læg i kurv-interaktion produktdetaljer Ekstra funktioner Indkøbskurv Check-out-forløb Check-out-forløb i Tunnel-design Trin-indikator log ind Fejlmeddelelser Vær med til at udvikle rapporten Yderligere læsning / 54

4 FORFATTERE Henning Nielsen Senior UX-konsulent Hennings passion ligger i at skabe digitale løsninger, der giver den bedste brugeroplevelse og max værdi for forretningen. Henning har en baggrund som Senior UX-designer hos Systematic, hvor han arbejdede med design af software til desktop og mobil. Mail: [email protected] Linkedin.com/in/henningnielsen Pia Schøtt Gregersen UX-konsulent Pia Schøtt Gregersen arbejder med user experience design på tværs af platforme og teknologier. Samtidig har hun skrevet speciale om designkonventioner, herunder e-handelskonventioner, ved Aarhus Universitet. Mail: [email protected] Linkedin.com/in/piaschoett Jens Hofman Hansen Digital forretningsudvikler Jens Hofman Hansen har en baggrund som seniorkonsulent i user experience hos Creuna og specialkonsulent i it-forretningsudvikling på Statsbiblioteket. Han er desuden forfatter til bogen Motiverende design. Mail: [email protected] Linkedin.com/in/hofman 4 / 54

5 HVAD ER DER SKET SIDEN 2013? I sommeren 2013 undersøgte vi 40 mobile e-handessites. Hensigten var at spore de interfacekonventioner og -standarder, der tegner sig for mobil e-handel. Dette researcharbejde er nu ført ajour med en gennemgang af samtlige sites i sommeren / 54

6 2014: ENDNU TYDELIGERE STANDARDER I MOBILT DESIGN I 2013 viste undersøgelsen tydeligt, at mobil e-handel trækker på mange af de kendte konventioner fra desktoppen. Men med væsentlig mindre skærmplads til rådighed, er der også opstået nye standarder for, hvordan kendte udfordringer løses på mobilen. Der tegner sig i 2014 et generelt billede af mere velgennemført og konventionspræget mobildesign på de 40 sites. Der er så at sige større enighed om, hvordan elementer bedst udformes. Flere af de sites, vi har genbesøgt, er i det forgangne år blevet opdateret, og rummer i dag mange af de elementer, vi oprindeligt beskrev som begyndende tendenser. Det vil sige, at der er en stor stabilitet i, hvordan e-handelssites på den mobile platform bygges op ifht. et utal af elementer såsom header, forsidedesign, indkøbskurv, menuer og adskillige interaktionsdetaljer, som du kan læse detaljeret om i denne rapport. Vores 2014-gennemgang bekræfter os i, at det er vigtigt at kende til de gældende konventioner og standarder. De nyeste tendenser På trods af den store stabilitet er der som sagt også sket ændringer. Udviklingen ses primært på de følgende områder: Burgermenu (tre vandrette streger): Off-canvas navigation: Filtrering og sortering: Læg-i-kurv-knap: Gennemførte mobilsites: Bruges på 50% af de 40 sites. Dette er en væsentlig stigning siden 2013, hvor ikonet optrådte mere sporadisk. Har vundet bredere indpas og bruges på forskellige måder. Typisk som primær navigation i samspil med burgermenu-ikonet, hvor begge er placeret i venstre side af skærmen. Flere sites benytter sig nu af en selvstændig side til filtre. Samtidig bruger 50% af alle sites styresystemets indbyggede picker i forbindelse med sortering. Placeres i stadig stigende grad over skærmfolden, så den er synlig ved sidens indlæsning. Der er ikke blot tale om, at de mobile skærme er blevet større produktdetaljesiderne er også i stort omfang redesignet for at få læg-i-kurv-knappen i fokus. I 2013 stødte vi på flere mobilsites der sprang til desktop-layout ved f.eks. check-out og brugeroprettelse Sådanne problematikker er vi ikke stødt på i / 54

7 QUICK-AND-DIRTY OPSUMMERING: ALT KOGT NED TIL 3 SIDER Hvis du vil nøjes med at læse tre sider, så læs denne og de to næste. Men pas på! Designkonventioner er ikke det samme som designskabeloner - afhængigt af, lige præcis hvilken butik du driver og afhængigt af, hvem netop dine kunder er, vil dit design skulle tilpasses, for at være succesfuldt. Redskaber som Google Analytics, split tests og tænke-højt-tests - og hvordan din bundlinje faktisk udvikler sig, er naturligvis stadigvæk den ultimative dommer for, om du skal følge konventionen eller ej. Anvender du alternative løsninger, bør du have lavet en grundig foranalyse det skylder du dig selv og din omsætning. Header Headeren indeholder logo, søgefunktion, menu og varekurv. Afvig kun, hvis du har en særlig grund til det. Menu-ikon Hold dig til konventionen for menu : Tre vandrette streger. Risikér ikke at være kreativ på dette punkt. Logoplacering Logoet ligger i headeren og næsten altid til venstre eller i midten. Hold dig til denne konvention, med mindre du har en særlig grund til at afvige. Kurv-ikon Indkøbskurven ligger øverst til højre. Det mest genkendelige er ikonet for en indkøbsvogn. Du risikerer misforståelser, hvis du går i det kreative hjørne. 7 / 54

8 Søgefelt Søgefeltet findes øverst på siden. Lad det være i fuld bredde og husk at det skal efterfølges af en søg-knap - det understøtter brugeren i, hvad feltet skal bruges til. Prik-notation Anvend den konventionelle prik-notation ved banner-kampagner og grafiske inspirationsfelter. Lad rotationen være brugerstyret via swipe. Menu-principper Tag stilling til om din menu skal fungere efter princippet off canvas, overlay, on page eller med faner. Afvig kun nedenstående best-practice-ikoner for fold-ud, fold-ind og gå til side, hvis du har en helt særlig grund: Brødkrummestier Undlad gerne brødkrummestien - den optager for meget plads på den lille skærm. Sats istedet på en gennemskuelig og kort navigationsstruktur. Tilbage-pil Tilføj gerne en tilbage-pil på dine sider, hvis der er plads. Det øger brugerens tryghed - også selvom der er en tilbage-knap i browseren. Link til desktopsite Inkluder et link til det fulde website (desktopudgaven) i sidefoden. For en sikkerheds skyld. 8 / 54

9 Forside Foretag en streng prioritering på forsiden. Nedton kampagner og lad navigationselementer være dominerende. Læg-i-kurv-knap Overvej om læg-i-kurv-knapper på kategorisiderne giver mening for dine produkter. Hav det som ideal at læg-i-kurv knappen på produktdetaljesider kan ses på den umiddelbart synlige del af skærmen. Dubler evt. knappen ned i bunden af produktvisningen, hvis siden er lang. Lav tydelig feedback til kunderne når de har trykket på knappen, så de ved, varen er lagt i kurven. Check-out Lad check-out være opdelt i en række trin ligesom på desktopsitet og understøt fornemmelsen af progression med en trinindikator. Indfør tunnel-design, dvs. fjern alle potentielt forstyrrende elementer i sidehoved og -fod. Log-in Gør det muligt at logge ind og spar eksisterende kunder for irriterende indtastninger ligesom på desktopsitet. Fejlbeskeder Lad fejlbeskeder ved indtastningsfelter dukke op så hurtigt som muligt vent ikke med at validere felterne til brugeren trykker på en knap. 9 / 54

10 E-HANDEL FLYTTER OVER PÅ MOBILEN Udbredelsen af smartphones gør, at nethandel naturligt nok er ved at flytte over på mobilen. Det betyder, at kunderne er online flere steder, og mobilen erstatter langsomt PC en. Dermed er deres forventninger til mobile løsninger også støt stigende.

11 MOBILE E-HANDELSKONVENTIONER FORMER SIG I DISSE ÅR I Vertica interesserer vi os for, hvordan konventioner for tilrettelæggelsen af de mobile webshops dannes. Viden om disse konventioner har stor betydning for, hvor succesfuldt et design man ender med, og dermed hvor stor konvertering du kan skabe på den mobile platform. Tilbage i sommeren 2013 gennemførte vi en stor undersøgelse af 40 mobile e-handelsløsninger spredt over forskellige brancher. Denne undersøgelse er nu ført ajour i sommeren 2014, så vi er sikre på, at have et overblik over e-handelsløsningernes faktiske udformning lige nu. Halvdelen af undersøgelsens websites er danske. Vi har primært fokuseret på selve opbygningen af brugergrænsefladerne indenfor følgende områder: Forside Header Navigation Søgning Kategorisider Produktsider Indkøbskurv Check-out forløb Efterfølgende har vi opsummeret og vurderet resultaterne. I flere tilfælde har vi opsamlet statistik på udvalgte kriterier (hvor mange sites har f.eks. et søgefelt i headeren?). Det fortæller os noget om de mobile tendenser, og det er med til at kortlægge, hvordan de mobile e-handelsekonventioner er ved at blive til. Kan man tale om konventioner og standarder for mobile e-handel? Det korte svar er JA. Der er klare tendenser på tværs af de 40 mobile e-handelsites. Mange af de konventioner, der har fået fodfæste indenfor mobil e-handel, trækker desuden i vid udstrækning på de konventioner, vi kender fra traditionel e-handel på desktop. Det er ikke alle 40 sites, der rummer samtlige af undersøgelsens kriterier, eksempelvis på grund af deres specifikke varesortiment - og det kan netop være en interessant observation i sig selv. Vi er desuden stødt på sites, hvor brugergrænsefladen differentierer sig alt efter, hvilken produktkategori, der er valgt. I sådanne tilfælde har vi valgt at fokusere på én kategori. Undersøgelsens data er indsamlet på henholdsvis en iphone 4s og en iphone 5s. 11 / 54

12 40 MOBILE E-HANDELSITES GENNEMGÅET 1800contacts.com m.autozone.com m.nike.com amazon.com m.billetlugen.dk m.onlinegolf.co.uk barnesandnoble.com m.crateandbarrel.com saxo.com bll.dk (billund-airport) m.dell.com m.stylepit.dk etsy.com jysk.dk m.toysrus.com m.homedepot.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/mobile harryanddavid.com m.macys.com toysrus.dk interflora.dk m.matas.dk veromoda.dk kaufmann.dk wupti.com aarstiderne.com m.asos.com Etsy.com, Homedepot.com, Jysk.dk og wupti.com er som noget nyt i 2014 med i undersøgelsen og erstatter andre sites der er forsvundet. F.eks. er brandfair.com gået konkurs og blockbuster.dk reduceret til en splashskærm. Af listen ovenfor fremgår det, at cirka halvdelen (21) af de 40 sites findes på sub-domæner som m.mysite.com, mens resten (19) primært findes på hoveddomænet mysite.com. Dette billede er uændret siden Vores anbefaling er at vise mobilsitet på hoveddomænet mysite.com. En grundtanke på nettet er, at hver side har én url ikke flere. Desuden forhindrer det os ikke i at lave et skræddersyet mobilt website. Hvor ét ud af de 40 sites i 2013 byggede på responsive web design, er tallet i 2014 oppe på 6. Det skyldes at 4 af de undersøgte sites i løbet af året er blevet omlagt til responsive. Det øvrige site er nyt i undersøgelsen, og vi ved ikke, om det var responsive i Der er altså en tydelig tendens til at vælge responsivt design, men majoriteten er fortsat ikke responsiv. Vælger man et responsive design, er der kun ét website at vedligeholde. Afhængigt af kompleksiteten i sitets funktion, kan den reelle forskel dog være minimal, og i visse tilfælde kan en traditionel tilgang sikkert stadig være at foretrække. 12 / 54

13 HEADER På de 40 sites, vi har gennemgået, så vi at headeren ofte indeholder følgende fire elementer: Logo Menu Kurv Søgefelt Det er kun i ganske få tilfælde, at siderne ikke rummer disse elementer. Ellos.dk og Macys.com er eksempler på sites, der på forskellig vis følger denne opskrift. I flere tilfælde indeholder headeren også andre features, afhængigt af den specifikke shop og dens produktudvalg. Der er hovedsageligt tale om features som ønske-/huskeliste, login, profil og find butik. 13 / 54

14 Gamestop har Logo, Log ind, Rewards, Find butik, Ordreopslag, Ugekampagner, Kurv og søgefelt i headeren. Walmart har Logo, Find butik, kurv og Søgefelt i headeren. Net-a-porter har Logo, Kurv, Nyheder, Shop, Designere og ønskeliste i headeren. 14 / 54

15 InWear har Logo, Link til dektop, Log ind, Opret konto, Kurv og søgefelt i headeren. Zalando har Logo, Søgefelt, Favoritter, Kurv og søgefelt i headeren. Dell har Logo, Log ind, Ordrestatus, Kurv og søgefelt i headeren. 15 / 54

16 TDC har Logo, Support (Hjælp til produkter) og Menu i headeren. Vi har også undersøgt anvendelsen af sticky headers dvs. headers der sætter sig fast i toppen af skærmen, når man begynder at scrolle på siden. Undersøgelsen vister, at 9 ud af 40 sites i 2014 anvender sticky headers. Herunder ser du fx Toysrus.dk. I 2013 var tallet 7 ud af 40 sites, så der er en svag tendens til i stigende grad at benytte sticky headers. Fordelen ved sticky headers er, at du altid let kan navigere til forsiden, det er let at komme til menuen, og du kan hele tiden se din kurv på siden. Ulempen derimod er, at vi arbejder på små skærme hvor screen real estate er kostbar og sticky elementer optager plads på skærmen. Vælger du at gå denne vej, er det vigtigt, at du opvejer disse fordele og ulemper op imod hinanden. 16 / 54

17 MENU Ikonet med de tre streger eller burgermenuen, med to boller og en bøf som vi bl.a. kender fra Google, Facebook og YouTube har på bedste vis vundet indpas hos mange af de mobile netbutikker, vi testede: Halvdelen af alle sites anvender en burgermenu med de tre velkendte streger. Der ses også en klar tendens til at burgermenuen har vundet indpas flere steder end i Mange brugere har allerede taget ikonet til sig fra andre sites - men vær opmærksom på, at menuen ikke er et vidundermiddel - information som lægges i denne menu vil som regel blive opfattet som sekundært, dvs. menuen bliver i værste fald helt overset. Genkendelighed skaber tryghed, og derfor er det vores anbefaling, at bruge ikonet til navigationsmenuer på mobile enheder. Hvorvidt ikonet skal suppleres med en label som Kaufmann gør det herunder, afhænger både af din målgruppe og ikke mindst hvor mange ikoner, du har i spil i headeren på samme tid. Placeringen af menuikonet kommer vi nærmere ind på i afsnit 4, der omhandler navigation. Kaufmann benytter labels der fjerner den sidste tvivl om, hvad de ellers konventionelle ikoner betyder. Stylepits design af burgermenuen er meget enkelt og helt konventionelt. Nikes mobilsite er stilrent, men det er tvivlsomt, om brugerne er i stand til at skelne, hvad de forskellige ikoner betyder - der er pludselig så mange, at man kommer i tvivl om, hvad der betyder hvad. 17 / 54

18 LOGO Netbutikkernes logo ses oftest til venstre eller i midten af headeren som vist herunder med Walmart.com og Ellos.dk. Selve placeringen af ens logo påvirkes i høj grad af den type navigation, man vælger til sitet. Hos enkelte brands som fx H&M har vi set en løsning, hvor logo og navigation er blevet en integreret helhed. Dette er en designtilgang, der går imod tendensen, og den kan som udgangspunkt ikke anbefales. Desuden skal du være opmærksom på, at kompleksiteten med denne løsning øges kraftigt, når det handler om at finde tilbage til forsiden. Logoet er normalt den mest benyttede escape route hvis man farer vild og ønsker at gå til forsiden. På H&Ms side skal du først åbne menuen og tage stilling til, hvad der er link til forsiden. 18 / 54

19 KURV På mobilen følger kurvens placering i høj grad konventionerne fra desktop ved at være placeret i øverste højre hjørne. Crate&Barrel, Gilt, Zalando og H&M er alle eksempler på sites med indkøbskurven placeret øverst til højre. Spørgsmålet er så, om de gør de det lige godt? Tag et kig ned over de fire designs og bedøm selv hvilken kurv, du synes, fungerer bedst. Zalando 2013 Zalando 2014 Crate&Barrel og Gilt s brug af indkøbsvognen virker mest genkendelige og dermed lettest at afkode. Hos Zalando er man siden 2013 gået væk fra den stærkt brandede æske, men det nye ikon er stadig svært at aflæse. Det samme gælder for H&M, hvor man har valgt en pose med logo som indkøbskurv. Ved første øjekast på H&Ms side kunne man komme til at tro, at de faktisk har to logo er i headeren så hvordan kommer jeg til forsiden? og hvor er kurven? Vores anbefaling er at bruge indkøbsvognen som ikon, da det er en konvention, de fleste kender. I få tilfælde mener vi fint indkøbskurven kan bruges fx ved salg af dagligvarer, hvor referencen er nær. 19 / 54

20 SØGEFELT Som optællingen herunder viser, så er der 35 ud af 40 sites, der anvender søgning på deres netbutik og 32 af siderne har valgt at placere søgefeltet i headeren. En stærk konvention, som kræver gode argumenter at undvige! Søgefeltets placering Antal sites, 2013 Antal sites, 2014 Søgefelt i header Søgefelt anden placering 3 2 Intet søgefelt 5 5 Vi har i 2014 også undersøgt, hvorvidt søgefeltet er synligt på sitet eller fx skjult i sitets menu: Søgefeltets tilgængelighed Antal sites 2014 Søgefelt synligt direkte i headeren 24 Søgefelt tilgængeligt via knap i headeren 5 Søgefelt tilgængelig off canvas (f.eks. via burgermenu) 4 Hos Autozone.com, Toysrus.com, og Greenmountaincoffee.com er søgefeltet synligt direkte i headeren. 20 / 54

21 I ni tilfælde er søgefeltet enten skjult bag en knap/tab i sitets header som hos Stylepit.dk herunder eller i en såkaldt off-canvas menu, som det er tilfældet på crateandbarrel.com. 21 / 54

22 De mobile netbutikker trækker i stor stil på konventionen fra desktop om at have et prominent søgefelt i toppen af siden og med god grund. Søgefunktionen er attraktiv for de kunder, der ved, hvad de kommer efter og som med fordel kan springe navigationsstrukturer over med en søgning. Bemærk i øvrigt, at de viste sites alle inkluderer en søgeknap efter søgefeltet, selvom det teknisk set ikke er nødvendigt - iphonens tastatur vil ved et søgefelt have en Søg-knap indlejret. Men ikke alle brugere opdager dette, da de fokuserer på området omkring søgefeltet når de søger - også selvom de bruger tastaturet til indtastning. Så selvom man kunne spare en søgeknap væk i webinterfacet lige efter søgefeltet, så er det ikke tilrådeligt at gøre det. 22 / 54

23 BANNERKAMPAGNER En gennemgående tendens er en nedtoning af de grafiske elementer på de mobile sites, sammenlignet med desktop-udgaverne. Det betyder ikke, at al inspiration er skåret fra, men den er reduceret. Eksemplerne herunder viser forskellige former for kampagner, som vi stødte på. Cdon.com Asos.com En mindre, men ikke uvæsentlig, detalje i forbindelse med bannerkampagner er, at de, der fungerer som en slider, ofte er markeret med små prikker der signalerer, hvor mange kampagner man kan swipe igennem. Den grafiske repræsentation med prikkerne er gennemgående på de 40 sites, og vi anbefaler derfor at du benytter dig af denne konvention i forbindelse med sliders på dit site. 23 / 54

24 NAVIGATION Det varierer, hvilken type navigation, der anvendes i de mobile e-handelsløsninger ofte ligner de hinanden, men så alligevel ikke. Det er i det hele taget svært at drage sammenligninger på tværs af de 40 sites. Et par tendeser vi har observeret er: Header menu: Bag denne menu, tit i form af burgermenuen, vises ofte produktkategorier og efterfølgende servicenavigation Side-navigation: Produktkategorier vises ofte direkte på siden for at hjælpe kunderne godt i gang Footer-navigation: Kundeservice, hjælp, betingelser m.m. findes ofte i sidens footer I de følgende afsnit vil vi gå mere i dybden med ovenstående områder og give indsigt i de mest gængse navigationsmodeller, vi er stødt på gennem undersøgelsen. OFF-CANVAS-NAVIGATION Hovedparten af de sites, der har placeret burgermenuen til venstre i headeren, benytter sig af off-canvas-navigation, hvor navigationen dukker op fra venstre og skubber sitet til højre. Menuen ender med at optage ca. 90% af skærmen. Et godt eksempel herpå er jysk.dk. Denne form for navigation er især kendt fra Google, Facebook og Youtube, hvilket gør den genkendelig for mange, uanset om de handler på deres smartphone eller ej. Desuden kan kunderne hele tiden se et udsnit af den side, de kom fra, hvilket skaber tryghed - med et enkelt tryk er man tilbage. 24 / 54

25 OVERLAY-NAVIGATION Placeres menuen længere mod højre (som hos Kaufmann.dk), anvendes der ofte en navigation, der foldes ned som et overlay på siden. I nogle tilfælde suppleres menuen med en Luk menu knap, mens man i andre tilfælde blot skal trykke nedenfor menuen for at komme ud af den igen. Denne type navigation ses ofte på websites baseret på Twitter bootstrap et yderst udbredt teknisk framework til opbygning af websider - der gør denne form for navigation genkendelig for mange kunder. 25 / 54

26 ON-PAGE-NAVIGATION Brugen af synlige produktkategorier direkte på siden (on-page-navigation) er en praksis, som forekommer en del gange dog i forskellige udformninger. Enten som listeelementer, der kan folde flere niveauer ud, som listeelementer der navigerer direkte til en produktkategori, eller som grafiske felter, der ligeledes navigerer direkte til en produktkategori. Nike.com Cdon.com Spartoo.dk Hm.com Tendensen til at præsentere produktkategorier direkte på siden gør det let at opdage og finde ting på den lille skærm og giver i det hele taget kunderne et godt overblik over, hvad de kan forvente at finde i butikken. 26 / 54

27 FANE-NAVIGATION En anden navigationsmodel er brugen af faner. Faner har den fordel, at brugeren kommer et niveau længere ned i navigationsstrukturen end ellers, helt fra start. Problemet er, at den åbne fane kun vil være målrettet en del af kundegruppen, så her skal man vide, hvem der er kernekunderne: Den åbne fane er alt andet lige den, der vil få flest visninger. Eksemplet Zalando.dk viser faner som en del af sidens on-page-navigation, mens eksemplet Asos.com viser tabs som en del af sidens off-canvas-navigation. Zalando.dk Asos.com I Asos.com eksemplet ovenfor kan det være svært at afkode, at Shop Women er valgt, fordi indikationen med pilen er alt for diskret. FOLD-UD/FOLD-IND-NAVIGATION De forskellige navigationsformer kan kombineres med fold-ud/fold-ind-navigation, der reducerer antallet af sideskift og dermed gør det smidigt at nå til det næste niveau i varekataloget. Et godt eksempel på fold-ud/fold-ind-navigation er Macys.com 27 / 54

28 Der er variation i, hvordan fold-ud/fold-ind-funktionaliteten illustreres med ikoner. Man ser pile i forskellige retninger og plus/minus-tegn. Der er en tendens til at anvende plus/minus-tegn som som i tilfældet macys.com. Overvejer du at indrage fold-ud/fold-ind-navigation i din mobile løsning, er det vores anbefaling at bruge følgende typer ikoner, da de er lettere at afkode end brugen af pile i forskellig retning. Forklaring af ikoner: + (Plus) for fold ud - (Minus) for fold sammen > (Pil) for at navigere hen til den pågældende side BRØDKRUMMESTI Hovedparten af den 40 undersøgte netbutikker anvender ikke brødkrummestier, og antallet er også faldende fra 2013 til Det skyldes formentligt, at de små skærme øger behovet for streng prioritering af pladsen. Man skal tilmed ikke mange niveauer ned igennem varekataloget førend brødkrummesiten optager mere end én linje - og dermed optager den endnu mere plads samtidig med at den bliver uoverskuelig. Det tyder på, at der på dette punkt forekommer et opgør med en af de traditionel e-handelskonventioner, hvor brødkrummestien stort set er et standardelement. Brødkrummesti Antal sites, 2013 Antal sites, 2014 Ja Nej Ingen data 3 0 TILBAGE-PIL Kun 9 ud af 40 sites har en tilbage-knap på siden. Denne observation er måske overraskende, eftersom den på mange måder passer godt til mobilen, hvor vi er vant til at vandre ét niveau op og ned ad gangen. Vores anbefaling, modsat undersøgelsens resultat, er at tænke en tilbageknap ind i designet, hvis muligt. På den måde tilbydes et tydelig escape route der på samme vis som logo ets navigation til forsiden skaber tryghed, fordi man altid kan bevæge sig tilbage eller op i varekataloget. 28 / 54

29 Hvis ikke du har plads til knappen i headeren, så overvej fx en tilbagepil i bunden af dine produktvisninger. Tilbagepil Antal sites, 2013 Antal sites, 2014 Nej Ja 9 5 Gilt.com, Matas.dk og Wupti.com benytter alle en tilbage-knap, og det giver en fornemmelse af tryghed i navigationen på disse sites. 29 / 54

30 FOOTER NAVIGATION Kundeservice, kontaktinformation, salgsbetingelser, sociale links, datapolitik, log ind, download app, senest sete produkt og link til desktop er blot nogle af de elementer, vi har set i de mobile netbutikkers footer-navigation. Det varierer naturligt nok en del, hvad der vises. Et enkelt element, som vi har observeret på stort set alle sites er linket til desktop det fulde website som mange skriver. Man kunne så spørge: Skal det mobile site være en begrænset udgave eller den fulde udgave? Vores overbevisning er, at man må have som ideal, at alt indhold fra desktop også kan findes på den mobile platform. Blot fordi kunderne sidder med en mindre skærm og måske befinder sig i en mobil kontekst, betyder det ikke, at deres forventninger til netbutikkens indhold er meget anderledes. Så med det fulde website tænkes der altså på det desktop-formatterede website - det er ikke en kattelem for at undlade væsentlig information på det mobile site. Stylepit.dk Macys.com 30 / 54

31 FORSIDE Der er en klar tendens på tværs af de 40 sites til at forsiden er slanket væsentligt ift. desktop-udgaverne. Som udgangspunkt er noget af det første kunden møder, et banner der enten rummer reklamer eller kampagner for shoppens produkter. Dette er selvfølgelig ud over headeren og søgefeltet der ofte indrammer toppen af sitet. Dertil er der ofte mindre fokus på inspiration og større fokus på muligheden for let at finde ting på forsiden. Helt konkret kommer dette til udtryk ved, at mange sider har et prominent søgefelt, samt produktkategorier direkte på forsiden. Ønsker man at inspirere, anvendes ofte grafiske felter til produktkategorierne. Af typiske elemeter på forsiden, finder vi: Menu Logo Kurv Søgefelt Kampagne On-page navigation Kundeservice Link til desktop site Illustrationen til venstre er på ingen måde tænkt som en skabelon for mobile e-handelsløsninger, men nærmere et forsøg på at opsummere mange af de observationer, vi har præsenteret i denne rapport. Udover de typiske elementer, har vi set flere eksempler på sites, der også rummer andre elementer, som på forskellig vis støtter op om den enkelte forretning. Det drejer sig fx om: Mest solgte produkter Nyheder (nye produkter) Tilmeld til nyhedsbrev Hent app Sociale links Find butik Det er meget forskelligt, hvordan de enkelte netbutikker har slanket forsiden. Nogle har ganske enkelt fjernet indhold og features, mens andre via navigationselementer har flyttet indhold og features nogle trin væk fra forsiden - der er altså foretaget et prioriteringsarbejde for netop forsidedesignet. 31 / 54

32 KATEGORISIDE GALLERIVISNING VS. LISTEVISNING Der anvendes både liste- og gallerivisning på mobile netbutikker og de to visningstyper anvendes stort set lige meget. Desuden er det er kun ganske få sites, der giver mulighed for at skifte mellem de to visninger. Om du skal vælge den ene visning frem for den anden afhænger af, hvilke varer du tilbyder. Har du brug for at vise mange informationer sammen med produktet, bør du vælge listevisningen, mens få informationer gør sig godt med gallerivisningen. Som udgangspunkt vises produktet altid med billede, navn og pris. Derudover har vi set flere eksempler hvor rating, brand, tilbud, førpris og forsendelsesinformationer vises sammen med produktet. Listevisning på Amazon.com Gallerivisning på Kaufmann.dk Amazon.com (kategori: bøger) og Kaufmann.dk er gode eksempler på, hvor forskellige informationerne på kategorisiden kan være, samt at det afhænger af indholdet, hvor man har lagt fokus. 32 / 54

33 LÆG I KURV En interessant observation på kategorisiden er, at det kun er ganske få sites der har call-toaction i form af en Læg i kurv knap. Om en netbutik har en læg i kurv-knap på kategorisiden eller ej, kommer meget an på, hvilke varer der sælges. Hvis det er dagligvarer som tomater og agurker, er det formegentligt oplagt at handle direkte fra en liste, fordi købet ikke er så kompliceret, hvorimod købet af en blazer eller et tv kræver flere overvejelser og informationer, før man er klar til at købe. Sælger man varer, hvor der skal tages stilling til varianter, skal kunderne ofte forbi produktdetaljesiden for at foretage et valg - og først derefter kan de lægge i kurv. ANTAL PRODUKTER På netbutikkernes kategorisider er det vidt forskelligt, hvor mange produkter der vises ad gangen. Det er derfor svært at sige noget generelt om selve antallet. Dog tyder det på, at mange sites har tilpasset antallet af viste produkter i forhold til deres specifikke produktudvalg. Hvis der for eksempel er få produkter at vælge imellem, vises alle varer. Hvis der i stedet er rigtig mange produkter, repræsenteres de i lister af fx 12, 24 eller 48 produkter, eller loades løbende når kunden scroller. FILTRERING OG SORTERING Der anvendes i høj grad filtrering og/eller sortering indenfor mobil e-handel. Som det ses i statistikken var det i 2013 hele 33 ud af de 40 sites og i 2014 er tallet oppe på 35 sites, der enten benyttede sortering eller filtrering eller både sortering og filtrering. Sortering og filtrering Antal sites, 2013 Antal sites, 2014 Både sortering og filtrering Kun sortering 7 8 Kun filtrering 6 9 Ingen sortering eller filtrering 7 5 Mobile netbutikker, der både anvender sortering og filtrering på har ofte et stort varekatalog, hvor behovet for at skabe overblik og hurtig indsnævring er stort. 33 / 54

34 Filtrering er ofte tilgængelig via en knap med underliggende fold-ud/ind-menu, hvor filtrene vælges fra forskellige kategorier. En anden model for filtrering er, hvor man har udvalgt få filtreringsmuligheder og præsenterer disse direkte på siden. Sortering er oftest tilgængelig via en drop-down-menu, som bruger telefonens indbyggede picker. 20 sites, altså halvdelen af de undersøgte, bruger denne løsning. Stylepit.dk Sortering vises med en dropdown-menu, mens udvalgte filtre er fremhævet med knapper. Stylepit.dk Sortering Som vi har set det på rigtig mange sites, trækkes der en picker frem, når der skal sorteres på siden. Stylepit.dk Filtrering Selve filtreringen vises på en side for sig, hvor det er muligt at scrolle i listen med størrelser. Efter filtrering på Stylepit.dk vises der ikke, hvad man har filtreret på - det kan give anledning til forståelsesproblemer. 34 / 54

35 1800contacts.com Igen vises sortering med en dropdown-menu og igen anvendes en picker til sortering. Derimod er alle filtre skjult bag én blå knap. Efterfølgende har kunden kun mulighed for at filtere på én ting, enten under: Top Brands, Manufactures eller Lens Types. Filter: step 1 Filter: step 3 Filter: step 2 Ligesom med Stylepit.dk viser 1800contacts.com ikke efterfølgende, hvad der er filtreret på. Denne information er vigtig for kunderne men spørgsmålet er hvor meget skærmplads den må optage? Hvis man hos Stylepit.dk sætter sine filtre til 2 størrelser, 2 farver og 3 mærker, optages der meget værdifuld plads på skærmen omvendt er den valgte filtrering også værdifuld information. Der må foretages en afvejning i det enkelte designtilfælde. 35 / 54

36 PRODUKTDETALJESIDE På produktsiderne har vi primært undersøgt placeringen af Call-to-actions (Læg i kurv), læg-ikurv interaktionen, visning af produktdetaljer samt ekstra features. LÆG I KURV Optællingen for placering af Læg i kurv-knappen er interessant, fordi vi fra desktop er vant til, at den helst skal ligge tæt på produktbilledet. Det gør sig som sådan også gældende på mobil, men eftersom pladsen er knap og da vi ønsker at vise store og lækre produktbilleder, resulterer det ofte i, at Læg i kurv knappen skubbes ned under skærmen. Sælger du produkter, hvor der skal vælges variant, skubbes knappen yderligere ned på siden. Som det ses i optællingen herunder, er der fra 2013 til 2014 sket en fordobling af sites der placerer Læg i kurv-knappen inden for produktdetaljesidens første skærmvisning. Halvdelen af de 40 sites har dermed en synlig knap i 2014, mod kun en fjerdedel i Den stærke tendens skyldes ikke kun større mobilskærme - produktsiderne er også i stort omfang blevet redesignet. Læg i kurv placering Antal sider, 2013 (4s) Antal sider, 2014 (5s) 1 Læg i kurv knap under skærmen synlig Læg i kurv knap Læg i kurv knapper 1 2 Sticky Læg i kurv 1 1 Ingen data 1 0 Gennem undersøgelsen har vi set flere kreative løsninger i forsøget på at sætte fokus på Læg i kurv. Vi har set en side, der scroller lidt ned, så snart man kommer ind på produktdetaljesiden. Man kan således ikke se headeren og søgefeltet, men i stedet gives opfattelsen af at siden starter ved produktnavnet. En anden løsning, vi har set, er brugen af en sticky bjælke i bunden af siden, hvorpå man har placeret en Læg-i -kurv-knap. En sticky bjælke er et element der lægger sig ovenpå de andre og som ikke følger med ved scroll. På den måde sikrer butikken sig at primær call-to-action altid er synlig. Om det er den bedste løsning kommer an på flere ting: Har siden allerede en sticky header, bliver pladsen til selve produktet og produktdetaljer væsentligt begrænset. 36 / 54

37 En løsning vi hos Vertica er tilhængere af, er brugen af to Læg i kurv knapper. Den første skal helst vises indenfor første skærmbillede hvis produktet tillader det, mens den anden knap skal placeres lige efter produktdetaljerne, hvor man ofte har fået alle de informationer, der skal til for at tage beslutningen om at købe varen. På skærmbillederne herunder har vi indsat to streger, der viser bunden af skærmen på henholdsvis en iphone 4 (grøn streg) og en iphone 5 (blå streg) for at vise placeringen af Læg-i-kurv knappen ift første skærmbillede. Amazon Stylepit.dk 37 / 54

38 LÆG I KURV-INTERAKTION Når vi kigger i optællingen for, hvordan man lægger varer i kurven, er der især to retninger der skiller sig ud, og som i stor stil er genkendelig fra traditionel e-handel på desktop. Nemlig interaktionerne, hvor man ved Læg i kurv: Bliver på siden + giver tydelig feedback Springer til kurvside (eller relateret side) Læg i kurv interaktion Antal sider, 2013 Antal sider, 2014 Bliver på siden + tydelig feedback Springer til kurvside (eller relateret side) Lightbox med fx Vis kurv, Check-out og Køb mere 7 5 Andet 2 3 Ingen data 1 0 Den første model, hvor kunden bliver på siden efter hun har lagt en vare i kurven, fungerer godt på sider, hvor kunderne ofte handler flere varer ad gangen. Dvs. vi har en formodning om, at kunden ikke er færdig med at handle, blot fordi hun har lagt én vare i kurven. 38 / 54

39 Net-a-porter.com Stylepit.dk Crateandbarrel.com Hm.com Før læg i kurv Læg i kurv feedback Efter Læg i kurv 39 / 54

40 Ellos.dk Lægger i kurven Ellos.dk Varen er nu tilføjet varekurven Kaufmann.dk Nike.com 40 / 54

41 Den anden model, hvor kunden sendes videre til kurven, anvendes ofte på netbutikker, hvor antallet af produkter i den gennemsnitlige kurv ikke er så stort. Sælger du fx varer, hvor kunden i snit kun handler 1-2 varer pr. ordre, er disse tættere på at konvertere, når de har lagt deres vare i kurven, end hvis det er en kunde der typisk handler varer ad gangen. Derfor er det vigtigt at disse guides videre til kurven med det samme sammen med produktet. Den tredje model Lightbox med fx Vis kurv, Check-out og Køb mere så vi også eksempler på. Generelt er vi ikke så begejstret for dialoger der popper op på mobil da de griber ind i brugernes følelse af flow. Vores anbefaling er at gå efter en af de forrige modeller og sikre tydelig feedback direkte på siden. Ønsker du at give kunden mulighed for at navigere videre til kurven eller direkte til check-out er eksemplet fra Nike.com ovenfor godt. Her får du følelsen af at blive på siden efter du har lagt varen i kurven men muligheden for at navigere videre er også tilstede. Efter kort tid bliver boksen transparent og forsvinder automatisk. Dell.com Inwear.com 41 / 54

42 Macys.com PRODUKTDETALJER Der anvendes primært to typer visning af produktdetaljer, direkte visning af alle detaljer på siden eller en visning, hvor nogle informationer skjules bag fold-ud/fold-ind-menuer. Den sidste model anvendes ofte, når der findes mange produktdetaljer, og der er et behov for at skabe overblik på siden. Detaljevisning Antal sider, 2013 Antal sider, 2014 Direkte visning af alle produktdetaljer Delvis skjulte produktdetaljer bag expand/collapse menuer Tabs 4 3 Links 2 6 Ingen detaljer 2 0 Ingen data / 54

43 På Hm.com vises alle produktdetaljer direkte på siden, mens der på Onlinegolf.co.uk anvendes fold-ud/fold-ind-menuer for at skabe overblik og reducere kompleksiteten. Hm.com Onlinegolf.co.uk EKSTRA FUNKTIONER Features som rating, sociale links og relaterede produkter anvendes i høj grad på produktsiderne. For eksempel på mobile.walmart.com (kategori: Furniture), hvor brugervurderinger får et stort fokus. Samtidig er der nederst på Walmarts produktside placeret en slider, der viser relaterede produkter som andre kunder har købt. 43 / 54

44 Walmart.com - Produktdetaljeside top Walmart.com - Produktdetaljeside bund Samtidig spiller kundeservice en central rolle på mange produktsider. Dette viser sig både som forskellige links eller informationer om hjælp, købsbetingelser, leveringsinformation, fragt, lagerstatus mm. 44 / 54

45 INDKØBSKURV Det er vidt forskelligt, hvilke elementer indkøbskurven indeholder, ud over selve produkterne. Der er dog primært tale om leverings- og købsbetingelser, fragtinformation, hjælp og kundeservice og i mange tilfælde en slider eller boks med relaterede produkter eller de produkter kunden senest har set. Der findes også sites, hvor der ikke er fokus på andet end produktet og Call to Action til checkout. Hm.com Macys.com De to eksempler ovenfor er Hm.com og Macys.com. H&M har en meget simpel kurv, hvor der kun er tilføjet en boks i bunden med info om check-out forløbet, mens Macys kurv både rummer rabatkode, reklame for gratis levering, oplysning om samlet pris inkl. levering, samt senest sete produkter. På kurvsiden er det forskelligt, hvorvidt headeren allerede er ført ind i et tunneldesign eller ej. På nogle sites bevares den normale header i indkøbskurven mens andre ser indkøbskurven, som en del af selve check-out forløbet og derfor allerede er gået ind i et tunneldesign. 45 / 54

46 CHECK-OUT-FORLØB Som det ses herunder, anvendte 31 af de 40 mobile e-handels sites i 2013 et check-out forløb med sideskift mellem de enkelte trin. Tallene har ikke rykket sig meget i Check-out format Antal sider, 2013 Antal sider, 2014 Sideskift efter hvert step One-page check-out 5 7 Ingen data 4 1 De trin, kunden føres igennem, følger ofte den samme struktur: Kundeoplysninger/adresseside Leveringsinformation Opsummering Betaling Kvittering Det varierer, hvordan strukturen er fordelt på de forskellige trin, men alt i alt genkender vi trinnene fra desktop-udgaven. CHECK-OUT I TUNNEL-DESIGN Check-out tunnel design Antal sider, 2013 Antal sider, 2014 Ja Nej Ingen data 6 1 Der anvendes, ligesom på desktop-sites, ofte tunnel-design gennem check-out på mobile netbutikker. Vi ved, at mange falder fra under check-out. Derfor er det en god ide at skabe et fokuseret design, så snart kunden forlader indkøbskurven, og begynder sit check-out. 46 / 54

47 God praksis, som vi også har set flere gange igennem undersøgelsen, er at fjene menu, søgefelt og kurv fra headeren og i stedet nøjes med logoet, for at designet støtter op om trygt checkout, hvor kunderne ikke fristes til at klikke andre steder hen. Eksemplerne herunder viser design af headeren, før og under check-out. Asos.com Før check-out Asos.com Under check-out Smartguy.dk Før check-out Smartguy.dk Under check-out Amazon.com Før check-out Amazon.com Under check-out 47 / 54

48 TRIN-INDIKATOR Cirka halvdelen af de undersøgte sites indikerede i 2013, hvor langt kunden er i check-out-forløbet. I 2014 er tallet steget til 25 af de undersøgte sites. Trin indikator Antal sider, 2013 Antal sider, 2014 Ja Nej Ingen data 4 1 Det er meget forskelligt, hvordan trin-indikationerne er udformet. Nogle sites anvender blot tal, mens andre både anvender tal og tekst. Der ses også ikoner i flere former. Desuden varierer det en del, om indikationen går vandret eller lodret. Herunder har vi samlet forskellige løsningsmodeller for brugen af trinindikatorer, der på hver sin måde støtter op om det at simplificere hvert trin gennem det mobile check-out. Veromoda.dk Toysrus.dk 48 / 54

49 Billund-airport.dk Hos Veromoda.dk og Billund-airport.dk vises hvad alle trin indebærer, hvorimod Toysrus kun viser antallet af trin. LOG IND Hos 30 af de 40 sites er det i 2014 muligt at logge ind via mobilen. Ofte giver dette rigtig god mening, da det giver kunderne mulighed for at handle videre med den kurv, de måske har startet tidligere på en anden enhed. Desuden har login den fordel, at vi på forhånd kender kunden. Det betyder mindre indtastning og mindre at forholde sig til gennem check-out. Sandsynligheden for, at kunden ikke springer fra på de sidste steps før ordren er lagt, øges betragteligt med muligheden for login. Login Antal sider, 2013 Antal sider, 2014 Yes No 11 9 Ingen data / 54

50 Net-a-porter.com Inwear.com 1800contacts.com Amazon.com 50 / 54

51 Zalando.dk Ellos.dk Kaufmann.dk Spartoo.dk 51 / 54

52 FEJLMEDDELSER Gennem undersøgelsen har vi kigget nærmere på fejlmeddelelser i forbindelse med check-out forløbet, særligt i forhold til adresseformularer. Der anvendes primært to metoder til at give kunden feedback ved fejl: Fejlmeddelelser opsummeres i toppen af siden og felter med fejl markeres Der springes til det første felt med fejl og felter med fejl markeres Desuden har vi set eksempler på sites, hvor der foretages validering løbende, for hvert felt der udfyldes. Som kunde føles fejlmeddelelser altid som en irritation, og derfor påvirker de også brugeroplevelsen på ens site især hvis de ikke håndteres rigtigt. Vores anbefaling er at kombinere alle ovenstående modeller ved at lave løbende validering på hvert felt for at opfange fejl, mens brugerne er fokuseret på det enkelte felt. Når den samlede side valideres anbefaler vi, at fejlmeddelelser opsummeres i toppen af siden, men at der springes til første felt med fejl på den måde kommer kunden let til det første felt der skal rettes mens muligheden for at skabe overblik over samtlige fejl stadig er til stede. Alle felter med fejl bør markeres tydligt med en rød ramme og have en specifik forklaring til, hvordan den enkelte fejl kan rettes. 52 / 54

53 VÆR MED TIL AT UDVIKLE RAPPORTEN Gennem rapporten har vi fokuseret på konventioner i brugergrænsefladen på mobile e-handlessites og kombineret disse med vores anbefalinger. Du sidder måske med lignende erfaringer, eller måske har rapporten givet anledning til spørgsmål? Dem vil vi rigtig gerne høre mere om. Kig fordi vores blog og deltag i debatten om mobil e-handel eller lad dig inspirere af vores og andres erfaringer og anbefalinger. Besøg blog.vertica.dk eller scan koden.

54 YDERLIGERE LÆSNING Er du interesseret i, hvordan brugerne anvender mobilen sammen med andre enheder, kan vi varmt anbefale dig at læse Googles rapport: The New Multi-screen World: Understanding Cross-Platform Consumer Behavior, der bl.a. også kommer ind på multi-screen and shopping. Et par af rapportens infographics ift. nethandel får du her: 54 / 54