Pole formuláře nepůsobí jako malá věc, když ho vyplňujete. Je to okamžik, kdy se rozhodnete, jestli budete pokračovat, nebo odejdete. A ten okamžik závisí zcela na tom, jestli je pole samo jasné, pokyny se dají snadno sledovat a chybové hlášky dávají smysl, když se něco pokazí.
Studie ukazují, že 67% lidí formuláře opouští, protože se v nich špatně orientují. Většinou to není tím, že se ptáte na příliš mnoho informací. Jde o to, jak jsou informace prezentované na úrovni pole. Jediný nejasný popisek, matoucí zástupný text nebo nejasná chyba ověření může někoho zastavit, i když formulář opravdu chce vyplnit.
Tento článek ukazuje praktická pravidla bez teorie, která z polí formuláře udělají z míst tření nástroje konverze. Dozvíte se, jak mají popisky fungovat, proč zástupný text selhává, když se na něj designéři spoléhají, a jak hlášky ověřování rozhodují o tom, jestli uživatelé formuláři důvěřují, nebo ho opustí. Zvládněte tyto detaily a pochopíte, proč některé značky dosahují 80% dokončených formulářů, zatímco jiné se snaží dostat na 50%.
Čím se pole formuláře jeví snadné, nebo ohromující
Pole formuláře je víc než vstupní políčko. Je to rozhovor mezi vaší značkou a návštěvníkem. Samo pole klade otázku, popisek vysvětluje, co chcete, a zástupný text nabízí nápovědu. Hláška ověření reaguje, když něco není úplně v pořádku. Všechny části spolupracují na vytvoření pocitu.
Tím pocitem může být "vím přesně, co mám dělat, a věřím tomu" nebo "nevím, co sem patří, a formulář vypadá rozbitě". Ten rozdíl není náhoda. Je to struktura.
Když jsou pole snadná, působí bez námahy. Popisek řekne, jaká informace do pole patří, ještě než do něj kliknete. Samotné pole má dost místa na psaní. Pokud uděláte chybu, chybová hláška přesně řekne, co se pokazilo a jak to opravit. Formulářem procházíte s jistotou.
Když jsou pole těžká, vytvářejí tření. Popisek může chybět nebo být nejasný. Začnete psát, zástupný text zmizí a zapomenete, co jste měli zadat. Objeví se chyba, která neříká, v čem je problém, a musíte hádat. Každé pole se stane malou hádankou. Po třech nebo čtyřech takových hádankách lidé odcházejí.
Popisky formulářů: jasné a vždy viditelné
Popisek není dekorace. Je to pokyn, který někomu říká, jaká informace do pole patří. Nejlepší popisky jsou jasné, popisné a vždy viditelné. Ne skryté. Ne mizející. Vždy tam.
Tohle ukazuje výzkum. Když popisek sedí přímo nad polem a zůstává viditelný, zatímco uživatel píše, podíl dokončení roste. Když jsou popisky nahrazeny zástupným textem, který zmizí, jakmile někdo začne psát, podíl dokončení klesá. Důvod je jednoduchý. Lidé si potřebují pamatovat, co zadali, zkontrolovat překlepy a ověřit svou práci před odesláním. Pokud popisek zmizí, nemohou nic z toho udělat.
Popisek by měl pole popsat tak, aby odpověděl na jednu otázku. Jaká informace sem patří? "E-mailová adresa" odvede víc práce než "E-mail". "Telefonní číslo" je jasnější než "Telefon". "Název firmy" je lepší než "Firma". Tyto malé rozdíly v konkrétnosti rozhodují mezi okamžitou jasností a okamžikem váhání.
Vyhněte se popiskům, které informace skrývají. Nepoužívejte nejasné popisky jako "Jiné", "Další informace" nebo "Podrobnosti". Nutí uživatele kliknout nebo najet myší, aby pochopil, k čemu pole slouží. Konkrétní popisek jako "Jak jste se o nás dozvěděli?" nebo "Jaká je vaše největší výzva?" odvede práci předem a lidé jdou dál.
Povinná a nepovinná pole potřebují vizuální rozlišení, ne slovní vysvětlení. Většina formulářů píše "Povinná pole jsou označena hvězdičkou" a pak očekává, že si lidé pravidlo zapamatují. Místo toho povinná pole viditelně označte (hvězdička nebo tečka) a nepovinná pole zjevně označte malým popiskem "(nepovinné)". Lidé na první pohled poznají, co je povinné a co ne.
Dlouhé nebo složité formuláře profitují z krátkého pomocného textu pod popiskem. Nejsou to pokyny na celý život. Je to jedna věta, která vysvětlí, co je potřeba. Pokud se ptáte na telefonní číslo a potřebujete konkrétní formát, přidejte pod popisek jeden řádek: "Uveďte předvolbu. Nebudeme vám volat, aniž bychom se předtím zeptali." Ten jeden řádek předchází chybám ve formátu a buduje důvěru. Držte ho ale krátký. Odstavce pomocného textu pod každým polem způsobí, že formulář působí ohromujícím dojmem.
Podrobněji o tom, jak rozhodnutí o rozvržení ovlivňují vnímání formulářů, najdete v našem průvodci zásady návrhu formulářů: rozvržení, mezery a vizuální hierarchie.
Proč zástupný text selhává a co použít místo něj
Zástupný text je text uvnitř pole formuláře, který zmizí, jakmile na něj někdo klikne. Vypadá užitečně. Působí jako nápověda. V praxi je to nejčastější chyba v návrhu formulářů.
Tohle se stane, když se někdo spoléhá na zástupný text místo popisků. Návštěvník přijde na formulář. Zástupný text říká "john@example.com", aby ukázal očekávaný formát. Klikne do pole e-mailu a začne psát. Zástupný text zmizí. Teď už nevidí, jaký formát se čekal, a ptá se, jestli to dělá správně. Dopíše. Přejde na další pole. Teď si nepamatuje, jestli e-mail napsal správně, ale nemůže se vrátit zkontrolovat, protože pole už zástupný text neukazuje. Tak záznam smaže a napíše znovu. Tohle se opakuje u každého pole, kde je pokyn jen v zástupném textu. Podíl dokončení se propadá.
Výzkum je jednoznačný. Zástupný text škodí dokončení formulářů, poškozuje přístupnost (čtečky obrazovky s ním mají potíže) a vytváří tření pro lidi s kognitivním postižením i pro každého, kdo formulář vyplňuje rychle a rozptýlen. Odstranění zástupného textu jako hlavního pokynu a přidání viditelných popisků zvyšuje podíl dokončení měřitelně.
Tohle funguje: popisky používejte pro pokyny a zástupný text jen pro příklady. Pole s popiskem "E-mailová adresa" a zástupným textem "vase.jmeno@firma.cz" funguje skvěle. Popisek říká uživateli, co do pole patří. Zástupný text ukazuje formát, aniž by skrýval pokyn. Když uživatel klikne a zástupný text zmizí, už ví, k čemu pole slouží, protože mu to říká viditelný popisek.
Ne každé pole potřebuje zástupný text. Jednoduchá pole jako "Jméno" nebo "Název firmy" potřebují jen popisek. Zástupný text se hodí u polí, kde záleží na formátu (telefonní čísla, data, adresy URL), nebo kde uživatel nemusí vědět, jaký příklad dat zadat (uživatelské jméno na sociální síti, kód doporučení).
Pokud vás láká použít zástupný text místo popisku kvůli úspoře místa, postavte formulář s popisky stejně a nechte je skládat pod sebe. Formulář s viditelnými popisky a bez zástupného textu vždy předčí formulář s plovoucími popisky a skrytým zástupným textem. Uživatelé formuláře dokončí rychleji, dělají méně chyb a formuláři víc důvěřují.
Hlášky ověřování: z chyb udělejte vedení
Ověřování nastane, když někdo vyplní pole nesprávně. Objeví se chybová hláška. V tu chvíli uživatel něco cítí. Buď cítí, že je formulář rozbitý a matoucí, nebo cítí, že mu formulář pomáhá, aby to udělal správně.
Špatné hlášky ověřování jsou nejasné. Říkají "Neplatný vstup" nebo "Chyba" a nic víc. Uživatel neví, co se pokazilo. Byl špatný formát? Byl záznam příliš krátký? Použil nepovolený znak? Musí hádat a zkusit to znovu.
Dobré hlášky ověřování jsou konkrétní a použitelné. Místo "Neplatné" napište "Heslo musí mít alespoň 8 znaků a obsahovat jedno velké písmeno a jedno číslo." Uživateli to přesně říká, co se pokazilo a co udělat pro opravu. Formulář už nepůsobí rozbitě. Působí, že pomáhá.
Záleží i na načasování. Ověřování může probíhat dvěma způsoby. Ověřování v reálném čase kontroluje pole, jakmile uživatel dopíše, a hned ukáže chybu. Působí svižně a pomáhá zachytit chyby před odesláním. Ověřování celého formuláře proběhne po kliknutí na odeslat a všechny chyby se zobrazí najednou. Působí méně svižně, ale u jednoduchých formulářů funguje dobře. Kombinujte obojí, kdykoli to jde. Ověřování v reálném čase u klíčových polí (e-mail, heslo, telefonní číslo) a ověřování celého formuláře při odeslání u všeho ostatního.
Umístění chybových hlášek ovlivňuje, jestli je lidé dokážou opravit. Text chyby by se měl objevit přímo pod polem, které problém způsobilo, ne nahoře ve formuláři v souhrnném seznamu. Když je chyba pod polem, uživatel si může přečíst chybu a pole zároveň. Vidí, co napsal, chápe, co se pokazilo, a opraví to hned. Když je chyba nahoře ve formuláři v seznamu, musí se vrátit nahoru, najít pole a pamatovat si, jaká chyba to byla.
Samotná barva k signalizaci chyby nestačí. Nespoléhejte jen na červené ohraničení nebo červený text. Někteří uživatelé barvy nerozlišují. Přidejte ikonu (křížek, výstražný symbol) a doprovodný text, aby byla chyba jasná všem. Čtečky obrazovky také potřebují text, aby chybu oznámily, ne jen změnu barvy.
Tón chybových hlášek ovlivňuje, jak se lidé k vašemu formuláři cítí. Příkrá hláška jako "Zadali jste neplatný e-mail" v lidech vyvolává pocit, že udělali něco špatně. Nápomocná hláška jako "Tento formát e-mailu jsme nerozpoznali. Zkontrolujte překlepy a zkuste to znovu" v nich vyvolá pocit, že jim někdo pomáhá. Druhá hláška dělá stejnou práci, ale zážitek je spíš spolupráce než posuzování.
Návod, jak postavit formuláře přístupné všem uživatelům, najdete v našem článku návrh přístupných formulářů.
Jak mezery mezi poli ovlivňují, jestli formulář působí přístupně
Formulář je vizuální prostředí. Místo kolem každého pole, vzdálenost mezi popisky a poli a mezery mezi skupinami polí, to všechno vysílá signály o tom, jestli je formulář zvládnutelný, nebo ohromující.
Těsné mezery způsobí, že deset polí vypadá jako třicet. Každé pole soupeří o vizuální pozornost. Uživatel neví, která pole patří k sobě. Popisky sedí blízko polí pod nimi a další popisek je jen o pár pixelů níž. Celý formulář působí stísněně a ohromujícím dojmem. K opuštění dojde dřív, než se vyplní první pole.
Štědré mezery mezi souvisejícími poli a větší mezery mezi skupinami polí způsobí, že týchž deset polí působí jako krátký, uspořádaný proces. Nejdřív vyplníte fakturační údaje. Pak jasná mezera. Pak dodací údaje. Pak další mezera. Platební údaje. Formulář působí strukturovaně, ne chaoticky. To není zbytečné prázdné místo. To je informační architektura, která vede uživatele procesem.
Mobilní formuláře potřebují zvláštní pozornost při řešení mezer. Na obrazovce telefonu je stísněný formulář nepoužitelný. Každé pole potřebuje dost svislého místa, aby se do něj dalo prstem ťuknout, aniž by se zasáhlo sousední pole. Mobilní formulář se štědrými svislými mezerami a jasně oddělenými sekcemi konvertuje výrazně lépe než formulář navržený pro počítač a smrštěný na mobil. To místo není zbytečné. Je funkční.
Umístění popisků ovlivňuje i vnímání mezer. Popisky by měly sedět přímo nad poli, ne vedle nich. Když jsou popisky vlevo, vzdálenost mezi popiskem a polem se zvětší a vzniká zmatek, které pole patří ke kterému popisku. Platí to zejména na mobilu, kde popisky vlevo nutí text zalamovat se nebo se zmenšit na nečitelnou velikost. Popisky nahoře zůstávají spojené se svým polem a působí čistěji.
Ukazatele povinných a nepovinných polí, které opravdu fungují
Každé pole je buď povinné (musí se vyplnit), nebo nepovinné (lze ho přeskočit). Uživatel potřebuje vědět, které je které, na první pohled, bez čtení pomocného textu nebo pokynů.
Tradiční přístup označí povinná pole hvězdičkou a napíše "Povinná pole jsou označena hvězdičkou". Funguje to jen tehdy, když si uživatelé pravidlo pamatují. Mnozí ne. Formulář prolétnou a vidí hvězdičky, aniž by chápali, co znamenají.
Lepší přístup označí povinná pole viditelně (hvězdička nebo barevná tečka) a nepovinná pole výslovně označí "(nepovinné)" vedle popisku. Teď rychlý pohled uživateli řekne, jestli je každé pole nutné. Povinná pole vypadají normálně se značkou. Nepovinná pole mají jasný popisek. Odpadá potřeba pamatovat si pravidlo.
Některé formuláře používají barvu k odlišení povinných a nepovinných polí. Může to fungovat, ale vyžaduje to vysoký kontrast a mělo by se to kombinovat s textovými popisky, ne používat samostatně. Červená hvězdička vedle popisku funguje lépe než červené pozadí pole, protože pozadí pole může zhoršit viditelnost vstupu.
Podmíněná pole a zobrazení jen toho, co je potřeba
Některá pole by se měla objevit až poté, co uživatel provede volbu v předchozím poli. Zaškrtávací políčko "Bydlím v USA" může ukázat rozbalovací nabídku státu. Výběr "Firma" v poli typu účtu může ukázat pole pro název firmy. Tato podmíněná pole snižují kognitivní zátěž tím, že ukazují jen pole, která uživatel skutečně potřebuje vyplnit.
Když se podmíněná pole objeví, měla by se objevit plynule a zřetelně. Náhlé objevení bez animace může vyděsit. Efekt postupného zjevení nebo rozbalení dolů změnu zřetelně ukáže. Nově objevené pole by mělo mít vlastní popisek a ověřování stejně jako běžné pole. Nepředpokládejte, že uživatel pochopí, co má dělat, jen proto, že se pole objevilo.
Podmíněná pole fungují nejlépe, když se objeví pod spouštěcím polem, ne nad ním nebo vedle něj. Uživatel provede volbu a hned pod ní se objeví nová pole související s touto volbou. Tím zůstává kognitivní cesta lineární a zmatek se snižuje.
Jak WEMASY pomáhá s návrhem polí formulářů
Tvůrce formulářů od WEMASY obsahuje přizpůsobitelné možnosti polí, pravidla ověřování a chybové hlášky v reálném čase. Můžete nastavit povinná a nepovinná pole, určit konkrétní pravidla ověřování pro různé typy polí a přesně řídit, jaké chybové hlášky se objeví a kdy. Znamená to, že můžete postavit formuláře, které dodržují všechny osvědčené postupy z tohoto článku, bez programování.
Pomocí nástrojů WEMASY pro návrh formulářů můžete také řídit rozvržení polí, mezery a umístění popisků. Postavte formuláře, které působí jasně, profesionálně a snadno se dokončují.
Které funkce obsahuje každý tarif WEMASY, uvidíte v ceníku.