Obrazac za prijavu / registraciju Ideje i lijepi primjeri

U cijelom modernom webu vidimo sve veći broj mjesta za unos korisnika. To su košarice za kupnju, interaktivne web-igre, a zasigurno i obrasci za registraciju na web-mjestu. Čini se da ne samo da se dizajneri trebaju usredotočiti na dizajn stranica, već su i estetika oblika jednako važna uloga.

Razmotrite koliko ste oblika ispunili tijekom svoje internetske povijesti. Postoje bezbrojni primjeri tih foruma, oglasnih ploča, blogova i još mnogo toga. U ovom članku ćemo pogledati neke velike trikove za dizajniranje obrazaca na stranici.

Mudro je razmotriti neke od stavki iz objektivne perspektive. Iako mnogi obrasci za prijavu i registraciju dobro funkcioniraju s jednom vrstom web-mjesta, nema konačne presude o tome što je “najbolje” riješenje. Upotrijebite intuiciju za dizajn da biste primijenili dijelove i oblike iz kojih težite.

Razmislite o višestrukim ulazima

Da biste započeli s stvarima, razmislite o malom kontaktnom obrascu iz web-dizajna Six Six. Da, ovo nije obrazac za prijavu tako da može malo usmjeriti temu. Međutim, njihov dizajn stranica je vrlo impresivan i pokazuje vam što malo kreativnosti može postići.

Svako od polja za unos nudi vam prostor za unos osobnih podataka za kontakt - ime, e-mail, itd. Stilovi idu daleko izvan uobičajenog, nudeći korisnički unos u obliku rukopisne kaligrafije. Ova vrsta oblikovanja zadržat će vaše korisnike u čudu i postići cilj mnogo viših standarda dizajna.

Želite implementirati stilove poput ovih sličnih svim stranicama za prijavu. Ja svakako ne bih preporučio pridržavanje istog stila unosa teksta i opcija / izbornika. Prilikom trčanja mozga za kreativnost, razmislite o tome kako bi svaki element trebao biti izložen: dovoljno prostora između slojeva, velik lako čitljiv tekst, pa čak i bočne veze do njihove izravne linije e-pošte.

JQuery kutije za prijavu

Ovo je korišteno na bezbrojnim web-mjestima u prošlosti i sigurno će se vidjeti unutar dizajna novog doba. Davno su prošli dani u kojima bi standardna praksa dovela korisnike na novu stranicu za svaki korak procesa prijave. To bi obično značilo stranicu za unos podataka i novu stranicu za obradu podataka za prijavu.

Pixel2Life nudi fantastičan uvid u novo polje unosa podataka. Na njihovoj početnoj stranici možete kliknuti na vezu za prijavu i otvoriti dinamičnu kutiju za prijavu s jQuery. Ovaj obrazac sadrži Ajax poziv na vanjsku PHP skriptu koja provjerava vjerodajnice vaših podataka za prijavu i, nakon obrade, odobrava ili odbija pristup.

Idući korak dalje, lukavost može primijetiti vezu za registraciju ispod polja za prijavu. To nudi mnogo lakše korisničko iskustvo za one koji se žele prijaviti za web-lokaciju, ali ne mogu pronaći vezu za registraciju.

Ako korisnik nema račun, ali bi ga htio napraviti, to ih dovodi na stranicu za registraciju bez grešaka u buggy stranici. Kutija za prijavu i dalje bi bila održiva opcija za pristup vlastitom računu, ali dopuštajući opciju ustupa se veći povrat i veća količina novih prijavljenih.

Jednostavna registracija na jednoj stranici

Još jedna promjenjiva paradigma koju vidimo je nedostatak takvih detalja za nove registracije računa. To nije nužno loša statistika ako pretpostavimo da korisnici postaju nestrpljivi prema popunjavanju podataka. Brojevi zapravo sugeriraju web-mjesta s kraćim stranicama za registraciju teži liste novih korisnika na dnevnoj bazi.

Sikbox nudi laganu mogućnost za posjetitelje da izrade vlastiti okvir za pretraživanje za web-lokaciju. Jedini uvjet je vlastita prilagođena domena koja omogućuje rezultate pretraživanja. Polja za unos su velika, tekst je vrlo jednostavan za čitanje i postoje apsolutno nema oglasa odvratiti korisnike od zadatka izgradnje obrasca za pretraživanje!

Sada to nije najbolji oblik za izgradnju prilikom izrade vlastite stranice za registraciju za forum ili arhivu bloga. To će, standardnom definicijom, barem zahtijevati neku vrstu kombinacije e-mail adresa / korisničkog imena zajedno s lozinkom. Neke web-aplikacije novije dobi generirat će dinamične lozinke za korisnike kako bi proces registracije bio brži.

Naravno, kompromisu ovdje nedostaje kontrola na korisnikovom kraju za generiranje vlastite lozinke na koju su mnogi ljudi navikli.

Izgradite Flashy efekte

Jedno od najvećih iskustava s prijavama koje sam ikada imao bilo je stvaranje mog prvog Tumblr računa. Početna stranica njihove web-lokacije nudi obrazac za prijavu i prijavu koji se nalaze jedan ispod drugoga s novim CSS3 efektima isticanja / fade.

Ovaj sustavni pristup je sličan u pogledu područja za prijavu na Pixel2Life jQuery. Međutim, razlika s Tumblr-om je to što mreža ne može ponuditi sadržaj onima koji nemaju blog (osim pregledavanja drugih računa). Prava korist od tumblr-a je stvaranje vlastitog bloga i praćenje drugih - tako je vaš glavni cilj na naslovnoj stranici ili izraditi račun ili se prijaviti.

Postoje neki problemi s ovim sustavom. Najvažnije u okviru IE6 / IE7 koji ne podržava ova nova svojstva CSS-a. Na početnoj stranici također se koristi sustav za dodavanje elemenata naljepnice u ulazne vrijednosti obrazaca - u osnovi nadjačava “zadano” znakova koji se koriste za okvire e-pošte / zaporke.

Ove oznake nestaju pri fokusiranju u modernim preglednicima kao što je Chrome / Firefox. Ali nema sreće s zastarjelim preglednicima koji su, kao što možete zamisliti, prilično neugodno pokušati ponovno čitati vlastiti unos!

20 + Primjeri lijepih oblika dizajn

Ispod se nalazi galerija brzih fotografija nekih fantastičnih dizajna za prijavu. One su odabrane iz cijelog weba i uključuju brojne oblike web-aplikacija. Ako imate prijedloge za druge web-lokacije, slobodno ih podijelite u odjeljku s komentarima u nastavku!

Snoggle Vijesti