Váš návštěvník prohlédne formulář za dvě sekundy, než napíše jediný znak. Čte velikosti polí, mezery, rozvržení. Pole pro PSČ široké jako celý formulář vyvolává zmatek. Jednořádkové pole pro podrobnou zpětnou vazbu vysílá zprávu, že od lidí nečekáte mnoho.
Šířka vstupního pole říká uživateli, kolik textu od něj čekáte. Malé textové pole signalizuje „napište jméno“. Vysoké textové pole signalizuje „vyprávějte svůj příběh“. Pokud to uděláte špatně, vyrábíte zmatek, zbytečné psaní a opuštění formuláře.
Váš formulář obsahuje dva typy textových polí: jednořádkové pole a víceřádkové textové pole (textarea). Vypadají jinak, chovají se jinak a řeší jiné problémy. Výběr správného není složitý, ale záleží na něm, jak uživatelé váš formulář vnímají a jestli ho vyplní.
Co je jednořádkové textové pole
Jednořádkové textové pole je jednořádkové okno, do kterého uživatelé píší krátký text. Nezalamuje se na nový řádek, když dosáhnete okraje. Nepodporuje více odstavců. Stisknete Enter a formulář se odešle (nebo přejde na další pole). Je určené pro omezená, stručná data.
Jednořádkové textové pole uzavírá s uživatelem tichou dohodu. Žádáte o něco rychlého. Jméno. E-mail. PSČ. Datum. Jednu informaci.
Co je textarea
Textarea je víceřádkové textové okno, které se rozšiřuje, jak uživatelé píšou. Stisknete Enter a dostanete nový řádek textu. Když obsah přesáhne viditelnou oblast, posouvá se svisle. Uživateli dává najevo, že čekáte víc než pár slov. Odstavce jsou vítané. Podrobné myšlenky se očekávají.
Textarea odstraňuje omezení. Uživatel ví, že může napsat tolik, kolik potřebuje, a nemusí svou odpověď vtěsnávat do jednoho řádku.
Kdy použít jednořádkové textové pole
Jednořádkové pole použijte, když očekávaná odpověď vyjde na jeden řádek a uživatel může odpovědět několika slovy nebo méně.
Kontaktní údaje
Jméno, e-mail, telefonní číslo. Tato pole jsou vždy jednořádková. Uživatel čeká, že napíše jméno a půjde dál, ne že kvůli telefonnímu číslu otevře textový editor.
Krátké identifikátory
Uživatelské jméno, číslo účtu, PSČ, heslo. Mají danou délku nebo se očekává, že budou krátké. Jednořádkové pole dává smysl.
Pole pro polohu a logistiku
Město, stát, země, ulice (první řádek). Jsou to obvykle jednořádkové údaje. Adresu můžete rozdělit do několika jednořádkových polí místo jednoho velkého textarea.
Vyhledávání a filtrování
Vyhledávací pole. Filtry produktů. Rozsahy dat. Tady se čeká rychlé zadání, ne odstavec. Jednořádková pole působí správně.
Data a čísla
Jakékoli pole, kam uživatel zadává konkrétní datum, čas, množství nebo cenu. Jednořádkové pole. Někdy chcete pro data specializovaný typ pole (například výběr data), ale princip práce je pořád jednořádkový.
Kdy použít textarea
Textarea použijte, když očekáváte, že uživatel napíše víc než jednu větu, nebo když je odpověď přirozeně delší než jeden řádek.
Komentáře a zpětná vazba
Pokud se ptáte „Jakou máte zpětnou vazbu?“, uživatel přemýšlí v odstavcích, ne v jednotlivých slovech. Textarea dává najevo, že je místo pro celou jeho myšlenku. Nebude se cítit stísněně.
Formuláře se zprávou a dotazem
Když návštěvník vyplňuje kontaktní formulář s polem pro zprávu, potřebuje prostor, aby vysvětlil svou situaci. Množství textu se hodně liší. Textarea pojme krátký dotaz o dvou větách i podrobnou žádost o dvou odstavcích.
Pole pro popis a podrobnosti
Popisy produktů, zadání projektů, požadavky na služby. Jakékoli pole, které žádá uživatele o kontext nebo detail. Textarea ten detail vyzývá.
Poznámky a zvláštní pokyny
Pole s textem „Přidejte zvláštní požadavky“ nebo „Poznámky k doručení“ často potřebuje textarea, protože nemůžete předvídat, jestli uživatel přidá dvě slova, nebo dva odstavce.
Princip velikosti: šířka pole napovídá očekávanou délku
Velikost pole vysílá zprávu, než uživatel napíše jediný znak. Pole pro PSČ roztažené přes celou šířku formuláře vyvolává zmatek. Uživatel vidí tolik místa a myslí si: „Nepochopil jsem, o co se mě ptáte?“
Použijte toto pravidlo: vizuální velikost pole má odpovídat očekávané délce odpovědi.
Krátká textová pole
Pro PSČ udělejte pole úzké. Na počítači třeba 80 až 120 pixelů široké. Tento vizuální signál říká uživateli „napište pět číslic, ne odstavec“.
Pro pole se jménem použijte střední šířku. Třeba 200 až 300 pixelů. Dost dlouhé pro „Alexander Thompson“, ale ne tak široké, aby lákalo k napsání životopisu.
Textarea
Textarea se rozšiřují vodorovně i svisle. Textarea vysoké čtyři řádky signalizuje větší odpověď než textarea vysoké dva řádky. Udělejte textarea odpovídající očekávanému úsilí.
Pokud očekáváte několik vět, začněte se třemi až pěti viditelnými řádky. Pokud žádáte o podrobnou zpětnou vazbu, začněte se šesti až osmi řádky. Uživatelé mohou pole zvětšit, když potřebují víc místa, ale počáteční velikost nastavuje jejich očekávání.
Pravidla návrhu pro jednořádková textová pole
Vždy použijte popisek
Nikdy nepoužívejte zástupný text (placeholder) místo viditelného popisku. Zástupný text zmizí, jakmile uživatel začne psát, což porušuje přístupnost a nechává ho hádat, co pole chtělo. Použijte jasný popisek nad polem nebo vedle něj a zástupný text používejte jen jako jemnou nápovědu.
Špatný příklad: pole bez popisku, jen šedý zástupný text „Zadejte své jméno“.
Dobrý příklad: popisek „Jméno“ nad polem a volitelný zástupný text například „Jan Novák“.
Povinná pole označte jasně
Povinná pole označte hvězdičkou (*) nebo slovem „(povinné)“ v závorce. Nenechte uživatele hádat, jestli je pole volitelné.
Validujte brzy, chyby opravujte vlídně
Pokud uživatel zadá neplatnou e-mailovou adresu nebo špatně naformátované telefonní číslo, nemažte jeho vstup. Zobrazte chybovou hlášku, která problém vysvětlí konkrétně, a ponechte jeho částečný vstup, aby ho mohl opravit a nemusel psát znovu od začátku.
Podpořte očekávaný typ vstupu
Pro e-mail použijte type="email", aby uživatelé na mobilu dostali klávesnici pro e-mail. Pro telefon použijte type="tel". Pro čísla použijte type="number". Tyto specializované typy polí zlepšují zážitek na mobilu a nepřidávají vám žádnou práci.
Pravidla návrhu pro textarea
Nechte textarea růst s obsahem
Pokud uživatel píše dlouhou zprávu a textarea zůstává pevné velikosti, musí se při psaní v poli posouvat. To kazí psaní. Použijte CSS nebo JavaScript, aby se textarea rozšiřovalo automaticky, jak uživatel přidává řádky. Píše přirozeně, pole roste, bez posouvání uvnitř pole.
Ukažte počáteční velikost jasně
Textarea by mělo mít dost viditelné výšky, aby dávalo najevo, že čekáte víc než jeden řádek. Ukažte alespoň tři až pět řádků prázdného místa, aby uživatelé pochopili, že to není jednořádek.
V případě potřeby nastavte rozumný limit znaků
Některá textarea mají limity. Formulář zákaznické podpory může omezit zpětnou vazbu na 5 000 znaků. Pokud limit máte, zobrazujte při psaní zbývající počet znaků. Ať uživatelé vidí, kolik místa jim zbývá, a nezjistí to až nárazem na hranici.
Pro kód nebo technický vstup použijte neproporcionální písmo
Pokud je textarea určeno pro úryvky kódu nebo technická data, použijte neproporcionální (monospace) písmo, aby na mezerách a zarovnání vizuálně záleželo. Pro běžný text, jako jsou zprávy nebo zpětná vazba, použijte výchozí bezpatkové písmo, které odpovídá vaší značce.
Běžné chyby u jednořádkových textových polí
Všechna textová pole stejně široká
Pokud je každé pole ve vašem formuláři stejně široké, ztrácíte vizuální signál o očekávané délce. Pole pro PSČ by nemělo být tak široké jako pole se jménem. Nechte velikost vyjádřit očekávání.
Zástupný text místo popisků
Zmiňuje se to výše, ale je to zásadní. Zástupný text pomáhá jako nápověda, ne jako popisek. Uživatel se čtečkou obrazovky zástupný text neuvidí. Uživatel, který vyplnil některá pole a vrátil se, zapomene, co pole chtělo.
Chyby validace nezobrazené v kontextu
Pokud uživatel zadá neplatný e-mail a chybová hláška se objeví nahoře ve formuláři, zatímco pole s e-mailem je dole, musí se posouvat, aby problém našel. Držte chybové hlášky blízko pole, které je vyvolalo, v barvě (červené nebo oranžové) s ikonou, která signalizuje „něco je špatně“.
Žádný krok zpět po vymazání
Pokud uživatel omylem vymaže pole nebo má formulář tlačítko „Vymazat“, které smaže všechno, zajistěte, aby mohl tuto akci vrátit. Jedno klepnutí na tlačítko by nemělo zničit pět minut práce s formulářem.
Běžné chyby u textarea
Textarea pevné velikosti, která se nerozšiřuje
Textarea, které zůstává stejně velké, zatímco obsah přetéká a vyžaduje posouvání, nutí uživatele psát v malém okénku. Jeho zážitek působí rozbitě. Nechte textarea rozšiřovat se s obsahem.
Žádná jasná informace o limitu znaků
Pokud má vaše textarea maximální délku, uživatel by to měl vědět dřív, než na ni narazí. Zobrazte počítadlo znaků, které se při psaní aktualizuje. „Zbývá 500 znaků“ nebo „2 z 5000 znaků“ okamžitě říká, kolik místa má.
Příliš malý začátek
Textarea vysoké jen jeden řádek nesděluje „chci vaši podrobnou zpětnou vazbu“. Vypadá, jako by to pořád bylo jednořádkové pole. Začněte alespoň se třemi až čtyřmi viditelnými řádky, aby uživatel pochopil, že může napsat víc.
Příklady: textové pole a textarea v kontextu
Kontaktní formulář
Pole se jménem: jednořádkové pole. Dost široké pro dlouhé jméno, ale dost úzké, aby signalizovalo „jen vaše jméno“.
Pole s e-mailem: jednořádkové pole s type="email".
Pole s telefonem: jednořádkové pole s type="tel".
Pole se zprávou: textarea, dost vysoké pro několik odstavců.
Formulář recenze produktu
Vaše jméno: jednořádkové pole.
Váš e-mail: jednořádkové pole s type="email".
Hodnocení (1 až 5 hvězdiček): specializovaný typ pole, ale ne textarea.
Vaše recenze: textarea.
Doporučil(a) bych ostatním: zaškrtávací pole, ne textové pole.
Formulář pokladny
Jméno, příjmení, e-mail, telefon: všechno jednořádková pole.
Adresa doručení (ulice, město, stát, PSČ): obvykle několik jednořádkových polí, ne jedno textarea pro celou adresu.
Zvláštní pokyny k doručení: textarea. Uživatel může mít jednu větu, nebo tři podle svých potřeb.
Formuláře WEMASY: tvorba textových polí a textarea
Tvůrce formulářů ve WEMASY obsahuje textová pole i textarea. Když do formuláře přidáte pole, zvolíte jeho typ podle toho, na co se ptáte.
U kontaktního formuláře ve WEMASY přidáte textové pole pro jméno a e-mail návštěvníka a pak textarea pro jeho zprávu. WEMASY se automaticky postará o styl, takže vaše textová pole a textarea odpovídají barvám a typografii vaší značky. Vy se soustředíte na správné otázky. Tvůrce formulářů zvládne rozvržení a chování polí.
Pokud potřebujete specializovaný vstup (například výběr data nebo validaci e-mailu), WEMASY to podporuje také. Velikost pole, chování a validace společně vedou uživatele k dokončení.