Forma je mjesto na kojem se sav trud uložen u dizajn, sadržaj i marketing pretvara u konkretan rezultat: upit, registraciju, narudžbu ili rezervaciju. Ipak, upravo forme su najčešće zanemaren dio sučelja. Korisnik koji je spreman da ostavi svoje podatke je korisnik na korak od konverzije, a loše dizajnirana forma taj korak pretvara u prepreku. U ovom tekstu pokazujemo kako se forme dizajniraju inženjerski: tako da budu jasne, brze za popunjavanje i tolerantne na greške.
Zašto korisnici napuštaju forme
Napuštanje forme rijetko je rezultat jednog velikog problema. Češće je to zbir sitnih frustracija koje se nakupljaju dok korisnik prelazi od polja do polja. Razumijevanje tih razloga je prvi korak ka boljem dizajnu.
- Forma izgleda duže nego što jeste, pa korisnik odustane prije nego što počne.
- Traže se podaci koji djeluju nepotrebno ili previše lično u datom kontekstu.
- Validacija prijavljuje greške na zbunjujući način ili tek nakon slanja.
- Polja nisu jasno označena, pa korisnik nije siguran šta se tačno traži.
- Na mobilnom uređaju se pojavljuje pogrešna tastatura ili je polje preusko.
Svaki od ovih problema može se riješiti svjesnim odlukama u dizajnu, bez potrebe za radikalnim promjenama u tehnologiji.
Tražite samo ono što vam zaista treba
Najefikasnija optimizacija forme je uklanjanje polja. Svako polje koje dodate povećava napor korisnika i smanjuje vjerovatnoću da će forma biti poslata. Prije nego što dodate polje, postavite jednostavno pitanje: da li nam je ovaj podatak potreban sada, ili ga možemo prikupiti kasnije?
Kontakt forma za upit ne treba tražiti adresu, naziv firme i broj telefona ako vam je za prvi odgovor dovoljna email adresa i poruka. Podatke koji nisu kritični označite kao opcionalne ili ih potpuno izostavite. Manje polja znači brže popunjavanje, a brže popunjavanje znači više poslanih formi.
Kada radimo na izradi web stranica, gotovo uvijek predlažemo da se inicijalna forma svede na minimum, a dodatni podaci prikupljaju u kasnijim koracima kada je korisnik već angažovan.
Struktura i raspored polja
Način na koji su polja raspoređena direktno utiče na to koliko se forma brzo procesuira u glavi korisnika. Ljudi čitaju forme od vrha prema dnu, jedno po jedno, pa raspored treba pratiti tu prirodnu putanju.
Jedna kolona umjesto više
Forme u jednoj koloni popunjavaju se brže i sa manje grešaka od onih u više kolona. Više kolona prisiljava oko da odlučuje kuda dalje, što usporava i stvara konfuziju. Izuzeci su logički povezana kratka polja, poput grada i poštanskog broja, koja mogu stajati jedno pored drugog.
Logičan redoslijed i grupisanje
Polja grupišite po značenju. Lični podaci idu zajedno, podaci o dostavi zajedno, podaci o plaćanju zajedno. Vizuelno razdvajanje grupa pomaže korisniku da shvati strukturu i da ne doživi formu kao jedan dugačak zid polja.
Labele iznad polja
Labela postavljena iznad polja ostaje vidljiva tokom kucanja i najbolje funkcioniše na mobilnim ekranima. Izbjegavajte oslanjanje samo na placeholder tekst kao zamjenu za labelu, jer placeholder nestaje čim korisnik počne da kuca i tada se gubi kontekst o tome šta se traži.
Validacija i poruke o greškama
Validacija je trenutak u kojem forma najviše frustrira ili najviše pomaže. Razlika je u tome kada i kako se greška prikazuje.
- Validirajte u pravom trenutku. Provjerite polje kada korisnik završi sa njim, a ne dok još kuca i ne nakon što je već poslao cijelu formu.
- Poruke neka budu konkretne. Umjesto opšteg upozorenja, recite tačno šta nije u redu i kako da se ispravi.
- Greške pozicionirajte uz polje. Poruka treba stajati pored polja na koje se odnosi, a ne na vrhu ili dnu forme.
- Sačuvajte unesene podatke. Korisnik nikada ne bi smio izgubiti ono što je već unio zbog jedne greške.
Dobra validacija djeluje kao pomoćnik koji vodi korisnika ka uspjehu, a ne kao čuvar koji ga kažnjava za svaki pogrešan korak.
Pristupačnost i mobilni uređaji
Veliki dio prometa danas dolazi sa telefona, a dobar dio korisnika koristi tehnologije za pristupačnost. Forma koja ignoriše ove kontekste gubi stvarne korisnike.
Na mobilnim uređajima koristite ispravne tipove polja kako bi se pojavila odgovarajuća tastatura: numerička za telefon, email tastatura sa znakom za adresu. Polja i dugmad neka budu dovoljno velika da se lako pritisnu prstom. Sa stanovišta pristupačnosti, svako polje mora imati pravilno povezanu labelu, a fokus mora biti jasno vidljiv kako bi se forma mogla popuniti i tastaturom.
Kontrast teksta i pozadine mora biti dovoljan da poruke o greškama budu čitljive svima, uključujući korisnike sa slabijim vidom.
Dugme za slanje i potvrda
Posljednji korak forme zaslužuje jednaku pažnju kao i prvi. Dugme za slanje treba imati tekst koji opisuje radnju, na primjer Pošalji upit ili Završi narudžbu, umjesto generičkog Pošalji. Takav tekst korisniku jasno govori šta će se dogoditi.
Nakon slanja, korisnik mora dobiti jasnu potvrdu da je sve uspjelo. Tišina nakon klika izaziva sumnju i ponekad dovodi do dvostrukog slanja. Ako obrada traje, prikažite indikator učitavanja i onemogućite dugme kako bi se izbjeglo višestruko slanje.
Brza referentna tabela
| Element | Slaba praksa | Dobra praksa |
|---|---|---|
| Broj polja | Sva moguća polja odjednom | Samo neophodna, ostalo kasnije |
| Labele | Samo placeholder tekst | Vidljiva labela iznad polja |
| Validacija | Tek nakon slanja | Po završetku unosa u polje |
| Greške | Opšta poruka na vrhu | Konkretna poruka uz polje |
| Dugme | Pošalji | Pošalji upit, Završi narudžbu |
Mjerite i poboljšavajte
Dizajn forme nije gotov kada se forma objavi. Pratite koliko korisnika počne da popunjava formu, a koliko je zaista pošalje. Ako veliki broj ljudi odustaje na određenom polju, to je jasan signal da nešto treba promijeniti. Manje izmjene, poput uklanjanja jednog polja ili jasnije poruke o grešci, često donose vidljivo bolje rezultate.
Forme su tačka u kojoj se posjetioci pretvaraju u kontakte i kupce, pa svaka uložena pažnja u njihov dizajn ima direktan poslovni efekat. Ako želite da vaše forme rade na ovaj način, pogledajte naše usluge i javite nam se da zajedno pronađemo rješenje koje odgovara vašem proizvodu.