Radiš sve što možeš stvoriti web stranicu koji će posjetitelje dovesti do konverzije. Kada proučavate analitiku, oduševljeni ste kada vidite da je korisničko putovanje koje ste kreirali podržano od strane posjetitelja, uvijek iznova. Međutim, postoji nešto što ih sprečava da se pretvore.

Le kontakt formular je bitan dio putovanja vaših posjetitelja. Čak i ako zapravo imate gotovo sve što web stranica može ponuditi, a kontakt formular može pokvariti iskustvo ako se ne koristi pravilno. “Pokvarena” dugmad, zbunjujuća polja, previše koraka, neorganizovan interfejs... čak i postavljanje kontakt formular može poremetiti korisničko iskustvo.

Postoji mnogo stvari koje mogu krenuti naopako.

5 pravila za izgradnju savršenog kontakt obrasca

Googleova studija praćenja očiju objavljena 2014. godine pokazala je da slijedeći najosnovnije smjernice za korištenje za dizajn forme značajno će poboljšati korisničko iskustvo. Naime, kada obrazac za kontakt ispunjava sva pravila, 78% korisnika ih može ispuniti i poslati u jednom pokušaju. Međutim, kada kontakt obrazac krši ova pravila, samo 42% može to učiniti u jednom pokušaju.

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

Pravilo # 1: Usredotočite se na poravnanje

Kao što ćete vidjeti u drugim pravilima ovdje, ljudi su često zabrinuti zbog dužine forme kontakta, što često dovodi do lošeg izbora dizajna. Uzmimo, na primjer, pitanje poravnanja.

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

fill in 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 svoj forme kontakti zadovoljavaju standard poravnanja, evo šta treba da uradite:

  • Poravnajte lijevo sve oznake, polja obrasca i primarno dugme poziva na akciju.
  • Srodna polja nikada ne poravnavajte vodoravno. Možete logički strukturirati obrazac, ali svako pitanje ili polje treba slagati vertikalno.
  • 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 je kraće, to bolje, zar ne? Nije uvijek slučaj. Najvažnije je da korisnicima pružite sva potrebna i relevantna polja.

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

primjer kontaktnog obrasca 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 pomoću radne površine ili mobilnog uređaja ili im je potrebna pomoćna tehnologija koja će im pomoći, obrazac treba biti opremljen. radi pojednostavljenja postupka unosa.

Evo nekoliko tehnika koje biste trebali znati:

tabelisanje
Za korisnike radne površine i one koji imaju problema s pristupačnošću, 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.

formatiranje polja html.png

Google auto dovršavanje
Umjesto da kodira svako polje tako da jeste formatizovati automatski u skladu sa standardima koje treba poštovati, aktivirajte automatsko popunjavanje pomoću dodatka za automatsko popunjavanje Google adresa. Ovo ne samo da će vas spasiti da se ne morate baviti pravopisnim greškama i pogrešno popunjenim adresama, već će spasiti vaše posjetitelje od unošenja 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 nepotrebnu frustraciju 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 klikću na gumb za slanje. Tada dobivaju ovu užasnu crvenu poruku: „Nisi to dobro učinio! Vratite se, ispravite obrazac i pošaljite ga nazad! " 

Vjerojatno ste se s njim susreli kao korisnik i znate koliko to može biti frustrirajuće, pogotovo ako se neke informacije koje ste unijeli izbrišu kada 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) tako da korisnici tačno znaju gdje popunjavaju obrazac.
  • Zapišite sve zahtjeve za formatiranje ako ne koristite maske za unos za automatsko formatiranje polja.
  • 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 grešci čim se korisnik uključi u polje. Nemojte čekati kraj da to učinite.

wordpress.png wordpress error

Pravilo # 5: Ne sakrivajte savjete

Tekst ploče u obliku kontakta izgleda ovako:

polje sa 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 pomiče naljepnicu na vrh polja (pogledajte "adresa e-pošte").

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. Kada trag nestane, korisnici moraju napustiti polje kako bi ponovo otkrili ono što im treba.
  • Savjeti koji nestaju također sprečavaju korisnike da se vrate u obrazac da provjere svoj rad ili isprave grešku bez potpunog brisanja odgovora da vide što je ispod.
  • Svijetliji sivi tekst korišten za savjete rezerviranih mjesta nije idealan za lako čitanje.
  • Polja s tekstom nagovještaja mogu se zamijeniti s poljima koja su već popunila podatke, ostavljajući korisnike da ih ignoriraju, predaju obrazac i dobiju poruku o greš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 da izgradite bolje kontakt forme.