7 tajemství pro návrh skvělých forem
Téměř každý webový design obsahuje nějaký typ formuláře. Od jednoduché sbírky e-mailové adresy, abyste se zaregistrovali k odběru bulletinu nebo oznámení na formuláře plného inkasa, je nutné navrhnout formulář, který je snadno použitelný a srozumitelný.
Normy formového návrhu se také vyvíjejí. Zatímco mnoho formulářů obsahovalo více sloupců a vyžadovalo spoustu informací, většina osvědčených postupů naznačuje, že formuláře jsou co nejjednodušší. A je tu i design. Dobrý formulář je skenovatelný, nevyžaduje mnoho psaní a zahrnuje inteligentní štítky a formátování, které uživatelům pomáhají vyplnit formuláře správně poprvé.
Zde je několik tajemství, které zajistí, že navrhujete formulář, který uživatelé skutečně vyplní.
1. Snadné skenování a čtení
Víte, že uživatelé skenují webové stránky, aby shromažďovali informace a určovali, jaká opatření podniknou nebo zda obsah a design zaujmou nebo ne. Totéž platí pro formy. Uživatel by měl být schopen zjistit, jaké informace jsou potřebné na první pohled a poskytnout jasné vysvětlení toho, jaký je formulář a jak ho předložit.
Vysoce snímatelný formulář obsahuje následující:
- Kontrast: Text musí být krátký a snadno čitelný. Vyhněte se mnoha barvám a dodržujte tradiční tmavé kombinace textů a pozadí.
- Seskupování a prostor: Informace o skupinách, které se podobají delším formám. Při shromažďování informací o platbě například informace o skupině zákazníků, platební informace a informace o přepravě. Tři kratší bloky jsou jednodušší než jeden dlouhý. Použití inteligentního odstupu mezi těmito štítky je spojeno s pole, které vysvětlují, spíše než s rovnoměrným rozestupem mezi textovými a polními prvky.
- Clear finish / call to action : Tlačítko velké a snadné vidět. Mikrokopie uvnitř tlačítka by měla uživateli říct, co se stane, jako například "odeslat", "platit nyní" nebo "pokračovat k dalšímu kroku". Nezapomeňte uzavřít zpětnou vazbu a nechat uživatele vědět, kdy je formulář řádně předán.
2. Zvažte plovoucí štítky
Došlo k velké debatě o tom, zda v textových polích použijeme text nápovědy nebo ne. Hlavním problémem je, že tento text příliš často neodchází kliknutím a uživatelé ho musí aktivně smazat, aby začali psát. To je nepříjemné.
Dále Nielsen Norman Group našel že prázdná pole mohou nakreslit oko a pomáhat uživatelům vkládat informace jasněji.
Pokud máte pocit, že je třeba používat rady, zvažte interaktivní nálepky s plovoucím řešením. Zahrnout informace o štítku do polí formuláře tak, aby to vypadalo jako zástupný text, ale nechte text animovat a posunout se do horní levé pozice, jakmile se uživatel přesune nebo klikne do pole. Označení nebo nápověda nikdy nezmizí a uživatel se snaží vyplnit formulář. (Malá animace je také zábavným překvapením pro uživatele.)
3. Použijte pole masky
Pole masky mohou poskytnout některé stejné stopy a tvořit rady, aniž by se dostaly do cesty použitelnosti. Maska pole se zobrazí pouze tehdy, když uživatel aktivuje pole a poskytuje další skenovací stopu o tom, jaké informace jsou potřebné. Maska může uživateli dále napomáhat automatickým formátováním informací, aby se zabránilo chybám, které budou při odeslání formuláře kopírovat.
Dobrým příkladem masky pole v akci je telefonní čísla. Zvažte možnosti více formátů:
- (000) 000-0000
- 000-000-0000
- 0000000000
Jak uživatel ví, který z nich bude fungovat? Pole formuláře zadá a upraví formát jako uživatel typů, takže on nebo ona nemusí myslet na to a pouze musí zadat čísla. (To také šetří potíže s nutností přepínat mezi klávesnicemi na mobilním zařízení.)
4. Vytvořte formuláře pro přívěsky
Nemáte žádný způsob, jak zjistit, na jaký typ zařízení se uživatel setká s vaším formulářem, ale stejně by mělo být stejně snadné vyplnit. Vezměte v úvahu všechny různé typy klávesnic, které by mohly odeslat informace do formuláře a upravovat pole k detekci a použití příslušné možnosti.
Na stolních počítačích by uživatelé měli mít možnost zadat formulář a vyplnit každé pole bez nutnosti kliknutí myší. Postupujte automaticky z jednoho pole na další po dokončení nebo použijte záložky nebo zadejte pro pohyb. W3.org má solidní soubor doporučení klávesnice pro vás to následovat.
V mobilních zařízeních přizpůsobte typ klávesnice požadovaným údajům. Pokud je vstup pro písmena, vyvolejte klávesnici alfa; pro čísla, vyvolejte číselnou volbu. Od Googlu: "Uživatelé aplikace oceňují aplikace, které poskytují vhodnou klávesnici pro zadávání textu. Ujistěte se, že je to implementováno důsledně v celé aplikaci spíše než jen u určitých úkolů, ale nikoli u jiných. "
5. Volba vertikálního formátu
Vertikální formuláře jsou uživatelům jednodušší než vícenásobné formáty sloupců. Pravidlem nejlepších postupů je zajistit, aby se všechna pole mohly na obrazovce vejít bez posouvání ve formátu shora dolů.
Jedinou výjimkou jsou super krátké formuláře, kde uživatel potřebuje pouze zadat e-mailovou adresu nebo jméno a e-mailovou adresu. Dvě vedlejší sloupce, po nichž následuje tlačítko výzvy k akci, mohou fungovat dobře v této situaci, pokud je poštovní schránka dostatečně dlouhá, aby uživatelé viděli všechna písmena své adresy.
Nezapomeňte si objednat prvky logicky i ve vertikální podobě. Pokud shromažďujete jméno, příjmení, e-mailovou adresu a barvu vlasů, postupujte takto.
6. Omezení psaní
Použijte co nejvíce nabídek pro předplnění s formuláři. Nic není příjemnější, když přidáte adresu a po prvních několika klepacích krocích Google API vykopne a navrhne možnosti adresy.
To dělá tři věci:
- Usnadňuje uživatelům, zejména na mobilních zařízeních.
- Pomáhá omezit počet potřebných polí.
- To může pomoci odstranit některé chyby uživatele, jako je například mistyping.
Zvažte stejnou věc s e-mailovými adresami, tak, aby uživatelé dostávali oblíbené e-mailové domény za symbolem @. Když uživatel zadá v [chráněné e-mailem] .... pole automaticky naznačuje [chráněné emailem] .
7. Udržujte je krátká a sladká
Budete v pokušení požádat uživatele o spoustu informací ve formě. Odolajte nutkání!
Požádejte pouze důležité informace ve formě. Existuje silnější pravděpodobnost, že uživatelé vyplní formuláře, které vyžadují menší závazek. Pokud budete potřebovat další informace později, můžete je poslat e-mailem ze seznamu a požádat o další podrobnosti. (Jako někdo, kdo se již rozhodl, je pravděpodobnější, že se uživatel s vámi bude více angažovat v tomto okamžiku.)
Vyhněte se volitelným polím. Nepožadujte nadbytečné informace. Nepoužívejte více polí, kde byste mohli použít jednu (například telefonní čísla).
Závěr
Informujte uživatele o výměně formuláře. Udělej to zábavné nebo zajímavé. Děkuji uživateli.
Vytvoření formuláře, které je snadno čitelné a snadno použitelné, zvýší vaše šance na shromažďování dat a změnu návštěvníka webu na opakovaného uživatele.