Streber du med mobil e-handel optimalisering av nettsteddesign? Ikke bekymre deg, her er hva du må gjøre
I 2021 har veksten i netthandel i stor grad vært drevet av mobil. Faktisk, Insider intelligens spår at m-handelsvolumet vil stige til 488 milliarder dollar, eller 44 % av det globale e-handelsmarkedet, innen 2024. Omtrent 9.2 % av dette markedet vil bli dominert av USA.
Liker det eller ikke, en mobilvennlig e-handelsside er nå en nødvendighet snarere enn et valg; ellers går forhandlere til grunne for forbrukerne. Mange av prosjektene våre hos Elogic har listet opp mobilnettstedets design for e-handel som en av de viktigste Krav til e-handelsnettsteder, hovedårsakene er høyere konverteringsfrekvenser for nettstedet og økt synlighet i søkemotorene.
Hvis du vil benytte deg av mobilnettstedet for netthandel, men ikke er sikker på hvor du skal begynne, er denne artikkelen for deg. Les videre for å lære om forskjellene mellom mobilvennlig, mobiloptimalisert og responsiv design, oppdag seks mobiloptimaliseringstips og finn ut hvordan du tester e-handelsnettstedet ditt for mobil.
Hvorfor mobilvennlig e-handelsnettsted ikke bare er en trend
Et mobilvennlig e-handelsnettsted betyr at brukere fritt kan bruke det på en mobil enhet: nettstedet ditt "krymper" for å passe inn i telefonens lille skjerm, det er ingen ubrukelige funksjoner eller flash-animasjon, bildene er mindre, og navigasjonen er mye enklere.
Selv om konverteringsfrekvensen på mobil er litt lavere enn på skrivebordet (1.81% vs 1.98%), betyr det ikke at du bør avskaffe det. Mobilnettsted for netthandel kan være grunnen til at brukere vil gå på skrivebordet og konvertere fordi de har foretatt produktundersøkelser med telefonene sine. Selv en av undersøkelsene avslørte det 67% av kundene har mindre sannsynlighet for å handle fra merket hvis de ikke har en nettside optimalisert for mobil.
Fordelene med et mobilvennlig e-handelsnettsted er ikke bare begrenset til høyere konverteringsfrekvenser:
- Det gir bedre brukeropplevelse (UX) og genererer dermed mer trafikk fra enheter i alle former og størrelser.
- Det er mindre sannsynlig at brukere forlater nettstedet ditt frustrert og assosierer merkevaren din med negative følelser.
- Søkemotorer vil presse et optimalisert nettsted til toppen siden UX er en av rangeringsfaktorene.
- Det vil øke kundelojaliteten siden ikke-mobilvennlige nettsteder virker skissere og av lav kvalitet.
Selv om mobiloptimalisering kan virke som en liten detalj, kan det ha en dyp innvirkning på e-handelsvirksomheten din ved å øke antall salg og trafikk til hovednettstedet ditt.
Mobilvennlig vs mobiloptimalisert vs responsiv: Hva er forskjellen?
Mobilvennlig, mobiloptimalisert og responsiv design er tre forskjellige tilnærminger til å lage eCommerce-mobilnettstedsversjonen.
Mobilvennlig netthandelsnettsted
Mobilvennlig design handler om å skreddersy den eksisterende web-UX til mobile enheter. Det er en krympet versjon av nettsiden du ser på skrivebordet som er den enkleste å implementere.
Et mobilvennlig netthandelsnettsted er nok til å rangere høyere i Google-søk (du kan til og med kjøre en mobilvennlig test for å sjekke det), men det vil ikke maksimere brukeropplevelsen. Små e-handelsbutikker som hovedsakelig inneholder tekst og bilder kan ha nytte av det, men brukeropplevelsen på betalingssiden din forblir intakt.
Mobiloptimalisert design
Den mobiloptimaliserte designen følger en mobil-først-tilnærming. Med andre ord designer du et eget nettsted for mobile enheter først (stort sett fordi det har flere begrensninger) og skalerer det opp til desktopversjonen senere. Sjekk noen beste eksempler på PWA i detaljhandel, som Alibaba eller Flipkart – de er bygget med en mobil-først-tilnærming i tankene.
Mobilresponsiv design
Responsiv eCommerce mobilnettsidedesign betyr at innholdet på nettsiden endres automatisk for å passe til brukerens skjerm. Den er avhengig av et mobilt operativsystem og reagerer selv på de minste endringer i skjermstørrelsen, som er vanlig for forskjellige iPhone-versjoner og Android-enheter. Innholdet er dynamisk: størrelsen på bildene og skriftene endres, layoutene justeres. Det krever betydelig budsjett og e-handelsutvikling, men er den mest brukervennlige av trioen.
Hva er forskjellen mellom web- og mobil e-handelsdesign?
Webdesign og e-handelsdesign mobil er aldri likeverdige. Forskjellen mellom de to er enorm av flere grunner:
- Du har langt større frihet når det kommer til å designe en stasjonær nettside. Ikke bare grensesnittelementer i operativsystemet dikterer designen av mobilnettstedet for e-handel, men også en mindre skjerm betyr at besøkende kan se mye mindre informasjon på nettstedet. For å kompensere for disse begrensningene, lar mcommerce-forhandlere brukere zoome inn og ut nettsider, samt justere skriftstørrelser for å gjøre teksten lett å lese.
- Et mobilnettsted har berøringsbasert input. I stedet for å bruke mus eller tastatur, samhandler de fleste mobilbrukere med enhetene sine ved å bruke berøringsskjerm og mobilspesifikke funksjoner, for eksempel klikk for å ringe eller stedsbasert kartlegging.
- Konteksten for bruk av et nettsted på datamaskin og mobil er forskjellig. Når en kunde kommer for å handle på netthandelsnettstedet ditt, er det mest sannsynlig at de fullfører et kjøp. I mellomtiden er mobilbrukere raske kjøpere. De vil bruke mobilnettstedet ditt for netthandel til å undersøke produkter, se etter steder, lese nyhetene osv., men kan ikke fortsette til kassen. Dermed vil et webdesign øke salget, men mobil e-handelsdesign vil optimalisere konverteringer og øke kundelojaliteten.
Når vi snakker om visuelt utseende, presenterer nett- og mobildesign også slående forskjeller. Her er et eksempel på et nettsted for forbrukerelektronikk TurcomUSA designet av Elogic. Turcom selger dingser og elektroniske enheter. Når du åpner den på et skrivebord, vil du se følgende versjon:
Se nå på det samme nettstedet på mobiltelefonen din. Alle de viktige elementene på nettstedet beholdes: søk på stedet, handlekurv, personlig skap. Likevel er innholdet og visuelle elementer omorganisert for bedre brukeropplevelse.
Hvordan optimalisere e-handelsnettstedet for mobil?
Hvis bedriften din ikke er klar for den mobile-første eller mobil-responsive nettsiden (det være seg for spørsmål om budsjett eller teknisk ekspertise), ikke bekymre deg. Du trenger ikke utvikle en mobilapp for å rangere høyere helt fra starten. Du kan i stedet optimalisere e-handelsnettstedet ditt for mobil.
Her er seks måter å optimalisere webdesignet for mobil e-handel på en kostnadseffektiv måte.
#1 Gjør nettstedet ditt lynraskt
Omtrent 47 % av kundene forventer at nettsider lastes inn under 2 sekunder; ellers vil de bare falle. Google tar også hensyn til lastehastigheter når nettstedet ditt rangeres i en søkemotor.
Din organiske trafikk og kundetilfredshet vil også avhenge av hastigheten på nettstedet. Walmart la merke til at hvert sekund med forbedret nettstedhastighet betyr 2 % flere konverteringer og hver 100 ms gir en økning på 1 % i inntekter.
For å forbedre hastigheten kan du:
- Optimaliser bildene
- Bruk innholdsleveringsnettverk (CDN)
- Forminsk og kombiner CSS, JavaScript og HTML
- Bruk asynkron lasting
- Oppgrader hosting
- Aktiver komprimering
- Bruk caching i nettleseren
#2 Sørg for en praktisk betalingsopplevelse
Kasseopplevelse betyr mye: du kan ha en gjennomtenkt markedsføringstrakt, men en skissemessig kasse, slik at brukere vil forlate handlekurven uansett. For å optimalisere kassen for mobil, bruk følgende tips:
- Lag mobilversjon for e-handelsnettsted som passer inn på brukerens skjerm
- Forenkle skjemaet
- Slett alle typer distraksjoner som annonser og e-postabonnementsskjemaer
- Bruk sikkerhetsplomber
- Lag store knapper med lettlest tekst
- Lag en stolpe med brukerens fremgang
- Tillat autofyll
- Ikke koble til utenfor betalingsprosessen
- Bruk forskjellige tastaturer for forskjellige felt (trekk opp det numeriske tastaturet for telefonnummer i stedet for å få kundene til å bytte til det på egen hånd)
Slik ser en mobiloptimalisert kasse ut Rullekaninsin nettside, en motebutikk på nett som Elogic har utviklet. Forhandleren optimaliserte brukeropplevelsen og så en nedgang i avbruddsraten for handlekurven.
#3 Arbeid med intuitivt søk på stedet
Navigasjon er en viktig del av webdesign for mobile e-handelsplattformer. Med tusenvis av varer å bla gjennom, må brukerne begrense valget sitt så mye som mulig for å komme til produktene de vil ha raskere.
For å optimere søket på stedet for mobil, anbefaler vi å gjøre det kort, liste opp de viktigste sidene først, og lage større knapper på menyen siden brukernes fingre er større enn en pil på skjermen. Unngå sveve-og-utvid-menyer for å minimere friksjonen ved plutselig forsvinning og gjenopptreden av undernavigering.
#4 Polsk opp produktsidene dine
Du bør ikke nødvendigvis la produktbeskrivelsene passe produktsiden til mobilskjermstørrelsen. Men det anbefales å gjøre dem korte (maks. 200 tegn) og plassere dem like over bretten ved siden av et bilde av høy kvalitet. Unngå mange rullinger, sammenleggbare innholdsblokker og tappet innhold. Vi anbefaler også å bruke "tilbake til toppen"-knappen, men sørg for at kunder ikke ved et uhell trykker på den mens de prøver å bla nedover.
#5 Optimaliser brukeropplevelsen
UX for mobil eCommerce-nettsidedesign ser annerledes ut enn det du pleide å se på stasjonære datamaskiner. En av de viktigste reglene er å holde knappene store og å minimere teksten siden du ikke har mye plass å jobbe med. Mobilbrukere distraheres lettere enn datamaskiner, så sørg for å gi forkortede versjoner av salgseksemplarene dine.
Husk også en tommelposisjon. Mens desktop-kunder kan engasjere seg med bokstavelig talt alle deler av skjermen, vil mobilbrukere nå så langt tommelen går. Nedre høyre hjørne er en av de mest aktive plassene for mobilbrukere, så sørg for å plassere de viktige knappene (som legg i handlekurven) der.
Til slutt, ikke glem å opprettholde merkevareidentiteten din: bruk bedriftens fonter og farger så mye du kan for ikke å gjøre mobilversjonen om til enkle tekster og bilder.
#6 Utnytt sosiale medier for e-handelsnettstedet ditt
Brukere går stort sett på sosiale medier på mobil og du kan bruke det til din fordel. Gjør det enkelt å følge merkevarens sider ved å legge til sosiale følg- og delikoner, bygg inn bilder som kan festes for å få mer oppmerksomhet på Pinterest, og bruk sosiale pålogginger for å gjøre registreringen så enkel som mulig.
Du kan også bygge inn sosiale feeder for å oppmuntre brukere til å dele bildene sine med produktet og gi dem et salg slik at de senere kommer tilbake. Vår klient Carbon38 prøvde det og fikk flotte resultater!
Ikke glem å teste netthandelsnettstedet ditt for mobil
En måte å teste e-handelsmobilnettstedet er ved å sjekke responsen på enheter med forskjellige skjermstørrelser. Vær oppmerksom på lastetiden, intuitiv navigering, informasjonslesbarhet, samt infoplassering på produktsidene.
For å gjøre testprosessen mindre tidkrevende og mer kostnadseffektiv, kan du vurdere følgende verktøy:
- W3C mobileOK Checker. De W3C mobileOK Checker er et av de beste verktøyene for å teste kompatibiliteten til nettstedet ditt på mobile enheter. Verktøyet utfører flere tester som identifiserer brukervennligheten til mobilnettstedet.
- Google Mobilizer. Google Mobilizer får ros for sitt intuitive grensesnitt og brukervennlighet. Du trenger bare å skrive inn nettsideadressen din i søkeboksen, og verktøyet vil finne ytelsesflaskehalser og gi optimaliseringsforslag for mobilnettstedet for e-handel.
- Gomez. Gomez mobilberedskapsverktøy tester nettsiden din på grunnlag av over 30 veletablerte teknikker. Det gir deg en poengsum mellom 1 og 5. Resultatene vises i et dokument som foreslår hvordan du kan forbedre nettstedet ditt. Vær klar til å fylle inn noen personlig informasjon, inkludert e-postadressen din og et telefonnummer.
konklusjonen
Ettersom m-handel er klar til å vokse, kan du fortsatt hoppe på trenden og optimalisere e-handelsnettstedet ditt for mobil. Enten du bestemmer deg for å gå med et mobilvennlig netthandelsnettsted eller utvikle en mobilapp fra bunnen av, husk følgende tips:
- Mobiloptimalisering er et must for å rangere høyt på søkemotorer. Selv om du ikke har det tekniske teamet eller budsjettet til å bygge en mobilapp, gjør mobiloptimalisering til en av prioriteringene for utvikling av e-handel.
- Hastighet betyr noe. Mobilversjonen av nettstedet ditt bør være like rask (om ikke mer) som netthandelsnettstedet. Optimaliser produktbildene dine for mobil, legg til korte beskrivelser og arbeid med en enkeltside-kasse.
- Intuitiv brukeropplevelse på mobil er nøkkelen til økte konverteringsfrekvenser. Gjør det enkelt for brukere å finne produktet de leter etter, koble til sosiale medier og dra nytte av mobilbasert funksjonalitet for å bruke med nettstedet ditt.
Aldri undervurder kraften til mobilnettsteder for netthandel. Det kan være nøkkelen til bedriftens vekst.
- "
- &
- 2021
- 9
- Abandonment
- Logg inn
- aktiv
- annonser
- Fordel
- Alibaba
- Alle
- android
- animasjon
- app
- Artikkel
- Milliarder
- Eske
- nett~~POS=TRUNC leseren~~POS=HEADCOMP
- bygge
- virksomhet
- endring
- kontroll
- Sjekk ut
- Kaffe
- Felles
- forbruker
- Forbrukerelektronikk
- Forbrukere
- innhold
- Konvertering
- studiepoeng
- Kundelojalitet
- Kundetilfredshet
- Kunder
- dato
- levering
- utforming
- detalj
- utvikle
- Utvikling
- Enheter
- drevet
- Drop
- e-handel
- e-handel
- Elektronikk
- emalje
- følelser
- oppmuntre
- etc
- eksempel
- erfaring
- Mote
- FAST
- Egenskaper
- Felt
- Først
- passer
- Blitz
- FLIPKART
- følge
- Frihet
- Gadgets
- Global
- Google Search
- flott
- Grow
- Vekst
- Høy
- Hvordan
- Hvordan
- HTTPS
- identifisere
- Identitet
- bilde
- Påvirkning
- viktig
- Inkludert
- Øke
- info
- informasjon
- iPhone
- saker
- IT
- Javascript
- nøkkel
- stor
- LÆRE
- Leverage
- Begrenset
- LINK
- oppføring
- laste
- Lojalitet
- Making
- marked
- Marketing
- Saker
- måle
- Media
- Mobil
- Mobilapp
- mobilenhet
- håndholdte enheter
- mobiltelefon
- Navigasjon
- nettverk
- nyheter
- på nett
- åpen
- drift
- operativsystem
- rekkefølge
- organisk trafikk
- Annen
- Betale
- ytelse
- telefoner
- Plattformer
- polsk
- makt
- presentere
- Produkt
- Produkter
- prosjekter
- Kjøp
- priser
- Beredskap
- grunner
- Registrering
- forskning
- Resultater
- forhandler
- forhandlere
- Avslørt
- inntekter
- regler
- salg
- salg
- Skala
- Skjerm
- Søk
- søkemotor
- Søkemotorer
- sikkerhet
- Del
- shoppere
- Shopping
- handlekurven
- Kort
- Enkelt
- SIX
- Størrelse
- liten
- So
- selskap
- sosiale medier
- Rom
- fart
- Begynn
- opphold
- oppbevare
- butikker
- abonnement
- SWIFT
- Bytte om
- system
- Pek
- tech
- teknikker
- test
- Testing
- tester
- tid
- tips
- verktøy
- verktøy
- topp
- Berøringsskjerm
- trafikk
- us
- Brukere
- ux
- synlighet
- volum
- Walmart
- web
- Nettsted
- nettsteder
- ord
- Arbeid
- zoom