Formulář rozhoduje, jestli vyděláte

Bez funkčního formuláře vám budou zákazníci mizet pod rukama. Proč 67 % uživatelů nikdy neodešle formulář.

Neodpouští

Máte funkční web, jasně popsanou službu. Přesto z formulářů nepřichází žádné poptávky.

Podle výzkumu HubSpotu až 67 % uživatelů nikdy neodešle formulář, i když o službu původně projevili zájem.

Na vině jsou banality – mnoho polí, matoucí struktura, chybějící důvěryhodnost (třeba špatná fotka). Někdy stačí jedno slovo nebo chybějící náznak bezpečí a formulář zůstane nedokončený.

Formulář je poslední krok, ale často nejdůležitější. Neodpouští chyby.

Je důležité, abyste se na formuláře takto dívali.

Méně polí zvyšuje konverze

Čím víc polí formulář má, tím je menší šance, že ho někdo odešle. Dnes nikdo moc nečte – texty a obsah skenujeme. Jakmile na nás něco působí zdlouhavě, nudíme se a odcházíme.

Podle Formstack’s 2022 Conversion Benchmarku mají formuláře s 2–3 poli až o 25 % vyšší konverzní poměr než formuláře s 5–6 poli.

Studie společnosti Imaginary Landscape porovnávala účinnost dvou různých kontaktních formulářů na jejich webových stránkách. Hlavním cílem bylo zjistit, jestli menší počet polí ve formuláři povede k vyššímu počtu dokončených a odeslaných formulářů.

Testovali dva formuláře: jeden měl 11 polí, druhý 4 pole.

Níže formulář s 11 poli.

Takhle formulář upravili – 4 pole.

Test probíhal po dobu dvou měsíců. Konverze u formuláře s menším počtem polí vzrostly o 160 %. Konverzní poměr vzrostl o 120 %.

Odstranění zbytečností jako adresa nebo fax pomohlo. Faktorem ovlivňujícím konverze byl celkový počet polí, ne jen počet povinných polí. Snížení počtu polí přitom neovlivnilo kvalitu získaných konverzí.

Shrnutí je, že méně polí ve formuláři vedlo k výrazně vyššímu počtu konverzí, aniž by se snížila jejich kvalita.

Co z toho plyne?

• Vyhoďte všechno, co nepotřebujete.

• Telefon? Pouze pokud je nutný. Pokud mají lidi o službu zájem, telefon na sebe stejně napíšou v e-mailu nebo do zprávy formuláře.

• PSČ? Proč?

• Adresa? Pokud neposíláte zboží, tak ne.

Uživatel se při každém poli ptá: „Musím to opravdu vyplňovat?“

Pokud nemá jasnou odpověď, končí.

Je vtipné, jak spousta lidí na sebe prozradí první poslední na Facebooku nebo Instagramu. Jedu na dovolenou, toto je mé telefonní číslo, tady bydlím…, ale při vyplňování informací se jim “prozrazovat” citlivé informace prostě nechce. Nechtějí je říkat policajtům, natož vám. Myslete na to.

Buďte logičtí v pořadí polí

Uživatelé mají určitá očekávání ohledně pořadí a typu polí ve formuláři.
Například očekávají, že nejprve vyplní své jméno, pak e-mail a dole zprávu. Zlepšujete také použitelnost.

Pokud je pořadí neobvyklé nebo jsou požadovány informace, které se zdají být irelevantní (např. telefonní číslo hned na začátku), může to vést k frustraci a opuštění formuláře.

Na tohle existuje hodně studií a A/B testů. Konsenzus je, že formuláře s logickým pořadím polí zvyšují uživatelskou spokojenost a míru dokončení formuláře.

Doporučení:

• Udržujte logické a očekávané pořadí polí: jméno → e-mail → zpráva.

• Zvažte, zda je nutné požadovat telefonní číslo nebo jiné citlivé údaje.

• Používejte jasné a srozumitelné popisky u každého pole.

• Skupiny polí oddělujte vizuálně – pomáhá to orientaci a rychlosti vyplnění.

• Nezobrazujte víc polí na jednom řádku na mobilu – vertikální uspořádání je čitelnější.

• Omezte povinná pole pouze na ta nezbytná – a označte je jasně.

• U tlačítka formuláře používejte akční text: Získat nabídku, Rezervovat konzultaci apod. Ne Odeslat, Poslat.

* Tady je příklad špatného formuláře. Odesílal jsem balík přes DPD. E-mail je povinné pole, ale nikde tuto informaci nevidím. Uživatel bude zmatený. Měla by tam být červená výstraha “povinné pole”.

Nejčastější UX zmaty

Jedním z nejčastějších UX přehmatů u formulářů je špatná práce s popisky (labely) a výplňovými texty (placeholdery).

Když je popisek pouze uvnitř pole jako placeholder, zmizí po kliknutí. A uživatel si nemusí pamatovat, co měl vlastně napsat.

Výsledkem je zmatek, chyba nebo rovnou odchod.

Studie Baymard Institute potvrzuje, že formuláře s viditelnými popisky mimo pole jsou výrazně srozumitelnější a vedou k nižšímu počtu chyb.

Doporučení:

• Popisky musí být krátké a výstižné: místo Zadejte své telefonní číslo stačí Telefon.

• Popisky pište vždy nad nebo vedle pole, nikoli dovnitř (placeholder).

• Placeholder použijte jen jako doplňující nápovědu, např. formát: +420 777 123 456.

• Zachovejte popisek viditelný i po kliknutí – pomáhá to u delších formulářů.

Jak má vypadat odesílací tlačítko

Poslední krok, který je rozhodující. Tlačítko formuláře bývá podceňováno, přitom právě ono říká uživateli, co se stane dál. Odeslat je jako říct něco se stane, ale neřeknu co.

Místo toho musí být jasné sdělení, které říká, co se po odeslání stane, co získáme, nebo proč bychom měli vůbec něco odeslat.

Studie potvrzují, že konkrétní text a forma tlačítka výrazně ovlivňují ochotu uživatele formulář odeslat:

• HubSpot – Call-to-Action Examples ukazuje, že konkrétní a srozumitelný text na tlačítku zvyšuje konverzní poměr.

• HubSpot doporučuje také testovat formulace, které uživateli jasně říkají, co se stane po kliknutí – např. Ozveme se vám do 24 hodin.

• ConvertFlow uvádí, že výzvy psané v první osobě a s jasným benefitem zvyšují míru konverze až o 90 %. Chci e-book zdarma, Chci poradit atp.

Doporučení:

• Nahraďte Odeslat něčím konkrétním: Získat konzultaci zdarma, Nezávazně poptat, Chci nabídku zdarma.

• Používejte první osobu – zvyšuje důvěru a více se kliká (Chci nabídku).

• Velikost a kontrast musí být dostatečné – tlačítko nesmí splynout s pozadím.

• Ideální barvy: takové, které kontrastují s okolím (ne nutně červená nebo zelená, ale výrazné v kontextu).

• Doplňte informaci, co se stane po odeslání (např. krátký text pod tlačítkem: Ozveme se vám do 24 hodin).

• Neumisťujte více tlačítek blízko sebe – testy ukazují, že to snižuje rozhodovací jistotu a konverzi.

• Zvažte použití ikon (např. šipky) v tlačítku – zvýšují vizuální přitažlivost a míru prokliku (CTR).

• Omezte délku textu v CTA – podle studie ConversionXL 2–5 slov funguje nejlépe.

• Testujte kontrastní vs. neutrální verze tlačítek – studie GoodUI ukazují, že výrazná barevnost zvyšuje konverze u krátkých formulářů, ale u dlouhých může působit rušivě.

Jste důvěryhodní?

Nikdo nevyplní formulář, kterému nevěří. Může jít o neznámou značku, chybějící kontaktní údaje, ale i o vizuální signály jako nezabezpečená stránka nebo neprofesionální vzhled. Celkovou důvěryhodnost webu odhalí SEO audit — mnohé signály nedůvěry se projevují i v technickém stavu stránek.

Podle Baymard Institute – Reasons for Cart Abandonment až 18 % uživatelů opouští nákupní proces, protože nevěří, že s jejich daty bude nakládáno bezpečně.

Doporučení:

• Uveďte kontaktní údaje nebo odkaz na obchodní podmínky a zásady zpracování údajů.

• Nepoužívejte CAPTCHA hned na začátku – uživatelé ho vnímají jako překážku.

• Vizuální důvěryhodnost hraje roli – čistý design a zarovnané prvky snižují podezření.

• Pokud formulář obsahuje více kroků, vždy ukažte kolik jich zbývá – testy ukazují, že to zvyšuje ochotu dokončit proces.

• Ponechte možnost formulář snadno zavřít nebo přeskočit – nucené chování vede k odchodu.

• E-shopům doporučuji mít u důležitých CTA telefonní číslo. Budí pocit bezpečí.

Nejčastější slabina: Mobil

62 % všech návštěv webů přichází z mobilních zařízení. Přesto spousta formulářů na mobilech selhává – jsou nečitelně zmenšené, složitě se vyplňují a vyžadují zbytečně moc kliků.

Podle interních analýz Googlu může optimalizace mobilních formulářů zvýšit konverze až o 55 %.

Doporučení:

• Otestujte celý proces reálně na mobilu – simulátor v prohlížeči nestačí.

• Využívejte autofill a automatické rozpoznání polí (např. telefon, e-mail).

• Používejte klávesnice podle typu pole – číselnou pro telefon, e-mailovou pro e-mail.

• Zajistěte dostatečnou velikost polí a tlačítek, aby šla snadno vyplnit prstem.

• Nikdy nedávejte více polí na jeden řádek – na mobilu se pak špatně čtou i vyplňují.

• U více krokových formulářů zobrazte postup (např. „Krok 2 ze 3“) a možnost návratu zpět.

• Fixujte CTA tlačítko nebo zkraťte formulář tak, aby nebylo nutné dlouze scrollovat.

Příklady dobrých formulářů

Několik dobrých formulářů, které fungují a jsou ověřeny A/B testy. I tady platí, že co funguje jinde, nemusí fungovat vám. Ale s největší pravděpodobností chybu neuděláte.

Apple přihlášení

Přihlašovací formulář od Applu. Dvě pole. Apple ID a heslo.

Nic víc.

Jen čistý design, který nezdržuje.

Apple tím potvrzuje to, co víme: čím méně překážek, tím vyšší šance, že člověk formulář opravdu vyplní.

Jeden sloupec

Jednosloupcový design je jistota. U Spatulah vyplňujete shora dolů. Bez přeskakování a přemýšlení.

Když už něco víte, doplňte to

Nechte uživatele vyplňovat co nejmíň.
Město? Stát? Zjistíte z IP adresy.
E-mail? Máte z přihlášení? Vložte ho.

Braintree to dělá skvěle – pozná, odkud jste, a rovnou vybere vaši zemi.
Rychlejší. Chytřejší. Uživatelsky příjemnější.

Snadné přihlášení

Decathlon má snadné přihlášení pomocí Facebook, Google a Apple účtu. Přihlášení přes sociální sítě zvyšuje míru konverze při registraci o vyšší desítky procent. Registrace je totiž důvěryhodnější, rychlejší a eliminuje potřebu vytvářet a pamatovat si nové heslo, což zvyšuje pohodlí a bezpečnost pro uživatele.

Tato varianta vám ještě poskytuje přesnější data, což můžete využít pro personalizaci obsahu a marketingové kampaně.

Zarovnávejte doleva

Text vlevo. Mozek čte zleva doprava – a oči dělat přemety nechtějí.

Zarovnejte všechno doleva.
Rychlejší čtení. Rychlejší vyplnění. Méně zmatku.

Dobře to mají při registraci XXXLutz.

Jasná chybová hlášení

Nepište „Chyba 405“.
Uživatel z toho neví nic. Jen že to nefunguje.

Řekněte mu přesně, co má opravit. A proč.
Třeba Idnes to dělá dobře – chyba je jasná, viditelná, pochopitelná. Víte, co máte udělat.

Cílem není jen nahlásit chybu.
Cílem je umožnit opravu. Bez hádání.

Jak testovat

I drobná změna formulace, pořadí polí nebo barvy tlačítka může znamenat rozdíl mezi neodeslaným formulářem a novým zákazníkem. Proto se musí testovat, vyhodnocovat a upravovat formuláře na základě reálných dat. Ušetříte tím spousta času a peněz, vyhnete se třeba redesignu, který vám stejně moc nepomůže.

Testování přináší měřitelné výsledky, které pomáhají dělat lepší rozhodnutí než intuice. Nikdo nepřemýšlí jako vy, proto budou vaše nápady většinou špatné.

Doporučení:

• Ptejte se uživatelů – krátký dotazník po odeslání může odhalit slabiny, které čísla neukážou.

• Provádějte A/B testy: zkoušejte různé texty CTA, pořadí polí, strukturu a layout.

• Sledujte heatmapy a scrollmapy (Hotjar, Clarity) – ukazují, kde uživatelé ztrácejí pozornost.

• Analyzujte míru opuštění formuláře – např. kolik lidí vyplní první pole, ale nedokončí odeslání.

• Sledujte čas strávený ve formuláři – příliš dlouhé vyplňování bývá známkou nejasností.

• Pokud měníte více věcí najednou, testujte je postupně (multi-variantní testování může být zkreslené).

• Pravidelně testujte na mobilu i desktopu – výsledky se často výrazně liší. Jinak se chováme na PC a na mobilu.

zdroje:
vlastní zkušenosti z testů
https://blog.hubspot.com/marketing/optimize-website-for-lead-generation
https://www.imagescape.com/media/filer_public/06/94/0694c7f4-8914-4598-8871-b857fbc12737/form_case_study.pdf
https://www.nngroup.com/articles/web-form-design/
https://baymard.com/blog/mobile-form-usability-label-position
https://blog.hubspot.com/marketing/call-to-action-examples
https://baymard.com/lists/cart-abandonment-rate
https://www.convertflow.com/call-to-action
https://woorise.com/blog/form-design-best-practices
https://www.crazyegg.com/blog/call-to-action-examples/