Webový formulář bývá místem, kde se dobrý dojem z webu buď promění v konkrétní kontakt, objednávku či žádost, nebo skončí frustrací. Návštěvník při vyplňování investuje čas a sdílí informace. Pokud neví, co se od něj očekává, udělá chybu nebo si není jistý, zda se zpráva odeslala, často odejde. Srozumitelný formulář proto není jen seznam polí. Je to krátký rozhovor, který člověka vede krok za krokem a respektuje jeho čas.
Následujících dvanáct pravidel pomůže při návrhu poptávky, registrace, objednávky i formuláře pro veřejnou službu. Zaměřují se na obsah, ovládání, chybové stavy i ověření v praxi. Cílem není přidat více instrukcí, ale odstranit nejistotu ve správný okamžik.
1. Nejdřív si ujasněte, co má formulář vyřešit
Začněte otázkou, jaké rozhodnutí nebo následnou práci mají odeslaná data umožnit. U poptávky může stačit jméno, e-mail a stručný popis potřeby. Pokud tým po odeslání stejně nejprve zavolá, pravděpodobně nepotřebuje hned znát rozpočet, přesný termín, velikost firmy i několik dalších údajů. Každé pole musí mít důvod. Sepište si, kdo odpověď zpracuje, k čemu ji použije a co se stane po odeslání. Když důvod nenajdete, pole vyřaďte nebo se na něj zeptejte až později.
2. Položte jednu srozumitelnou otázku na jedno pole
Popisek má stručně říci, jakou informaci člověk zadává. „Jméno a příjmení“ je jasnější než neurčité „Kontaktní údaje“. Nepřesouvejte popisek do placeholderu, tedy světlého textu uvnitř prázdného pole. Po začátku psaní zmizí a při kontrole vyplněného formuláře už návštěvník neví, co pole znamená. Popisek propojte s ovládacím prvkem také v kódu, například pomocí elementu label. Čtečka obrazovky pak oznámí účel pole a kliknutí na popisek může pole aktivovat. Nad polem ponechte krátký text, který zůstane vidět.
3. Nápovědu nabídněte tam, kde ji člověk potřebuje
Nezahlcujte formulář dlouhým úvodním návodem. Doplňující informaci umístěte přímo k příslušnému poli: například vysvětlete, zda se telefon píše s předvolbou, v jakém tvaru zadat datum nebo jaké soubory lze přiložit. Uveďte příklad, když formát nelze snadno odhadnout. Nápověda má být konkrétní a krátká. Jestliže je její obsah důležitý, neskrývejte ho pouze za ikonou s otazníkem ani za informací dostupnou až po najetí myší. Pomoc musí být čitelná na telefonu a dostupná při ovládání klávesnicí.
4. Seskupte související otázky a ukažte pořadí
U delšího formuláře rozdělte obsah do logických částí, například „Vaše údaje“, „Podrobnosti požadavku“ a „Kontrola a odeslání“. Skupiny pojmenujte tak, aby bylo zřejmé, proč se jednotlivé otázky objevují společně. Pokud je nutné použít několik kroků, uveďte, kolik jich je, kde se návštěvník nachází a zda se může vrátit zpět. Neoznačujte postup pouze barevnou tečkou nebo tenkým pruhem. Textové označení typu „Krok 2 ze 3“ funguje i bez rozlišení barev a pomáhá lidem plánovat čas.
5. Využijte vhodný typ vstupu a automatické doplnění
Pro e-mail použijte pole rozpoznané jako e-mail, pro telefon telefonní vstup a pro datum odpovídající typ nebo přístupné rozhraní. Mobilní prohlížeč pak může nabídnout vhodnou klávesnici. U běžných osobních údajů nastavte správné atributy autocomplete, například pro jméno, e-mail nebo adresu; správce hesel a prohlížeč mohou pomoci s doplněním. Nepřidávejte vlastní omezení znaků, která odmítají legitimní jména, diakritiku nebo telefonní čísla ze zahraničí. Automatizace má lidem ušetřit psaní, ne jim přidat další překážku.
6. Jasně rozlište povinné a nepovinné informace
Je-li povinná většina polí, můžete viditelně označit jen ta nepovinná; pokud je povinných jen několik, označte právě je. Vysvětlení umístěte před formulář a držte se stejného pravidla u každého pole. Hvězdička bez legendy není dostatečná. U citlivějších údajů vysvětlete, proč je požadujete a jak budou použity. Sběr dat omezte na to, co je pro službu skutečně potřebné. Souhlas s nepovinnou komunikací oddělte od odeslání žádosti a nepředvybírejte ho za návštěvníka. Člověk by měl chápat dopad svého rozhodnutí před kliknutím.
7. Zajistěte ovládání klávesnicí a viditelný fokus
Každé pole, volba, odkaz i tlačítko musí být dosažitelné klávesou Tab v přirozeném pořadí. Aktivní prvek musí mít zřetelný vizuální fokus, který nezmizí pod hlavičkou ani jinou vrstvou. Ověřte, že seznam voleb lze ovládat šipkami, že se stav zaškrtávacího políčka dá poznat a že se fokus po chybě přesune na užitečné místo. Nespoléhejte pouze na změnu barvy a nevyžadujte gesto tažením. Přístupné ovládání prospívá lidem s omezenou hybností, ale také těm, kdo používají klávesnici kvůli rychlosti nebo pohodlí.
8. Chybu popište lidsky a přímo u místa, kde vznikla
Text „Neplatný vstup“ člověku neříká, co má opravit. Uveďte konkrétně: „Zadejte e-mail ve tvaru [email protected].“ Chybu spojte s polem, kterého se týká, a označte ji také textem, nejen červeným rámečkem. U delšího formuláře přidejte na začátek souhrn chyb s odkazy na příslušná pole; po odeslání může fokus zamířit právě na tento souhrn. Zachovejte již napsané odpovědi. Návštěvník by neměl znovu vyplňovat celou stránku kvůli jediné chybě na konci.
9. Kontrolujte údaje včas, ale nebraňte zbytečně v pokračování
Ověřte formát, když lze chybu napravit snadno, a vysvětlete požadovaný zápis ještě před odesláním. Buďte opatrní s přísným ověřováním při každém stisku klávesy: červená chyba může vyskočit dříve, než člověk dokončí telefon nebo adresu. Pokud existují různé platné formáty, například mezinárodní telefonní předvolby, přijměte je nebo ukažte, jak systém údaj upraví. Vždy ověřujte data také na serveru, protože prohlížečová kontrola může být vypnutá. Při technickém selhání sdělte, zda se formulář odeslal, a nabídněte jasný další krok.
10. Myslete na telefon, pomalé připojení i přerušení
Vyzkoušejte formulář na úzkém displeji, ve zvětšeném zobrazení i s automaticky otevřenou klávesnicí. Pole by měla zůstat viditelná a tlačítka snadno stisknutelná, aniž by uživatel musel přesně mířit na drobný cíl. Zkontrolujte, jestli stránka po chybě neposune člověka někam jinam a zda se po návratu z jiné aplikace neztratí rozepsaná práce. U dlouhých žádostí zvažte průběžné ukládání nebo možnost pokračovat později; přitom transparentně informujte, kde se koncept ukládá. Vyhněte se krátkým časovým limitům bez varování a bez možnosti prodloužení.
11. Tlačítko a potvrzení musí říkat, co se stane
Popisek „Odeslat“ je srozumitelný, ale u důležitější akce může být přesnější „Odeslat poptávku“ nebo „Dokončit objednávku“. Během zpracování ukažte, že systém pracuje, a zabraňte náhodnému dvojímu odeslání. Po úspěchu zobrazte jasné potvrzení, které shrne další postup a očekávanou dobu odpovědi, pokud ji můžete spolehlivě slíbit. Nezaměňujte za potvrzení pouhé zmizení formuláře. Pokud k odeslání nedošlo, řekněte to stejně jasně. Lidé potřebují vědět, zda mají čekat, opravit chybu, nebo zkusit jiný kontakt.
12. Ověřte formulář s různými lidmi a průběžně ho zlepšujte
Automatický audit je užitečný, ale sám nepozná, zda návštěvník rozumí otázce nebo zda je postup zbytečně dlouhý. Projděte formulář klávesnicí, čtečkou obrazovky a na telefonu. Potom pozorujte několik lidí při skutečném úkolu a sledujte okamžiky, kdy váhají, vracejí se nebo žádají o vysvětlení. Zeptejte se na souhlas s ukládáním analytických událostí a zaznamenávejte jen údaje, které potřebujete pro zlepšení služby. Porovnávejte dokončení, chybovost a opuštění jednotlivých kroků, ale nikdy nevyvozujte příčinu jen z jednoho čísla.
Začněte nejdůležitější cestou
Nemusíte předělávat všechny formuláře najednou. Vyberte ten, který je nejdůležitější pro návštěvníka i organizaci, například žádost o kontakt nebo objednávku. Projděte každé pole, odstraňte nepotřebné otázky, doplňte jasné popisky a otestujte opravu chyb. Potom ověřte stejný postup na počítači i telefonu a zeptejte se lidí, kteří službu skutečně používají. I několik drobných úprav může odstranit nejistotu v rozhodující chvíli. Tým blue.point Solutions se věnuje tvorbě webů i specializovaných aplikací; více informací najdete na stránce Naše služby a dotazy můžete poslat přes Kontakt.
