Dvě ze tří odeslání formulářů dnes probíhají na telefonu. Přesto většina webů navrhuje formuláře na počítači a pak je jen vmáčkne na mobilní obrazovku. Výsledek: formuláře, které se frustrujícím způsobem vyplňují, lidé je častěji opouštějí a mění méně návštěvníků na zákazníky.
Návrh mobilního formuláře neznamená zmenšit formulář z počítače. Znamená to promyslet celou zkušenost pro člověka, který drží šestipalcovou obrazovku, ovládá ji palcem a sedí v roztřeseném autobuse nebo v přeplněné kavárně. Všechno se mění. Dostupné místo se zmenšuje. Dotykové plochy musí být větší. Objeví se klávesnice a zakryje půl formuláře. Návštěvníka něco vyruší a odejde.
Návrh formulářů nejdřív pro mobil znamená optimalizovat každý detail formuláře podle toho, jak lidé telefony skutečně používají. Tato kapitola popisuje konkrétní změny, které snižují opouštění formulářů, urychlují jejich vyplnění a mění víc mobilních návštěvníků na zájemce nebo zákazníky.
Mobilní formuláře navržené pro počítač ztrácejí zákazníky
Podívejte se, co se stane, když někdo otevře formulář na telefonu oproti počítači. Uživatel telefonu má méně místa na obrazovce, méně trpělivosti a víc vyrušení. Žongluje s kontextem. Jeho pozornost je roztříštěná. Jedna nepohodlná interakce a odejde.
Data to potvrzují. U formulářů se špatným mobilním návrhem skáče míra opuštění o 20 až 40 procentních bodů oproti počítači. Jediné špatně umístěné pole může způsobit vlnu odchodů. Malé tlačítko, na které se těžko klepe, vytváří překážku, která se násobí napříč tisíci odeslání.
Co ale většina značek přehlíží: optimalizace pro mobil neznevýhodňuje uživatele počítačů. Formulář navržený nejdřív pro mobil a pak vylepšený pro větší obrazovky ve skutečnosti funguje lépe pro všechny. Kompaktnější rozvržení. Lepší mezery. Jasnější hierarchie. To nejsou mobilní kompromisy, to jsou vylepšení designu.
Výzva návrhu mobilního formuláře: co je skutečně jiné
Mobilní formuláře čelí omezením, která formuláře na počítači nemají. Když pochopíte, co se mění, navrhnete chytřeji:
Místo na obrazovce je omezené
Obrazovka telefonu ukáže asi 30 až 40 % obsahu, který zvládne najednou zobrazit monitor počítače. Každý prvek zabírá fyzické místo. Zbytečné popisky, pokyny, nápovědy a pole formuláře soupeří o stejnou malou plochu. Objeví se klávesnice a dostupné místo se ještě zmenší. Dlouhé odstavce s pokyny zmizí mimo obrazovku.
Dotykové plochy jsou větší a méně přesné
Prst je široký 40 až 50 pixelů. Kurzor myši má 1 pixel. To znamená, že tlačítka, zaškrtávací políčka, přepínače a odkazy musí být na mobilu výrazně větší, aby se na ně dalo snadno klepnout. Standardní velikosti doporučované výrobci největších mobilních platforem jsou minimálně 44x44 pixelů. Když jsou menší, uživatelé cíl míjejí, vzniká frustrace a formulář opouštějí.
Klávesnice přebírá kontrolu
Když na mobilu uživatel klepne na pole formuláře, klávesnice vyjede a zakryje půl obrazovky. Některá pole vyvolávají různé klávesnice: pole s e-mailem ukáže zavináč, číselná pole skryjí písmena, pole s datem otevřou výběr z kalendáře. Každý typ klávesnice mění, co uživatel vidí a jak s formulářem pracuje. Navrhujte pro každý zvlášť.
Kontext se neustále mění
Uživatelé počítače si sednou a vyplní formulář bez vyrušení. Uživatelé mobilu vyplňují formuláře ve vlaku, v obchodě, mezi jinými aplikacemi. Přijde jim oznámení, přepnou aplikaci, vrátí se za pět minut. Posouvání působí nekonečně. Pole formuláře se slévají. Jakýkoli krok, který vyžaduje paměť nebo přepínání kontextu, vede lidi k odchodu.
Zařízení ovládá jedna ruka
Většina uživatelů drží telefon jednou rukou a ovládá ho palcem. Tlačítka vpravo dole jsou dosažitelná. Tlačítka nahoře u vysokého formuláře vyžadují druhou ruku nebo nepohodlné natažení. Popisky po levé straně polí se hůř čtou při zachování polohy palce. Navrhujte pro ovládání jednou rukou.
Pravidlo 1: Snižte počet polí, na která se ptáte
Každé pole, na které se ptáte, je další klepnutí, další rozhodnutí, další šance, aby někdo odešel. Formulář nepotřebuje všechno. Potřebuje jen to, co skutečně použijete při navázání kontaktu.
Podívejte se na své skutečné případy použití. Kontaktní formulář málokdy potřebuje při prvním odeslání druhé jméno, velikost firmy nebo obor. Rezervační formulář nepotřebuje rodné příjmení matky zákazníka. Přihlášení k newsletteru nepotřebuje hned první den PSČ. O další informace můžete požádat později, až si vybudujete důvěru.
Velká cestovní platforma tento princip otestovala a odstraněním nepovinných polí z rezervačního formuláře ušetřila ročně $12 milionů. Uživatelé dokončili víc formulářů. Přišlo víc konverzí. Zjednodušení se vyplatilo.
Začněte s absolutním minimem. Na mobilu platí přísnější pravidlo: pokud to nepotřebujete k dokončení hlavní akce, odstraňte to. Vyzkoušejte odstraňovat pole jedno po druhém a sledujte, jak roste míra dokončení.
Pravidlo 2: Skládejte pole do jednoho sloupce
Dvousloupcová rozvržení na mobilu jsou chyba. Vyžadují vodorovné posouvání, vytvářejí matoucí vizuální hierarchii a plýtvají vodorovným místem. Jeden sloupec skládaný svisle se nejrychleji přelétne a vyplní.
Každé pole zabírá celou šířku. Popisky jsou nad vstupním polem, ne vedle něj. Uživatel posouvá dolů, přečte popisek, klepne do pole, napíše a přejde k dalšímu. Tok je lineární. Kognitivní zátěž je nízká.
Odolejte pokušení dát jméno a příjmení vedle sebe nebo adresu a PSČ na jeden řádek. Svislé skládání je na počítači pomalejší, ano. Ale mobil představuje dvě třetiny vaší návštěvnosti. Optimalizujte pro většinový případ.
Pravidlo 3: Udělejte dotykové plochy dost velké, aby se do nich dalo spolehlivě trefit
Tlačítka musí mít alespoň 44x44 pixelů. Zaškrtávací políčka a přepínače musí mít alespoň 40x40 pixelů. Malá tlačítka nutí uživatele pečlivě mířit nebo klepat vícekrát. Frustrace roste. Odcházejí.
Den sledujte, jak sami používáte telefon. Všimněte si, kolikrát klepnutí mine. I zkušení uživatelé se netrefí. Navrhujte s ohledem na míru neúspěchu vestavěnou do lidských prstů.
Záleží i na odstupech mezi dotykovými plochami. Pokud je tlačítko ano hned vedle tlačítka ne, uživatelé trefí to špatné. Přidejte mezi interaktivní prvky 10 až 15 pixelů volného místa.
Pravidlo 4: Dávejte popisky nad pole, ne dovnitř
Zástupný text uvnitř vstupních polí zmizí, jakmile uživatel začne psát. Zapomene, k čemu pole bylo. Pak udělá chybu, uvidí chybu a neví, co opravit.
Popisky musí být mimo pole a nad ním. Jasné, viditelné, vždy přítomné. Když uživatel klepne do pole a objeví se klávesnice, popisek zůstává vidět a připomíná, co píše.
Popisek uvnitř pole je jen pohodlí pro návrháře. Ušetří pár pixelů místa. Vás to stojí konverze.
Pravidlo 5: Zvolte správný typ vstupu pro mobilní klávesnici
Různé typy vstupu vyvolávají na mobilních zařízeních různé klávesnice. Využijte je, aby bylo zadávání dat rychlejší a přesnější:
E-mailové adresy
Použijte `type="email"`, aby se zobrazila klávesnice se zavináčem a viditelnými klávesami .com/.org. Uživatelé nemusí hledat speciální znaky. Automaticky probíhá i validace.
Telefonní čísla
Použijte `type="tel"`, aby se zobrazila číselná klávesnice. Vynechte propracované formátování, které pole dělí na segmenty (předvolba) číslo. Uživatelé se s tuhým dělením polí potýkají a mazáním se dostanou do špatné části. Rychlejší je jedno jednoduché pole pro telefon, které přijme číslice a mezery.
Čísla a množství
Použijte `type="number"`, aby klávesnice ukázala jen čísla. Písmena skryjte. Některá číselná pole potřebují desetinná místa, k jejich povolení použijte `inputmode="decimal"`.
Data
Použijte `type="date"`, aby se spustil nativní výběr data, místo abyste uživatele nutili psát 03/15/2026. Výběr z kalendáře je rychlejší, má méně chyb a působí v telefonu přirozeně.
Adresy URL
Použijte `type="url"`, aby se zobrazila klávesnice s lomítkem a klávesou .com. Uživatelé mohou zadat webovou adresu, aniž by hledali speciální znaky.
Každý typ vstupu sděluje mobilnímu prohlížeči, jaká data očekáváte. Prohlížeč pak klávesnici tomu přizpůsobí. Nemusíte vysvětlovat formát. Práci udělá klávesnice.
Pravidlo 6: Pište jasné chybové zprávy, které se objevují v reálném čase
Když někdo vyplní formulář na mobilu, klikne na odeslat a uvidí jen "Neplatná e-mailová adresa", už zapomněl, co napsal. Neví, které pole chybu způsobilo. Na malé obrazovce může být chybová zpráva pod ohybem. Musí se posunout zpět nahoru.
Místo toho validujte pole, jak je uživatel vyplňuje. Jakmile přejde na další pole, zkontrolujte to, které právě opustil. Pokud je chyba, ukažte ji okamžitě, přímo pod tím polem. Problém vidí, dokud má kontext ještě v hlavě.
Chybové zprávy musí být konkrétní. ŠPATNĚ: "Neplatný vstup." SPRÁVNĚ: "E-mailová adresa musí obsahovat zavináč." Uživatel přesně ví, jak to opravit.
K signalizaci chyb nepoužívejte jen červenou barvu. Uživatelé s poruchou barvocitu ji přehlédnou. Použijte červenou plus ikonu nebo textový štítek. "Chyba: Toto pole je povinné."
Pravidlo 7: Optimalizujte tlačítka pro mobilní ovládání
Tlačítka odeslat by měla být velká, zjevně klepnutelná a umístěná tam, kde přirozeně spočívá palec. Text tlačítka velikosti 16 pixelů v tlačítku vysokém 44 pixelů se snadno trefí. Text velikosti 14 pixelů v tlačítku vysokém 32 pixelů je čekající netrefa.
Šířka tlačítka by měla zabírat většinu šířky obrazovky, ne se mačkat v úzkém sloupci. Tlačítka v plné šířce na mobilu snižují kognitivní zátěž otázky "kam mám kliknout dál".
Na stejné obrazovce se vyhněte vedlejším tlačítkům, pokud to není nezbytně nutné. Příliš mnoho tlačítek způsobuje ochrnutí při rozhodování. Jedna hlavní akce na obrazovku je pravidlo nejdřív pro mobil.
Pravidlo 8: U vícekrokových formulářů používejte ukazatele průběhu
Pokud formulář zabírá několik obrazovek, ukažte nahoře ukazatel průběhu. "Krok 1 ze 3" uživateli říká, co čekat. Ví, že nevyplňuje nekonečný formulář. Vidí cílovou čáru.
Každý krok by měl zvládnout jeden logický celek informací. Nehážte na první krok pět různých témat. Rozdělte je. Nechte uživatele cítit postup, jak se formulářem posouvají.
Dovolte uživatelům vrátit se a upravit předchozí kroky. Neměli by se cítit uzamčení. Mobilní uživatelé jsou plašší. Nabídnutá úniková cestu snižuje úzkost.
Pravidlo 9: Zajistěte, aby formulář fungoval s mobilními klávesnicemi a vyrušením
Objeví se klávesnice a skryje váš formulář. Uživatel se posune, aby viděl další pole. Dobře. Teď přijde oznámení a klávesnice zmizí. Formulář je vidět, ale uživatel zapomněl, co vyplňoval. Špatně.
Formulář vyzkoušejte na skutečném telefonu a se skutečnou klávesnicí. Zjistěte, kolik formuláře zmizí, když se objeví klávesnice. Pokud je pole skryté úplně, je nepoužitelné. Upravte rozvržení tak, aby aktivní pole zůstalo viditelné i s otevřenou klávesnicí.
Ukládejte postup ve formuláři, jak uživatel vyplňuje každé pole. Pokud přepne aplikaci nebo se formulář omylem zavře, data zůstanou. Když se vrátí, formulář je přesně takový, jak ho opustil. Tím odpadá obrovský zdroj opouštění.
Pravidlo 10: Využijte automatické vyplňování a předvyplnění pro urychlení dokončení
Mobilní telefony ukládají kontaktní údaje, e-mailové adresy, jména a platební údaje. Když váš formulář používá standardní názvy polí a atributy HTML, prohlížeč je může vyplnit automaticky. Pole pro telefon s atributem `autocomplete="tel"` nabídne uložená telefonní čísla jako návrhy.
Ještě účinnější je předvyplnění polí údaji, které už znáte. Pokud se někdo přihlásí a začne formulář, jeho e-mail je už vyplněný. Jeho adresa je už vyplněná. Píše jen to, co je nové. Míra dokončení vyskočí, když uživatelé nemusejí znovu zadávat informace, které už máte.
Automatické vyplňování a předvyplnění nejsou podvod. Je to respekt k času uživatele. Snižují psaní. Snižují chyby. Zvyšují dokončení.
Pravidlo 11: Testujte na skutečných telefonech se skutečnými uživateli
Prohlížeče na počítači mají emulaci zařízení. Simuluje obrazovku telefonu. Hodí se na rychlé kontroly. Skutečnou mobilní zkušenost ale nesimuluje. Klávesnice nefunguje stejně. Posouvání nepůsobí stejně. Dotykové plochy nevyžadují váš skutečný palec.
Formulář vyzkoušejte na skutečných telefonech. Požádejte kolegu, ať ho vyplní. Sledujte, kde váhá. Sledujte, kde dělá chyby. Sledujte, kde odchází. Tato skutečná data vám řeknou víc než jakýkoli kontrolní seznam.
Běžné chyby mobilních formulářů se bez testování těžko odhalují. Tlačítko, které v emulátoru na počítači vypadá velké, může být na skutečném telefonu na jasném slunci příliš malé. Popisky, které ve wireframu vypadají jasně, se mohou špatně číst pod úhlem, v jakém se telefon drží. Tyto problémy odhalí jen skutečné testování.
Jak vám WEMASY pomůže s návrhem mobilních formulářů
Tvůrce formulářů ve WEMASY ve výchozím stavu zahrnuje návrh nejdřív pro mobil. Formuláře se na mobilu automaticky skládají do jednoho sloupce. Dotykové plochy mají správnou velikost. Popisky zůstávají viditelné, když uživatelé vyplňují pole. Mobilní klávesnice je optimalizovaná pro každý typ vstupu.
Vestavěná validace formulářů probíhá v reálném čase, ne až po odeslání. U vícekrokových formulářů se zobrazují ukazatele průběhu. Odpovědi formulářů se ukládají automaticky, takže uživatelé o svůj postup nikdy nepřijdou. Analytika sleduje, která pole způsobují nejvíc opuštění, takže můžete optimalizovat největší překážky.
Podívejte se, co je součástí jednotlivých tarifů WEMASY a jak tvůrce formulářů zapadne do vaší práce.