Mobilní zkušenost dnes rozhoduje dřív než obsah
Mobilní provoz už dlouhodobě tvoří většinu návštěvnosti u řady webů a u e-shopů často i dominantní část konverzí. Přesto se mnoho webů stále navrhuje „desktop-first“ a mobilní verze se jen zmenší. To je chyba, protože na telefonu se mění úplně všechno: pozornost, způsob čtení, délka interakce i tolerance k chybám. Uživatele nezajímá, že je stránka „technicky v pořádku“, pokud se mu při kliknutí posouvá tlačítko pod prst nebo čeká dvě sekundy na otevření menu.
Google navíc hodnotí weby primárně podle mobilní verze. V praxi to znamená, že mobilní UX a technická kvalita přímo ovlivňují SEO i výkon kampaní. Pokud je mobilní web pomalý nebo nepoužitelný, zhoršuje se míra zapojení, roste bounce rate a klesá konverzní poměr. U landing pages bývá rozdíl mezi dobře a špatně optimalizovaným mobilem klidně 20–40 % v konverzích.
Rychlost na mobilu: neřeší se jen „Lighthouse skóre“, ale hlavně LCP a INP
Mnoho týmů sleduje jen celkové skóre v PageSpeed Insights, ale pro reálný výkon jsou důležitější konkrétní metriky. U mobilu nejvíc bolí LCP (Largest Contentful Paint), tedy čas, kdy se zobrazí hlavní obsah, a INP (Interaction to Next Paint), který měří odezvu webu na interakci. Google doporučuje držet LCP pod 2,5 s a INP pod 200 ms. Když web tyto hodnoty překračuje, uživatel má pocit, že „web se zasekl“, i když se technicky načítá dál.
Typický problém na mobilu je těžký hero obrázek, neoptimalizované fonty nebo zbytečný JavaScript. Na desktopu to ještě projde, ale na 4G síti a slabším CPU se projeví každý kilobajt navíc. Praktický postup je jednoduchý: otestujte klíčové landing pages v PageSpeed Insights, Lighthouse a ideálně i v Chrome DevTools se simulací pomalejšího zařízení. Sledujte hlavně:
- velikost hlavního obrázku a jeho formát (WebP/AVIF),
- počet a velikost JS bundle,
- počet requestů při prvním načtení,
- blokující CSS a fonty,
- server response time a TTFB.
U praxe často pomůže už jen odložení nenačítaných skriptů, lazy loading obrázků pod foldem a správné nastavení cache. Pokud máte WordPress, často bývá problém v kombinaci těžké šablony, page builderu a desítek pluginů. U custom webů zase bývá zbytečně velký JS balík a chybějící code splitting.
Prst není myš: tap cíle, rozestupy a ovládání musí být navržené pro dotyk
Na desktopu uživatel přesně míří kurzorem, ale na mobilu pracuje s prstem, který je mnohem méně přesný. To je důvod, proč malé odkazy, těsně vedle sebe umístěná tlačítka nebo nejasné klikací oblasti způsobují frustraci. Google i UX praxe doporučují minimální velikost tap targetu kolem 48 × 48 px, případně dostatečný vizuální i prostorový odstup mezi prvky.
Častá chyba je například seznam produktů, kde je celé „karta“ klikací, ale zároveň obsahuje malé ikonky do wishlistu, sdílení a detailu. Uživatel pak omylem kliká jinam, než chtěl. Podobně nebezpečné jsou sticky lišty, které zakrývají obsah nebo se překrývají s důležitým CTA tlačítkem. Na mobilu musí být interakce jednoznačná a předvídatelná.
Vyplatí se provést jednoduchý audit pomocí reálného telefonu. Projděte 5 nejdůležitějších cest: nákup, poptávku, přihlášení, kontakt a vyhledání produktu. Sledujte, zda se dá vše ovládat jednou rukou, zda prvky nejsou příliš blízko a zda uživatel nemusí zoomovat. V nástrojích jako Hotjar nebo Microsoft Clarity pak uvidíte rage clicks, dead clicks a místa, kde lidé opakovaně klepou bez výsledku.
Formuláře na mobilu: kde se ztrácí nejvíc leadů
Formuláře jsou na mobilu nejcitlivější místo celého webu. To, co desktopový uživatel vyplní za minutu, mobilní návštěvník často vzdá po třech polích. Důvod je jednoduchý: malá klávesnice, špatně zvolený typ inputu, automatické korekce, které kazí údaje, a hlavně příliš dlouhý formulář. Každé zbytečné pole zvyšuje riziko opuštění.
Praktický standard je držet se minima. U poptávkového formuláře často stačí jméno, e-mail nebo telefon a zpráva. Vše ostatní lze vyřešit následně. Pokud potřebujete víc dat, rozdělte formulář na kroky a jasně ukažte, kolik jich zbývá. Na mobilu funguje lépe i vizuální členění do kratších bloků než jedna dlouhá stěna polí.
- pro telefon použijte type=“tel“,
- pro e-mail type=“email“,
- pro čísla type=“number“,
- zapněte správné autocomplete atributy,
- u povinných polí jasně oddělte chyby od instrukcí.
Velmi častý problém je také špatné validování až po odeslání. Uživatel na mobilu nechce po vyplnění všeho zjistit, že telefon má špatný formát nebo chybí znak v e-mailu. Lepší je průběžná validace přímo při psaní, ale bez agresivních hlášek. U e-shopů stojí za pozornost i checkout: pokud je nutné vytvořit účet, zadat adresu dvakrát a vyplnit nepodstatné údaje, konverze jde rychle dolů.
Obsah a layout: když mobilní stránka působí jako zmenšený desktop
Na mobilu nefunguje dlouhý úvod, husté odstavce a složitá navigace. Uživatel scrolluje palcem a vyhledává vizuální kotvy. Když je stránka přeplněná, ztrácí se orientace. Zásadní je hierarchie obsahu: jeden hlavní nadpis, krátký úvod, jasné podnadpisy a dostatek bílého místa. To není estetický detail, ale funkční prvek, který zvyšuje čitelnost a snižuje kognitivní zátěž.
U textového obsahu funguje na mobilu kratší odstavec, ideálně 2–4 věty, a jasné členění po tématech. U produktových stránek pomáhá shrnutí parametrů hned nahoře, místo aby byly schované v dlouhé tabulce. U služeb zase funguje kombinace stručného vysvětlení, referencí, FAQ a CTA v horní části i po průběžných blocích. Čím méně musí uživatel lovit informace, tím vyšší je šance na akci.
Další častý detail je typografie. Na mobilu by základní velikost písma měla být minimálně 16 px, u delších textů klidně 17–18 px. Řádkování by mělo být dostatečné, ideálně kolem 1,5. Příliš malé písmo a nízký kontrast jsou nejen UX problém, ale i přístupnostní chyba. V Česku stále vidíme weby se světle šedým textem na bílém pozadí, které jsou v reálném světle téměř nečitelné.
Jak mobilní problémy měřit a opravit bez dohadů
Nejlepší způsob, jak mobilní web zlepšit, je kombinovat data z analytiky, nahrávky relací a technický audit. Začněte v Google Analytics 4 segmentací podle zařízení a sledujte rozdíly v konverzích, engagement rate a opuštění klíčových kroků. V Google Search Console si ověřte, zda mobilní stránky nemají problémy s indexací nebo mobile usability. Pro technický výkon použijte PageSpeed Insights, WebPageTest a Chrome UX Report, pokud máte dostatek dat.
Praktický postup opravy může vypadat takto:
- identifikovat 3 stránky s nejvyšší mobilní návštěvností,
- porovnat jejich mobilní a desktopovou konverzi,
- změřit LCP, INP a CLS na reálných datech,
- najít 5 nejčastějších UX problémů v Clarity nebo Hotjar,
- upravit layout, formuláře a výkon,
- ověřit změny po 2–4 týdnech v datech.
U větších webů má smysl testovat změny přes A/B testování nebo aspoň řízený rollout. Není neobvyklé, že úprava tlačítka, zkrácení formuláře nebo přesun CTA výše přinese výrazný posun bez zásahu do celé šablony. Mobilní optimalizace totiž často není o redesignu, ale o odstranění třecích ploch, které na malém displeji působí mnohem víc než na desktopu.