Mějte na webu vytuněné formuláře

Technologie Lukáš Matta

Téměř každý současný web obsahuje nějaký formulář. V tomto článku vám přinášíme sedm jednoduchých tipů, které pomohou usnadnit uživatelům jejich vyplňování. V konečném důsledku to může zvýšit konverze, a tedy přinést do byznysu více peněz. #lepsiformulare

1 Input type

HTML5 nabízí množství atributů type pro tag input. Dlouhodobý zvyk používat pro každý input type text není správný. Pokud chcete uživateli co nejvíce zjednodušit vyplňování, vždy použijte vhodný type tag. Například pro telefonní čislo bude typ tel, pro vyhledávání typ search a pro zadání e-mailové adresy typ email. Zde najdete přehled dostupných hodnot atributu type.

2 Vhodný label formuláře

Placeholder není dostatečnou náhradou pro popis políčka ze dvou důvodů. Tím prvním je přístupnost – uživatelé používající čtečku mohou mít problémy s identifikací políčka. Druhý důvod je ještě jednodušší – placeholder někdy po kliknutí do políčka zmizí a uživatel zapomene, co do něj měl vyplnit. Vždy proto přidávejte vhodný popis políčka do tagu label. Nezapomeňte také tag label spárovat s input tagem pomocí atributu for.

Cognito – jak vylepšit formuláře (Vhodný label)

3 Žádejte jen to, co potřebujete

Od uživatele vždyžádejte jenom ty informace, které opravdu potřebujete a nedokážete je zjistit jinak. Čím méně práce bude uživatel s vyplněním formuláře mít, tím pravděpodobnější je, že ho vůbec vyplní.

Cognito – jak vylepšit formuláře 2 (Pouze nutné)

4 Detailní feedback

Při validaci vždy oznamte uživateli, která políčka vyplnil správně, a která ne. Nestačí obecné oznámení, které říká „Něco bylo vyplněno nesprávně“.

5 Rozdělte formulář

Pokud váš formulář obsahuje velké množství políček, zvažte dvě možnosti. První jsem zmínil v bodě číslo 4. Druhou možností je seskupit je podle logického spojení. Příkladem je formulář v internetovém obchodě, kde seskupíte údaje o osobě, platební kartě a doručovací adrese do tří bloků.

Alternativou je zobrazovat uživateli jen aktuálně vyplňovánu sekci a zbytek skrýt, případně rozostřit. Působí to méně rušivým dojmem a vyplňování formuláře probíhá plynuleji.

Cognito – jak vylepšit formuláře 3 (Rozdělení formuláře)

6 Dropdowny jsou zlo

Použití dropdownu pro zjištění odpovědi na otázku s více možnostmi není z pohledu komfortu uživatele správné. Vyplnění několika dropdownů při prohlížení přes smartphone znamená nutnost hodně skrolovat a klikat. Proto je vhodnější nahradit dropdown tlačítky s několika možnostmi.

Cognito – jak vylepšit formuláře 4 (Dropdown)

7 Google reCAPTCHA

Spamující boti, kteří tvoří 95 % vyplněných formulářů na vašem webu, mohou být nepříjemní. Pokud je chcete zastavit, myslete především na běžné uživatele. Zastavení botů se jich nesmí dotknout, proto se musíte vyhnout nepříjemné CAPTCHA. Pokud nutíte uživatele přepsat těžko čitelný text z obrázku, častokrát se stane, že se na vyplňování formuláře vykašle.

Zvažte proto použití jednoduché CAPTCHA například od Googlu. Nenutí uživatele přepisovat text, většinou stačí jeden klik nebo jednoduchá práce s obrázkem.

Cognito – jak vylepšit formuláře 5 (Captcha)

Hlavně jasně a srozumitelně

I při navrhování formulářů a jejich správném kódování je nutné přemýšlet. Dobře vytvořený formulář může dramaticky zvýšit snadnost jeho vyplňování a tím navýšit konverze. Myslete proto při vytváření na to, jaké formuláře byste sami chtěli vyplňovat – jednoduché, přehledné a snadno vyplnitelné.

 

Poraďte se s námi

Co si dále přečíst

Z deníčku UX/UI designeraZ deníčku UX/UI designera
Z deníčku UX/UI designera

Když jste UX/UI designérem, váš mozek se musí stát nástrojem k ovládání široké škály schopností – od psychologie uživatelů, přes technickou preciz...

Design

Cognito.cz, s.r.o.