Mobilní UX pro e-shopy: mobile-first přístup v praxi
Google indexuje e-shopy podle mobilní verze a většina mobilních webů má podle Baymard Institute jen průměrné UX. Ukážeme, jak na mobile-first přístup krok za krokem.
Na mobilu dnes zákazník e-shop nejčastěji objeví, prohlíží a často i dokončí nákup. Přesto řada e-shopů vzniká na velkém monitoru a mobilní verze je jen to, co zbude po zmenšení. Výsledek známe z praxe: tlačítka, která palcem netrefíte, filtry schované na třech místech a pokladna, kde klávesnice zakryje pole, které zrovna vyplňujete.
Mobile-first znamená otočit pořadí. Nejdřív navrhnout malou obrazovku, dotyk a pomalejší připojení, až potom desktop. V článku ukazujeme, proč to má smysl i z pohledu SEO a co konkrétně na mobilu kontrolujeme.
Proč mobile-first není jen módní slovo
Dva důvody jsou čistě praktické.
Za prvé Google. Na Search Central blogu Google oznámil, že přechod na mobile-first indexing je dokončený, a od července 2024 prochází weby výhradně mobilním Googlebotem. Co na mobilní verzi chybí, třeba texty kategorií schované jen pro desktop nebo strukturovaná data, s tím vyhledávač nepracuje.
Za druhé kvalita. Baymard Institute ve svém benchmarku mobilního ecommerce UX pro rok 2026 hodnotí 75 % mobilních webů velkých e-shopů jako „průměrné“ (mediocre). Jde o ruční hodnocení desítek tisíc prvků na více než 150 předních e-shopech. Když průměrně dopadají i velcí hráči, je to prostor, kde se menší e-shop může odlišit.
A český kontext? Nakupování z mobilu roste, což je vidět mimo jiné na nástupu plateb přes Apple Pay a Google Pay. Přesný podíl mobilu se liší obor od oboru, proto doporučujeme vycházet z vlastní analytiky: podíl návštěv, tržeb a konverzní poměr podle zařízení.
Navigace: co zákazník nevidí, to nepoužije
Nielsen Norman Group ve studii se 179 účastníky zjistil, že skrytá navigace (typicky hamburger menu) má výrazně horší objevitelnost než navigace viditelná nebo částečně viditelná. Úkoly trvaly déle a lidé je vnímali jako těžší. Na mobilu se hamburger menu úplně vyhnout nejde, ale dá se zmírnit:
- Popište menu slovem. Ikona se třemi čárkami s nápisem „Menu“ nebo „Kategorie“ je srozumitelnější.
- Vyhledávání nechte viditelné jako pole, ne jen jako ikonu lupy. U větších katalogů je to hlavní cesta k produktu.
- Hlavní kategorie ukažte i mimo menu, například jako vodorovný pruh nebo dlaždice na homepage.
- Na stránce kategorie ukažte podkategorie nahoře, aby zákazník nemusel znovu otevírat menu.
Strukturu kategorií podrobně rozebíráme v článku Navigace a struktura kategorií.
Dotyk a palec: velikost a rozmístění ovládacích prvků
Myš je přesná, prst ne. WCAG 2.2 zavedla kritérium 2.5.8 Target Size (Minimum) na úrovni AA: interaktivní cíl má mít aspoň 24 × 24 CSS pixelů, nebo kolem sebe dostatečný prostor. To je minimum pro přístupnost. Pro pohodlné ovládání platformní směrnice doporučují víc: Apple ve svých Human Interface Guidelines 44 × 44 bodů, Material Design od Googlu 48 × 48 dp.
| Prvek | Minimum (WCAG 2.2 AA) | Doporučujeme |
|---|---|---|
| Hlavní tlačítko (Do košíku, Pokračovat) | 24 × 24 px | aspoň 44–48 px na výšku, přes celou šířku nebo většinu obrazovky |
| Ikony v hlavičce (košík, účet, menu) | 24 × 24 px | klikací plocha 44 × 44 px, i když ikona je menší |
| Zaškrtávátka ve filtrech | 24 × 24 px nebo rozestup | klikací celý řádek včetně textu |
| Odkazy v textu | výjimka pro inline odkazy | dostatečné řádkování |
Rozmístění je stejně důležité. Hlavní akce patří tam, kam palec dosáhne, tedy spíš do spodní části obrazovky. Osvědčuje se lepivé (sticky) tlačítko „Do košíku“ na detailu produktu, které se objeví, když původní tlačítko odroluje pryč. Pozor jen, aby lepivé lišty nezabíraly příliš místa a nepřekrývaly obsah nebo cookie lištu.
Vyhledávání a filtry na malé obrazovce
Na desktopu jsou filtry v levém sloupci vidět pořád. Na mobilu jsou schované za tlačítkem a tady e-shopy nejčastěji chybují:
- Tlačítko „Filtrovat“ musí být výrazné a mít vedle sebe řazení.
- Po výběru filtru ukažte počet výsledků („Zobrazit 48 produktů“), aby zákazník věděl, co ho čeká.
- Aktivní filtry ukažte nad výpisem jako štítky, které jde jedním klepnutím zrušit.
- Našeptávač ve vyhledávání ať ukazuje produkty s fotkou a cenou i kategorie, ne jen texty.
U velkých katalogů se vyplatí chytřejší vyhledávání, které rozumí synonymům a překlepům. To řešíme v rámci AI vyhledávání.
Detail produktu a pokladna na mobilu
Na detailu produktu má zákazník na první obrazovce vidět fotku, název, cenu, dostupnost a tlačítko do košíku. Dlouhé popisy a parametry rozdělte do sbalitelných sekcí s jasnými nadpisy. Galerie ať jde listovat prstem a přiblížit gestem. Víc v článku Product page UX.
V pokladně rozhodují formuláře:
- správné typy polí (
type="tel",type="email",inputmode="numeric"u PSČ), aby mobil ukázal vhodnou klávesnici, - atribut
autocomplete, aby prohlížeč vyplnil adresu za zákazníka, - chybová hláška přímo u pole a po chybě nic nemizí,
- platby jedním klepnutím přes Apple Pay a Google Pay.
Celou pokladnu rozebíráme v článku Checkout UX: jak snížit opuštěné košíky.
Rychlost je součást UX
Na mobilu se pomalost trestá víc, protože zákazník je často na mobilních datech a slabším zařízení. Google k měření používá Core Web Vitals. Podle web.dev by dobrá stránka měla mít:
- LCP (načtení hlavního obsahu) do 2,5 s,
- INP (odezva na interakci) do 200 ms,
- CLS (posouvání obsahu při načítání) do 0,1.
Hodnotí se 75. percentil skutečných návštěv, takže nestačí, že je web rychlý na vašem novém telefonu na Wi-Fi. Nejčastější brzdy na mobilních e-shopech jsou neoptimalizované fotky, těžké slidery na homepage a skripty třetích stran. Jak je hledat a opravovat, popisujeme v článku Core Web Vitals pro e-shopy.
Rychlost se týká i vnímání. Tlačítko, které po klepnutí hned ukáže stav načítání, nebo krátká animace přidání do košíku dávají zákazníkovi jistotu, že se něco děje. Právě to jsou mikrointerakce. Musí ale být lehké, jinak zhorší INP.
Jak na to prakticky: mobilní checklist
Otestujte e-shop na skutečném telefonu, ideálně starším Androidu přes mobilní data, a projděte:
- Vejde se na první obrazovku homepage vyhledávání a cesta do kategorií?
- Je menu popsané slovem a hlavní kategorie jsou vidět i mimo něj?
- Mají hlavní tlačítka aspoň 44 px na výšku a ikony dostatečnou klikací plochu?
- Je tlačítko „Do košíku“ na detailu produktu stále po ruce?
- Ukazují filtry počet výsledků a dají se aktivní filtry jednoduše zrušit?
- Ukáže mobil u každého pole v pokladně správnou klávesnici a funguje automatické vyplňování?
- Nabízíte platbu přes Apple Pay a Google Pay?
- Splňuje mobilní verze Core Web Vitals v datech ze skutečných návštěv?
- Obsahuje mobilní verze stejné texty a strukturovaná data jako desktop?
- Sledujete konverzní poměr zvlášť pro mobil a desktop?
Pokud víc než tři odpovědi zní „ne“, mobil vám pravděpodobně bere tržby. Kde přesně, odhalí náš UX audit, který máme hotový do 10 dnů, včetně seznamu oprav seřazeného podle dopadu. Když je problémů tolik, že nemá smysl je záplatovat, navrhneme redesign postavený od mobilu. Kompletní redesign obvykle trvá 6–10 týdnů.
Potřebujete s tím pomoct?