Övergivna varukorgar i mobil e-handel ligger på 85,65 %, jämfört med lägre nivåer på dator. En stor del av skillnaden går att undvika med rätt designval. Den här artikeln går igenom vad som gör en butik riktigt mobilanpassad och hur du kommer dit sida för sida.
Vad är skillnaden mellan mobilvänlig och mobiloptimerad?
Mobilvänlig betyder att butiken inte går sönder på en liten skärm. Texten bryts rätt, bilderna ändrar storlek och knapparna går att trycka på. Det är minimikravet. Google anser att det krävs för indexering.
Mobiloptimerad betyder att butiken är byggd för att sälja på mobilen. Layout, informationsordning, tryckytor, kassaflöde och sidhastighet är anpassade efter hur människor faktiskt handlar med telefonen. En butik kan vara mobilvänlig utan att vara mobiloptimerad. Många är det.
Skillnaden spelar roll eftersom mobilvänlig tar dig in i matchen. Mobiloptimerad är det som ger intäkter. En butik som inte går sönder på telefonen men tar 8 sekunder att ladda och har ett kassaformulär gjort för mus och tangentbord är tekniskt sett mobilvänlig. Den är inte mobiloptimerad. Varje förbättring utöver "fungerar" är en förbättring av din konverteringsgrad.
Därför ändrar Googles mobile-first indexing allt
Google använder mobile-first indexing, vilket betyder att Google rankar din butik utifrån mobilversionen. Inte datorversionen. Om din mobilbutik har tunnare innehåll, färre interna länkar eller bilder som inte laddas bygger Googles bild av din butik på de bristerna.
Det påverkar dina sökplaceringar direkt. En butik som ser komplett ut på dator men är avskalad på mobil rankar efter det mobilversionen visar. Om produktbeskrivningar är avkortade på mobil indexerar Google den avkortade versionen. Om navigeringslänkar göms bakom en hopfälld meny på mobil kan Google ha svårare att följa dem.
I praktiken betyder det att mobilprestanda inte bara är en fråga om användarupplevelse. Det är också en SEO-fråga. När du förbättrar mobilbutiken förbättrar du dina sökplaceringar. Varje mobilfix gör dubbelt nytta.
Core Web Vitals och hur de påverkar din ranking
Core Web Vitals är en uppsättning prestandamått som Google använder som rankingsignaler. Largest Contentful Paint mäter hur lång tid det tar att ladda sidans huvudinnehåll. Interaction to Next Paint mäter hur snabbt sidan reagerar på det besökaren gör. Cumulative Layout Shift mäter hur mycket layouten hoppar oväntat medan sidan laddas.
Alla tre spelar roll på mobil, där nätverkshastighet och processorkraft är lägre än på dator. Ett resultat som duger i en datorwebbläsare kan underkännas på en mellanklasstelefon med 4G. Den telefonen använder en stor del av din trafik.
Dåliga värden för Core Web Vitals skadar både rankingen och konverteringen, oberoende av varandra. Varje extra sekund laddningstid på en mobilsida sänker konverteringsgraden med 4,42 % enligt studier. En sida som tar 5 sekunder att ladda i stället för 2 kan redan ha tappat hälften av sina möjliga konverteringar innan någon sett dina produkter.
Mobil design per sidtyp
Varje sidtyp i en butik har olika mobila prioriteringar. Om du behandlar alla sidor likadant optimerar du ingen av dem ordentligt.
Startsida
På mobil måste startsidan visa vad butiken säljer och vart besökaren ska gå redan vid första scrollen. Startsidor på dator har ofta breda hero-sektioner med flera element. På mobil fyller samma hero hela skärmen. Om den inte direkt förmedlar värde och ger en uppmaning att agera scrollar besökaren vidare eller lämnar sidan.
Se till att huvudnavigeringen går att nå utan för många tryck. En hamburgermeny är standard, men innehållet i den bör begränsas till de kategorier som en förstagångsbesökare faktiskt behöver. Gömd navigering är osynlig navigering på mobil.
Kategorisidor
Kategorisidor på mobil måste balansera antal produkter mot användbarhet. Rutnät med två kolumner fungerar bra för de flesta produkter. Listor med en kolumn fungerar bättre när bilddetaljer är viktiga. Båda är bättre än rutnät med tre kolumner, där produktbilderna blir för små för att läsa på de flesta telefoner.
Filter och sortering är avgörande på kategorisidor och svåra på mobil. En filterpanel som öppnas som ett helskärmsfönster, i stället för en sidokolumn, gör filtreringen användbar på en liten skärm. Läs hela guiden om vad en kategorisida är och hur du designar en för en djupare genomgång av kategorisidans uppbyggnad.
Produktsidor
Produktsidan på mobil måste snabbt svara på tre frågor. Vad är det? Vad kostar det? Är det lätt att köpa? Huvudbilden ska laddas direkt och gå att svepa. Pris, val av variant och knappen för att lägga i varukorgen ska synas utan att scrolla.
Placera knappen för att lägga i varukorgen högt upp på mobilen, eller åtminstone en fast knapp som följer med när besökaren scrollar genom produktbeskrivningen. Den som måste scrolla tillbaka upp för att lägga något i varukorgen får ett extra tillfälle att ändra sig.
Kassa
Kassan är där flest mobilbesökare hoppar av. Ju färre steg och fält, desto bättre. Möjligheten att handla som gäst tar bort kontohindret som får många mobilanvändare att avbryta. Läs hela guiden om hur du designar en kassasida som minskar avhoppen för detaljerade råd om att optimera kassan.
Tumzoner och ergonomisk design
Människor använder telefonen med tummarna, och tummarna når bara vissa delar av skärmen bekvämt. Längst ned i mitten är lättast att nå. De övre hörnen är svårast. Det här är ingen detalj. Det är en ergonomisk verklighet som direkt avgör om kunderna använder butikens viktigaste delar.
Placera de viktigaste knapparna, som lägg i varukorgen, fortsätt till kassan och använd filter, längst ned i mitten där tummen vilar naturligt. Navigeringsfält längst ned på skärmen är lättare att nå än fält högst upp på stora telefoner. Fält högst upp är en datorkonvention som fungerar dåligt med enhandsgrepp på mobil.
Små tryckytor är ett vanligt användbarhetsproblem på mobil. Knappar och länkar som är lätta att klicka på med en muspekare blir svåra att träffa med en fingertopp. Google rekommenderar tryckytor på minst 48 gånger 48 pixlar med tillräckligt avstånd mellan intilliggande ytor. För små ytor leder till felklick, frustration och avhopp.
Mobil kassa och formulär
Formulär är en av de största källorna till friktion i mobil kassa. Ett formulär som gjorts för tangentbord och mus blir långsamt och felbenäget när det fylls i på en pekskärm där autokorrigering lägger sig i. Flera konkreta förbättringar gör formulär mycket lättare att fylla i på mobil.
Använd rätt tangentbord
Inmatningstyper i HTML talar om för mobilwebbläsaren vilket tangentbord som ska visas. Ett e-postfält med inmatningstypen e-post visar ett tangentbord där @ ligger lättåtkomligt. Ett telefonnummerfält med typen tel visar ett numeriskt tangentbord. Ett fält med standardtypen text visar ett fullt tangentbord för allt, även telefonnummer och postnummer.
Fel inmatningstyp skapar onödig friktion. Kunden måste byta tangentbord manuellt eller skriva med fel layout. Lösningen är att ändra ett enda attribut på varje formulärfält. Det är en av de förbättringar i mobil kassa som ger mest för minst arbete.
Minska antalet formulärfält
Varje fält i ett kassaformulär är en friktionspunkt på mobil. Gå igenom din kassa och ta bort alla fält som inte behövs för att slutföra köpet. Separata fält för förnamn och efternamn går oftast att slå ihop. Titelfält behövs sällan. Flera adressrader kan ofta ersättas av en enda adressökning.
Om du vill samla in mer information för marknadsföring eller analys kan du fråga efter att köpet är klart, inte under kassan. En enkät efter köpet ger samma data utan risk för avhopp.
Stöd autofyll
Moderna mobilwebbläsare och lösenordshanterare kan fylla i kassafält automatiskt om formuläret är rätt uppbyggt. Attributet autocomplete på varje fält talar om för webbläsaren vilken typ av data det gäller. Ett fält med rätt autocomplete-värde fylls i automatiskt av webbläsaren om kunden har sparat sina uppgifter. Autofyll kan korta kassatiden rejält på mobil, och det påverkar om kunden slutför köpet.
Erbjud mobila betalsätt
Mobila betalsätt som digitala plånböcker låter kunder slutföra ett köp med biometrisk inloggning i stället för att skriva in kortuppgifter för hand. För en kund på telefon är det en tydlig lättnad att slippa skriva ett kortnummer på 16 siffror, ett utgångsdatum och en säkerhetskod. Butiker som erbjuder de här betalsätten vid sidan av vanliga kortbetalningar får högre konvertering på mobil, eftersom friktionen försvinner i det känsligaste steget.
Sidhastighet på mobil
Sidhastighet påverkar mobilbutiker hårdare än datorbutiker, eftersom mobilanslutningar är långsammare och processorer svagare. En sida som laddas på 2 sekunder på bredband kan ta 6 sekunder på mobildata. Studier visar att 53 % av mobilbesökarna förväntar sig att sidor laddas på under 3 sekunder. De som inte får det lämnar sidan.
Komprimera bilder
Bilder är den enskilt största orsaken till lång laddningstid på mobil. Varje produktbild, banner och livsstilsbild bör komprimeras innan den når webbläsaren. Moderna bildformat ger betydligt mindre filer än äldre format vid samma bildkvalitet.
Lazy loading skjuter upp laddningen av bilder under bildskärmens nederkant tills kunden scrollar mot dem. Den synliga delen av sidan laddas direkt. Allt under laddas först när det behövs. Tekniken gör att sidan upplevs som snabbare, även när den totala sidstorleken är densamma.
Minska antalet skript
Skript från tredje part, som analysverktyg, chattwidgetar, marknadsföringspixlar och recensionsverktyg, ökar laddningstiden på varje sida. Varje skript måste laddas ned, tolkas och köras. På mobil tar det längre tid än på dator. Gå igenom vilka skript som körs i din butik och ta bort dem som inte aktivt bidrar till försäljning eller kundupplevelse.
Skript som behövs kan ofta laddas asynkront, det vill säga efter sidans huvudinnehåll i stället för före. Då går sidan att använda innan skripten har laddats klart, vilket förbättrar värdena för Core Web Vitals och kundens upplevelse.
Testa på riktiga enheter
Webbläsarens utvecklarverktyg har en mobilsimulator där du kan se butiken som om du satt med en telefon. Simulatorn är bra för att kontrollera layouten, men visar inte hur en riktig enhet presterar på ett riktigt nätverk. En mellanklasstelefon på 4G beter sig annorlunda än simulatorn på en snabb dator.
Testa regelbundet på riktiga enheter. Problem som inte syns i simulatorn, som fördröjd beröring, problem med typsnitt och vissa layoutfel, blir tydliga direkt på riktiga enheter. Om du inte har tillgång till flera enheter finns gratisverktyg på nätet som visar din butik via riktig hårdvara på riktiga nätverk.
Mobil SEO bortom hastigheten
Hastighet och Core Web Vitals är det som diskuteras mest inom mobil SEO, men flera andra faktorer påverkar hur väl din butik rankar i mobila sökresultat.
Undvik fönster som täcker huvudinnehållet på mobil. Pop-ups och överlägg som blockerar sidan direkt efter laddning straffas av Googles algoritm för mobilsökning. Om du använder en pop-up för att samla in e-postadresser eller en banner för cookies ska den inte skymma huvudinnehållet innan besökaren hunnit se sidan.
Se till att allt innehåll som syns i din datorbutik också går att nå på mobil. Om innehåll göms bakom en "visa mer"-knapp på mobil kan Google indexera det hopfällda läget i stället för hela texten. För produktbeskrivningar och kategoritexter som bidrar till din ranking ska hela texten gå att nå på mobil utan extra tryck.
Intern länkning ska vara densamma på dator och mobil. Om din datorbutik har en tydlig sektion med relaterade produkter och länkar till andra kategorier ska mobilversionen ha de länkarna också. Navigeringslänkar som Google använder för att förstå butikens struktur ska inte försvinna på mobil.
Så hanterar WEMASY mobil
WEMASY:s e-handelssystem skapar responsiva butikssidor som anpassar sig till alla skärmstorlekar som standard. Produktsidor, kategorisidor och kassa är alla gjorda för att uppfylla Googles krav för mobile-first indexing. Kassan har stöd för mobila betalsätt och rätt typade formulärfält. Prestanda för Core Web Vitals är inbyggd i systemets hosting och leverans, så du slipper optimera för hand. Se vad som ingår i varje plan på prissidan.
Vanliga frågor
Hur kontrollerar jag om min butik är mobilvänlig?
Googles Search Console har en rapport för mobilanvändbarhet som flaggar konkreta problem på dina sidor, som text som är för liten, klickbara element som sitter för tätt eller innehåll som är bredare än skärmen. PageSpeed Insights ger dig värden för Core Web Vitals för mobil och dator var för sig. Båda verktygen är gratis och ger konkreta, användbara resultat i stället för ett allmänt godkänt eller underkänt. Med WEMASY:s webbplatsbyggare kan du ställa in det direkt i din butik.
Påverkar mobil design min ranking i Google?
Ja, direkt. Google använder mobile-first indexing, vilket betyder att din butik rankas utifrån mobilversionen. Värden för Core Web Vitals, som påverkas av mobila faktorer som laddningshastighet och layoutstabilitet, är en bekräftad rankingsignal. En butik som fungerar bra på mobil har ett försprång i rankingen jämfört med en som inte gör det, även om datorversionerna är likvärdiga.
Vad är det vanligaste problemet i mobil kassa?
Friktion i formulären är det vanligaste problemet. Kassaformulär som gjorts för mus och tangentbord kräver alldeles för mycket av användaren på en pekskärm. Åtgärderna som ger mest effekt är: rätt inmatningstyper så att rätt tangentbord visas, färre fält, autofyll och mobila betalsätt som gör att du slipper skriva in kortuppgifter för hand. Om du åtgärdar de här fyra sakerna ser du oftast en mätbar förbättring av andelen som slutför köpet i mobil kassa.
Hur påverkar sidhastighet på mobil försäljningen?
Sambandet är direkt och väl dokumenterat. Studier visar att konverteringsgraden sjunker med omkring 4 % för varje extra sekund laddningstid. En butik som laddas på 1 sekund konverterar märkbart bättre än samma butik som laddas på 4 sekunder. För mobilbutiker i synnerhet, där nätverksförhållandena varierar och besökarna lämnar långsamma sidor snabbare, ger förbättrad sidhastighet ofta snabbast avkastning av alla tekniska insatser.
Ska jag bygga en separat mobilbutik eller använda responsiv design?
Responsiv design, där en enda butik anpassar layouten efter skärmstorleken, är standardsättet och det Google rekommenderar. Separata mobilsajter ger mer underhåll, kan skapa inkonsekvent indexering och är svårare att hålla i synk när du uppdaterar produkter och innehåll. Om du inte har en särskild driftsanledning att köra en separat mobilupplevelse är responsiv design på en enda URL rätt val.
Hur minskar jag antalet övergivna varukorgar på mobil?
Övergivna varukorgar på mobil beror på en kombination av friktion och distraktion. Åtgärderna som ger mest effekt är: en enkel kassa med så få steg och fält som möjligt, möjlighet att handla som gäst så att kontohindret försvinner, mobila betalsätt som tar bort manuell kortinmatning och en snabbladdad kassasida. Retargeting med e-post för övergivna varukorgar är också effektivt för att vinna tillbaka besök där kunden inte slutförde köpet direkt.