A mobilos webshopokban a kosárelhagyás aránya 85,65%, az asztali gépeken ennél alacsonyabb. Ennek a különbségnek jó része a megfelelő dizájndöntésekkel elkerülhető. Ebből a cikkből kiderül, mitől mobilbarát igazán egy webshop, és hogyan juthatsz el odáig oldalról oldalra.
Mi a különbség a mobilbarát és a mobilra optimalizált között?
A mobilbarát azt jelenti, hogy a webshop nem romlik el kis képernyőn. A szöveg jól tördelődik, a képek átméreteződnek, a gombokra rá lehet koppintani. Ez a minimum. A Google szerint az indexeléshez ez szükséges.
A mobilra optimalizált azt jelenti, hogy a webshopot úgy tervezték, hogy mobilon is vásárlásra ösztönözzön. Az elrendezés, az információk sorrendje, a koppintható felületek, a fizetési folyamat és az oldalsebesség mind arra van hangolva, ahogyan az emberek telefonról vásárolnak. A webshop lehet mobilbarát anélkül, hogy mobilra optimalizált lenne. Sok ilyen van.
A különbség azért fontos, mert a mobilbarát csak a belépő. A bevételt a mobilra optimalizált webshop hozza. Az a webshop, amely telefonon nem romlik el, de 8 másodperc alatt töltődik be, és egérre, billentyűzetre tervezett fizetési űrlapja van, technikailag mobilbarát. Mobilra optimalizált viszont nem. Minden fejlesztés, ami a "nem romlik el" szint fölé visz, a konverziós arányodat javítja.
Miért változtat meg mindent a Google mobile-first indexelése?
A Google mobile-first indexelést használ, vagyis a webshopodat a mobilos verziója alapján rangsorolja. Nem az asztali verzió alapján. Ha a mobilos webshopodon kevesebb a tartalom, kevesebb a belső link, vagy a képek nem töltődnek be, a Google ezekre a hiányosságokra építi a képét rólad.
Ennek közvetlen hatása van a keresési helyezésedre. Az a webshop, amely asztali gépen teljesnek látszik, mobilon viszont lecsupaszított, azt a helyezést kapja, amit a mobilos változata megérdemel. Ha a termékleírások mobilon le vannak vágva, a Google a levágott változatot indexeli. Ha a navigációs linkek mobilon összecsukott menü mögé kerülnek, a Google kevésbé jól tudja bejárni őket.
A gyakorlati tanulság az, hogy a mobilos teljesítmény nem csak felhasználói élmény kérdése. SEO-kérdés is. Ha javítod a mobilos webshopodat, a keresési helyezésed is javul. Minden mobilos javítás kétszeresen megtérül.
A Core Web Vitals és hatása a helyezésedre
A Core Web Vitals a Google által rangsorolási jelként használt teljesítménymutatók csoportja. A Largest Contentful Paint azt méri, mennyi idő alatt töltődik be az oldal fő tartalma. Az Interaction to Next Paint azt méri, milyen gyorsan reagál az oldal a felhasználó beavatkozására. A Cumulative Layout Shift azt méri, mennyire csúszik el váratlanul az oldal elrendezése betöltés közben.
Mindhárom számít mobilon, ahol a hálózat lassabb, a processzor pedig gyengébb, mint asztali gépen. Egy asztali böngészőben elfogadható eredmény megbukhat egy középkategóriás telefonon, 4G-kapcsolaton. A forgalmad jelentős része pedig éppen ilyen telefonról érkezik.
A rossz Core Web Vitals eredmények egymástól függetlenül rontják a helyezést és a konverziót. Tanulmányok szerint a mobilos oldal minden további egy másodpercnyi betöltési ideje 4,42%-kal csökkenti a konverziós arányt. Az az oldal, amely 2 helyett 5 másodperc alatt töltődik be, a lehetséges konverziók felét elveszítheti, mielőtt bárki meglátná a termékeidet.
Mobilos dizájn oldaltípusonként
A webshop minden oldaltípusának más a mobilos prioritása. Ha mindegyiket egyformán kezeled, egyiket sem optimalizálod jól.
Főoldal
Mobilon a főoldalnak már az első görgetésen belül el kell mondania, mit árul a webshop, és hová érdemes kattintani. Az asztali főoldalak gyakran széles hero-szekciót használnak több elemmel. Mobilon ugyanez a szekció az egész képernyőt kitölti. Ha nem közvetíti azonnal az értéket, és nem hív cselekvésre, a látogató továbbgörget vagy elmegy.
A fő navigációt tartsd néhány koppintással elérhetővé. A hamburger menü bevett megoldás, de a benne lévő elemeket szűkítsd arra a néhány kategóriára, amelyre egy első látogatónak valóban szüksége van. Az eldugott navigáció mobilon láthatatlan navigáció.
Kategóriaoldalak
A kategóriaoldalaknak mobilon egyensúlyt kell tartaniuk a termékek száma és a használhatóság között. A kétoszlopos rács a legtöbb terméktípusnál jól működik. Az egyoszlopos lista ott jobb, ahol számít a képek részletessége. Mindkettő jobb, mint a háromoszlopos rács, amelyben a termékképek a legtöbb telefonon túl kicsik ahhoz, hogy jól látsszanak.
A szűrők és a rendezés a kategóriaoldalakon kulcsfontosságúak, mobilon viszont nehezen kezelhetők. Ha a szűrőpanel oldalsáv helyett teljes képernyős rétegként nyílik meg, kis képernyőn is jól használható. A kategóriaoldalak felépítéséről bővebben a mi az a kategóriaoldal, és hogyan tervezd meg című útmutatóban olvashatsz.
Termékoldalak
A mobilos termékoldalnak gyorsan három kérdésre kell válaszolnia. Mi ez? Mennyibe kerül? Könnyen megkaphatom? Az elsődleges képnek azonnal be kell töltődnie, és elhúzhatónak kell lennie. Az ár, a változatválasztó és a kosárba gomb legyen látható görgetés nélkül.
A kosárba gombot mobilon tedd a képernyő látható részére, de legalább használj olyan ragadós gombot, amely a termékleírás görgetése közben is követi a látogatót. Aki visszagörget a kosárba tételhez, annak még egy esélye van meggondolni magát.
Fizetés
A fizetésnél a legmagasabb a mobilos lemorzsolódás. Minél kevesebb a lépés és a mező, annál jobb. A vendégként fizetés lehetősége megszünteti a fiókkészítés akadályát, amely miatt sok mobilos felhasználó feladja a vásárlást. A fizetési oldal részletes optimalizálásáról a hogyan tervezz olyan fizetési oldalt, amely csökkenti a lemorzsolódást című útmutatóban olvashatsz.
Hüvelykujj-zónák és ergonomikus dizájn
Az emberek a hüvelykujjukkal használják a telefont, és a hüvelykujj a képernyőnek csak bizonyos részeit éri el kényelmesen. A képernyő alsó közepe a legkönnyebben elérhető zóna. A felső sarkok a legnehezebben elérhetők. Ez nem apróság. Ez ergonomikus tény, amely közvetlenül befolyásolja, hogy a vásárlók használják-e a webshopod kulcselemeit.
A legfontosabb műveleti gombokat, például a kosárba tételt, a tovább a fizetéshez és a szűrő alkalmazása gombot, az alsó középső zónába tedd, ahol a hüvelykujj természetesen pihen. A képernyő aljára tett navigációs sáv nagy telefonokon könnyebben elérhető, mint a felső. A felső sáv asztali megoldás, amely egykezes mobilhasználatnál rosszul működik.
A túl kicsi koppintási felületek gyakori mobilos használhatósági gondot okoznak. Az a gomb vagy link, amelyre egérrel könnyű kattintani, ujjheggyel már nehezen találd el pontosan. A Google legalább 48 x 48 pixeles koppintási felületet javasol, a szomszédos felületek között megfelelő hellyel. A túl kicsi felületek mellényúláshoz, bosszúsághoz és kilépéshez vezetnek.
Mobilos fizetés és űrlapok optimalizálása
Az űrlapok a mobilos fizetés egyik legnagyobb akadályai. A billentyűzetre és egérre tervezett űrlap érintőképernyőn, az automatikus javítás közbeszólásával lassú, és könnyű benne hibázni. Néhány konkrét fejlesztéssel az űrlapok mobilon sokkal könnyebben kitölthetők.
Használd a megfelelő billentyűzettípusokat
A HTML beviteli típusok megmondják a mobilböngészőnek, melyik billentyűzetet mutassa. Az e-mail típusú mezőnél a billentyűzeten jól látható a @ jel. A tel típusú telefonszám-mezőnél számbillentyűzet jelenik meg. Az alapértelmezett szöveges típusú mezőnél minden, a telefonszám és az irányítószám is teljes billentyűzettel kérhető.
A rossz beviteli típus felesleges súrlódást okoz. A vásárlónak kézzel kell billentyűzetet váltania, vagy rossz kiosztással kell gépelnie. A megoldás mezőnként egyetlen attribútum átírása. Ez a mobilos fizetés egyik leginkább megtérülő fejlesztése.
Csökkentsd az űrlapmezők számát
A fizetési űrlap minden mezője súrlódási pont mobilon. Nézd át a fizetési oldalad, és vedd ki azt a mezőt, amely nem elengedhetetlen a vásárlás lezárásához. A külön vezetéknév és keresztnév mező általában összevonható. A megszólítás mezőre ritkán van szükség. A több címsor sokszor helyettesíthető egyetlen címkereséssel.
Ha marketing- vagy analitikai célból további adatokat szeretnél gyűjteni, inkább a vásárlás után kérd el, ne fizetés közben. Egy vásárlás utáni kérdőív ugyanazt az adatot megadja, a lemorzsolódás kockázata nélkül.
Támogasd az automatikus kitöltést
A modern mobilböngészők és jelszókezelők ki tudják tölteni a fizetési mezőket, ha az űrlapod megfelelően van felépítve. Az egyes mezők autocomplete attribútuma megmondja a böngészőnek, milyen adatról van szó. A helyes autocomplete értékű mezőt a böngésző automatikusan kitölti, ha a vásárló elmentette az adatait. Az automatikus kitöltés mobilon jelentősen lerövidítheti a fizetést, ami valódi tényező abban, hogy a vásárló befejezi-e a vásárlást.
Kínálj mobilos fizetési módokat
A mobilos fizetési módok, például a digitális tárcák lehetővé teszik, hogy a vásárló biometrikus azonosítással fizessen, ne kézzel adja meg a kártyaadatait. A telefonon vásárlónak komoly könnyebbség, hogy nem kell begépelnie egy 16 jegyű kártyaszámot, a lejárati dátumot és a biztonsági kódot. Az a webshop, amely ezeket a fizetési módokat a hagyományos kártyás fizetés mellett kínálja, magasabb mobilos konverziót ér el, mert a legérzékenyebb lépésnél megszűnik a súrlódás.
Oldalsebesség mobilon
Az oldalsebesség a mobilos webshopokat erősebben érinti, mint az asztaliakat, mert a mobilkapcsolat lassabb, a processzor gyengébb. Az az oldal, amely szélessávon 2 másodperc alatt betöltődik, mobilnetes kapcsolaton akár 6 másodpercig is tarthat. Tanulmányok szerint a mobilos látogatók 53%-a azt várja, hogy az oldal 3 másodpercen belül betöltődjön. Aki nem ezt kapja, elmegy.
Tömörítsd a képeket
A képek a legnagyobb tényezők a mobilos betöltési időben. Minden termékképet, bannert és hangulatfotót tömöríteni kell, mielőtt eljut a böngészőig. A modern képformátumok azonos vizuális minőség mellett jóval kisebb fájlméretet adnak, mint a régebbiek.
A lusta betöltés (lazy loading) elhalasztja a képernyő alatti képek betöltését addig, amíg a vásárló lefelé nem görget. Az oldal látható része azonnal betöltődik. Minden más csak akkor, amikor szükség van rá. Ez a megoldás akkor is gyorsabbnak érezteti az oldalt, ha az oldal teljes mérete ugyanaz marad.
Csökkentsd a szkriptek számát
A harmadik féltől származó szkriptek, például az analitikai követők, a csevegő widgetek, a marketingpixelek és az értékelő eszközök minden oldal betöltési idejét növelik. Minden szkriptet le kell tölteni, értelmezni és futtatni. Mobilon ez tovább tart, mint asztali gépen. Nézd át a webshopodon futó szkripteket, és távolítsd el azokat, amelyek nem járulnak hozzá aktívan a bevételhez vagy a vásárlói élményhez.
A szükséges szkriptek gyakran aszinkron módon is betölthetők, vagyis a fő tartalom után, nem előtte. Így az oldal használható, mielőtt a szkriptek betöltődnének, ami javítja a Core Web Vitals eredményeket és a vásárló élményét.
Teszteld valódi eszközökön
A böngésző fejlesztői eszközei között van mobilszimulátor, amellyel úgy nézheted meg a webshopodat, mintha telefonon lennél. A szimulátor az elrendezés ellenőrzésére jó, de nem adja vissza pontosan egy valódi eszköz teljesítményét valódi hálózaton. Egy középkategóriás telefon 4G-kapcsolaton másképp viselkedik, mint amit a szimulátor mutat egy gyors asztali gépen.
Rendszeresen tesztelj valódi eszközökön. Azok a hibák, amelyek a szimulátorban láthatatlanok, például az érintésesemények késése, a betűtípus-megjelenítési gondok és egyes elrendezési hibák, valódi eszközön azonnal kiderülnek. Ha nincs hozzáférésed többféle eszközhöz, az interneten ingyenes eszközök is vannak, amelyek valódi készülékeken, valódi hálózati kapcsolaton keresztül mutatják meg a webshopodat.
Mobilos SEO a sebességen túl
A mobilos SEO-ról a sebesség és a Core Web Vitals szól a legtöbbet, de több más tényező is befolyásolja, mennyire jól szerepel a webshopod a mobilos keresési találatok között.
Kerüld azokat az előugró rétegeket, amelyek mobilon eltakarják a fő tartalmat. A Google mobilos keresési algoritmusa bünteti a betöltés után azonnal az oldalt eltakaró felugró ablakokat és rétegeket. Ha használsz e-mail-gyűjtő felugró ablakot vagy sütibanner, az ne takarja el a fő tartalmat, mielőtt a látogató megnézhette volna az oldalt.
Gondoskodj róla, hogy az asztali webshopodon látható összes tartalom mobilon is elérhető legyen. Ha a tartalom mobilon egy "tovább olvasom" kapcsoló mögött van, a Google az összecsukott állapotot indexelheti a teljes szöveg helyett. A termékleírásoknak és a kategóriatartalmaknak, amelyek hozzájárulnak a helyezésedhez, mobilon további koppintások nélkül teljes egészében elérhetőnek kell lenniük.
A belső linkelés legyen egységes asztali gépen és mobilon. Ha az asztali webshopodon feltűnő kapcsolódó termékek szekció van más kategóriákra mutató linkekkel, a mobilos verzióban is legyenek ott ezek a linkek. Azok a navigációs linkek, amelyekből a Google a webshopod szerkezetét érti meg, ne tűnjenek el mobilon.
Hogyan segít ebben a WEMASY?
A WEMASY weboldalépítőben felépítheted a webshopod oldalait, és a mobilos megjelenésüket ugyanazokkal az elvekkel alakíthatod, amelyekről ebben a cikkben olvastál. Az e-commerce oldalon többet megtudhatsz, a árak oldalon pedig megnézheted, mit tartalmaznak a csomagok.
Gyakran ismételt kérdések
Hogyan ellenőrizhetem, hogy mobilbarát-e a webshopom?
A Google Search Console Mobilhasználhatóság jelentése megmutatja az oldalaid konkrét hibáit, például a túl kicsi szöveget, az egymáshoz túl közel lévő kattintható elemeket vagy a képernyőnél szélesebb tartalmat. A PageSpeed Insights külön adja meg a Core Web Vitals pontszámokat mobilra és asztali gépre. Mindkét eszköz ingyenes, és konkrét, használható eredményt ad, nem csak általános megfelelt vagy nem felelt meg minősítést. A WEMASY weboldalépítőjében felépítheted a webshopod oldalait.
Befolyásolja a mobilos dizájn a Google-helyezésemet?
Igen, közvetlenül. A Google mobile-first indexelést használ, vagyis a webshopodat a mobilos verziója alapján rangsorolja. A Core Web Vitals pontszámok, amelyeket a mobilos teljesítmény tényezői, például a betöltési sebesség és az elrendezés stabilitása befolyásolnak, megerősített rangsorolási jelek. Az a webshop, amely mobilon jól teljesít, helyezési előnyben van azzal szemben, amelyik nem, akkor is, ha az asztali verziók egyenértékűek.
Mi a leggyakoribb mobilos fizetési probléma?
Az űrlapok súrlódása a leggyakoribb gond. Az egérre és billentyűzetre tervezett fizetési űrlapok érintőképernyőn túl sok fáradságot kívánnak. A legnagyobb hatású javítások: a helyes beviteli típusok használata, hogy a megfelelő billentyűzet jelenjen meg, a mezők számának csökkentése, az automatikus kitöltés engedélyezése, és olyan mobilos fizetési módok kínálata, amelyek kiváltják a kártyaadatok kézi megadását. E négy gond javítása általában mérhetően javítja a mobilos fizetések befejezési arányát.
Hogyan hat a mobilos oldalsebesség az eladásokra?
Az összefüggés közvetlen és jól dokumentált. Tanulmányok szerint a betöltési idő minden további másodperce nagyjából 4%-os konverziócsökkenést okoz. Az a webshop, amely 1 másodperc alatt betöltődik, érezhetően jobb arányban konvertál, mint ugyanaz a webshop 4 másodperces betöltéssel. A mobilos webshopoknál különösen, ahol változó a hálózat, és a látogatók gyorsabban hagyják ott a lassú oldalt, az oldalsebesség javítása gyakran a leggyorsabban megtérülő technikai beruházás.
Építsek külön mobilos webshopot, vagy használjak reszponzív dizájnt?
A reszponzív dizájn, ahol egyetlen webshop igazítja az elrendezését a képernyő méretéhez, a bevett megoldás, és a Google is ezt javasolja. A külön mobilos oldalak karbantartási terhet jelentenek, indexelési következetlenségeket okozhatnak, és nehezebb őket szinkronban tartani, ahogy a termékeket és a tartalmat frissíted. Ha nincs konkrét működési ok külön mobilos élményre, az egyetlen URL-en futó reszponzív dizájn a helyes választás.
Hogyan csökkenthetem a mobilos kosárelhagyást?
A mobilos kosárelhagyást a súrlódás és a figyelemelterelés együtt okozza. A leghatásosabb stratégiák: minél kevesebb lépésből és mezőből álló egyszerű fizetés, vendégként fizetés lehetősége, amely megszünteti a fiókkészítés akadályát, a kártyaadatok kézi megadását kiváltó mobilos fizetési módok, és gyorsan betöltődő fizetési oldal. Az elhagyott kosarakra küldött e-mailes remarketing is hatásos azoknál, akik nem fejezték be a vásárlást egy látogatás alatt.