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

7. 11. 2019 14:35

UX
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. Protože, co si budeme namlouvat, lidé formuláře nesnášejí. Neházejte jim proto klacky pod nohy, abyste se mohli těšit na konverzi nebo hodnotná data do své databáze.

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.

TIP: Vyšší dívčí je ukázat např. zbarvením podmínky dozelena nebo dočervena, které podmínky uživatel splnil, a které ještě zbývají. Má to tak u nastavení hesla např. oblíbený mailingový nástroj Mailchimp.

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.

Anna Sálová

Anna Sálová

Anička se věnuje copywritingu a obsahové strategii 7 let. Začínala na volné noze, aby pak vedla copywritery v agentuře H1.cz. Odtud už byl jen kousek k založení vlastní obsahové agentury Content Wizards. Na jaře 2018 jí vyšla kniha Kreativní copywriting.

UX
Co je UX writing a jakou roli hraje ve vašem projektu?

Co je UX writing a jakou roli hraje ve vašem projektu?

14. 11. 2019 13:12

Weby, e-shopy, aplikace, orientační systémy nebo ovládací panely – nejen tam najdete více či méně povedené UX texty, tedy texty pro uživatelská rozhraní. Jak na...

Přečíst
Foxentry
UX
Srovnání objednávkových formulářů u nejoblíbenějších českých e-shopových řešení k pronájmu

Srovnání objednávkových formulářů u nejoblíbenějších českých e-shopových řešení k pronájmu

31. 10. 2019 14:34

Jelikož jsme ve Foxentry odborníci na formuláře, nemohli jsme si neposvítit na řešení formulářů na nejpopulárnějších e-shopových platformách k pronájmu. Zhodnotili jsme pro vás objednávkové formuláře...

Přečíst
Foxentry
Zkušenosti s Foxentry: Adam Košťálek ze Smarty.cz

Zkušenosti s Foxentry: Adam Košťálek ze Smarty.cz

24. 10. 2019 15:12

Chceme vám každý měsíc představit jednoho uživatele nástroje Foxentry pro pohodlnější vyplňování formulářů a čistá data v databázích. Dnes jsme poprosili o krátký rozhovor Adama...

Přečíst

Buďte stále v obraze

Novinky
Informace
Trendy