Formulár na webe: 10 pravidiel, aby ho ľudia vyplnili

UX formulára v desiatich pravidlách: len potrebné polia, štítok nad poľom, správna klávesnica, jasné chyby, tlačidlo s konkrétnym textom, kroky, poďakovanie a súhlas. Ku každému príklad zle a dobre.

This article is currently only available in Slovak.

UX formulára (to, ako sa formulár používa a aký pocit z neho človek má) rozhoduje o tom, či vám zákazník napíše, alebo zavrie stránku. Formulár je zvyčajne posledný krok pred dopytom, rezerváciou či objednávkou, a práve na ňom sa dá o zákazníka prísť zbytočne. Odpoveď je jednoduchá: pýtajte menej, vysvetlite viac a pri chybe pomôžte. Nižšie je desať pravidiel, ku každému príklad „zle / dobre“ z kontaktného formulára malej firmy.

Prečo ľudia formulár nedokončia

Dôvody sú takmer vždy tie isté. Formulár pýta veľa, človek nevie, načo sa niečo pýta, na mobile mu naskočí nesprávna klávesnica, po chybe sa mu údaje zmažú alebo po odoslaní nevie, či sa vôbec niečo stalo. Každá z týchto prekážok je malá, ale sčítajú sa. Odborne sa tomu hovorí kognitívna záťaž (koľko premýšľania a úsilia musí človek vynaložiť, aby niečo dokončil). Úlohou formulára je tú záťaž znížiť.

Príklady v článku sú zo štyroch bežných formulárov: rezervácia v kaderníctve, dopyt na účtovnícke služby, objednanie obhliadky u remeselníka a objednanie do ordinácie.

Desať pravidiel pre formulár, ktorý ľudia vyplnia

1. Pýtajte len polia, ktoré potrebujete

Pri každom poli sa opýtajte: ak ho vynechám, viem na dopyt odpovedať? Ak áno, pole zrušte alebo ho spravte nepovinným. Väčšinou stačí meno, kontakt a správa.

Zle: formulár účtovníčky pýta meno, priezvisko, názov firmy, IČO, DIČ, adresu, telefón, e-mail a počet zamestnancov, všetko povinne. Dobre: meno, e-mail, telefón (nepovinný) a správa. IČO si účtovníčka vypýta v prvom e-maile, keď už vie, že spolupráca dáva zmysel.

2. Štítok nad poľom, nie len v poli

Štítok (label) je text, ktorý hovorí, čo do poľa patrí. Sivý text vnútri poľa (placeholder) zmizne po prvom napísanom písmene a človek potom nevie, či píše meno, alebo priezvisko. Štítok nad poľom ostáva stále na očiach a prečítajú ho aj čítačky obrazovky (programy, ktoré nevidiacim čítajú stránku nahlas). Text v poli nechajte len na ukážku, napríklad vzor telefónneho čísla.

Zle: pole s bledým textom „Meno“, ktorý po prvom písmene zmizne. Dobre: nad poľom stojí „Vaše meno“ a v poli je svetlý príklad „Jana Nováková“.

3. Správna klávesnica na mobile

Telefón ukáže klávesnicu podľa typu poľa. Pole pre e-mail má mať klávesnicu so znakom @, pole pre telefón číselnú. Správne nastavené polia zvládnu aj automatické dopĺňanie: prehliadač doplní meno, e-mail a telefón z uložených údajov jedným ťuknutím. Vývojár to nastaví typom poľa a atribútom autocomplete. Overíte to za minútu: otvorte formulár na vlastnom telefóne a ťuknite do každého poľa.

Zle: pole „Telefón“ otvorí klávesnicu s písmenami a e-mailové pole nemá @ na prvej obrazovke. Dobre: telefón otvorí číslice, e-mail klávesnicu so znakom @ a meno sa doplní z uložených údajov.

4. Jasné chybové hlásenia pri poli

Chybu napíšte hneď pod pole, v ktorom vznikla, a povedzte, čo opraviť, nie len že niečo nesedí. Nespoliehajte sa na červenú farbu samotnú, nie každý ju rozozná: pridajte text alebo ikonu. Texty chýb patria do mikrokopie (malé texty v rozhraní: štítky, nápovedy, tlačidlá a práve chybové hlásenia), ktorú ľudia čítajú vo chvíli, keď sa niečo pokazí. Píšte pokojne a bez obvinení.

Zle: nad formulárom červený nápis „Neplatné údaje!“ bez označenia poľa. Dobre: pod poľom e-mail: „Chýba znak @. Skúste napríklad meno@firma.sk.“ Pri telefóne radšej prijmite medzery aj predvoľbu, než by človek dostal chybu za nesprávny zápis.

5. Nezmazať údaje po chybe

Ak sa po chybe formulár načíta prázdny, človek ho často už znova nevyplní. Najhoršie je to pri dlhej správe, ktorú písali niekoľko minút. Po chybe nechajte všetko, čo človek napísal, a opravte len chybné pole. To isté platí, ak zlyhá odoslanie pre výpadok siete. Overíte to jednoducho: vynechajte e-mail, odošlite a pozrite sa, čo ostalo vyplnené.

Zle: po chybe v telefóne je celý formulár prázdny, aj správa o opravách. Dobre: vyplnené zostane všetko a kurzor skočí na pole s chybou.

6. Označiť povinné polia

Povedzte hneď na začiatku, ktoré polia sú povinné, nie až po chybe. Sú dve čisté cesty. Buď označíte povinné polia hviezdičkou a nad formulárom jednou vetou vysvetlíte, čo hviezdička znamená. Alebo, ak je povinné takmer všetko, označíte slovom „nepovinné“ tie výnimky. Podľa pravidla 1 by povinných polí malo byť málo, takže pri väčšine formulárov stačí označiť len nepovinné.

Zle: hviezdičky bez vysvetlenia a povinné pole, o ktorom sa človek dozvie až po odoslaní. Dobre: nad poľami vetu „Polia so znakom * sú povinné“ a pri telefóne dodatok „(nepovinné)“.

7. Veľké tlačidlo s konkrétnym textom

Tlačidlo je výzva na akciu (CTA), teda miesto, kde človek robí rozhodnutie. Slovo „Odoslať“ nehovorí, čo sa stane. Napíšte, čo človek dostane: „Poslať cenovú ponuku“, „Rezervovať termín“, „Objednať obhliadku“. Na mobile ho spravte na celú šírku a výšku okolo 44 bodov (to je odporúčanie Apple pre dotykové ovládanie, Android Material uvádza 48 dp). Po ťuknutí zmeňte text na „Odosielame…“ a druhé ťuknutie zablokujte, aby sa dopyt neposlal dvakrát.

Zle: malé sivé tlačidlo „Odoslať“ pri ľavom okraji. Dobre: výrazné tlačidlo na celú šírku s textom „Rezervovať termín“ v kaderníctve.

8. Rozdeliť dlhý formulár na kroky

Ak potrebujete viac údajov, napríklad pri dopyte na stavebné práce, rozdeľte formulár na 2 až 4 krátke kroky a ukážte, kde človek je: „Krok 2 z 3“. Vidí koniec a každý krok pôsobí ľahko. Začnite najjednoduchšími otázkami, pridajte tlačidlo Späť a medzi krokmi nič nemažte. Ako orientačné pravidlo: do cca 6 polí stačí jedna stránka, krátky formulár na kroky nedeľte, len by predĺžil cestu.

Zle: jedna dlhá strana s 18 poľami pre remeselníka: rozmery, typ strechy, materiál, termín, rozpočet, fotky aj kontakt. Dobre: krok 1 „Čo potrebujete“ (výber z možností), krok 2 „Kde a kedy“, krok 3 „Ako vás zastihnúť“.

9. Po odoslaní poďakovanie a ďalší krok

Po odoslaní nenechajte prázdnu stránku ani vyprázdnený formulár. Ukážte správu, ktorá povie, čo sa stalo, čo bude ďalej a kedy, a pošlite potvrdzujúci e-mail. Sľúbte len to, čo dodržíte. Samostatná stránka „Ďakujeme“ má aj praktický prínos: viete na nej merať, koľko ľudí formulár odoslalo, a z toho spočítať konverzný pomer (podiel návštevníkov, ktorí urobili to, čo ste chceli).

Zle: po odoslaní sa formulár len vyprázdni, bez slova. Dobre: „Ďakujeme, správu sme dostali. Ozveme sa do jedného pracovného dňa. Zatiaľ si pozrite naše služby.“

10. Bezpečnosť a súhlas bez predvyplneného zaškrtnutia

Tri veci. Po prvé, stránka s formulárom musí bežať cez HTTPS (adresa začína na https) a mať nenápadnú ochranu pred spamom, ťažké obrázkové hádanky odrádzajú aj bežných ľudí. Po druhé, nepýtajte citlivé údaje, ktoré na odpoveď nepotrebujete: do bežného formulára ordinácie nepatrí popis diagnózy, stačí meno, kontakt a preferovaný termín. Po tretie, súhlas si človek musí dať sám. Predvyplnené zaškrtávacie políčko patrí medzi klamlivé vzory (triky v rozhraní, ktoré človeka tlačia k voľbe, akú nechcel) a podľa GDPR sa za súhlas nepovažuje.

Pri bežnom kontaktnom formulári zvyčajne stačí veta, na čo údaje použijete, a odkaz na zásady ochrany osobných údajov. Samostatný súhlas potrebujete napríklad na newsletter. Nejde o právne poradenstvo, overte si vlastnú situáciu.

Zle: políčko „Súhlasím s odoberaním noviniek“ je už zaškrtnuté a schované pod tlačidlom. Dobre: prázdne a samostatné políčko s jasným textom a pod tlačidlom jedna veta: „Údaje použijeme len na odpoveď na vašu správu.“

Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.

Spustiť projektZavolať +421 948 125 966

Čo urobiť ako prvé

Dobré UX formulára začína tým, že ho sami vyskúšate ako zákazník.

• Vyplňte vlastný formulár na telefóne od začiatku do konca a počítajte ťuknutia aj polia.
• Zrušte alebo zlúčte polia, bez ktorých viete odpovedať.
• Prepíšte text tlačidla z „Odoslať“ na to, čo človek dostane, a pridajte stránku „Ďakujeme“.
• Spravte úmyselnú chybu (vynechajte e-mail) a skontrolujte, čo sa stane s ostatnými údajmi.

Širší pohľad, od počtu polí po testovanie, ponúka myšlienková mapa Formulár, ktorý ľudia vyplnia.

Kedy stačí upraviť sami a kedy sa oplatí odborník

Texty štítkov, poradie polí, označenie povinných polí, text tlačidla a stránku „Ďakujeme“ zvládnete väčšinou sami v nastavení formulárového doplnku vášho webu. Odborník sa oplatí, keď treba kroky s ukladaním rozpísaných údajov, polia, ktoré sa zobrazia podľa predchádzajúcej odpovede, prepojenie na rezervačný systém alebo CRM, meranie odoslaní, prípadne pokladňu e-shopu. Formuláre ako súčasť nového webu alebo appky robíme v službe Web a aplikácie.

Časté otázky

Koľko polí má mať kontaktný formulár?

Čo najmenej: meno, spôsob kontaktu a správa. Presný počet pravidlo nemá, každé ďalšie pole musí mať dôvod, pre ktorý bez neho neviete odpovedať.

Treba vo formulári captchu?

Nie vždy. Pred spamom sa dá formulár chrániť nenápadne, napríklad skrytým poľom alebo overením na pozadí. Obrázkové hádanky pridávajú ľuďom prácu a niektorých odradia.

Je lepší formulár, alebo telefónne číslo?

Oboje. Formulár je pre tých, ktorí nechcú volať, číslo na jedno ťuknutie pre tých, ktorí chcú odpoveď hneď. Dôležité je, aby oba spôsoby fungovali na mobile.

Ako zistím, či formulár funguje?

Odošlite si testovací dopyt z mobilu, skontrolujte, že vám príde, a nastavte meranie odoslaní. Z počtu odoslaní a návštev stránky spočítate konverzný pomer a po každej úprave uvidíte, či sa zlepšil.

Chcete formulár, ktorý ľudia dokončia?

Napíšte nám, aký formulár máte a čo má zbierať. Cena závisí od rozsahu, ponuku pošleme do 48 hodín cez kontaktný formulár.