Formulář je jedním z nejkritičtějších míst celého webu – a zároveň jedním z nejčastěji podceňovaných. Je to bod, kde uživatel stojí těsně před konverzí. Jedno špatně navržené pole, nejasná chybová hláška nebo přehnaný počet otázek může být důvod, proč odejde a nedokončí akci. Dobrý design formuláře je proto přímo investicí do konverzního rate.

Základní pravidla designu formulářů

1. Ptejte se jen na to, co skutečně potřebujete

Každé pole formuláře je „náklady" – uživatel musí vynaložit čas a mentální energii. Projděte každé pole a zeptejte se: „Je tato informace nezbytná právě teď?" Datum narození potřebujete pro zasílání kuponů – ale opravdu ho potřebujete při registraci?

Studie ukazují, že redukce formuláře z 7 na 4 pole může zvýšit konverze o 50 %.

2. Jednosloupový layout

Formuláře v jednom sloupci jsou přehlednější a rychleji se vyplňují. Vícesloupcový layout způsobuje, že oko musí horizontálně skenovat – zpomaluje vyplňování a zvyšuje pravděpodobnost přeskočení pole.

Výjimky: Pole přirozeně patřící k sobě (křestní jméno + příjmení, PSČ + město) mohou být vedle sebe.

3. Labely nad polem, nikoli uvnitř (jako placeholder)

Placeholder text mizí ve chvíli, kdy uživatel začne psát – a pak uživatel neví, co pole vyžadovalo. Label umístěný nad polem je vždy viditelný.

Pokud přesto používáte floating label (label, který se přesune nad pole při psaní), ujistěte se, že je dobře čitelný i ve „float" pozici.

4. Označujte povinná a volitelná pole

Standardem je označit povinná pole hvězdičkou () a přidat legendu „ Povinné pole". Alternativně označte ta volitelná slovem „(nepovinné)". Pokud je formulář krátký a vše je povinné, speciální označení není nutné.

5. Skupinování a logická posloupnost

Sdružujte příbuzná pole a seřaďte je v logickém pořadí, které odpovídá tomu, jak uživatel o informacích přirozeně přemýšlí. Osobní údaje → Kontaktní údaje → Platební informace.

Pro delší formuláře využijte kroky (stepper/wizard) – jasně zobrazují postup a snižují pocit overwhelmingu.

Validace a chybové zprávy

Inline validace

Ověřujte správnost zadání pole ihned po odchodu z něj (onBlur) – ne až po odeslání celého formuláře. Uživatel opraví chybu okamžitě, místo toho aby se vracel z potvrzovací stránky.

Zobrazujte:

Srozumitelné chybové zprávy

Chybová zpráva musí říci tři věci:

  1. Co se stalo (chyba)
  2. Proč k tomu došlo (příčina)
  3. Jak to opravit (řešení)

Špatně: „Neplatný e-mail" Dobře: „E-mail musí být ve formátu jmeno@domena.cz"

Špatně: „Chyba" Dobře: „Heslo musí mít alespoň 8 znaků a obsahovat jedno číslo"

Chybové zprávy umísťujte přímo u chybného pole, ne jen nahoře na stránce.

Přístupnost formulářů

Sémantické HTML

Každý input musí mít přidružený <label> element s atributem for odkazujícím na id inputu. Toto zajišťuje funkčnost se čtečkami obrazovky.

Správné typy inputů

Správný typ inputu aktivuje na mobilních zařízeních správnou klávesnici:

Focus state

Viditelný focus indicator je povinný – uživatelé ovládající web klávesnicí musí vidět, kde se nacházejí.

Autocomplete

Atribut autocomplete (jméno, email, adresa, číslo karty) umožňuje prohlížeči a password managerům automaticky vyplnit pole. Výrazně zrychluje vyplňování, zejména na mobilech.

Pokročilé tipy

Kondicionální logika

Zobrazujte pole jen tehdy, když jsou relevantní. Pokud uživatel vybral „Fyzická osoba", nezobrazujte pole „IČO". Dynamické formuláře jsou kratší a méně zastrašující.

Indikátor síly hesla

Vizuální indikátor (slabé / střední / silné) pomáhá uživatelům vytvořit bezpečné heslo, aniž by museli číst pravidla.

Automatické formátování

Telefonní číslo, číslo karty nebo rodné číslo automaticky formátujte při zadávání. Uživatel zadá „777123456" a zobrazí se „+420 777 123 456".

Uložení rozpracovaného formuláře

U dlouhých formulářů ukládejte průběžný stav, aby uživatel neztratil data při přerušení.

Závěr

Formulář je kritickým konverzním bodem a zaslouží stejnou designovou pozornost jako homepage nebo produktová stránka. Méně polí, jasné labely, okamžitá validace a srozumitelné chybové zprávy – to jsou principy, které přivádějí uživatele k dokončení akce.

Zdroje