Dizajn obrazaca na web stranicama

Svaka web stranica kojoj je cilj konverzija posjetitelja sadrži obrasce za ispunjavanje. Dobro dizajnirani obrasci potiču korisnike na interakciju i povećavaju postotak konverzije. Koriste se kod prijave na vašu web stranicu, prijave za newsletter i kupnje. Obrasci su također glavni način komunikacije između vas i posjetitelja. Povratne informacije su bitne te je zato važno da obrasci budu jednostavni i intuitivni.

6 elemenata svakog web obrasca

Web obrasci su jedna od stvari koje korisnici izbjegavaju na vašoj web stranici. S vremenom, korisnici su stekli očekivanja o tome kako obrazac treba izgledati. Svaki korisnik očekuje ovih šest elemenata na svakom obrascu.

Nazivi svakog polja za ispunu su osnovni elementi svakog online obrasca. Polja za ispunu omogućuju korisniku da unese povratnu informaciju. To mogu biti tekst polja, polja za lozinku, checkboxovi, radialni gumbi i još mnogo toga. Call-to-action linkovi ili gumbi služe kao završna radnja u slanju obrasca.

„Help“ sekcija pruža pomoć oko ispunjavanja obrasca. Poruke o stanju unosa podataka mogu biti pozitivne i negativne. Pozitivne su u slučaju da je korisnik unio sve točne podatke, a u protivnom su negativne. Zadnji element koji korisnici očekuju na vašem obrascu je validacija. Validacija obavještava korisnika odgovaraju li informacije koje je unio prihvatljivim parametrima obrasca.

Vrste web obrazaca

Postoji mnogo vrsta web obrazaca. U ovom odlomku ćemo proći kroz pet tipova obrazaca. Prvi i najjednostavniji tip obrasca je kontakt obrazac. U većini slučajeva se sastoji od tri polja za unos podataka: ime, e-mail adresa i poruka. Ova forma služi za komunikaciju sa korisnikom. Uz pomoć tog obrasca korisnik šalje svoj upit na vašu e-mail adresu. Vaša web stranica izgleda profesionalnije i ozbiljnije. Također, korisniku je jednostavnije samo ispuniti kratki obrazac za razliku od kopiranja vašeg e-maila i logiranja na svoj e-mail. Kontakt obrasci skraćuju taj proces i približavaju vas korisniku. Dobar primjer obrasca vidimo na web stranici Pixpa.com.

https://www.pixpa.com/contact-us

Kontakt obrazac na Pixpa.com

Sljedeći oblik obrasca je lead generation obrazac. Ovaj obrazac služi za prikupljanje e-mailova i kontakata posjetitelja i korisnika. Mogu se koristiti na landing stranicama kompanija, kako bi skupili kontakte koji se mogu koristiti u prodajnom ciklusu. Kada tražite korisnika njegove podatke možete mu ponuditi neku besplatnu uslugu (npr. besplatni wallpaper). Tim potezom povećavate svoju bazu kontakata i dajete korisniku razlog da zapamti vašu web stranicu kao izvor pogodnosti.

Treća po redu vrsta obrasca je obrazac za narudžbu. Preko ovog obrasca korisnik vrši narudžbu na vašoj web stranici i korak bliže je kupnji vašeg proizvoda ili usluge. Pomoću ovog obrasca prodajete svoje proizvode i posebno je koristan ako imate mali broj ponuda i proizvoda. Može se integrirati sa online servisima plaćanja kao što su PayPal ili Google Checkout.

Obrazac za registraciju i anketa

Obrazac za registraciju na događaj je još jedan od oblika obrazaca za bolju komunikaciju sa korsnicima. Pomoću njega prikupljate kontakte posjetitelja koji će prisustvovati vašem eventu. Također, možete im ponuditi polje za ispunu gdje mogu napisati svoje preferencije vezane za događaj. Možete ponuditi tri opcije- „Prisustvujem“, „Ne prisustvujem“ i „Neznam“. Opcije možete formulirati i drugačije, ovisno o potrebi. Tako možete vidjeti koliko je zainteresiranih i u skladu s tim organizirati event. Google maps je još jedan od elemenata koje je poželjno imati uz obrazac.

Zadnju vrstu obrasca ste sigurno puno puta ispunjavali. Anketa je ključna za uspjeh svakog istraživanja tržista ili korisničkog iskustva. Pomoću ankete možete ispitati korisnike o određenom proizvodu ili usluzi koji je u procesu nastajanja. Također, možete ispitati zadovoljstvo korisnika vašom uslugom. Online ankete su odličan način za skupljanje točnih i mjerljivih informacija o vašem poslovanju. Korisne su pri ispitivanju percepcije vašeg branda ili web stranice od strane korisnika.

Smjernice za dizajn obrazaca na web stranicama

U ovom odlomku ćemo navesti načine oblikovanja obrazaca. Da bi korisničko iskustvo bilo bolje pokušajte primjeniti ove smjernice na dizajn svojih obrazaca. Imajte na umu da su ovo opće smjernice i da za svako pravilo postoji iznimka.

Jedno od prvih pravila za bolji dizajn obrazaca je da obrasci budu pozicionirani vertikalno u jednom stupcu. Kod oblikovanja sa više stupaca dolazi do remećenja čitljivosti.

Pozicioniranje polja za ispunu

Pozicioniranje polja za ispunu

Nazivi polja za ispunu bi trebali biti pozicionirani iznad polja. Korisnici u većoj mjeri ispunjavaju takva polja prije od polja sa nazivom na lijevoj strani. Također, polja sa nazivom iznad se dobro prenose na mobilne uređaje. Nazive na lijevoj strani je dobro koristiti pri obrascima sa puno informacija. Korisnik ih lakše „skenira“ i smanjuju visinu cijelog obrasca.

Pozicioniranje naziva polja za ispunu

Pozicioniranje naziva polja za ispunu

Nazivi i polja bi trebali biti grupirani. Svaki grupirani naziv i polje moraju biti jasno odvojeni od sljedećeg polja za ispunu. Također, izbjegavajte korištenje velikih slova u nazivima, jer su teže čitljivi.

Grupiranje naziva i polja za ispunu

Grupiranje naziva i polja za ispunu

Ako vaše polje sadrži ispod šest mogućih selekcija – pokažite ih sve. Ako forma sadrži više opcija razmislite o korištenju padajućeg izbornika. U slučaju da je broj opcija veći od 25, koristite kontekstualno pretraživanje unutar padajućeg izbornika.

Oblikovanje padajućeg izbornika

Oblikovanje padajućeg izbornika

Izbjegavajte korištenje place-holder teksta unutar polja za ispunu. Place-holder tekst nestaje u trenutku kada korisnik klikne na polje te zbog toga dolazi do nejasnoća i bespotrebnog gubljenja vremena.

Korištenje place-holder teksta

Korištenje place-holder teksta

Pozicija elemenata

Checkboxovi i radijalni gumbi bi se trebali pozicionirati jedan ispod drugog kako bi čitljivost bila kvalitetnija. Call-to-action bi trebao jasno definirati radnju koju korisnik čini pri završnoj interakciji.

Call-to-action gumb

Call-to-action gumb

Kod obavještavanja o grešci važno je jasno pokazati gdje se dogodila greška i razlog. Validaciju pokažite tek nakon što je korisnik unio cijeli podatak. Tekst sa uputama jasno pozicionirajte, nemojte ga skrivati iza ikone. Jasno odvojite i definirajte primarnu akciju od sekundarne.

Obavještavanje o pogrešci

Obavještavanje o pogrešci

Kod zadanog broja znakova (broj kartice, broj telefona,…) koristite definiranu duljinu polja. Nemojte koristiti znak * za neobavezna polja, rađe ih nemojte ni ponuditi. Korisnici često ne razumiju čemu služi znak *, te to dovodi do nepotrebne zbunjenosti. Grupirajte informacije koje su srodne. Korisnici percipiraju informacije u gupama te ih veliki obrasci lako zbune. Kreiranjem logičkih grupa korisnici će lakše shvatiti obrazac.

Polje sa definiranim brojem znakova

Polje sa definiranim brojem znakova

Obrasci na mobilnim uređajima

Obrasci na mobilnim uređajima imaju puno više ograničenja. Glavni razlozi su mali ekrani, konekcija na internet je slabija i način unosa teksta je kompliciraniji. Elementi kao radialni gumbi, checkboxevi i meniji sa selekcijama bolje funkcioniraju od polja za tekst.

U mnogim web preglednicima na mobilnim uređajima kada korisnik odabere polje obrasca, pokrene se field zoom opcija. Sitno polje za ispunu se poveća i korisnik lakše unosi informacije. Field zoom funkcionalnost je dobar razlog da nazive većih polja za ispunu pozicionirate iznad polja. Lijevo pozicionirani nazivi često nestanu izvan ekrana pri field zoom-u.

Primjer Google accounts obrasca kod korištenja field-zoom-a

Primjer Google accounts obrasca kod korištenja field-zoom-a

Većina polja za lozinke pri unosu lozinke sakriva znakove koje ste upisali. To često dovodi do problema u korisničkom iskustvu. Korisnik ne vidi što je točno unio i često nije siguran koju je lozinku upisao. Dosta mobilnih uređaja rješava ovaj problem tako da na trenutak prikaže samo zadnji znak koji je unesen.

Padajući izbornici su jedan od kompliciranijih elemenata za interakciju na mobilnom uređaju. Korisnik prvo mora kliknuti na izbornik i nakon toga manevrirati kroz njega. Nakon što dođe do željenog unosa mora ga odabrati i selektirati. Appleov iPhone je tom problemu izašao na kraj sa pop-up izbornikom.

Zaključak

Ovo su samo neki od primjera i prakse koje se koriste pri dizajniranju web obrazaca. Iako je mnogo mogućnosti, potrebno je pažljivo i smisleno isplanirati izgled vašeg obrasca. Uz sve navedene primjere imate dobru polaznu točku da primjenite ove informacije na svojim vlastitim formama, a ukoliko zapnete bilo gdje – kontaktirajte nas bez ustručavanja.

Podijelite članak: