Design formulářů: Validace, chybové stavy a doplňování

01Každé pole musí mít jasný účel

U každého údaje si napište, kdo ho použije a při jakém rozhodnutí. Pro první domluvu o projektu možná potřebujete popis problému a kontakt. Fakturační adresu, IČO nebo přesný počet zaměstnanců lze získat později. Pole neodstraňujte slepě kvůli kratšímu vzhledu. Rozhodující je, zda bez něj lze daný krok bezpečně a smysluplně dokončit.

Povinné položky označte konzistentně a vysvětlete nezvyklé požadavky. Pokud skutečně potřebujete telefon, řekněte proč. U volitelné přílohy popište, co pomůže a jaké soubory přijímáte. Rozdělte rozsáhlou žádost podle srozumitelných úkolů, ne podle interních oddělení. Člověk má vědět, co zbývá, a musí se umět vrátit bez ztráty vyplněné práce.

02Popisek musí přežít první napsané písmeno

Používejte trvale viditelný název pole a programově ho propojte s ovládacím prvkem. W3C doporučuje pro běžná pole prvek label a odpovídající dvojici for a id. Díky tomu lze správný popisek zpřístupnit i asistivním technologiím. Podrobnosti uvádí návod WAI k popiskům.

Text uvnitř prázdného pole použijte případně jako příklad, nikoli jako jediný název. Po vyplnění by jinak nebylo zřejmé, co údaj znamená. Rozlišujte také název a pokyn: „Telefon“ je název, „Uveďte i předvolbu země“ je instrukce. Neschovávejte nezbytné vysvětlení do ikony, kterou uživatel objeví jen po najetí myší.

Návrh webu na míru má obsahovat i skutečná data v polích. Prázdný obrázek formuláře neodhalí dlouhý název firmy, adresu bez běžného čísla ani chování při zvětšení textu. Požadujte ukázku s vyplněním a chybou, ne pouze úvodní stav.

03Validujte v okamžiku, kdy lze chybu opravit

Validace je kontrola, zda údaj odpovídá požadavkům. Prohlížeč umí nabídnout základní kontrolu povinnosti a běžných typů polí. To však neznamená, že správně vypadající e-mail skutečně existuje. Pro nativní označení povinnosti a typy vstupu slouží doporučení WAI k validaci.

Nedoporučujeme zobrazovat chybu dřív, než člověk dostane rozumnou možnost údaj dopsat. Rozpracovaná e-mailová adresa ještě není důvod k červenému varování po každém znaku. U jednoduchých polí můžete kontrolovat po opuštění; při odeslání zkontrolujte celý formulář. Pokud už uživatel chybu opravuje, dejte mu průběžně vědět, že se oprava podařila. Načasování ověřte na konkrétním formuláři, ne podle jediné univerzální poučky.

Oddělte formát a obchodní pravidlo. Datum může mít správný zápis, ale vybraný termín už není volný. V tom případě má zpráva vysvětlit dostupnost a nabídnout další krok. Nepoužívejte přísnější omezení, než vyžaduje skutečný proces: zahraniční jméno, telefon s mezerami nebo jiný formát adresy nemusí být chyba.

04Chyba má říct, co změnit, a zachovat práci

Podle WAI k oznamování výsledku má být zpětná vazba stručná, srozumitelná a pomáhat s opravou. U delšího formuláře použijte přehled problémů a zprávy u dotčených polí. Pro asistivní technologie lze chybový text spojit s polem pomocí aria-describedby. Barva sama význam nevysvětlí.

Jde o modelové formulace. Skutečná zpráva musí odpovídat pravidlům konkrétního pole, včetně případného limitu souboru. Nevymýšlejte uživateli opravu, kterou systém neumí přijmout. Pokud problém zavinilo spojení nebo server, nepřenášejte odpovědnost větou „Zadali jste chybná data“. Zachovejte bezpečně uloženou práci a vysvětlete, co lze udělat dál.

Souvislost mezi chybovými stavy a návratem uživatelů rozebíráme v článku o UX designu webové aplikace.

05Usnadněte doplňování bez nechtěných změn

Atribut autocomplete popisuje význam údajů pro prohlížeč, například email, name nebo postal-code. Umí odlišit také fakturační a doručovací údaje. Klientskou validaci ale nelze považovat za zabezpečení; server musí vstup ověřit samostatně. Obojí stanovuje standard HTML.

Automaticky doplněné údaje ponechte viditelné a opravitelné. U vyhledávání firmy podle IČO ukažte, odkud návrh pochází, a umožněte pokračovat i tehdy, když dočasně nefunguje registr. Předvyplnění nemá přepsat ručně opravenou adresu bez upozornění. Seznam návrhů musí jít ovládat klávesnicí a zvolená hodnota nesmí záviset jen na kliknutí myší.

Nežádejte v témže procesu znovu informaci, kterou už máte, bez dobrého důvodu. W3C v kritériu opakovaného zadávání vysvětluje automatické vyplnění nebo možnost dřívější údaj vybrat, včetně výjimek. Samotný autofill prohlížeče tento požadavek kritéria nenahrazuje. Praktickým řešením může být volba „Fakturační adresa je stejná jako doručovací“.

06Rozlišujte chybu pole, výpadek a nejisté odeslání

Po kliknutí na Odeslat vzniká samostatný stav. Dejte najevo, že se požadavek zpracovává, a omezte náhodné opakování. To samo však nestačí. Server má poznat opakování stejného podání a zabránit nechtěnému vytvoření dvou požadavků. U procesů s vedlejšími účinky navrhněte identifikátor podání a jasné pravidlo, kdy opakování vytvoří nový případ.

Při přerušení spojení nemusíte vědět, zda server podání přijal. Nepište automaticky „Neodesláno“, pokud to nevíte. Nabídněte kontrolu stavu nebo bezpečné opakování se stejným identifikátorem. Úspěch potvrďte až po doloženém přijetí a ukažte srozumitelný další krok. Odeslání potvrzovacího e-mailu je další operace, která může selhat samostatně.

U webové aplikace se vyplatí tyto stavy navrhnout společně s vývojářem. Rozpracovaný formulář neukládejte bezmyšlenkovitě na sdílené zařízení. Způsob a dobu uchování zvolte podle citlivosti údajů a očekávání uživatele. Hesla, přístupové kódy ani obsah formulářů nepatří do běžných analytických událostí.

U poptávkového formuláře pokračuje cesta i po odeslání: přečtěte si, kdo má poptávku převzít a odeslat první odpověď.

07Převzetí ověřte scénáři, ne vzhledem

Připravte si předem sadu pokusů, kterou projdete po každé významné změně. Zahrňte člověka, který formulář nezná. Sledujte, kde se zastaví, čemu nerozumí a zda dokáže chybu odstranit bez vysvětlování. Počet odeslání doplňte počtem chybných polí a technických selhání, ale nesbírejte kvůli tomu vlastní obsah vyplněných údajů.

1. Dokončete formulář jen klávesnicí a zkontrolujte pořadí fokusu.
2. Ověřte popisky a hlášení s asistivní technologií.
3. Vyzkoušejte telefon, zvětšený text a delší skutečné hodnoty.
4. Opravte více chyb bez ztráty správně vyplněných polí.
5. Přerušte spojení během odesílání a zkontrolujte stav po návratu.
6. Odešlete stejný požadavek opakovaně a ověřte dohodnuté chování.

U předání si nechte ukázat také nativní validaci a serverovou chybu. Každá má jiný původ, ale uživatel potřebuje stejně čitelnou cestu dál. Formulář je připravený, když uživatel dokáže úkol dokončit a zvládne i běžné potíže.

Po nasazení udržujte stejnou sadu ověřovacích scénářů i při změně analytiky nebo ochrany proti spamu. Změna mimo samotná pole totiž může zablokovat odeslání. Nechte si vždy ukázat konkrétní úspěšný záznam v cílovém systému, ne pouze zelenou hlášku na obrazovce.

08Časté otázky

09Nechte prověřit svůj formulář

Pošlete nám odkaz na formulář a popis nejčastějších potíží. Navrhneme úpravy polí, chybových stavů a ověření odeslání podle skutečného úkolu vašich zákazníků.