Selv om jeg vil anta at alle e-handelssider tenker på mobilkjøpsopplevelsen, beviser shoppingen min det motsatte. Som forbruker blir jeg jevnlig møtt med dårlige mobile kjøpsopplevelser som gjør meg frustrert. Fra nettsteder som tar evigheter å laste, til nettsteder der det føles som om jeg ikke finner produktene jeg leter etter. Mobil e-handel (også kalt mCommerce eller M-Commerce) varierer fra utmerket til så frustrerende å kaste enheten din virker som det beste alternativet for å avslutte handleopplevelsen.
I dag skal vi se på hvorfor du må ta mobilprosessen din for e-handel på alvor. Deretter tar vi en titt på beste praksis for å bygge en god mobilopplevelse.
Hvorfor er mobil e-handel viktig?
Det er ikke så lenge siden at mobilnettsteder var fine å ha, men ikke krevde en del av en netttilstedeværelse. I dag overskygger mobilbruk bruken av nettet på skrivebordet.
Legg til det den enorme økningen i mCommerce av brukere. I 2018 ble rundt 40 % av handelen gjort via mobile enheter[^1]. Cyber Monday så at tallet steg til 54% av trafikken. Til tross for denne økningen, ligger konverteringer for mobile enheter ofte bak konverteringer ved kjøp av datamaskiner med et betydelig beløp. Dette er ofte fordi nettstedeiere ikke tar hensyn til mobilbrukernes behov.
Når det gjelder å surfe på nettstedet ditt, kan en mobilbruker bruke 4 minutter på å surfe, mens en stasjonær bruker er villig til å bruke 5 minutter på innsatsen[^2]. 40 % av mobilbrukerne sier at de vil forlate et nettsted hvis det ikke er mobilvennlig[^3] og dette trumfer lojalitet til butikken din. 14 % av kundene sier at de ikke bryr seg om de favoriserer merkevaren din. En dårlig mobilopplevelse vil få dem til å se på konkurrentene dine[^4].
Det fortsetter å forvirre meg hvorfor butikkeiere legger så liten innsats i å gi en god handleopplevelse for 40 % av brukerne. De ville aldri drømme om å få 40 % av folkene som går inn i butikken deres til å bruke bind for øynene som gjorde alt vanskeligere å finne, men det er for store kostnader for dem å bruke penger på å optimalisere for mobilkundene sine.
Når du ikke er villig til å bruke tid på å optimalisere mobilhandelsopplevelsen din, forteller du 40 % av nettkundene dine at de ikke er verdt innsatsen. Til gjengjeld kommer de til å handle hos konkurrentene dine.
mCommerce beste praksis
Nå som vi alle burde være enige om at det å betjene mobilkunder er nøkkelen til å ha en flott e-handelsopplevelse, la oss se på noen av de beste fremgangsmåtene du må se på når du bygger den ideelle opplevelsen.
Hvis du har et eksisterende nettsted, er en av de beste måtene å finne lavthengende frukt på å bruke online testverktøy som Googles mobilvennlige testpakke. Kjør disse testene på nettstedet ditt, og bruk deretter resultatene til å identifisere de største problemene. Budsjetter regelmessig for å fikse disse problemene slik at du kan gi brukerne en bedre opplevelse.
Mobile First Design
En av de største trendene som har dukket opp i løpet av de siste årene innen webutvikling er mobil-først design. Det er her du starter med den nedstrippede mobilversjonen av nettstedet ditt og legger til nettbrett- og skrivebordsversjoner. Mens du gjør dette, er det verdt å spørre om mobilsiden din ikke trengte en stor popup for e-postlisten din, hvorfor gjør skrivebordssiden din det. Vi vet fra Googles dokumentasjon at de føler det å legge til en popup som dekker mobilinnhold tegn på at de ikke skal rangere nettstedet ditt så høyt. Ved å ikke inkludere den på mobilsiden din sa du at den ikke var like viktig som andre handlinger brukere kunne gjøre. Hvorfor ble det viktig for brukere av datamaskiner eller nettbrett? Det er sannsynlig at dette innholdet er like i veien på skrivebordet og bør holde seg borte fra disse opplevelsene også.
Du kan se et godt utført eksempel på en e-postlisteforespørsel nedenfor på Twin Six nettsted. Legg merke til den lille grønne linjen nederst, som ikke kommer i veien for deg når du handler, men som tydeligvis presser e-postlisten deres.
En annen nøkkel til mCommerce-design er å gjøre veiene dine til kjøp klare. Det betyr å ha som mål å få en bruker til produktet de leter etter i tre handlinger. Så fra å finne produktet deres, gjør det til en tydelig vei for å kjøpe et produkt uten å måtte navigere i mersalgsvarer eller andre ting som legger hindringer i veien for kjøp.
For hver oppfordring til handling på nettstedet ditt, må du ta hensyn til markedet ditt og hvilke enheter de bruker og hvor de kan nå på nettstedet ditt. Hvis du vet at de mobile enhetene er store på nettstedet ditt og at du primært selger til kvinner, som ofte har mindre hender, er det avgjørende å sørge for at eventuelle knapper er i utvalget deres for å gjøre nettstedet ditt enkelt å bruke.
Hvilken måte er enklest for brukere å sveipe for å samhandle med produktbildene dine? Hvor mye innhold vises på skjermen til de beste mobilenhetene dine? Alle disse tingene bør tas i betraktning når du bygger ut mCommerce-siden din.
Produktsider
Når det kommer til produktsider, må du tenke på hvilken type informasjon brukerne vil se etter. En tredjedel av kjøpsbeslutningene inkluderer informasjon fra mange nettsteder som allerede er samlet inn via en mobilenhet[^5]. Fremhever produktsiden din den samme informasjonen som brukerne har samlet inn?
Med en liten skjerm kan det være vanskelig for en bruker å se nøyaktig hva de ser på. Bilder av høy kvalitet fra alle vinkler kan hjelpe brukere med å se på hvert aspekt av produktet de er interessert i. Bilder av høy kvalitet er enkle å få i dag. Med litt omtanke om å belyse telefonen, har du i lommen enkelt produserer utmerkede bilder. Hvis det er utenfor rekkevidde, kan du leie en lokal fotograf eller gjøre en handel med dem. Venninnen min tar menybildene for noen få lokale restauranter og får gratis mat til henne og festen hennes når hun er der. Jeg har hatt noen fantastiske måltider på grunn av fotografihandelen hennes.
Selv om noen nettsteder kan produsere anstendige bilder av produktene sine, faller de deretter ned på mobilnavigasjonen til disse bildene. Sørg for at brukere kan knipe eller dobbelttrykke for å zoome bilder. Sørg for at sveipebevegelser fungerer som forventet. Frustrerte brukere vil dra til konkurrenten din.
Det er også verdt å se på videodemonstrasjoner av produktet. Kan en bruker se størrelsen på produktet i hendene på noen? Kan de se hvor mange porter det er på datamaskinen de vil kjøpe, eller hvor mye plass det er inne i kabinettet? Du kan bruke denne typen innhold for å gjøre nettstedet ditt mer attraktivt for brukere, og det kan til og med plasseres på YouTube for å få mer salg.
Til slutt, når det kommer til kjøpsknappen, gjør det åpenbart. Det skal være enkelt å finne og ha en farge som gjør at det skiller seg ut fra resten av nettstedets design. Det skal være innen rekkevidde for brukerne på enhetene deres uten å måtte justere grepet de har på mobiltelefonene.
Handlevogn
Når du har en bruker med produkter i handlekurven din, er du nærmere kjøp, men det betyr ikke at et salg er garantert. En ting som mange nettsteder gjør dårlig, er å gjøre handlekurven vanskelig å redigere. Mange brukere vil legge til en haug med produkter i handlekurven og deretter bestemme hvilke de skal kjøpe i kassen. Det skal være enkelt for brukere å fjerne varer fra handlekurven, og du kommer til å få bonuspoeng for å gjøre det enkelt å legge til produkter på en ønskeliste for en bruker.
Når jeg besøker Cotton Bureau Jeg ser gjennom og legger alle skjortene som interesserer meg i handlekurven min. Så ser jeg på de hundrevis av dollar kjøpet vil koste og kutter ned det jeg kjøper for å møte budsjettet jeg har. Det eneste stedet jeg utsettes for Cotton Bureau er at de ikke lar meg sende skjortene jeg bestemte meg for ikke å kjøpe til en ønskeliste slik at jeg kan se dem og kjøpe dem senere.
En ting å unngå, ifølge Nielson Group, er den fryktede “Oppdater”-knappen. Ikke få brukerne til å oppdatere handlekurven for å få endringer reflektert i totalsummen. Dessverre inkluderer standard WooCommerce-vognen denne oppdateringsknappen, men du kan bruke Automatisk oppdateringsvogn for WooCommerce for å fjerne den og forbedre brukeropplevelsen.
Du bør også dra nytte av enhetsspesifikke funksjoner som Overrekke som lar iOS-, iPadOS- og macOS-brukere fortsette der de slapp i nettleserøktene. Hvis den er kodet riktig, kan du dra nytte av dette og sende produktene i en brukers handlekurv til deres andre enheter.
Sjekk ut
Når det kommer til kassen, er en av de første tingene å gjøre å sørge for at en bruker er det ikke kreves for å opprette en konto i kassen. Selv om du har en medlemsside som krever en konto, må du jobbe for å sikre kjøpet først. Når en bruker har kjøpt, kan du gi instruksjoner for å sette opp kontoen deres. Med WooCommerce, så lenge de bruker samme e-post, vil alle kjøp en bruker har gjort vises på kontoen deres når de oppretter en.
Det er alltid mye informasjon å fylle ut i kassen, så gjør det så enkelt som mulig. Det betyr at du må merke utsjekkingsfeltene dine riktig, slik at brukerne får riktig tastatur. Hvis du ber om et telefonnummer, bør de se det numeriske tastaturet på enhetene sine.
Det er også verdt å dra nytte av alle fasiliteter du kan for å hjelpe brukere ved å fylle ut informasjon. Ikke spør om landet de er i, du kan oppdage det med nettstedet ditt og fylle det ut for dem. Hvis du ber om postnummer eller postnummer før informasjon om by og stat, kan du fylle ut by og stat uten at brukeren bruker tid på dem.
Hvis du ikke kan fylle ut tilstandsinformasjonen deres automatisk, sørg for at du ikke presenterer den i en rullegardin uten søk. Store rullegardiner er forferdelige å bla gjennom på mobile enheter. La i det minste en bruker søke etter staten/provinsen/land i rullegardinmenyen for å spare tid og frustrasjon.
De fleste mobile enheter har en viss mulighet til å autofylle skjemafelt, sørg for at betalingsprosessen fungerer med disse systemene. Du bør også ta deg tid til å forsikre deg om at eventuelle passord- eller brukernavnfelt på nettstedet ditt fungerer med passordbehandlingssystemene innebygd i enhetene.
Når det gjelder bestillingssammendragene på betalingssiden din, sørg for at du presenterer alle kostnadene for brukerne dine. Hvis du har fått tak i postnummeret, bruk det til å beregne frakt og avgifter i stedet for å overraske brukere med det i et senere trinn. Hvis det er mulig, vis brukerne deres bestillingssum og CTA som fullfører et kjøp på en enkelt skjerm på enheten deres.
For betalingsalternativer, sørg for at du er klar over hvilke regioner du selger til og hva de foretrukne betalingsmåtene er. Selv om du bør tilby betalingsalternativene dine brukere ønsker, ikke overveld dem med alle betalingsalternativer du kan legge til nettstedet ditt. Se på å legge til Apple Pay, Google Pay, og kanskje kredittkortbehandlingen din. Test gjerne om å legge til PayPal One-Touch eller andre betalingsgatewayer øker eller reduserer salget, men ikke gi dem en rekke alternativer.
Hvis du tilbyr behandlingen, sørg for at nettstedet ditt fungerer med innebygde kortfyllingssystemer. På iOS-enheter kan du åpne kameraet ditt og vise det kredittkortet ditt for å få utfylt betalingsfelt. Dette kan være en god del for å sikre at en bruker ikke blir frustrert over å fylle ut en haug med ekstra informasjon.
Nå som vi har sett på hele kjøpsprosessen, la oss ta en titt på noen andre områder du trenger for å optimalisere for en ideell mCommerce-opplevelse.
Bygg for hastighet
Mange land har ikke rask mobilbåndbredde, så du må sørge for at du holder båndbredden begrenset og kun viser innholdet du MÅ vise for å få et salg. Venting trumfer lojalitet på nettstedet med 14 % av kundene som sier at de vil gå til et annet nettsted hvis de må vente for lenge. Det betyr at du må kjøre hastighetstester på nettstedet ditt og kutte ut eventuelle interaksjoner eller kode som står i veien for at en bruker kan foreta et kjøp.
Optimaliser bilder
Mens jeg sa ovenfor at du bør ha bilder av høy kvalitet, er det et punkt der bildene dine er altfor store for nettet. En god tommelfingerregel er at bilder bør være under 1MB, godt under. Dette kan gjøres ved å optimalisere bilder og redusere deres totale dimensjoner.
Verktøy som Kraken har plugins for WordPress som kan ta seg av dette for deg ved bildeopplasting. For store nettsteder som har en arv av dårlig optimaliserte bilder, kan du bruke kommandolinjeverktøy som jpegoptim eller pngcrush for å optimalisere mapper med bilder rekursivt. Tidlig i 2020 brukte jeg jpegoptim og pngcrush for å håndtere over 50 000 bilder som bygges opp over 10 år. Vi sparte 20 GB diskplass og enorme mengder båndbredde hver måned.
Reduser CSS, JS, HTML og Cache
I tillegg til å komprimere bildene dine, bør du se på å forminske CSS JavaScript og HTML. Et av mine favorittverktøy for å gjøre dette er WP rakett. Jeg har funnet ut at dette konsekvent gir enorme hastighetsforbedringer på klientnettsteder uten store mengder tid brukt på å konfigurere plugin-en.
Hvis du vil bruke WP Rocket med vår Hostinger CDN, vi har instruksjoner i vår dokumentasjon.
Kutt sporing og deling
Et annet sted for enkelt å optimalisere nettstedet ditt er med sporings- og delingsskriptene du bruker. Ja, du trenger litt analyse for å se hva brukerne dine gjør og for å prioritere hvilke enheter som trenger optimalisering, men du trenger ikke 5 sporingsskript og 3 sosiale delingsskript lastet på hver side.
For de fleste nettsteder er sosiale delingsknapper en stor ødemark som viser at ingen deler innholdet ditt. Enda verre, for mobilbrukere dekker de ofte deler av innholdet som gjør mobilopplevelsen forferdelig. Jeg har forlatt mange nettsteder fordi deres sosiale knapper gjør innholdet jeg kom til å konsumere uleselig.
Kutt ned alt du ikke trenger for å holde siden fungerende og gi brukerne en bedre opplevelse.
Fortsett å raffinere
Selv om du går gjennom alle forslagene ovenfor og forbedrer nettstedet ditt, må du fortsette å forbedre mCommerce-opplevelsen. I oktober 2020 ga Apple ut iPadOS 14 som la til Skribleristøtte for Apple Pencil. Ja, de fleste nettsteder burde fungere med dette uten endringer, men testet du det for å være sikker?
Å sørge for at nettstedet ditt er optimalisert for mobilbrukere er en pågående oppgave, akkurat som å optimalisere nettstedet for stasjonære brukere. For hver endring du gjør, prøv å gjøre A/B-testing slik at du tar valg som forbedrer brukeropplevelsen og nettstedkonverteringer. Pass samtidig på at du ikke optimaliserer kun for mobil og dermed får brukere med andre enheter til å få en dårligere opplevelse.
På slutten av dagen er ikke mobilbruk en kjepphest. Det er her for å bli, og noe du må sørge for å gjøre rede for hvis du vil fortsette å selge til kundene dine.
