Činite sve što možete stvoriti web stranicu koji će posjetitelje dovesti do konverzije. Kada proučavate analitiku, oduševljeni ste kad vidite da posjetitelji uvijek iznova podržavaju putovanje korisnika koje ste stvorili. Međutim, postoji nešto što ih sprječava da se obrate.

Le kontakt obrazac bitan je dio putovanja vaših posjetitelja. Čak i ako zapravo imate gotovo sve što web stranica može ponuditi, a kontakt obrazac može pokvariti iskustvo ako se ne koristi ispravno. "Pokvareni" gumbi, zbunjujuća polja, previše koraka, neorganizirano sučelje... čak i položaj kontakt obrazac mogli poremetiti korisničko iskustvo.

Postoje mnoge stvari koje mogu poći po zlu.

5 pravila za izgradnju savršenog obrasca za kontakt

Googleovo istraživanje o praćenju oka objavljeno 2014. pokazalo je da slijedeći najosnovnije smjernice za dizajniranje obrasci značajno će poboljšati korisničko iskustvo. Točnije, kada obrazac za kontakt ispunjava sva pravila, 78% korisnika može ga ispuniti i poslati u jednom pokušaju. Međutim, kada obrazac za kontakt prekrši ova pravila, samo 42% može to učiniti u jednom pokušaju.

Zanima vas koja su to pravila? Pa nastavite čitati.

Pravilo # 1: Usredotočite se na poravnanje

Kao što ćete vidjeti u drugim pravilima ovdje, ljudi su često zabrinuti oko duljine obrasci kontakta, što često dovodi do loših izbora dizajna. Uzmimo, na primjer, pitanje usklađivanja.

Možda ćete vidjeti ovakav obrazac na web mjestu BrainTraffic i pomisliti: Hmmm ... ali nije li to predugo za popunjavanje?

ispunite form.png

Jedan od načina razmišljanja o rješavanju ovog "problema" je pomicanje oznaka ulijevo i postavljanje polja za odgovore udesno. Međutim, stručnjaci za UX reći će vam da je ovo glavno ne-ne jer ugrožava mogućnost skeniranja obrasca. Isto vrijedi i ako ste razmišljali o postavljanju polja jedno pored drugog vodoravno.

Ako želite svoje obrasci kontakti zadovoljavaju standard poravnanja, evo što trebate učiniti:

  • Poravnajte lijevo sve oznake, polja obrasca i primarni gumb poziva na akciju.
  • Srodna polja nikada ne poravnavajte vodoravno. Možete logički strukturirati obrazac, ali svako pitanje ili polje treba slagati okomito.
  • Sva polja s pitanjima s više izbora (s manje od šest opcija) moraju biti prikazana u vertikalnom popisu točaka ili potvrdnih okvira, a ne u padajućem izborniku.

Pravilo 2: Uključite sva relevantna polja

Što se tiče dizajniranja obrazaca za kontakt, možda mislite da što je kraće to bolje, zar ne? Nije uvijek tako. Najvažnije je da korisnicima pružite sva potrebna i relevantna polja.

Michael Aagaard, viši optimizator konverzija za Unbounce, jest prezentacija u 2015. koja se bavila ovim pitanjem. On i njegov tim željeli su znati što će se dogoditi ako skrate ovaj obrazac za kontakt:

primjer obrasca za kontakt court.png

Kao što vidite, uklonili su polja za koja su vjerovali da su nepotrebna kako bi pojednostavili postupak popunjavanja obrasca. Međutim, po završetku testa otkrili su pad konverzija u kraćem obliku za 14%.

Pravilo # 3: Pojednostavite polja

Nije važno da li vaši korisnici komuniciraju s vašim kontakt obrascem putem stolnog računala ili mobilnog uređaja ili im je potrebna pomoćna tehnologija koja im pomaže, obrazac bi trebao biti opremljen. radi pojednostavljenja postupka unosa.

Evo nekoliko tehnika koje biste trebali znati:

tabeliranje
Za korisnike stolnih računala i one koji imaju problema s pristupom, provjerite je li u vašem obrascu za kontakt omogućeno logičko naručivanje kartica.

Ulazne maske
Umjesto da prisiljavate korisnike da pogađaju kako želite da se određena polja formatiraju, možete ih dodati s ulaznim maskama koje ih automatski formatiraju.

polja za oblikovanje html.png

Google auto dovršetak
Umjesto da kodira svako polje tako da jest formirana automatski prema standardima koje treba poštivati, aktivirajte automatsko popunjavanje pomoću dodatka za automatsko popunjavanje Google adresa. To će vas ne samo uštedjeti od potrebe za rješavanjem pravopisnih pogrešaka i pogrešno popunjenih adresa, već će spasiti vaše posjetitelje od upisivanja većine ovih podataka.

Pravilo # 4: Izlaz iz svih

Iako shvaćam da će se ovo pravilo protiviti osnovama minimalizma, to je pravilo na koje biste trebali dobro paziti kako biste izbjegli nepotrebno frustriranje posjetitelja.

Dopustite mi da objasnim: imate obrazac za kontakt koji izgleda prilično jednostavno. Vaši ga korisnici ispunjavaju na temelju onoga što naljepnice sugeriraju i kliknite gumb za slanje. Tada dobivaju ovu užasnu crvenu poruku: „Nisi to dobro učinio! Vratite se, ispravite obrazac i pošaljite ga natrag! " 

Vjerojatno ste se s njim susreli kao korisnik i znate koliko to može biti frustrirajuće, pogotovo ako se neke od podataka koje ste unijeli izbrišu kad se pogreška izbaci. Dakle, umjesto da ostavljate korisnike da pogađaju što i kako treba popraviti, ne dopustite da dođe do ove točke. Napiši sve na putu:

  • Osigurajte fokus na terenu (posebno na mobilnom uređaju) kako bi korisnici točno znali gdje ispunjavaju obrazac.
  • Zapišite sve zahtjeve za formatiranje ako za automatsko formatiranje polja ne koristite maske za unos.
  • Izričito naznačite kada je polje "Izborno" (upotrijebite riječ, a ne crvenu zvjezdicu).
  • Dajte korisnicima mogućnost da pokažu ili sakriju polje lozinke dok ga unose.
  • Prikažite poruku o pogrešci čim se korisnik uključi u neko polje. Nemojte čekati kraj da to učinite.

wordpress.png WordPress pogreška

Pravilo # 5: Ne sakrivajte savjete

Tekst ploče u obliku kontakta izgleda ovako:

polje s tipovima.png

Pogledajte kako Target postavlja naljepnice u polje? U nekim obrascima za kontakt, ove oznake / oznake jednostavno nestaju kada korisnik klikne na polje. Cilj to rješava malo drugačije i premješta naljepnicu na vrh polja (pogledajte "e-adresa").

Bez obzira na to kako se to rješava, stručnjaci za upotrebljivost vole grupu Nielsen Norman, reći će vam da je ovo loša dizajnerska praksa jer:

  • To je problematično za multitasking, rastresene ili prebrze korisnike u sljedećem polju. Kad trag nestane, korisnici moraju napustiti polje kako bi ponovno otkrili što im treba.
  • Savjeti koji nestaju također sprječavaju korisnike da se vrate u obrazac kako bi provjerili svoj rad ili ispravili pogrešku bez potpunog brisanja odgovora da vide što je ispod.
  • Svijetliji sivi tekst upotrijebljen za savjete rezerviranih mjesta nije idealan za jednostavno čitanje.
  • Polja s tekstom nagovještaja mogu se zamijeniti s poljima koja su već popunila podatke, što ostavlja korisnike da ih ignoriraju, predaju obrazac i dobiju poruku o pogrešci.
  • Neki alati za čitanje sa zaslona nisu u stanju čitati tekst sa savjetima.

Prema NNG-u, korisnicima su prazna polja privlačnija od onih koja sadrže tekst naznaka. Čak i ako se čini da vaši obrasci duže stavljaju ove oznake ili deskriptore iznad polja, to će poboljšati upotrebljivost.

To je sve za ove savjete, nadam se da će vam pomoći u stvaranju boljih obrazaca za kontakt.