Formuláře, které lidé vyplní: Návrh, validace a potvrzení
Zákazník formulář vyplní, klikne a neví, zda poptávka dorazila. Jiný se zasekne na telefonu zadaném s mezerami. Dobrý formulář potřebuje srozumitelná pole, přiměřenou kontrolu a jasný konec. Navrhněte všechny tři části společně.
01Nejdřív určete, co potřebujete vyřídit
U poptávky může být cílem domluvit první rozhovor. U reklamace dohledat objednávku a problém. Není důvod, aby obě úlohy měly stejná pole. Ke každému údaji napište, kdo ho použije a pro jaký další krok. Pokud odpověď neznáte, pole odstraňte nebo odložte na později.
W3C doporučuje žádat jen údaje potřebné k dokončení procesu. Pro pracovní návrh si vytvořte jednoduchý seznam: údaj, důvod, povinný či nepovinný, příjemce. U telefonního čísla například rozhodněte, zda bez hovoru opravdu nelze požadavek vyřídit. „Obchodník ho možná někdy využije“ není přesvědčivý důvod k povinnému vyplnění.
Na začátku vysvětlete, co člověk formulářem získá a co bude následovat. Neslibujte odpověď do hodiny, pokud tým takovou lhůtu nezvládá. Vlastní proces nejprve domluvte s lidmi, kteří žádosti zpracovávají. Formulář, který sbírá správná data do neobsluhované schránky, nemá vyřešený výsledek.
02Každé pole potřebuje trvalý popisek
Název pole má zůstat viditelný i při psaní. Příklad uvnitř prázdného políčka může pomoci s formátem, ale nenahrazuje popisek. U údaje, který lidé snadno zamění, doplňte krátkou nápovědu: například zda chcete číslo objednávky, nebo číslo faktury.
Povinná a nepovinná pole označujte jednotně. Související volby seskupte a u každé skupiny popište otázku. Průvodce W3C k popiskům vysvětluje jejich propojení s ovládacími prvky. V zadání pro vývojáře proto nestačí věta „popisek je nad polem“; musí k němu patřit také programově.
Vyzkoušejte skutečně dlouhé jméno, firmu s diakritikou i víceřádkovou adresu. Zástupný text „Jan Novák“ sám neukáže, co se stane po zalomení. Každou nápovědu pište podle skutečného omezení systému. Pokud příloha může mít jen určitý formát a velikost, ukažte to před výběrem souboru.
03Na mobilu pomozte se zadáním
Pole pro e-mail má odpovídat e-mailu, telefon má umožnit vhodnou klávesnici a automatické doplnění má respektovat účel údaje. Identifikátory, jako PSČ nebo číslo objednávky, nepovažujte automaticky za čísla určená k výpočtu. Mohou obsahovat úvodní nulu nebo písmena.
W3C u validace upozorňuje na různé zápisy telefonů i zahraničních poštovních směrovacích čísel. Přijímejte běžné mezery a předvolby, pokud je umíte bezpečně zpracovat. Přísný formát zavádějte kvůli skutečné potřebě, ne proto, že se jednoduše kontroluje jedním regulárním výrazem.
Na telefonu projděte formulář s otevřenou klávesnicí. Ověřte, že nezakrývá aktuální chybu, tlačítko ani důležitou nápovědu. U krátké poptávky nemusí být více kroků výhodou. Delší proces rozdělte podle rozhodnutí, která člověk dělá, a zachovejte možnost vrátit se bez ztráty údajů.
04Validujte ve chvíli, kdy člověk může něco opravit
Neoznačujte prázdné pole za chybné hned po otevření stránky. Doporučujeme kontrolovat dokončený vstup při opuštění pole a znovu při odeslání. U již nahlášené chyby může průběžná kontrola pomoci ukázat, že oprava zabrala. Konkrétní chování ověřte s uživateli formuláře.
Jiný režim se hodí pro heslo, jiný pro obsazené uživatelské jméno. U vzdálené kontroly neoznamujte „volné“ dříve, než dorazí odpověď. Když člověk mezitím vstup změní, nesmí se starší výsledek tvářit jako kontrola nové hodnoty. Pomalé spojení patří do scénáře návrhu, ne až do reklamace po spuštění.
Dokumentace MDN k validaci zdůrazňuje, že kontrolu v prohlížeči lze obejít. Server proto musí vstupy ověřit znovu. Zelená fajfka u e-mailu potvrzuje nanejvýš provedenou kontrolu, nikoli automaticky existenci schránky nebo totožnost člověka.
05Chyba musí pojmenovat problém a další krok
„Neplatná hodnota“ neříká, co změnit. Lepší zpráva odkáže na konkrétní údaj a popíše opravu. Chybu připojte k poli, zachovejte vyplněný obsah a nespoléhejte jen na červený rámeček. Tón má pomoci pokračovat, ne člověka hodnotit.
Po neúspěšném odeslání dlouhého formuláře přidejte souhrn chyb s odkazy na příslušná pole. Vzor GOV.UK pro souhrn chyb pracuje se souhrnem i zprávou u samotného vstupu. Ověřte také přesun pozornosti a čtení chyb pomocí asistivních technologií.
| Situace | Málo užitečné | Srozumitelnější příklad |
|---|---|---|
| Chybí kontakt | Chyba 1002 | Doplňte e-mail, na který vám můžeme odpovědět. |
| Příliš velký soubor | Soubor je neplatný | Soubor je větší než povolených 10 MB. Vyberte menší. |
| Selhání služby | Zkontrolujte údaje | Požadavek se nepodařilo odeslat. Vyplněné údaje zůstaly zachované. |
06Oddělte chybu vstupu od nedostupné služby
Špatně zadané PSČ může opravit zákazník. Výpadek vašeho serveru ne. Ve druhém případě nevracejte obecnou výzvu „zkontrolujte údaje“. Popište, zda se požadavek podařilo přijmout, co zůstalo zachováno a jak lze pokračovat. Pokud stav neznáte, přiznejte nejistotu místo falešného potvrzení.
Během odesílání ukažte probíhající práci a řešte opakované kliknutí. U objednávek a rezervací navrhněte se serverem ochranu před duplicitním zpracováním. Pouhé zakázání tlačítka neřeší opakovaný požadavek po obnovení stránky nebo při výpadku spojení. Po chybě musí být zřejmé, zda a jak lze akci bezpečně zopakovat.
07Potvrzení je součást formuláře
Úspěch oznamte až po odpovídajícím potvrzení systému. Uveďte, co jste přijali, co bude následovat a kde člověk najde další informace. U složitější žádosti může před odesláním pomoci kontrolní stránka. Vzor pro kontrolu odpovědí GOV.UK ukazuje možnost vrátit se k úpravě jednotlivých údajů.
Navrhněte i situaci, kdy se potvrzovací e-mail opozdí. Uživatel nemá být nucen formulář vyplnit znovu jen proto, že zprávu nevidí ve schránce. Je-li k dispozici číslo požadavku, ukažte ho i na potvrzovací stránce. Zbytečně na ní neopakujte citlivý obsah.
08Měřte dokončení a sledujte kvalitu požadavků
Rozlišujte zobrazení formuláře, zahájení, chybu vstupu, pokus o odeslání a potvrzené přijetí. Samotné kliknutí na tlačítko není hotová poptávka. Do analytických událostí nevkládejte obsah polí, e-mail ani text zprávy; pro diagnostiku obvykle stačí identifikátor pole a typ problému.
Při porovnání dvou verzí sledujte i platné kontakty a práci navíc pro obsluhu. Vyšší počet odeslání nepomůže, pokud přibyly neřešitelné žádosti. Oddělte mobil a počítač a zapište, co se ve formuláři změnilo. Bez stejné definice dokončení nejsou výsledky porovnatelné.
Před nasazením projděte platný vstup, více chyb najednou, klávesnici, telefon, pomalou odpověď i selhání serveru. Požadavek musí skutečně dorazit tam, kde ho někdo vyřídí. Chcete prověřit návrh i dokončení procesu? U webu na míru začněte právě tímto společným scénářem.