Ako správne navrhnúť UX formulár: 13 chýb a ich riešenia

Formulár a jeho polia sú v skutočnosti jedným z najdôležitejších nástrojov pre interakciu medzi používateľom a webovou stránkou. A je v podstate jedno na čo formulár slúži – či na odber noviniek, vytvorenie cenovej ponuky alebo na postupný zber dát.

Na úvod ťa trochu zapojím do problematiky, dáme si výzvu

Dôležité je na na začiatok povedať, že ide o formulár a webovú stránku medzinárodnej spoločnosti.

Teraz si pozri obrázok nižšie, je na ňom spomínaný problematický UX formulár, ktorý budeme v tomto článku rozoberať.

Úloha:
Zober pero a papier alebo sa len na chvíľu zamysli a skús identifikovať všetkých 13 chýb. Pripravený? Poď na to.

Tak čo? Spočítané?
Poďme sa spoločne pozrieť na chyby, ktoré som objavil.

 1. Rozloženie formuláru je v dvoch stĺpoch

Ako prvé čo mi udrelo do očí je to, že vstupy by mali byť usporiadané do jedného stĺpca, aby používatelia mohli čítať formulára v priamom smere dolu po stránke.

Umiestnenie viacerých stĺpcov vedľa seba narúša vertikálnu dynamiku a spôsobuje, že používatelia môžu byť vyrušení.

Štúdia inštitútu CXL zistila, že účastníci dokázali vyplniť formulár s jedným stĺpcom v priemere o 15,4 sekundy rýchlejšie ako formulár s viacerými stĺpcami. Návštevníci nechcú strácať čas snahou pochopiť tom, ako vyplniť  formulár.

Aj štúdie sledovania pohybu očí ukázali, že jednostĺpcové formuláre sú oveľa lepšie a efektívnejšie ako dvojstĺpcové. Ale prečo?

Spôsob, akým prehliadame webovú stránku je vlastne podobný tomu, ako vypĺňame formulár: ideme totiž zhora – smerom nadol a sústreďujeme sa na obsah.

Formulár s dvomi stĺpcami môže používateľov ľahko „zmiasť z cesty“ a rozptýliť ich, čo nechceme.

Každé pravidlo má však svoje výnimky. Pokiaľ ide o krátke alebo logicky nadväzujúce polia ako sú napr. meno a priezvisko, mobilné číslo, mesto, štát a PSČ možno ich umiestniť do jedného riadku.

2. Kontaktný formulár je príliš komplikovaný

Problematické v tomto formulári je aj to, že je tu príliš veľa zbytočných a nepotrebných polí.

Ak formulár vyžaduje príliš veľa informácií, riskuješ, že prídeš o odoslania a konverzie. Pri vytváraní formulára uveď len tie najdôležitejšie informácie, ktoré potrebuješ, a nepridávaj žiadne zbytočné polia a otázky navyše. Proste to nekomplikuj.

Cieľom je, aby bol čo najstručnejší. Udržuj počet polí v rozumnej miere a vždy sa pýtaj či danú informáciu skutočne potrebuješ.

3. Absolútne absentuje zobrazenie chybových hlásení

Chyby sa stávajú. Keď sa vyskytnú, uveď kde a čo je nesprávne. V spomínanom formulári sa páni ani neuráčili ukázať chybové polia. Stručne ma odbili vetou: „pre nacenenie je potrebné vyplniť všetky polia“ (ešte by som doplnil – „ty hlupák“ (hehe)).

Takže pri chybe návštevník musí pracne prejsť odznovu celý formulár. No hotová katastrofa.

Chyby teda zobrazuj tam kde vznikli a nezabúdaj aj na ľudí s farbosleposťou – takže ideálne ak to nie je len akcent, ale aj nejaká tá ikonka navyše.

4. Nejasné hlavné call to action tlačidlo pre vykonanie akcie

Používatelia by si mali byť istí dôsledkami svojich činov. Zabudni na všeobecné CTA tlačidlo ako „Odoslať“, „OK“, „Pokračovať“. Popíš akciu, ktorú používateľ po odoslaní formuláru vykoná. Používame niečo také ako „Prihlásiť sa“, „Odoslať formulár“, a pod.

Na tomto formulári máme „Vypočítať“.

To vo mne vzbudzuje otázku – vypočíta sa cena a odošle sa formulár? Iba sa vypočíta cena? Ako odošlem formulár?

No a čo sa mi v realite / v praxi stalo?

Vyplnil som pár políčok, a potom som si všimol toto tajuplné tlačidlo. Dobre, že sa neskrývalo. Okamžite som chcel spoznať cenu za materiál tak teda klikáááám na „vypočítať“ a bum – napol vyplnený formulár sa úspešne ODOSLAL. Páni majitelia musia mať radosť…

5. Označenie povinných a nepovinných polí formulára

Všetky polia, ktoré sú povinné by mali byť jednoznačne označené, aby to návštevník vedel rýchlo a ľahko identifikovať.

Ako označiť povinné polia? Štandardne sa používajú tieto dve možnosti:

• s hviezdičkami
• alebo s označením slovo „povinné“.

Hviezdička sa stala konvenciou a každý z nás v podstate vie, čo znamená. Potrebuje málo miesta, preto rád používam túto možnosť.

V zásade nie je rozdiel, či sa hviezdička umiestni pred alebo za označenie (label). Ak je však nastavená pred, čisto teoreticky – oči na prvý pohľad skôr odhalia, ktoré políčko je povinné.

Je potrebné označovať aj nepovinné polia?

Nie, nie je to potrebné a ani povinné.

Avšak uľahčuje to kognitívnu záťaž na používateľa. Ak pole nemá popis, používateľ bude musieť odhadnúť, že dané pole je nepovinné. To dokáže vydedukovať z ostatných polí označených práve ako povinné. Pri tomto formulári neľahká úloha, čo povieš?

6. Formulár nerozlišuje elementy podľa ich funkcionality

Základnú sadu prvkov vo formulári tvoria:

• textové polia, rozbaľovacie zoznamy a tlačidlá,
• ďalej sú to položky s viacerými možnosťami výberu, tie sú reprezentované zaškrtávacími políčkami (checkboxi)
• štandardom sú aj rádiové tlačidlá, tie sú používané pre možnosti s jednou voľbou

7. Nesprávne poradie položiek vo formulári

Údaje vo formulári by sa mali zadávať logicky z pohľadu používateľa, nie z pohľadu logiky aplikácie alebo z pohľadu Jančiho, ktorý tvoril formulár.

Tento problematický formulár nás veru nešetrí a testuje nás od prvého momentu. No čo, aký typ osoby si ty?

8. Zgrupovanie položiek, ktoré k sebe patria

Zoskupenie informácií do častí je jednoduchý spôsob, ako zvýrazniť asociáciu.

Ak má formulár viac ako šesť polí, odporúča sa zoskupiť ich do logicky prepojených sekcií. Tieto kroky sa ešte viac zvýraznia, ak každá sekcia dostane svoje príslušné záhlavie tj. popis a je prehľadne usporiadaná zhora nadol.

TIP: Nezabudnite na dostatočný priestor (margin a padding) medzi jednotlivými časťami, aby ste ich jednoducho odlíšili.

9. Chýba jasný názov formuláru

Tu sa páni ani neuráčili nejaký dať, preto na obrázku žiadny nie je.

Formuláru určite dajte názov. Taký názov, ktorý návštevníkom pomôže pochopiť, čo presne dostanú po jeho odoslaní. Jednoduchý názov formuláru, ako napríklad „Formulár na získanie cenovej ponuky na mieru“ určite poteší.

Názov totiž jasne hovorí, že návštevník po odoslaní svojich cenných osobných údajov získa vypracovanie cenovej ponuky na mieru.

10. Žiadajú o telefónne číslo, ak to nie je nevyhnutné

Ak získanie telefónneho čísla návštevníka nie je pre tvoje podnikanie, alebo cieľ daného formuláru kľúčovým faktorom, vo formulári ho nevyžaduj.

Spoločnosť ClickTale uskutočnila test a zistila, že stratila 39 % registrácií používateľov, keď vyžadovala telefónne číslo. Žiadosť o telefónne číslo môže návštevníkom pripadať pochybná, ak nevedia, že existuje legitímny dôvod, prečo sa od nich žiada, aby tieto informácie poskytli.

Požiadajte namiesto toho o e-mail a kontaktuj návštevníkov týmto spôsobom (so súhlasom). Nie každý je extrovert a chce s neznámym týpkom vykecávať v mobile. Alebo teda nech je pole s telefónnym číslom vo formulári pre návštevníkov len ako nepovinný parameter.

11. Používanie prehliadačov s automatickým vypĺňaním

Vyplnenie konkrétnych polí formulára je dnes rýchlejšie ako kedykoľvek predtým, pretože naše moderné prehliadače majú funkcie automatického vypĺňania.

Dáta čerpajú z predchádzajúcich informácií zadaných návštevníkom (napríklad jeho meno a priezvisko či e-mail).

Najlepším postupom je pomenovať každé pole výrazom alebo spoločným atribútom, ktorý prehliadače rozpoznajú, aby sa urýchlil proces vypĺňania formulára pre návštevníka.

Tu som sa automatického vyplnenia nedočkal.

12. Orientačnú cenu zistím až po stlačení CTA

Dúfam, že si nezabudol, že to slovo „vypočítať“ je pasca, ako spomínam v bode 4. Sumu síce zistíš, ale rovno odošleš (aj nekompletný) formulár.

Správnym riešením je automaticky po vyplnení potrebných políčok cenu vizuálne a pútavo zobraziť. A zmena ceny nastáva ihneď. Toto je nanajvýš dôležité pri cenotvorbových formulároch.

13. Nepoužívaj element pre výber – select (dropdown) na málo hodnôt

Ak máš hodnôt na výber málo, napr. 3-4 ako je to v tomto „dokonalom“ UX formulári, nezobrazuj ich vo forme elementu select, ale skôr ako radio button. Používateľ okamžite vidí dostupné hodnoty a rýchlejšie tento údaj vyplní.

Návrh riešenia. Ako na vytvorenie správneho UX formuláru

Dal som si námahu a navrhol som v rýchlosti opravené rišenie, tu je:

Záverečné posolstvo a vyhodnotenie

Máš všetkých 13 chýb? Ak áno klobúk dolu, tak to má byť.

Ak nie, nevadí, verím, že vďaka tomuto článku už v budúcnosti tieto chyby neprehliadneš a keď budeš tvoriť web na mieru si na ne spomenieš.

Ako vidíš, navrhnúť dobrý formulár (nie) je zložité. Na dizajne UX záleží.

Na zlepšenie UX sa tvorca webu musí vžiť do kože používateľa.

Neriskuj to, že používatelia budú sklamaní alebo budú strácať drahocenný čas snahou zistiť, ako tvoj formulár funguje. Hneď od začiatku urob formulár prehľadným a zrozumiteľným.

Formuláre sú dôležitou súčasťou mnohých konverzných cieľov, preto sa uisti, že ich máš vyriešené správne.

PS: tých chýb je tam podstatne viac, no týchto 13 je minimum. Našiel si ich?