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
INDHOLDSFORTEGNELSE 1. Forfattere... 4 2. Hvad er der sket siden 2013?... 6 2.1 2014: Endnu tydeligere standarder i mobilt design... 6 2.2 De nyeste tendenser... 6 3. Quick-and-dirty opsummering: Alt kogt ned til 3 sider... 7 4. E-handel flytter over på mobilen... 10 4.1. Mobile e-handelskonventioner former sig i disse år... 11 4.2. 40 mobile e-handelssites gennemgået... 12 5. Header... 13 5.1. Menu... 17 5.2. Logo... 18 5.3. Kurv... 19 5.4. Søgefelt... 20 6. Bannerkampagner... 23 7. Navigation... 24 7.1. Off-canvas-navigation... 24 7.2. Overlay-navigation... 25 7.3. On-page-navigation... 26 7.4. Fane-navigation... 27 7.5. Fold-ud/fold-ind-navigation... 27 7.6. Brødkrummesti... 28 7.7. Tilbage-pil... 28 7.7. Footer navigation... 30 8. Forside... 31 2 / 54
INDHOLDSFORTEGNELSE 9. Kategoriside...32 9.1. Gallerivisning vs. listevisning... 32 9.2. Læg i kurv... 33 9.3. Antal produkter... 33 9.4. Filtrering og sortering... 33 10. Produktdetaljeside... 36 10.1. Læg i kurv... 36 10.2. Læg i kurv-interaktion... 38 10.3. produktdetaljer... 42 10.4. Ekstra funktioner... 43 11. Indkøbskurv... 45 12. Check-out-forløb... 46 12.1. Check-out-forløb i Tunnel-design... 46 12.2. Trin-indikator... 48 12.1. log ind... 49 12.2. Fejlmeddelelser... 52 13. Vær med til at udvikle rapporten... 53 14. Yderligere læsning... 54 3 / 54
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: hni@vertica.dk 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: pgr@vertica.dk 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: jhh@vertica.dk Linkedin.com/in/hofman 4 / 54
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 2014. 5 / 54
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 2014. 6 / 54
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
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
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
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.
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
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 2013. 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 2013. 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
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
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
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
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
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 2013. 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
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
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
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 32 33 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
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
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
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
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
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
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
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
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 2014. 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 12 11 Nej 25 29 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
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 31 35 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
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
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
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
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 20 18 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