Opuštění košíku v mobilním e-commerce dosahuje 85,65%, na desktopu je míra nižší. Velkou část tohoto rozdílu lze odstranit správnými rozhodnutími v designu. Tento článek ukazuje, čím se opravdu mobilní e-shop vyznačuje a jak se k tomu dostat stránku po stránce.
Jaký je rozdíl mezi e-shopem přizpůsobeným mobilům a optimalizovaným pro mobily?
E-shop přizpůsobený mobilům se na malé obrazovce nerozpadne. Text se správně zalamuje, obrázky se zmenšují a tlačítka jde ťuknout. To je minimální standard. Google ho považuje za nutný pro indexaci.
E-shop optimalizovaný pro mobily je navržený tak, aby na mobilu prodával. Rozvržení, hierarchie informací, velikost tlačítek, pokladna i rychlost stránek jsou nastavené přesně podle toho, jak lidé na telefonech nakupují. E-shop může být přizpůsobený mobilům, a přesto nebýt optimalizovaný. Mnoho jich takových je.
Rozdíl je důležitý, protože přizpůsobení mobilům vás dostane do hry. Optimalizace pro mobily přináší tržby. E-shop, který se v telefonu nerozpadne, ale načítá se 8 sekund a má pokladní formulář vymyšlený pro myš a klávesnici, je technicky přizpůsobený mobilům. Optimalizovaný pro mobily ale není. Každé zlepšení nad rámec "nic se nerozbilo" je zlepšením vaší konverze.
Proč mobile-first indexace Google mění všechno
Google používá mobile-first indexaci, což znamená, že váš e-shop řadí podle jeho mobilní verze. Ne podle desktopové. Pokud má váš mobilní e-shop méně obsahu, méně interních odkazů nebo obrázky, které se nenačtou, vychází Google při hodnocení právě z těchto nedostatků.
To má přímý dopad na vaše pozice ve vyhledávání. E-shop, který na desktopu vypadá kompletně, ale na mobilu je okleštěný, se bude řadit podle toho, co ukazuje mobilní verze. Pokud jsou popisy produktů na mobilu zkrácené, Google indexuje zkrácenou verzi. Pokud jsou odkazy v navigaci schované za sbaleným menu, nemusí je Google procházet tak efektivně.
V praxi to znamená, že mobilní výkon není jen problém uživatelského zážitku. Je to i problém SEO. Zlepšením mobilního e-shopu zlepšíte své pozice ve vyhledávání. Každá oprava na mobilu tak funguje dvojnásobně.
Core Web Vitals a jak ovlivňují vaše pozice
Core Web Vitals jsou sada výkonnostních metrik, které Google používá jako signály pro řazení. Largest Contentful Paint měří, jak dlouho se načítá hlavní obsah stránky. Interaction to Next Paint měří, jak rychle stránka reaguje na akci uživatele. Cumulative Layout Shift měří, jak moc se rozvržení stránky během načítání nečekaně posouvá.
Na mobilu záleží na všech třech, protože rychlost sítě i výkon procesoru jsou nižší než na desktopu. Skóre, které je v desktopovém prohlížeči přijatelné, může na telefonu střední třídy s připojením 4G propadnout. A právě takový telefon používá významná část vašich návštěvníků.
Špatné skóre Core Web Vitals škodí pozicím i konverzím, každému zvlášť. Podle studií každá další sekunda načítání mobilní stránky snižuje konverzi o 4,42%. Stránka, která se načítá 5 sekund místo 2, může přijít o polovinu potenciálních konverzí ještě dřív, než kdokoli uvidí vaše produkty.
Mobilní design podle typu stránky
Každý typ stránky v e-shopu má na mobilu jiné priority. Když se všechny stránky řeší stejně, žádná z nich není dobře optimalizovaná.
Úvodní stránka
Úvodní stránka na mobilu musí v rámci prvního posunutí sdělit, co e-shop prodává a kam má návštěvník jít dál. Desktopové úvodní stránky často používají široké hlavní sekce s více prvky. Na mobilu tatáž sekce zabere celou obrazovku. Pokud okamžitě nesdělí hodnotu a nepozve k akci, návštěvník se posune dál nebo odejde.
Udržte hlavní navigaci dostupnou bez zbytečně mnoha ťuknutí. Hamburger menu je standard, ale položky v něm by se měly omezit na kategorie, které první návštěvník opravdu potřebuje. Schovaná navigace je na mobilu neviditelná navigace.
Stránky kategorií
Stránky kategorií musí na mobilu vyvážit hustotu produktů a použitelnost. Dvousloupcová mřížka funguje dobře u většiny typů produktů. Jednosloupcový seznam je lepší tam, kde záleží na detailu obrázku. Obojí je lepší než třísloupcová mřížka, kvůli které jsou obrázky produktů na většině telefonů příliš malé.
Filtrování a řazení je na stránkách kategorií zásadní a na mobilu obtížné. Filtr, který se otevře jako překryvná vrstva přes celou obrazovku, a ne jako boční panel, je na malém displeji použitelný. Podrobnější pohled na strukturu stránek kategorií najdete v průvodci co je stránka kategorie a jak ji navrhnout.
Stránky produktů
Stránka produktu na mobilu musí rychle odpovědět na tři otázky. Co to je? Kolik to stojí? Dostanu to snadno? Hlavní obrázek se má načíst okamžitě a jít přejíždět prstem. Cena, výběr varianty a tlačítko pro vložení do košíku musí být vidět bez posouvání.
Umístěte tlačítko pro vložení do košíku na mobilu nad ohyb, nebo alespoň použijte lepivé tlačítko, které sleduje uživatele při posouvání popisu produktu. Zákazník, který se musí vracet nahoru, aby produkt vložil do košíku, má o jednu příležitost víc si to rozmyslet.
Pokladna
V pokladně je opuštění na mobilu nejvyšší. Čím méně kroků a polí, tím lépe. Možnost objednat bez registrace odstraní překážku v podobě zakládání účtu, kvůli které mnoho mobilních uživatelů odchází. Podrobné rady k optimalizaci pokladny najdete v průvodci jak navrhnout pokladnu, která snižuje odchody.
Zóny palce a ergonomický design
Lidé ovládají telefon palcem a palec pohodlně dosáhne jen na určité části obrazovky. Nejsnáze dosažitelná je spodní střední část. Nejhůř se sahá do horních rohů. Není to detail. Je to ergonomická realita, která přímo ovlivňuje, zda zákazníci vůbec použijí klíčové prvky vašeho e-shopu.
Nejdůležitější tlačítka, jako vložit do košíku, pokračovat do pokladny a použít filtr, umístěte do spodní střední zóny, kde palec přirozeně odpočívá. Navigační lišty ve spodní části obrazovky jsou na velkých telefonech dostupnější než horní lišty. Horní lišty jsou desktopová konvence, která se při ovládání jednou rukou na mobilu příliš nehodí.
Malé cíle pro ťuknutí jsou častý problém použitelnosti na mobilu. Tlačítka a odkazy, na které se snadno klikne kurzorem myši, je těžké přesně trefit špičkou prstu. Google doporučuje cíle velké alespoň 48 na 48 pixelů s dostatečnou mezerou mezi sousedními prvky. Příliš malé cíle vedou k přeťuknutí, frustraci a odchodům.
Mobilní pokladna a optimalizace formulářů
Formuláře jsou jedním z největších zdrojů tření v mobilní pokladně. Formulář vymyšlený pro klávesnici a myš je na dotykové obrazovce pomalý a náchylný k chybám, zvlášť když do toho zasahuje automatické opravování. Několik konkrétních úprav výrazně usnadní jeho vyplnění na mobilu.
Používejte správné typy klávesnice
Typy HTML vstupů říkají mobilnímu prohlížeči, kterou klávesnici zobrazit. Pole pro e-mail s typem email ukáže klávesnici se zřetelně umístěným znakem @. Pole pro telefonní číslo s typem tel ukáže číselnou klávesnici. Pole s výchozím typem text zobrazí plnou klávesnici pro všechno, včetně telefonních čísel a PSČ.
Špatný typ vstupu přidává zbytečné tření. Zákazník musí klávesnice přepínat ručně nebo psát na nevhodném rozložení. Oprava je změna jediného atributu u každého pole. Patří k úpravám s nejlepším poměrem výsledku a vynaložené práce, které mobilní pokladna nabízí.
Omezte počet polí formuláře
Každé pole v pokladním formuláři je na mobilu místo, kde to drhne. Projděte svou pokladnu a odstraňte každé pole, které není nezbytné k dokončení objednávky. Samostatná pole pro jméno a příjmení se většinou dají sloučit. Pole pro titul se potřebují zřídka. Více řádků adresy lze často nahradit jedním vyhledáváním adresy.
Pokud potřebujete získat další informace pro marketing nebo analytiku, zvažte, zda je nesbírat až po dokončení nákupu, ne v pokladně. Dotazník po nákupu vám dá stejná data bez rizika, že zákazník odejde.
Podporujte automatické vyplňování
Moderní mobilní prohlížeče a správci hesel umí pole v pokladně vyplnit automaticky, pokud je váš formulář správně postavený. Atribut autocomplete u každého pole říká prohlížeči, o jaký druh údajů jde. Pole se správnou hodnotou autocomplete prohlížeč vyplní sám, pokud má zákazník své údaje uložené. Automatické vyplňování může na mobilu výrazně zkrátit čas v pokladně, což je skutečný faktor toho, zda zákazník nákup dokončí.
Nabídněte mobilní platební metody
Mobilní platby, například digitální peněženky, umožňují zákazníkům dokončit nákup biometrickým ověřením místo ručního zadávání údajů o kartě. Pro zákazníka s telefonem v ruce je významnou úlevou, že nemusí opisovat 16místné číslo karty, datum platnosti a bezpečnostní kód. E-shopy, které tyto metody nabízejí vedle běžných plateb kartou, mají vyšší mobilní konverzi, protože na nejcitlivějším kroku zmizí tření.
Rychlost stránek na mobilu
Rychlost stránek zasáhne mobilní e-shopy víc než ty desktopové, protože mobilní připojení je pomalejší a procesory slabší. Stránka, která se na pevném připojení načte za 2 sekundy, se může na mobilních datech načítat 6 sekund. Podle studií 53% mobilních návštěvníků očekává načtení stránky do 3 sekund. Kdo ho nedostane, odchází.
Komprimujte obrázky
Obrázky jsou největším jednotlivým přispěvatelem k době načítání mobilní stránky. Každý obrázek produktu, banner i životní fotka by měl být před doručením do prohlížeče zkomprimovaný. Moderní formáty obrázků nabízejí při stejné vizuální kvalitě výrazně menší soubory než ty starší.
Líné načítání (lazy loading) odkládá načtení obrázků pod ohybem, dokud se k nim zákazník neposune. Viditelná část stránky se načte okamžitě. Všechno pod ní se načte, až když je to potřeba. Tato technika zlepšuje vnímanou rychlost načítání, i když celková velikost stránky zůstane stejná.
Omezte skripty
Skripty třetích stran, jako sledovače analytiky, chatovací widgety, marketingové pixely a nástroje pro recenze, prodlužují načítání každé stránky. Každý skript se musí stáhnout, zpracovat a spustit. Na mobilu to trvá déle než na desktopu. Projděte skripty, které na vašem e-shopu běží, a odstraňte ty, které aktivně nepřispívají k tržbám ani k zážitku zákazníka.
Nezbytné skripty se často dají načítat asynchronně, tedy až po hlavním obsahu stránky, ne před ním. Stránka je tak použitelná dřív, než se skripty dokončí, což zlepšuje skóre Core Web Vitals i zážitek zákazníka.
Testujte na skutečných zařízeních
Vývojářské nástroje prohlížeče obsahují mobilní simulátor, v němž můžete e-shop zobrazit, jako byste byli na telefonu. Simulátor je užitečný pro kontrolu rozvržení, ale přesně nenapodobí výkon skutečného zařízení na skutečné síti. Telefon střední třídy s připojením 4G se bude chovat jinak, než ukazuje simulátor na rychlém stolním počítači.
Testujte na skutečných zařízeních pravidelně. Problémy, které simulátor neukáže, třeba zpoždění dotyků, potíže s vykreslením písma a některé chyby rozvržení, jsou na skutečných zařízeních okamžitě vidět. Pokud nemáte k dispozici různá zařízení, najdete online bezplatné nástroje, které váš e-shop zobrazí přes skutečný hardware na skutečných sítích.
Mobilní SEO nad rámec rychlosti
Rychlost a Core Web Vitals jsou nejvíc diskutované stránky mobilního SEO, ale na to, jak si váš e-shop povede ve výsledcích mobilního vyhledávání, má vliv i několik dalších faktorů.
Vyhněte se vrstvám, které na mobilu zakrývají hlavní obsah. Vyskakovací okna a překryvy, které blokují stránku hned po načtení, Google ve svém mobilním vyhledávání penalizuje. Pokud používáte vyskakovací okno pro sběr e-mailů nebo cookie lištu, neměly by zakrývat hlavní obsah dřív, než měl návštěvník šanci stránku vidět.
Ujistěte se, že veškerý obsah viditelný na desktopovém e-shopu je dostupný i na mobilu. Pokud je obsah na mobilu schovaný za přepínačem "zobrazit více", Google může indexovat sbalený stav místo celého textu. U popisů produktů a obsahu kategorií, které přispívají k vašim pozicím, by měl být celý text na mobilu dostupný bez dalších ťuknutí.
Interní prolinkování by mělo být na desktopu i mobilu stejné. Pokud má váš desktopový e-shop výraznou sekci souvisejících produktů s odkazy na další kategorie, měla by je obsahovat i mobilní verze. Odkazy v navigaci, podle kterých Google chápe strukturu vašeho e-shopu, by na mobilu neměly mizet.
Jak WEMASY řeší mobily
E-shop systém WEMASY ve výchozím nastavení vytváří responzivní stránky e-shopu, které se přizpůsobí jakékoli velikosti obrazovky. Stránky produktů, kategorií i pokladna jsou navržené tak, aby splňovaly požadavky mobile-first indexace Google. Pokladna podporuje mobilní platební metody a správně typovaná pole formuláře. Výkon Core Web Vitals je zabudovaný do systému, nemusíte ho ručně optimalizovat. Co je součástí jednotlivých tarifů, zjistíte v ceníku.
Často kladené otázky
Jak zjistím, jestli je můj e-shop vhodný pro mobily?
Google Search Console obsahuje report Použitelnost na mobilu, který upozorní na konkrétní problémy na vašich stránkách, například příliš malý text, příliš blízké klikací prvky nebo obsah širší než obrazovka. PageSpeed Insights vám zvlášť ukáže skóre Core Web Vitals pro mobil i desktop. Oba nástroje jsou zdarma a dávají konkrétní, použitelné výsledky, ne jen obecné prošel či neprošel. S Tvůrcem webů od WEMASY to můžete nastavit přímo na svém e-shopu.
Ovlivňuje mobilní design moje pozice v Google?
Ano, přímo. Google používá mobile-first indexaci, takže váš e-shop řadí podle jeho mobilní verze. Skóre Core Web Vitals, které ovlivňují faktory mobilního výkonu jako rychlost načítání a stabilita rozvržení, je potvrzený signál pro řazení. E-shop, který na mobilu funguje dobře, má před tím, který ne, výhodu v pozicích, i když jsou desktopové verze stejné.
Jaký je nejčastější problém mobilní pokladny?
Nejčastějším problémem je tření ve formulářích. Pokladní formuláře vymyšlené pro myš a klávesnici vyžadují na dotykové obrazovce zbytečně moc úsilí. Nejúčinnější opravy jsou: správné typy vstupů, aby se objevila vhodná klávesnice, méně polí, automatické vyplňování a mobilní platební metody, které odstraní ruční zadávání údajů o kartě. Oprava těchto čtyř věcí obvykle přinese měřitelné zlepšení v dokončování mobilních objednávek.
Jak rychlost mobilní stránky ovlivňuje prodeje?
Souvislost je přímá a dobře zdokumentovaná. Studie ukazují pokles konverze přibližně o 4% za každou další sekundu načítání. E-shop, který se načte za 1 sekundu, konvertuje výrazně lépe než stejný e-shop načítaný 4 sekundy. U mobilních e-shopů zvlášť, kde se podmínky sítě liší a návštěvníci pomalý zážitek opouštějí rychleji, přináší zrychlení stránek často nejrychlejší návratnost ze všech technických investic.
Mám postavit samostatný mobilní e-shop, nebo použít responzivní design?
Responzivní design, kdy se jeden e-shop přizpůsobuje rozvržením velikosti obrazovky, je standardní přístup a ten, který doporučuje Google. Samostatné mobilní weby znamenají víc údržby, mohou způsobit nesrovnalosti v indexaci a hůř se udržují v souladu při aktualizaci produktů a obsahu. Pokud pro samostatný mobilní web nemáte konkrétní provozní důvod, je správnou volbou responzivní design na jedné adrese URL.
Jak snížit opuštění košíku na mobilu?
Opuštění košíku na mobilu způsobuje kombinace tření a rozptýlení. Nejúčinnější strategie jsou: zjednodušená pokladna s co nejmenším počtem kroků a polí, možnost objednat bez registrace, mobilní platební metody, které odstraní ruční zadávání karty, a rychle se načítající pokladna. Účinný je také retargeting e-mailem u opuštěných košíků, kdy zákazník nákup nedokončil při jedné návštěvě.