Öppna din produktsida i mobilen nu. Inte på din bärbara dator. På din riktiga telefon, i handen, med tummen som faktiskt skrollar.
Vad ser du?
Om texten är liten, knappen svår att trycka på eller sidan tar mer än tre sekunder att ladda förlorar du en betydande del av dina potentiella köpare innan de ens har läst produktbeskrivningen.
Ungefär 70 % av all e-handelstrafik kommer nu från mobila enheter. Konverteringsgraden i mobilen ligger på många små säljares sidor på ungefär hälften av nivån på dator. Gapet finns inte för att mobilköpare vill ha mindre. Det finns för att de flesta produktsidor utformas på dator och aldrig testas ordentligt i mobil.
Varför mobilköpare beter sig annorlunda
Surfande på dator är mer tålmodigt. Någon som sitter vid en dator, vid ett skrivbord, är i ett annat mentalt läge än någon som tittar i mobilen på tåget, i en kö eller samtidigt som något annat pågår.
Mobilköpare bestämmer sig snabbare. De skrollar snabbare. De lämnar snabbare. Om något känns fel under de första sekunderna stänger de fliken. De zoomar inte in för att läsa liten text. De skrollar inte i sidled för att hitta en knapp som hamnat utanför skärmen. De går bara vidare.
De tydligaste skillnaderna i beteende:
- Läser i lugnare tempo
- Använder mus och kan klicka precist
- Jämför oftare mellan flera flikar
- Har större tålamod med långsammare laddning
- Har längre genomsnittlig sessionstid
- Skannar i stället för att läsa
- Trycker med tummen och behöver stora tryckytor
- Beter sig som om bara en flik finns och fattar snabba beslut
- Lämnar inom 3 sekunder om sidan är långsam
- Har kortare session och behöver snabbare krok
Den praktiska slutsatsen är att din mobilsida behöver en snabbare krok, större tryckytor och en laddtid under tre sekunder. Det här är inte trevliga bonusar.
3-sekundersregeln
53 % av mobilbesökare lämnar en sida som tar mer än 3 sekunder att ladda. Den siffran kommer från Googles egen forskning och har varit stabil i flera år.
Tre sekunder känns snabbt i verkligheten. I mobilen är det en evighet.
Det som oftast gör sidor långsamma:
- stora okomprimerade bilder (den vanligaste orsaken)
- för många spårningsskript som laddas innan innehållet
- typsnitt som laddas från externa källor utan reservlösning
- videor som startar automatiskt
Bilder är vanligtvis huvudproblemet. En produktbild exporterad i full upplösning från en kamera är ofta 4–8 MB. En korrekt komprimerad version för webben är 150–300 KB. Samma visuella kvalitet på en mobilskärm. Helt annan laddtid.
Viktor drev en sida som sålde specialgjorda klistermärken. Mobiltrafiken stod för 74 % av alla besökare. Konverteringen i mobil: 1,1 %. På dator: 3,8 %. Han körde sidan genom Google PageSpeed Insights och upptäckte tre bilder som laddades in på över 3 MB vardera. Han komprimerade om dem. Laddtiden i mobil sjönk från 6,2 sekunder till 2,4 sekunder. Hans mobila konverteringsgrad steg till 3,1 % under de följande tre veckorna.
Matematiken i det: om Viktor hade 500 mobilbesökare per månad och nu konverterar med 3,1 % i stället för 1,1 %, betyder det 10 extra försäljningar per månad från en enda fix som tog en timme.
Vad som faktiskt går sönder i mobil
Utöver hastigheten finns det specifika layoutproblem som nästan bara dyker upp i mobil och som de flesta säljare aldrig ser eftersom de testar på dator.
Text som är för liten för att läsa utan att zooma
En textstorlek under 16 px i mobil kräver zoomning. De flesta användare kommer inte att zooma. De lämnar. Brödtext bör vara minst 16 px. Mellanrubriker ska vara tydligt större. Om du är osäker: håll telefonen på normalt avstånd och läs ett stycke. Om du kisar är texten för liten.
Knappar som är för små för att vara bekväma att trycka på
Apples riktlinjer rekommenderar en minsta tryckyta på 44×44 punkter. Google rekommenderar 48×48 dp. I praktiken betyder det att din "Köp nu"-knapp ska vara tillräckligt stor för att kunna tryckas på med tummen utan precision. Om den ligger nära andra länkar eller texter spelar även avståndet runt den roll. Feltryck på fel element skapar frustration. Köpare ger sällan en andra chans.
Skrollning i sidled
Om något element på sidan är bredare än skärmen skapar mobilwebbläsaren en sidledsskroll. Köpare skrollar nästan aldrig åt sidan på en produktsida. Det som hamnar utanför skärmen finns i praktiken inte för dem. Tabeller, breda bilder och kodblock är de vanligaste orsakerna.
Friktion i kassan på mobil
Att skriva på mobilens tangentbord går långsammare och ger fler fel än på dator. Varje extra fält i kassan är en punkt där en mobilköpare kan ge upp. Ju mindre du kräver, desto bättre. Om din kassa tvingar någon att skriva full adress för en digital produkt kommer du att tappa människor.
Så testar du din mobilsida (tar 10 minuter)
Du behöver inga verktyg eller en utvecklare för att göra en grundläggande mobilgranskning. Här är ett praktiskt arbetssätt:
- öppna sidan på din riktiga telefon, inte i ett nedskalat webbläsarfönster
- sätt en timer — hur lång tid tar det innan sidan är helt laddad?
- läs första stycket med telefonen på normalt avstånd. Är det bekvämt?
- försök trycka på köpknappen med tummen. Hamnar du rätt direkt?
- skrolla hela vägen genom sidan. Är något avklippt eller kräver sidledsskroll?
- gå till pagespeed.web.dev och klistra in din URL. Kontrollera mobilpoängen.
- titta på "Opportunities" i PageSpeed-rapporten. Bildkomprimering ligger nästan alltid högst upp.
Det är allt. Om allt ser bra ut efter den genomgången är din mobilupplevelse troligen stabil. Om du hittar problem är bara fixen med bildkomprimering värd att göra direkt.
Vad en mobilgranskning hittade hos tre säljare
Mobil konvertering 2,1 %, dator 5,4 %. Granskningen visade produktbilder på i genomsnitt 4,8 MB och en köpknapp som var 32 px hög med 8 px inre marginal. Bilderna komprimerades och knappen gjordes större. Mobil konvertering nådde 4,9 % inom fyra veckor.
Mobiltrafiken var 81 % av totalen, men stod bara för 28 % av intäkten. Granskningen visade att kassan krävde postnummer, vilket var onödigt för en digital produkt. Det togs bort. Konverteringen i mobil gick från 1,8 % till 3,3 % på två veckor.
Mobilpoäng i PageSpeed: 34 av 100. Tre videoklipp på sidan startade automatiskt. Videorna togs bort och ersattes med stillbilder. Laddtiden sjönk med 4,1 sekunder. Avvisningsfrekvensen i mobil föll med 40 %.
NanoCart-sidor och mobil
Om du använder en plattform som inte byggdes med mobil som prioritet är de här problemen strukturella och svårare att lösa utan hjälp av en utvecklare.
NanoCarts produktsidor är mobilanpassade som standard. Layout, textstorlekar, knappstorlekar och kassaflöde är byggda för navigering med tummen. Om du vill se hur en fokuserad sida med en produkt fungerar bättre än en hel butik, är mobil en stor del av förklaringen: färre element, snabbare laddning och tydligare tryckytor.
Den enda saken som fortfarande ligger i dina händer oavsett plattform är bildstorleken. Komprimera dina produktbilder innan du laddar upp dem. Verktyg som Squoosh (gratis och webbaserat) gör en bild på 4 MB till 200 KB på ungefär 30 sekunder. Den vanan är mer värd än de flesta andra optimeringar tillsammans.
Mobil är inte en sekundär kanal. För de flesta små säljare just nu är den den primära. Dina köpare är på sina telefoner. Bygg för det.