Představte si člověka, který hledá váš telefon před schůzkou nebo si prohlíží nabídku cestou domů. Nemá velký monitor, myš ani chuť zkoumat, proč tlačítko nefunguje. Potřebuje dokončit konkrétní věc.
Mobilní verze proto není jen menší varianta stejného obrázku. Mění se prostor pro text, způsob ovládání i situace, ve které lidé web používají. Následující kontrolu zvládnete projít na vlastním telefonu a získat z ní přesnější zadání než obecné „na mobilu to není ono“.
Začněte nabídkou, ne celou úvodní grafikou
Na malém displeji se vedle sebe nevejde tolik informací. Vyberte, co člověk potřebuje poznat nejdřív: co nabízíte, komu a jak pokračovat. Velká dekorace může působit dobře na monitoru, ale na telefonu odsunout celou nabídku pod několik obrazovek.
Podstatné informace však jednoduše neskrývejte. Upravte pořadí, velikost a mezery. Jestli je pro rozhodnutí zásadní lokalita nebo rozsah služby, musí být dostupná i na telefonu. Mobilní návštěvník nemá dostávat méně přesnou nabídku.
Čtěte bez přibližování a bez hledání řádku
Otevřete delší odstavec a zkuste jej přečíst běžným způsobem. Příliš drobné písmo, dlouhý blok bez přestávek nebo malý kontrast unavují. Pomohou krátké odstavce, výstižné mezititulky a dostatečné mezery mezi prvky.
Zvětšete si text v nastavení prohlížeče. Nadpisy se mohou zalomit, ale neměly by přetékat mimo obrazovku ani překrýt ovládání. Dlouhé e-mailové adresy a německá složená slova umějí odhalit problém, který na krátkém českém nadpisu nebyl vidět.
Menu musí mít jasný začátek i konec
Fullscreen menu dává odkazům dost prostoru a omezuje náhodná klepnutí. Aby fungovalo, musí být snadné jej otevřít, zavřít a přejít na zvolenou část webu. Kontrolujte také návrat na stránku: neměli byste ztratit orientaci nebo zůstat uvěznění v neviditelné vrstvě.
Na kratším displeji nebo na šířku nemusí být všechny položky vidět současně. Obsah menu proto musí zůstat dostupný posunem. Zavírací tlačítko nesmí zmizet za horním okrajem nebo se překrýt s jiným prvkem.
- Otevřít menu, přejít na poslední položku a zavřít jej.
- Vybrat odkaz a ověřit skutečný přesun na správné místo.
- Zkusit ovládání klávesnicí včetně Escape a návratu fokusu.
- Zkontrolovat, že pod otevřeným menu nelze omylem ovládat stránku.
Formulář vyzkoušejte s otevřenou klávesnicí
Právě klávesnice často ukáže potíž, kterou náhled v editoru nezachytí. Klepněte do posledního pole, napište delší zprávu a zkuste se posunout k tlačítku. Obsah má zůstat dostupný a stránka se má při práci s formulářem normálně ovládat.
W3C doporučuje srozumitelné popisky, instrukce a zpětnou vazbu při chybách. Text uvnitř prázdného pole nenahradí trvalý popisek: jakmile člověk začne psát, potřebuje stále vědět, co vyplňuje.
Ověřte správný typ klávesnice pro e-mail a telefon. Zkuste také chybové odeslání, návrat k opravě a následný úspěch. Vyplněné údaje by se při opravě jedné chyby neměly zbytečně ztratit.
Otestujte i chvíli, kdy se stránka ještě načítá
Velké fotografie a pozdě doskakující obsah mohou ztížit použití i krásné stránky. Pokud se tlačítko při načtení obrázku posune, člověk může klepnout jinam, než zamýšlel. Zkoušejte web také přes mobilní připojení, ne pouze na rychlé kancelářské Wi-Fi.
Core Web Vitals sledují načítání hlavního obsahu, odezvu na interakce a vizuální stabilitu. Pomáhají problém pojmenovat, nenahrazují ale kontrolu celého úkolu. Výsledek jednoho laboratorního testu nepopisuje zkušenost všech skutečných návštěvníků.
Tabulku, obrázek i odkaz zkuste opravdu použít
Ceník, který se vejde na široký monitor, může být na telefonu nečitelný. Jednoduché srovnání často stačí upravit na menší počet sloupců; složitější data potřebují promyšlené zobrazení. V každém případě musí být zřejmé, ke které položce cena patří.
U fotografií kontrolujte ořez: tvář nebo důležitý detail zakázky nesmí zmizet. Telefon a e-mail mají vést ke správné akci. U souboru ke stažení označte, co člověk otevře. A zkontrolujte mezery mezi odkazy, které leží těsně vedle sebe.
Projděte jeden celý scénář
Vyberte skutečně důležitý úkol, například poptávku služby. Začněte na úvodní stránce a pokračujte bez zkratek. Nestačí samostatně prohlédnout menu a formulář; překážka může být právě na cestě mezi nimi.
- Zopakujte cestu na úzkém displeji i na šířku.
- Zkontrolujte otevřenou klávesnici a chybu ve formuláři.
- Vyzkoušejte větší text, viditelný fokus a ovládání bez myši.
- Pokud můžete, porovnejte chování na iPhonu a telefonu s Androidem.
Opravy seřaďte podle dopadu na zákazníka
Nejdřív řešte nemožnost dokončit úkol: nefunkční odeslání, nedostupné menu nebo zakryté tlačítko. Potom čitelnost, přetékající obsah a matoucí instrukce. Teprve následně dolaďujte dekorace. Takové pořadí usnadní domluvu s dodavatelem a přinese viditelný užitek.
Do hlášení napište zařízení, prohlížeč, konkrétní stránku a kroky vedoucí k problému. Věta „Po otevření klávesnice se nedostanu k odeslání zprávy“ je použitelnější než „Mobil zlobí“. Po opravě projděte znovu stejný scénář.
