Dizajn formulárov: Validácia, chybové stavy a dopĺňanie

01Najskôr si obhájte každé pole

Pri každej položke si určite, kto údaj potrebuje a čo podľa neho urobí. Pri prvom dopyte môže stačiť opis problému a kontakt. Fakturačné údaje či podrobnú štruktúru firmy si vyžiadate neskôr. Cieľom nie je čo najkratší formulár za každú cenu. Má obsahovať to, bez čoho sa aktuálny krok nedá zmysluplne a bezpečne dokončiť.

Povinné údaje označujte jednotne. Ak žiadate telefónne číslo, vysvetlite, na čo ho použijete. Pri prílohe uveďte vhodný obsah a podporované formáty. Dlhšiu žiadosť rozdeľte podľa úloh používateľa, nie podľa oddelení vo vašej firme. Človek má vedieť, koľko práce ho čaká, a musí sa dokázať vrátiť bez straty toho, čo už vyplnil.

02Názov poľa nesmie zmiznúť pri písaní

Pole má mať zrozumiteľný popisok prepojený aj v kóde. W3C pri bežných prvkoch odporúča label a zodpovedajúce hodnoty for a id. Správny názov tak môžu dostať aj asistenčné technológie. Postup vysvetľuje návod WAI na označovanie polí.

Text vo vnútri prázdneho poľa nech slúži nanajvýš ako príklad. Ak je jediným pomenovaním, po zadaní hodnoty používateľ stratí kontext. Oddeľujte názov od pokynu: „Telefón“ pomenúva údaj, „Uveďte aj predvoľbu krajiny“ vysvetľuje očakávaný vstup. Dôležitú informáciu neschovávajte do pomoci dostupnej iba pri pohybe myšou.

Pri návrhu webu na mieru požadujte vyplnené príklady. Prázdna grafická maketa neukáže dlhý názov spoločnosti, netypickú adresu ani problém po zväčšení textu. Nechajte si predviesť aj opravovanie údajov a stav s viacerými chybami. Formulár bude používať človek s vlastnými dátami, nie autor makety s krátkymi vzorovými slovami.

03Kontrolujte údaje v správnej chvíli

Validácia overuje, či údaj spĺňa zadané pravidlá. Prehliadač dokáže kontrolovať napríklad povinnosť a bežné typy vstupu. Správny formát e-mailu však ešte nepotvrdzuje existenciu schránky. Pre označenie povinných polí a natívne kontroly je užitočný návod WAI k validácii.

Neukazujte chybu skôr, než má človek príležitosť údaj dokončiť. E-mail bez zavináča môže byť jednoducho rozpracovaný text. Pri jednoduchom poli možno kontrolovať po jeho opustení, celý formulár potom pri odoslaní. Ak používateľ opravuje už označenú chybu, pomôžte mu rozpoznať úspešnú opravu. Vhodné načasovanie si overte na svojom procese, pretože rovnaký prístup nemusí fungovať pri krátkom dopyte aj rozsiahlej žiadosti.

Odlíšte zápis údaja od obchodného pravidla. Dátum môže byť platný, ale rezervácia na tento deň už nemusí byť dostupná. Vysvetlite skutočný problém a ponúknite ďalšiu možnosť. Nepovažujte medzery v telefóne, zahraničné meno či odlišnú adresu za chybu len preto, že nezodpovedajú jednému úzkemu vzoru.

04Napíšte chybu ako návod na opravu

WAI k oznamovaniu výsledkov odporúča stručné a zrozumiteľné vysvetlenie. Pri dlhšom formulári pomôže súhrn problémov aj správa pri dotknutom poli. Chybový text možno pre asistenčné technológie prepojiť cez aria-describedby. Samotná červená farba nestačí na vyjadrenie problému.

Sú to modelové texty, ktoré treba prispôsobiť konkrétnym pravidlám vrátane limitu súboru. Nesmú odporúčať formát, ktorý systém následne odmietne. Ak zlyhalo spojenie alebo server, neobviňujte používateľa z nesprávnych údajov. Bezpečne zachovajte jeho prácu a povedzte, čo môže urobiť ďalej. Návrat na prázdny formulár nie je uspokojivé zotavenie z chyby.

Súvislosť medzi chybovými stavmi a návratom používateľov rozoberáme v článku o UX dizajne webovej aplikácie.

05Dopĺňanie má šetriť prácu a zostať opraviteľné

Autocomplete vysvetľuje prehliadaču význam údajov, napríklad email, name či postal-code. Dokáže rozlíšiť fakturačnú a doručovaciu adresu. Kontrola v prehliadači však nezabezpečuje server; údaje treba overiť aj na jeho strane. Obe pravidlá opisuje štandard HTML.

Predvyplnenie zobrazte tak, aby ho používateľ mohol skontrolovať a upraviť. Pri vyhľadaní firmy podľa IČO uveďte pôvod návrhu a pripravte možnosť pokračovať, keď register neodpovedá. Dajte ručnej oprave prednosť pred neskorým automatickým výsledkom alebo si zmenu nechajte potvrdiť. Zoznam návrhov musí byť použiteľný klávesnicou; samotná myš nesmie byť podmienkou výberu.

Počas jedného procesu nepýtajte ten istý údaj znova bez dôvodu. W3C v kritériu opakovaného zadávania vysvetľuje predvyplnenie alebo dostupnosť skoršieho údaja na výber a príslušné výnimky. Samotné dopĺňanie prehliadača tento požiadavok kritéria nenahrádza. Praktickou voľbou môže byť „Fakturačná adresa je rovnaká ako doručovacia“.

06Neisté odoslanie potrebuje vlastný stav

Po odoslaní ukážte, že systém pracuje, a obmedzte náhodné opakované kliknutie. Tým sa však problém duplicít nekončí. Server má vedieť rozpoznať opakovanie rovnakého podania. Pri procese, ktorý vytvára objednávku alebo žiadosť, dohodnite identifikátor podania a pravidlo, kedy opakovanie znamená pokračovanie a kedy nový prípad.

Ak sa spojenie preruší, podanie už mohlo doraziť. Netvrďte automaticky „Neodoslané“, keď výsledok nepoznáte. Ponúknite kontrolu stavu alebo bezpečné opakovanie s rovnakým identifikátorom. Úspech potvrďte až po overenom prijatí a vysvetlite ďalší krok. Odoslanie potvrdzovacieho e-mailu sledujte oddelene, pretože môže zlyhať aj po úspešnom uložení žiadosti.

Pri webovej aplikácii sa tieto stavy oplatí navrhovať spolu s vývojárom. Rozpracované údaje neukladajte automaticky na zdieľané zariadenie bez rozmyslu. Spôsob a trvanie uchovania prispôsobte citlivosti informácií. Heslá, prístupové kódy a obsah formulára nepatria do bežných analytických udalostí ani do hlásení, ktoré vidí široký tím.

Pri dopytovom formulári cesta pokračuje aj po odoslaní: prečítajte si, kto má dopyt prevziať a poslať prvú odpoveď.

07Overujte celé scenáre vrátane zotavenia

Spíšte si testovacie situácie ešte pred dokončením dizajnu. Zapojte človeka, ktorý formulár nepozná, a sledujte, či vie sám nájsť a opraviť problém. Merajte druhy technických zlyhaní a počet problémových polí, nie ich citlivý obsah. Samotný počet úspešných odoslaní neukáže, koľko práce používatelia stratili pred dokončením.

1. Prejdite celý formulár klávesnicou a overte poradie fokusu.
2. Skontrolujte popisky a oznamovanie chýb s asistenčnou technológiou.
3. Vyskúšajte telefón, zväčšený text a dlhé reálne hodnoty.
4. Opravte viac chýb bez opätovného vypĺňania správnych položiek.
5. Prerušte spojenie počas odoslania a skontrolujte návrat do procesu.
6. Zopakujte rovnaké podanie a overte dohodnutú ochranu pred duplicitou.

Pri prevzatí si nechajte predviesť aj rozdiel medzi chybou v prehliadači a odmietnutím na serveri. Príčina je iná, ale cesta k náprave má byť rovnako zrozumiteľná. Súčasťou zadania má byť aj zodpovedný človek, ktorý po spustení vyhodnocuje opakujúce sa ťažkosti.

Rovnaké skúšobné situácie použite aj po zmene analytiky alebo ochrany pred spamom. Úprava mimo samotných polí môže ovplyvniť odoslanie. Pri overení preto žiadajte konkrétny prijatý záznam v cieľovom systéme, nielen zelené potvrdenie na obrazovke.

08Časté otázky

09Dajte preveriť svoj formulár

Pošlite nám odkaz a najčastejšie ťažkosti používateľov. Navrhneme úpravy polí, chybových stavov a potvrdenia odoslania podľa skutočnej práce vašich zákazníkov.