Checklist pro lepší formuláře: Kolik z 11 tipů používáte?

Máte e-shop na míru, nebo web, kde jste si formuláře navrhovali sami? Projděte si 11 zásad, kterými průchod formulářem uživatelům zpříjemníte.

1. Zkraťte to

Opravdu důkladně zvažte, zda konkrétní údaj pro vyřízení požadavku potřebujete. Mezi pole, kterých se můžete zbavit bez větší újmy, patří např.:

• Jméno a příjmení – pokud vám to nezpůsobí technické problémy při zápisu do databáze, spojte křestní jméno a příjmení do jednoho pole.

• Datum narození – pokud nepotřebujete na svém webu ověřovat věk, pole vymažte – stejně si většina lidí datum vymyslí. Mnohem lepší je dát podmínku dosažení určitého věku do všeobecných podmínek, se kterými stejně musí zákazník před odesláním formuláře souhlasit.

• Pohlaví – pokud nejde o dárky nebo dárková balení, která se liší podle pohlaví, na gender uživatele se můžete doptat později, např. v klientské sekci.

• Výzva k odběru newsletteru a preference ohledně zasílaného obsahu – víme, že obchodníci rádi pole k odběru newsletterů podstrkují lidem už v objednávce, ale doporučujeme to nechat až na později.

2. Sdružujte příbuzná pole a využijte prázdný prostor

Pracujte s vizuální hierarchií a blízkostí – název pole by měl být jasně navázán na okénko, které máte vyplnit, další pole v pořadí by naopak odsazením mělo být jasně vizuálně oddělené. Nestane se tak, že uživatel váhá, zda se název pole váže k okénku pod ním, nebo nad ním.

3. Jasně uveďte náležitosti vložených dat

Uvádějte u každého pole, jak ho má zákazník vyplnit – nečekejte, až se ho pokusí odeslat a zobrazí se mu všechny errory, které ve formuláři „napáchal“ naráz. Tím ho akorát naštvete. Nejdůležitější je zásadu dodržovat při vkládání hesla.

Další cestou je validace dat v reálném čase pomocí speciálního nástroje, jako je Foxentry.

4. Nepoužívejte placeholder text jako název pole

Oblíbený trik minimalistických designérů má jednu zásadní nevýhodu – když do pole s cílem ho vyplnit kliknete a začnete psát, placeholder text zmizí – pro uživatele se slabší pamětí, nebo pro závěrečnou kontrolu formuláře před odesláním jde tedy o nevhodné řešení. Chytře problém vyřešil třeba Google, kde se placeholder text po kliknutí do pole změní na plovoucí popisek a po vyplnění na mini popisek v rámečku pole.

5. Povolte posun TABem a zvýrazněte aktivní pole

Někteří uživatelé preferují možnost „proTABovat“ celý formulář, protože neradi přeřazují z klávesnice na myš. Umožněte jim to, a navíc ještě zvýrazněte aktivní pole, na kterém se zrovna nacházejí – ideálně zbarvením rámečku pole do výrazné barvy. Stejně můžete označit i pole s errory, samozřejmě červeně.

6. Oznamte, že mají zapnutý CAPS LOCK

Naznačte to ikonou, nebo hláškou.

7. Upravte velikost polí podle délky údaje/množství údajů, které chcete

Pokud má uživatel vložit den nebo měsíc, pole nemusí být dlouhé jak Lovosice.

8. Neschovávejte error hlášky

Setkali jste se někde s tím, že se error hláška schovávala za tooltip, i když třeba v podobě červeného vykřičníku? Má to tak třeba Facebook na přihlašovací stránce. Pokud vás toto řešení napadlo, zase na něj rychle zapomeňte. Chcete od uživatele, aby aktivně zkoumal, co udělal špatně, a ne všem musí dojít, že mají myší najet na ikonku.

9. Jasně napište, že je pole nepovinné

Když jste si nedali říct u tipu 1, a přesto jste do formuláře vložili nějaká nepovinná pole, jasně to u nich uveďte, a to nejlépe textem „nepovinné pole“. Rozlišování pomocí hvězdičky nemusí každému dojít – zvlášť když se nepovinné pole manifestuje jen její nepřítomností.

10. Použijte obrázky pro vyšší engagement

Když to dává smysl, nebojte se pro názornost použít obrázky, ikony nebo textová pole – obzvlášť pokud jde o to, aby si uživatel vybíral z několika variant (layoutů, designů, řešení). Google podobný princip využívá třeba při volbě preferovaného reklamního formátu, když si uživatelé nastavují kampaně.

11. Kdykoliv to jde, nabídněte našeptavač

Vybírají uživatelé z předem daných možností? Např. chtějí zadat cílovou destinaci pro dovolenou nebo cestovní pojištění? Než vybírat ze seznamu stovek zemí nebo měst, raději je nechte zadat první písmena a pak nabídněte našeptání. Odladíte tak i případy, kdy uživatel pojem prostě špatně vyhláskuje. Prediktivní vyhledávání (našeptavač) používá třeba booking.com nebo Airbnb.

Tak jak jste dopadli se svými formuláři? Podívejte se i na konkrétní příklady se screenshoty v původním článku od Jeremiaha Lama, který publikoval na serveru Medium.