10 Pravidla pro výrobu uživatelsky příjemných webových formulářů

Jan 26, 2026
jak
Illustration of web forms on an iMac and tablet

Navzdory vývoji interakce s lidmi-počítačové počítače stále zůstávají jedním z nejdůležitějších typů interakce pro uživatele. Lidé, kteří používají vaši žádost nebo webovou stránku mají určitý cíl, a často jedna věc, která stojí mezi uživatelem a jejich cílem je forma. Každý den je používáme pro naše základní aktivity - dokončit nákupy, zaregistrovat se pro sociální sítě, poskytovat zpětnou vazbu o produktu, který jsme si koupili, a více - jsou to obrovská část uživatelská zkušenost .

V důsledku toho je velmi důležité, abychom byli schopni dokončit online formy rychle a bez zmatku. Čím méně úsilí musíme strávit, šťastnější jsme. Jako designéři a vývojáři bychom se měli snažit vyrábět rychleji, jednodušší a produktivnější formy pro naše uživatele.

Ve druhé z mých dvou článků zkoumání, jak budovat lepší formy ( Najděte ten první ), Zde jsou moje 10 tipů na návrh formulářů, které jsou uživatelsky přívětivé. Ne, co hledáte? Možná budete potřebovat naše průvodce na vrchol Webové stránky Builder. nebo cloudové úložiště servis.

01. Zeptejte se, co je potřeba

Řezání množství požadovaných informací usnadňuje vyplnění formuláře. Měli byste vždy zpochybnit, proč a jak se použijí požadované informace. Pokuste se minimalizovat počet polí co nejvíce, protože každé pole, které přidáte do formuláře, ovlivní jeho míru konverze. Omezení počtu otázek a polí, aby váš formulář méně načten, zejména pokud požadujete mnoho informací od uživatelů.

02. Objednejte pole logicky

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically

Přemýšlejte o své podoby jako konverzace; chcete skupinu a objednat pole v pořadí, které dává smysl pro uživatele

Je užitečné myslet na formu jako podobný konverzaci. Stejně jako každá normální konverzace by měla být reprezentována logickou komunikací mezi dvěma stranami: osoba a vaše aplikace. Podrobnosti by měly být požádány v řádu, který je logický z pohledu uživatele, nikoli z aplikace nebo databáze. Například je neobvyklé požádat o něčí adresu před jejich jménem.

Je také velmi důležité pro seskupení souvisejících otázek v blocích, takže tok z jedné sady otázek k dalšímu se bude lépe podobat konverzaci. Seskupení související pole také pomáhá uživatelům pocit informací, které musí vyplnit.

Na snímku výše jsou příklady dvou registračních formulářů. Dlouhé formy se mohou cítit ohromující, pokud nebudete seskupit související pole - porovnat formulář vlevo na vylepšenou verzi vpravo.

Seskupení musí být prováděno vizuálně i v kódu. Můžete například použít & lt; fieldset & gt; a & lt; legenda & gt; Prvky k přidružení souvisejících ovládacích prvků formuláře: 

 & lt; fieldset & gt;
  & lt, legenda & gt; osobní údaje: & lt; / legenda & gt;
  & lt, div a gt;
    & lt, štítek pro = "first_name" & gt; křestní jméno

03. Udržujte štítky krátké

Polní štítky říkají uživatelům, co odpovídající vstupní pole znamenají. Jasný text štítku je jedním z primárních způsobů, jak učinit UIS více přístupnější. Štítky říkají uživateli účel pole, ale nejsou nápovědy texty. Proto zajišťuje, že kontrolují snadno je prioritou - měli byste navrhnout stručné, krátké a popisné štítky (udržet je na slovo nebo dva).

04. Duplikujte pole

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password

Nedělejte své uživatelé zadat informace dvakrát - budete je frustrovat jen ztrácet časem

Tento problém je obzvláště obzvláště obyčejný pro registrační formuláře: Téměř každý narazil na formulář, který vyžaduje dvakrát zadat e-mailovou adresu nebo heslo. Historicky to bylo navrženo tak, aby se zabránilo chybám chyb. Většina uživatelů však jednoduše kopíruje - vložil nezbytné pole, kdykoliv je aplikace umožnila. A pokud data původního pole obsahovala chybu, byla duplikována.

05. Zvýrazněte volitelná pole

V ideálním případě je nejlepší nemat žádné volitelné pole. V souladu s pravidlem číslo 1, pokud informace není nutný, není žádný bod v plýtvání časem uživatele. Ale pokud je používáte, měli byste jasně odlišit, které vstupní pole nelze ponechat prázdné. Obvykle je dost malá značka jako hvězdička (*) nebo "volitelné" štítek.

06. Buďte opatrní s výchozím nastaveními

Vyhněte se obsahu statického selhání, pokud nebudete věřit velkou část svých uživatelů (např. 90%), vyberete tuto hodnotu - zejména pokud je to požadované pole. Proč? S tímto přístupem pravděpodobně zavede chyby, protože lidé skenují formy rychle online. Nepředpokládejme, že budou mít čas na analýzu všech možností. Mohou bliky přeskočit něčím, co již má hodnotu.

Jedinou výjimkou tohoto bodu je inteligentní výchozí hodnoty - podobně jako ty, které přednáší zemi uživatele na základě jejich geolokačních dat, které mohou být dokončeny rychleji a přesnější. Ale měli byste je stále používat s opatrností, protože uživatelé mají tendenci opustit předložené pole, jak jsou.

07. Minimalizujte potřebu psaní

Typing je pomalý a chybový proces, a je to obzvláště bolestivé na mobilu, kde uživatelé čelí omezením omezeného panství. A s více a více lidmi pomocí malých obrazovek, cokoliv, co lze udělat, aby se zabránilo zbytečnému psaní, zlepší uživatelské zkušenosti. Tam, kde je to vhodné, můžete použít funkce, jako je autokomplete a předvěcení pro data, takže uživatelé musí zadat pouze v holé minimální množství informací.

Vyplnění informací o adrese je často nejvíce těžkopádná část jakéhokoliv online registračního formuláře, díky více polí, dlouhá jména a tak dále. Uložte uživatele od nutnosti zadávat celou svou adresu implementací předplynu pro tyto pole. Knihovny jako Mapy Google Nabídka jednoduchého JavaScript API dosáhnout toho. Můžeš Najít pracovní řešení zde .

08. Použijte validaci v reálném čase

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it

Upozornit uživatele okamžitě, pokud se chyby - nedělejte je čekat, až dokončili celou formu

V ideálním světě se uživatelé vyplní formuláře s potřebnými informacemi a dokončit svou práci úspěšně, ale v reálném světě často lidé dělají chyby. Je to frustrující projít procesem vyplňování celé formy, abyste zjistili, že v bodě podání, že jste provedli chybu.

Správný čas informovat někoho o úspěchu nebo neúspěchu údajů, které poskytly, je hned po předložení informací. To je místo, kde v reálném čase validace přichází do hry. Upozorňuje uživatele k chybám okamžitě a umožňuje je opravit rychleji, aniž by museli čekat, dokud nestisknou tlačítko 'Odeslat'.

A pamatujte, ověření by nemělo říct uživatelům, co udělali špatně; Mělo by jim také říct, co dělají správně. To dává uživatelům větší důvěru pohybovat formou.

Petržel je vynikající knihovna ověření formuláře JavaScriptu. Je otevřen zdroj a UX zaměřené, takže můžete přepsat téměř každé výchozí chování, aby odpovídalo přesným potřebám. V následujícím kódu je jednoduchý příklad ověření petrželky pro pole "Zpráva". Pole by mělo být nejméně 20 znaků, ale ne více než 100.

Můžeš Zde naleznete kompletní vzorek kódu .

09. Vyhněte se pevným vstupním formátům

Nejčastějším důvodem pro vynucení pevného formátu je omezení skriptu validace (zadní konec nemůže určit formát, který potřebuje), což je ve většině případů problém implementace. Spíše než nutit formát něčeho jako telefonní číslo během zadávání uživatelů, měli byste být možné transformovat bez ohledu na to, co uživatel zadá do formátu, který chcete zobrazit nebo uložit.

10. Nepoužívejte tlačítka RESET

Illustration shows Reset button next to a Save button below a form, with a red cross through it

Málo dobrého, kdy přišel, včetně tlačítka resetu hned vedle možnosti Odeslat

Tlačítko Reset téměř nikdy nepomáhá uživatelům. Je těžké si představit, že někdo by chtěl tlačítko, které se zruší všechny své práce, natož, aby chtěli, aby toto tlačítko seděly vedle tlačítka, které ji uloží. Web by byl šťastnější místo, pokud byly odstraněny prakticky všechny resetovací tlačítka.

Chcete vědět, jak vaši uživatelé reagují na vaše webové stránky? Slušný web hosting Služba vám poskytne analytika, kterou potřebujete.

Tento článek se původně objevil síť , časopis pro profesionální web designéry a vývojáře. Přihlásit se k odběru netto .

Související články:

  • 29 Web Design nástroje pro urychlení pracovního postupu
  • 41 nejlepších volných webových písem
  • 13 nejlepších kusů testovacího softwaru

jak - Nejoblíbenější články

Jak přidat fonty v aplikaci Photoshop

jak Jan 26, 2026

(Image Credit: Adobe) Fonty ve Photoshopu: Rychlé odkazy - Přidat písma v aplik..

30 Tipy pro vykreslování klíčů

jak Jan 26, 2026

Vykreslování obrazu, animace modelu nebo dokonce celé scény je důležitým krokem v tvorbě umění. Bez této důležité f..

Použijte Chart.js pro vypnutí dat do interaktivních diagramů

jak Jan 26, 2026

Strana 1 z 2: Použití grafu.js: Kroky 01-10 Použití grafu.js: Kroky 0..

Jak vytvořit ovládací prvky vlastního soutěže v Maya

jak Jan 26, 2026

Tento Maya tutorial. Ukáže vám, jak vytvořit vlastní soupravy. Nejlepší soupravy jsou ty, které jsou intui..

Jak vyskakovat přesvědčivé oči v Zbrushu

jak Jan 26, 2026

Když sochařství realistické 3D lidské oko přidat do vaší knihovny hotových aktiv, nezapomeňte, že žádné dva oči ne..

Jak malovat zakřivené sklo na vesmírné helmě

jak Jan 26, 2026

Subliesuits jsou zábavné malovat, ale část helma může být složitá, aby se dostala správně, zejména skleněný prvek, ..

Mock Up AR grafika s After Effects

jak Jan 26, 2026

Po účincích mají některé mocné nástroje, které můžeme použít k napodobenému rozšířené realitě. Můžete najít to nezbytné, pokud jste například chtěli udělat si hři�..

7 Zahradní způsoby, jak ovlivnit chování uživatele

jak Jan 26, 2026

Webové stránky používají psychologické techniky, které ovlivňují chování svých uživatelů. Kreslení na desetiletí akademického výzkumu, který vysvětluje, jak naše mysl fun..

Kategorie