Vezměte formulář jakékoli značky a pravděpodobně v něm najdete designové chyby, které ji stojí zájemce. Většina se soustředí na to, na co se ptá, ne na to, jak to prezentuje. Značky, které konvertují, ale znají tajemství: způsob, jakým uspořádáte pole, mezery mezi nimi a vizuální váha každého prvku rozhodují o tom, jestli je vyplnění snadné, nebo bolestivé.
Ten rozdíl je obrovský. Propast mezi 50% a 85% mírou dokončení se často scvrkne na pouhé tři věci.
Principy návrhu formulářů jsou praktická pravidla, která tento neviditelný zážitek řídí. Rozvržení, mezery a vizuální hierarchie spolupracují, aby vaše návštěvníky formulářem provedly přirozeně, bez tření a zmatku. Zvládněte tyto tři věci a každý formulář, který vytvoříte, bude působit intuitivně.
V tomto průvodci se dozvíte, jak přesně každý princip použít. Žádná teorie. Žádné vatové řeči. Jen použitelný postup, který mění matoucí formuláře na konverze.
Co jsou principy návrhu formulářů?
Principy návrhu formulářů jsou pravidla uspořádání a vizuální prezentace, díky nimž formuláře fungují. Nejde o dekoraci ani estetické preference. Jde o chování uživatelů. Jak lidské oko formulář prochází? Jak mozek seskupuje související informace? Jaké signály říkají, že je pole důležité, nepovinné nebo propojené s jiným polem? Na tyto otázky odpovídá návrh formulářů.
Nejlepší principy návrhu formulářů platí pro všechny typy formulářů. Ať navrhujete kontaktní formulář, formulář v pokladně nebo registraci na událost, platí stejná pravidla rozvržení, mezer a hierarchie. Tyto principy vycházejí z toho, jak lidé skutečně zpracovávají vizuální informace a rozhodují se při kognitivní zátěži.
Když se principy návrhu formulářů ignorují, míra dokončení se propadá. Studie ukazují, že špatně rozmístěné formuláře mají o 20 až 40% vyšší míru opuštění než dobře rozmístěné. Nejasná vizuální hierarchie způsobuje, že uživatelé přeskočí důležitá pole nebo vyplní nepovinná pole, která vyplňovat nechtěli. Špatné rozvržení způsobí, že pětipolový formulář působí jako dvacetipolový.
Proč na principech návrhu formulářů pro vaše podnikání záleží
Každý formulář na vašem webu je konverzní bod. Tam se z potenciálních zákazníků stávají zájemci, tam zákazníci dokončují nákupy a tam se sbírají data. Pokud se vaše formuláře špatně používají, přímo přicházíte o tržby.
Představte si, co se stane, když někdo přijde na váš formulář. Už se rozhodl, že s vámi chce obchodovat. Chce formulář dokončit. Jediné, co mu v tom brání, je tření v návrhu. Nepozná, jestli je pole povinné, nebo nepovinné. Nechápe, proč se na informaci ptáte. Nevidí snadno, kam kliknout dál. Tak odejde.
Principy návrhu formulářů přímo ovlivňují vaše obchodní metriky. Značky, které na formuláře uplatňují silné designové principy, mají vyšší míru dokončení, nižší míru opuštění a lepší kvalitu dat. Technologická firma, která zlepšila mezery a vizuální hierarchii formuláře, viděla míru dokončení vyskočit z 62% na 84%. E-shop, který změnil rozvržení formuláře v pokladně, snížil opuštění košíku o 23%.
To není teorie. Takhle se uživatelé rozhodují, jestli váš formulář stojí za jejich čas.
Tři základní principy návrhu formulářů: rozvržení, mezery a vizuální hierarchie
Návrh formulářů stojí na třech pilířích. Každý slouží konkrétnímu účelu. Společně vytvářejí formulář, který působí jednoduše a vede uživatele od začátku do konce.
Princip 1: Rozvržení formuláře
Rozvržení je způsob, jak uspořádáte informace na stránce. Je to fyzické umístění polí, popisků, tlačítek a sekcí. Silné rozvržení okamžitě ukáže, jak formulář vyplnit a v jakém pořadí.
Nejúčinnější rozvržení formuláře má jeden sloupec. Není to designový trend, vychází to z toho, jak lidé čtou. Oko se po stránce pohybuje shora dolů. Když pole formuláře dáte do jednoho sloupce, uživatelé jimi procházejí přirozeně, aniž by se museli dívat doleva a doprava nebo se vracet a kontrolovat, jestli něco nevynechali.
Vícesloupcové formuláře nutí oko pracovat víc. Uživatel se musí rozhodnout, jestli vyplní nejdřív levý sloupec, nebo pravý. Musí si pamatovat, kde byl. I dvousloupcový formulář zvyšuje kognitivní zátěž a míru opuštění. Jednosloupcové formuláře konvertují výrazně lépe, někdy o 20% i víc.
V rámci toho jednoho sloupce by se související pole měla vizuálně seskupit. Formulář s doručovací adresou by měl mít všechna adresní pole pohromadě (ulice, město, stát, PSČ). Fakturační sekce by měla být vizuálně oddělená od doručovací. Tyto skupiny uživatelům říkají, že pole patří k sobě a dají se vyplnit jako celek. Neseskupená pole působí náhodně a neuspořádaně, i když informace dává smysl.
Rozvržení určují i popisky. Každý popisek by měl být přímo nad svým polem, ne vlevo. Když je popisek vlevo od pole, vzdálenost mezi ním a polem se zvětšuje a není jasné, které pole patří ke kterému popisku. Popisky nad poli zachovávají vztah popisku a pole jasný. Zvlášť důležité je to na mobilu, kde popisky a pole vedle sebe nejsou možné.
Záleží i na umístění tlačítka. Hlavní tlačítko s výzvou k akci by mělo být dole ve formuláři, přímo pod posledním polem. Mělo by být jasné, výrazné a první, na co oko dopadne, když uživatel vyplnění dokončí. Vedlejší tlačítka (například "Uložit jako koncept" nebo "Zrušit") by měla být menší nebo pod hlavním tlačítkem, aby nerozptylovala od hlavní akce.
Princip 2: Mezery ve formulářích
Mezery jsou prázdné místo. Je to vzdálenost mezi poli, mezi sekcemi a mezi popiskem a jeho polem. Mezery nepůsobí jako "princip". Působí neviditelně. Přitom odvádějí nejdůležitější práci ve vašem návrhu formuláře.
Správné mezery dělají dvě věci. Vytvářejí jasno v tom, co k sobě patří, a poskytují prostor k nadechnutí, díky němuž formulář působí méně ohromujícím dojmem.
Pravidlo je jednoduché. Související pole by měla mít mezi sebou malé mezery. Pole "Jméno" a "Příjmení" by mělo mít mezi sebou 8 až 12 pixelů svislého prostoru. To je dost blízko, aby působila jako dvojice. Když dokončíte jednu skupinu (například sekci se jménem), před další skupinou mezeru zvětšete na 24 až 32 pixelů. Tato vizuální mezera uživateli říká, že začíná nová sekce.
Berte mezery jako interpunkci. Malá mezera říká "tohle patří k sobě". Velká mezera říká "tohle je nová myšlenka". Uživatelé tyto signály čtou okamžitě.
Co se stane, když jsou mezery všude příliš malé. Formulář s deseti poli nacpanými k sobě bez prostoru k nadechnutí působí jako zeď vstupních polí. Uživatel se cítí zahlcený, ještě než začne. Jeho mozek neví, která pole souvisejí s kterými. K opuštění dojde dřív, než se vyplní první pole.
Co se stane se správnými mezerami. Stejný desetipolový formulář působí zvládnutelně. Uživatel vidí, že některá pole se seskupují (fakturační adresa), pak je mezera a pak další skupina (doručovací adresa). Formulář se zdá kratší, protože je rozdělený do stravitelných kousků.
Studie z roku 2024 o UX formulářů zjistila, že formuláře se správnými mezerami a seskupením mají o 32% vyšší míru dokončení než stejné formuláře s natěsnaným rozvržením. Jediná proměnná, která se změnila, byly mezery.
Mobilní formuláře potřebují víc místa, ne méně. Obrazovky mobilů jsou malé a prsty velké. Natlačit pole k sobě na mobilu zabíjí konverze. Každé pole potřebuje kolem sebe dost prostoru, aby na něj uživatel mohl klepnout, aniž by trefil sousední pole. Nemyslí se tím odsazení uvnitř pole (i když i to záleží). Myslí se tím prostor mezi poli. Mobilní formulář s velkorysými svislými mezerami a jedním sloupcem pod sebou konvertuje výrazně lépe než ten, který je postavený pro počítač a jen zmenšený na mobil.
Princip 3: Vizuální hierarchie ve formulářích
Vizuální hierarchie je pořadí, v jakém oko a mozek zpracovávají to, co vidí. Ve formuláři je to rozdíl mezi "povinným" polem, které uživatele zaujme, a polem, které splyne s pozadím. Je to rozdíl mezi hlavním odesílacím tlačítkem, které vypadá klikatelně, a vedlejším tlačítkem zrušit, které vypadá jako text.
Vizuální hierarchie ve formulářích vzniká pomocí čtyř hlavních nástrojů. Velikost, barva, kontrast a umístění hrají každé svou roli při vedení pozornosti uživatele.
Velikost signalizuje důležitost. Výrazný popisek pole písmem 16px je důležitější než nápověda písmem 12px. Velké odesílací tlačítko působí významněji než malé tlačítko "Obnovit". Označení povinného pole by mělo být o něco výraznější než popisky nepovinných. Neudělejte tu změnu nápadnou. Jen o trochu viditelnější. Tento jemný rozdíl ve velikosti vede oko, aniž by křičel.
Barva vytváří hierarchii prostřednictvím kontrastu. Tmavý popisek na bílém pozadí má vysoký kontrast a vyniká. Světle šedá nápověda má nižší kontrast a ustupuje. Jasně modré odesílací tlačítko ve formuláři se šedými poli má okamžitý kontrast a přitahuje oko. Vedlejší tlačítko ve stejné šedé jako pozadí formuláře ustupuje. Oko tak dopadne nejdřív na hlavní akci, přesně tam, kam chcete.
Omezení je důležité. V jednom formuláři nepoužívejte víc než tři vizuální váhy. Váhou může být barva, velikost, odstín nebo styl (tučné a obyčejné). Když je všechno jasné, nic jasné není. Pokud máte pět různých barev textu, uživatel neví, čemu věnovat pozornost. Tři úrovně vizuální důležitosti stačí k vedení pozornosti bez zmatku. Tohle je pravidlo hierarchie, které většina formulářů porušuje, a projevuje se větami "nevěděl jsem, že to je nepovinné" nebo "myslel jsem, že to tlačítko je neaktivní".
Hierarchii vytváří i umístění. První pole, které uživatel vidí, je nejvýraznější. Hlavní tlačítko s výzvou k akci dole je poslední, co vidí, a je to akce, která se nejspíš dokončí. Označení povinných polí, nápověda i chybové zprávy potřebují umístění, které je zviditelní, aniž by rušilo.
Zda vaše vizuální hierarchie funguje, odhalí "test přimhouření". Zamlžte si pohled (nebo doslova přimhuřte oči) na svůj formulář. Co vidíte první? Pokud vidíte nejdůležitější pole a hlavní tlačítko akce, vaše hierarchie funguje. Pokud oči směřují na náhodná místa nebo jsou zmatené, co dělat, hierarchie potřebuje práci.
Jak použít principy návrhu formulářů u každého typu formuláře
Tyto tři principy platí pro každý formulář na vašem webu. Kontaktní formulář používá stejná pravidla rozvržení, mezer a hierarchie jako formulář v pokladně, registrační formulář nebo přihlášku na událost. Rozdíl není v principech samotných. Rozdíl je v tom, která pole jsou pro daný typ formuláře nejdůležitější.
Chcete-li tyto principy ve formulářích použít, začněte rozvržením. Zvolte jeden sloupec shora dolů. Seskupte související pole a mezi skupinami přidejte větší mezery.
Pak použijte mezery. Uvnitř skupiny používejte mezi poli stejné mezery (8 až 12px). Mezi skupinami větší mezery (24 až 32px). Vyzkoušejte to na mobilu a ujistěte se, že na každé pole se dá snadno klepnout.
Nakonec vytvořte vizuální hierarchii. Určete, čeho si má uživatel všimnout první. Je to nadpis formuláře? Označení povinného pole? Hlavní tlačítko akce? Ujistěte se, že ten prvek je vizuálně výrazný. Všechno ostatní nechte v podpůrných rolích.
Výsledkem je formulář, který působí intuitivně. Uživatelé nemusí přemýšlet. Prostě ho vyplní a odešlou.
Jak vám WEMASY pomáhá vytvářet lepší formuláře
WEMASY obsahuje tvůrce formulářů, který tyto designové principy má zabudované od začátku. Výchozí je rozvržení do jednoho sloupce. Mezery jsou předem nastavené podle pravidla 8px/24px. Vizuální hierarchie vzniká pomocí hotových stylů polí formuláře, které udržují popisky, označení povinných polí a vstupní pole ve správném vztahu.
Barvy, písma a text tlačítek můžete upravit podle své značky. Základní struktura zůstává pevná. Dostanete tak formulář, který vypadá jako váš a dobře funguje.
Prohlédněte si tvůrce formulářů v akci a podívejte se na ceník WEMASY, abyste zjistili, který tarif zahrnuje tvorbu a úpravy formulářů.