Proč je mobil důležitější než desktop

Svůj web si prohlížíte na monitoru v kanceláři, na optice a v klidu. Váš zákazník ho otevírá jednou rukou na tříletém telefonu, na datech a většinou ve chvíli, kdy něco potřebuje hned.

Podíl mobilu se liší obor od oboru

Průměrné číslo o mobilu nikomu nepomůže. Rozdíl mezi zámkařem a firmou, která prodává výrobní linky, je zásadní. Níže jsou orientační podíly z projektů, které měřím, a používám je jako výchozí bod, dokud nemá klient vlastní data. Tabulka slouží k prvnímu odhadu, ne k plánování rozpočtu na celý rok.

Čím naléhavější potřeba, tím vyšší podíl mobilu. Prasklá voda, zabouchnuté dveře, hlad. Naopak čím delší rozhodování a čím víc lidí do něj mluví, tím víc desktopu, protože se odkaz posílá kolegům a čte v kanceláři. Podle toho se liší i to, co má web v první obrazovce dělat.

Na mobilu se nečte, na mobilu se skenuje

Na monitoru vidíte celou úvodní obrazovku. Na telefonu vidíte pás vysoký zhruba jako dlaň a v něm se musí vejít, kdo jste, co děláte a jak vás kontaktovat. Když je tam jen fotka a nadpis o vášni pro řemeslo, člověk odjede palcem dolů a hledá cokoli konkrétního.

Věty se čtou po třech slovech. Dlouhý odstavec se na mobilu promění v šedou plochu, kterou palec přeletí. Proto píšu krátké bloky, mezititulky každých pár odstavců a klíčové informace vytahuji do samostatných řádků. Není to zjednodušování obsahu, je to přizpůsobení tomu, jak se na telefonu opravdu čte.

Palec místo myši mění celé rozhraní

Myš je přesná na pixel, palec ne. Praktický dopad: tlačítka musí být vysoká aspoň jako nehet, mít kolem sebe místo a sedět v dolní polovině displeje, kam palec dosáhne. Menu schované v rohu nahoře je na velkém telefonu nejhůř dostupné místo, jaké existuje. Přesto tam bývá to nejdůležitější.

Druhá věc je, že na mobilu není hover. Všechno, co se na desktopu ukáže po najetí myší, na telefonu prostě neexistuje. Rozbalovací menu, popisky u ikon, náhledy. Když je v nich schovaná podstatná informace, pro polovinu až devadesát procent návštěv jste ji nezveřejnili. To se stává častěji, než by člověk čekal.

• Tlačítko vysoké aspoň 48 pixelů, s odstupem od ostatních prvků
• Telefonní číslo jako klikací odkaz, ne jako obrázek nebo obyčejný text
• Hlavní akce v dolní třetině obrazovky, kam palec dosáhne bez přehmatu
• Žádná podstatná informace jen v hoveru, na dotyku neexistuje
• Klávesnice podle typu pole, číselník na telefon, mail na mail
• Mapa a otevírací doba do dvou dotyků, ne až na konci stránky Kontakt

Rychlost na datech v terénu, ne na wifi v kanceláři

Web si testujete na optice a novém notebooku. Zákazník ho otevírá na tříletém Androidu, na datech, u kterých svítí dvě čárky signálu. Rozdíl v načtení bývá trojnásobný. Proto měřím vždy s omezením rychlosti a se zpomaleným procesorem, jinak si člověk nalhává výsledek, který nikdo z návštěvníků nikdy nezažije.

Nejčastější brzdy jsou pořád stejné. Fotky nahrané v plném rozlišení, video na pozadí úvodní sekce a písma tažená odjinud. Když je odstraním, dostane se běžný web z něčeho kolem tří sekund pod jednu a půl. Návštěvník to nepojmenuje, ale zůstane. A přesně tohle rozhoduje o počtu poptávek.

Formulář na mobilu: kde se poptávky ztrácejí

Formulář, který na monitoru vypadá vzdušně, je na mobilu deset polí pod sebou a tři obrazovky scrollování. Každé pole navíc znamená úbytek dokončení. U poptávkových formulářů vidím mezi třemi a osmi poli rozdíl klidně dvojnásobek odeslaných zpráv, aniž by se změnilo cokoli jiného. Na zbytek se doptejte v odpovědi.

Druhý zabiják je časování. Formulář rozdělený na tři kroky, kde první krok je jedna jednoduchá otázka, dokončuje víc lidí než jedno dlouhé pole na začátku. Kdo udělal první krok, chce dokončit i druhý. Tenhle princip používám na landing stránkách a funguje napříč obory. Rozdíl bývá v desítkách procent.

• Maximálně čtyři pole v prvním kroku, zbytek doptejte v odpovědi
• Vedle formuláře nabídnout volání, část lidí nevyplní nikdy nic
• Nechat prohlížeči doplnit jméno a mail, nezakazovat automatické vyplnění
• Chyba u konkrétního pole, ne na konci, a viditelná bez scrollování
• Potvrzení po odeslání na stejné obrazovce, ne skok na prázdnou stránku
• Notifikace poptávky i na váš telefon, aby odpověď šla do deseti minut

Co s tím udělat tento týden

Otevřete si web na svém telefonu na datech, ne na wifi doma. Držte ho jednou rukou a zkuste udělat to, co po lidech chcete. Zavolat, poslat poptávku, najít cenu. Většina problémů se objeví do dvou minut a polovinu z nich jde opravit za odpoledne. Ta druhá polovina bývá důvod, proč web přestavět.

Když stavím web já, mobil je výchozí stav a desktop je varianta. Ne naopak. Web startuje na 19 990 a dodávám do sedmi dní, měření kliků na telefon a odeslaných formulářů je součástí měřicího balíčku za 6 900. Bez něj byste stejně nezjistili, jestli se po úpravách něco zlepšilo.

• Změřte podíl mobilu za posledních 90 dní, ne za celou historii webu
• Projděte web palcem jednou rukou a zapište každé zaseknutí
• Zmenšete největší fotky, obvykle je to největší jediný zásah do rychlosti
• Přesuňte telefon a hlavní poptávku do dosahu palce
• Zkraťte formulář na čtyři pole a týden sledujte rozdíl v odeslaných zprávách

Časté otázky

Jak zjistím podíl mobilu na svém webu?

V GA4 v přehledu technologií za posledních 90 dní. Nedívejte se na celou historii, chování se mění rychle. Zajímá vás podíl návštěv i podíl poptávek zvlášť. Když máte devadesát procent návštěv z mobilu, ale šedesát procent poptávek z desktopu, máte na mobilu problém s formulářem nebo s rychlostí načítání.

Stačí responzivní šablona, nebo potřebuji zvláštní verzi pro mobil?

Zvláštní verzi ne, dva weby jsou práce navíc a zdroj chyb. Rozdíl je v tom, jestli byl mobil výchozím stavem při návrhu, nebo dodatkem na konci. Responzivní šablona jen zmenší desktopový layout, což technicky projde, ale pořadí a váha prvků zůstanou navržené pro velkou obrazovku a myš.

Kolik stojí předělat existující web na použitelný mobil?

Záleží, jestli jde o úpravy, nebo o přestavbu. Zmenšení fotek, oprava velikosti tlačítek a zkrácení formuláře je práce na jeden až dva dny a řeším ji v rámci Péče za 2 990 měsíčně. Když je problém ve struktuře a pořadí sekcí, vyjde levněji nový web od 19 990 s dodáním do sedmi dní.