Validace formulářů patří k nejčastějším UX problémům na webu. Špatně implementovaná validace dokáže z jednoduchého úkolu udělat frustrující zážitek.

Základní principy dobré validace

1. Nepřerušujte uživatele během psaní – zobrazujte chyby, až když má uživatel záměr pokračovat. Pokud mu během psaní „123“ zobrazíte chybu „Musí obsahovat 8 číslic“, pouze ho rozptýlíte.

2. Inteligentní načasování – analysujte stav vstupu a reagujte vhodně:

• Prázdné pole → bez validace
• Neplatné znaky → okamžitá chyba
• Neúplný vstup → čekejte
• Kompletní vstup → okamžitá validace
• Opuštění pole → validujte

3. Tolerance k chybám – je dobré se zamyslet nad tím, jestli by nešlo obsah od uživatele normalisovat do potřebné formy, než mu vynadat.

Typickým příkladem může být telefonní číslo nebo PSČ, kam někteří uživatelé mohou zadávat mezery. Je zbytečné je nutit do nějakého specifického formátu, když jde mezery jednoduše z obsahu políčka odstranit.

Běžné chyby a jak se jim vyhnout

Nedeaktivujte tlačítka – místo toho, abyste zakázali tlačítko, když je vstup nevalidní, nechte ho aktivní a zobrazte chybu při kliknutí. Zakázané tlačítko nevysvětluje, co je špatně a nutí uživatele hádat. Aktivní tlačítko dává jasnou zpětnou vazbu a umožňuje uživateli vidět všechny chyby najednou, místo jejich postupného odhalování.

Pozor na tvrdé HTML limity – maxlength dokáže dost komplikovat třeba vložení ze schránky, kdy se ke kopírovanému textu něco připlete. Místo toho, aby mohl člověk nežádoucí věci odmazat, se mu rovnou oříznou. Použijte vlastní inteligentní validaci.

Jak komunikovat s uživatelem

Neříkejte, co je špatně. Řekněte, co má uživatel udělat dál.

Předcházejte chybám

• Automaticky odstraňujte mezery a nevhodné znaky
• Normalisujte formáty (čísla účtů, telefonní čísla, PSČ)
• Navrhujte správný formát předem (placeholder, příklad)

Jak psát hlášky

• Nabídněte návod místo konstatování – „Zkontrolujte překlepy“ místo „Chybný e-mail'
• Preferujte positivní, uctivý tón – „Zadejte prosím e‑mail“
• Buďte konkrétní – „Alespoň 8 znaků, jedno číslo“
• Uveďte příklad – „např. jan@email.cz“
• Nabídněte pomoc – odkaz na nápovědu nebo podporu
• Nebuďte příliš techničtí – chybové hlášky často píší programátoři a pro běžné uživatele může být problém takové vyjadřování pochopit.

Příklady:

Špatně	Dobře
Neplatný formát	E‑mail zadejte jako: jan@email.cz
Pole je povinné	Vyplňte prosím své jméno
Chybné heslo	Heslo musí mít alespoň 8 znaků a jedno číslo
Neplatné číslo	Zadejte číslo mezi 1 a 10

Adaptivní/progresivní hlášky

Pokročilá technika, kdy se nápověda stupňuje podle situace – při opakovaných pokusech přidávejte konkrétnější rady a příklady. Začněte stručně, detail přidávejte až podle potřeby. Při hodně neúspěšných pokusech třeba i přidat odkaz na nápovědu nebo kontakt na podporu.

• Kdy použít: složitá pravidla (hesla, IČO), opakované selhání, potřeba vysvětlení
• Kdy nepoužít: triviální pole (jméno), jednoduché požadavky

Závěr

Cílem validace není prokázat chybu, ale pomoci uživateli úspěšně dokončit úkol. Dobré hlášky jsou průvodcem, ne kritikem.