Použitelné a přístupné webové formuláře

Použitelné webové formuláře

Jak vytvořit použitelný formulář

Použitelnost je technický termín, který volně parafrázován říká asi toto:

„Použitelným nazýváme takový web, který umožní návštěvníkovi bez zbytečných stresů provést činnost, kvůli které na web přišel. Kupříkladu - najít informaci, po které touží, najít kontakt na provozovatele webu, zjistit, co je nového, bez problémů se zaregistrovat či bez ztráty hvězdičky a pohodlně nakoupit v elektronickém obchodě.”

Přístupnost je také technický termín, který by se dal lidsky vysvětlit takto:

Přístupným nazýváme takový web, který totéž, co nabízí web použitelný, umožní i lidem handicepovaným. Ať už zdravotně, sociálně nebo technicky.

Nehledejte v definici přístupnosti žádné složitosti. K tomu, aby web splňoval základní pravidla přístupnosti postačí, když se provozovatelé webů a webdesigneři ukázní a vrátí se k pravé podstatě webu a jazyka HTML, který je sám o sobě stoprocentně přístupný a byl už od začátku určen ke snadnému a bezbariérovému předávání informací.

Udělal jsem si takový malý, nikoliv reprezentativní, průzkum mezi pár uživateli, abych zjistil, co jim nejvíce vadí při používání webových formulářů. Výsledky nejsou překvapivé a jenom dokazují, že zdravý rozum provozovatelů webu či jejich webdesignerů se občas někam zatoulá.

Nechápu, co mám do které kolonky vyplnit

Říká se, že web, k němuž je potřeba návod k použití, je špatný web. U formulářů to ale zdaleka neplatí. Vždy mě potěší, když jsou popisky formulářových polí dostatečně výstižné a lidským jazykem mi sdělují, co vlastně mám jako uživatel do políčka vyplnit. Občas potěší i krátká nápověda, která mi ale nedává použitým jazykem najevo, že jsem neschopné dřevo.

Řešení:

• popisky (labely) jednotlivých polí koncipujte stručně, pochopitelně a lidským jazykem
• máte-li pocit, že krátký popis formulářového pole nestačí, nestyďte se použít krátkou nápovědu, kde lidem sdělíte, co od nich očekáváte. Vyhněte se marketingovým plkům, buďte struční a jděte k věci
• kupříkladu každé formulářové pole může nést atribut TITLE, a nápovědné okénko se zobrazí, jakmile do inkriminovaného pole vlezete. Drobnost, ale potěší.
• je-lí ta možnost, vždy je lepší dát na výběr z přednastavených možností buď pomocí rozbalovacího seznamu nebo zaškrtávacích tlačítek. Ne každý uživatel ovládá psaní všemi deseti a padesát úhozů za minutu může být maximum, co dokáže.

Formulářová pole jsou tak prťavá, že se do nich nemůžu trefit

To jistě znáte sami. Kreativní grafik ve svém uměleckém rozletu nakreslí překrásný, barvami hrající formulář s překrásně zaoblenými rohy a obrázkovým tlačítkem na odeslání. Nejlépe animovaným. Formulář pak nevypadá vůbec jako formulář a jednotlivá políčka jsou velmi nenápadná, co nejmenší a samozřejmě nepoužitelná. Nehledě na fakt, že za vykreslování formulářových polí je zodpovědný operační systém uživatele a jejich nastylování do podoby, jak si ji grafik představuje, je zhola nemožné.

Řešení:

• nechte formulář, ať vypadá jako formulář, nesnažte se za každou cenu znásilnit vzhled formulářových polí, stejně to nejde
• ponechte dostatek prostoru pro vložení informace, kterou od návštěvníka požadujete, především textové pole (TEXTAREA) vytvořte dostatečně prostorné
• smiřte se přitom s tím, že formulář bude stejně vypadat jinak, než si jistě geniální grafik představuje. Jsou prostě věci, které neovlivníte.
• odesílací tlačítko nechť vyhlíží jako tlačítko. S jeho stylováním stejně napříč rozličnými operačními systémy neuspějete a tlačítko formou obrázku se zase docela snadno v přemíře ostatní webové grafiky přehlédne.

Provozovatel trvá na tom, že musím, prostě musím, vyplnit všechny položky

Povinně vyplňované položky jsou noční můrou každého uživatele. Většina návštěvníků webu jsou stydlivkové, někteří jsou mírně paranoidní a všichni dohromady oprávněně nechápou, proč provozovatele eshopu zajímá velikost jejich bot nebo stáří manželky, která si navíc přesným rokem svého narození také není jistá. Medvědí službu povinným položkám pak prokáží ti programátoři, kteří správně zjistí, že některé povinné pole je nevyplněné a pomstychtivě vrátí nešťastnému uživateli prázdný formulář

Řešení:

• omezte povinně vyplňované položky na minimum, stejně nejste schopni zaručit, že vám filuta uživatel sdělí pravdivé údaje
• povinné položky zřetelně odlište od okolního textu a uvědomte si, že jenom jiná barva písma nestačí. Vžila se hvězdičková konvence, ale daleko lepším řešení je prostě do závorky napsat jednoduchý výraz : „tuto položku je nutné vyplnit”. Jak prosté.
• nikdy, zdůrazňuji nikdy nedopusťte, aby uživatel, který se patnáct minut mořil s vyplňováním sáhodlouhého formuláře a jednu povinnou kolonku vyplnit pozapomněl, obdržel od serveru úhledně prázdný formulář a ještě s výhružkou, že není schopen splnit to, co po něm provozovatel chce
• generujete-li chybovou hlášku, buďte slušní a ohleduplní, nedělejte z uživatele nemehlo. Všichni jsme omylní a každá chyba se dá snadno napravit. Kouzelná slova „prosím” a „děkuji” by měla patřit do základní výbavy každého provozovatele webu (nebo webdesignera)
• takovou třešničkou na dortu je pak nechat uživatele ještě před odesláním prohlédnout si všechny vyplněné údaje a případné chyby opravit. Přestože se technicky nejedná o nic neřešitelného, s podobným přístupem k uživateli se setkávám opravdu velmi výjimečně.

K čemu je to podivné tlačítko s názvem Reset?

K ničemu. Častokrát se s ním střetávám, jmenuje se třeba "Vymazat" a podobně a dodnes mi zůstává záhadou, k čemu je vlastně dobré. Mockrát už se mi totiž stalo, že jsem se přehmátl a místo odeslání všeho, co jsem v potu tváře tolik minut vyplňoval, zmizelo v digitálním pohřebišti. Navždy

Řešení

• vynechejte tlačítko Reset (Vymazat), nemá žádné opodstatnění , maximálně zmate uživatele, protože netuší, co všechno se mu může vymazat.

Formulář je obrovský a děsně nepřehledný, čert aby se v tom vyznal

Komplikované a rozsáhlé formuláře jistě mají na webu své místo. Shodou okolností právě pracuji na redesignu webu jedné modelingové agentury. Současný registrační formulář, který obsahuje desítky položek, vypadá hodně futuristicky a především je absolutně nepoužitelný. I pro člověka s ostřížím zrakem. Webdesigner nahňácal všechno na jednu stránku, která se do standardního rozlišení sotva vejde, vyplodil zhruba osmipixelové nezvětšitelné písmo, miniaturní formulářová políčka a všemu nasadil korunu, když celý formulář usadil na černé pozadí. Leckterá pohřební služba by mohla tiše závidět.

Řešení:

• nesnažte se mermomocí nacpat komplikovaný formulář na jednu obrazovku. Někdy to zkrátka nejde.
• klidně ho rozdělte do několika stránek a ponechte uživateli možnost se na všech vyplněných stránkách volně pohybovat (znáte to - postačí tlačítko s názvem "předchozí" a "další", nic neřešitelného). Podobným způsobem funguje kupříkladu registrace do katalogu Seznamu.
• jednotlivé části formuláře rozčleňte do menších a logicky k sobě patřících celků (viz praktická ukázka nebo ukázkový příklad), potřebné nástroje jsou v HTML k dispozici

To jsou v kostce základní pravidla, kterých by se tvůrce webu měl držet jako klíště labradora. Existuje vlastně ještě jedna zásada, kterou jsem nezmínil a ta zní:

Na jednu stránku patří výhradně a pouze jeden formulář

Řešení

• existuje jediná výjimka - vyhledávací políčko k prohledávání webu umístěné nejlépe vpravo nahoře může zůstat na svém místě.
• dva či více nezávislých formulářů na stránce spolehlivě uživatele zmate, protože mu nemusí být zcela jasné, který formulář se vlastně odešle
• ostatně, je dobrým mravem rozumně uživateli vysvětlit, co se vlastně po stisku tlačítka „Odeslat” bude dít. Nějaký doplňující text (ovšem nikoliv marketingový canc) není na škodu. Kupříkladu věta „stisknutím tlačítka odeslat bude objednávka odeslána prodejci, který vás do 24 hodin vyrozumí o jejím přijetí či vyřízení” nezní tak docela špatně.