Login and Registration Form UI patterns

7:47 pm in UI by Webdevelopment

0

We have been trying to find different UI patterns for login and registration placement, which can be very flashy, elegant and most important user-friendly with less count of clicks. These are some of patterns which are worth to mention and their must be more but its just a quick overview but firstly like to mention key points what we want to acheive by searching different User interaction and user interface patterns. – How many times user is clicking to login and register – How many steps are involved – How you can make user to get registered, if he just skimming through your site – how you make user to make interact without registering on first place – Which placement is good in different scenarios

Login And Registration Patterns:

BBC




Some times you need inspiration and eye catching form because the form required more details which can make user bored, like this one. Pattern is flash based so no page loading or showing next page, when you click shows registration or login form

Cardpool.com



This is very handy pattern because of these things – On click brings up form on same page

- Showing two forms/actions together in one click, this is first click.

- One of actions can be achieve by just filling two fields for login and five fields for registration (five fields for registration is very handy which not make users to go away even they are not that much interested), this is second click and things done

- No page change or next page after login which is more efficient to make user click again on home or desired page rather than just showing your logged in or registered.

- It has forgot password option

- Form has no remember me option


Dropbox.com


This is another approach which is most simplest, at the top right corner of website small form with remember me option, it would be nice if it is Ajax based so there is no need for page refresh and user eye focus would be same.

- It has remember me option

Guerra-creative.com


- On click brings up form and on page, either you click register or login

-  One of actions can be achieve by just filling two fields for login and only four fields for registration

- No page change or next page after login which is more efficient to make user click again on home or desired page rather than just showing your logged in or registered.

- Form has forgot password option

- Form has remember me option

Favrbox.com


- On click brings up form on same page

- Showing register and login form on same position by giving morph and slide type style when switching from one form to another

- One of actions can be achieve by just filling two fields for login and four fields for registration (I  recommend captcha like this form)

- No page change or next page after login

- Form has forgot password option

- Form has remember me option

- It has some footer link also which is nicely placed


Filthyfriends.com


As mentioned before that you may need longer registration forms and these forms need to be very smart, inspirational and eye catching because the form required more details which can make user bored, this form ex plain’s very well and place information nicely also with meaningful headings.

Gingerbreadusa.com


- Showing two forms/actions together in one click, this is first click.

- One of actions can be achieve by just filling two fields for login and five fields for registration

- No page change or next page after login

- It has forgot password option

- Form has no remember me option

Metricly.com


- Showing login form on same position by giving morph and slide type style

Scrapwalls.com



- On click brings up form on same page

- Showing register and login form on same position by just select radio button

- One of actions can be achieve by just filling two fields for login and four fields for registration

- No page change or next page after login

- Form has no forgot password option

- Form has no remember me option

Themify.me


- Showing login form on same position by giving morph and slide type style

Bankofimagination.com


- On click brings up form on same page

- Showing two forms/actions together

- One of actions can be achieve by just filling two fields for login and four fields for registration

- No page change or next page after login

- It has forgot password option

- Form has remember me option

Sonystyle.com


This is most ideal pattern for me because after one click you can see register and login both together

- Showing two forms/actions together in one click, this is first click.

- One of actions can be achieve by just filling two fields for login and 3 fields for registration (this is least registration form fields, and also give some options which you may choose to click or not like privacy policy, remember me, newsletter and description about the fields with link called whats this)

- No page change or next page after login

- Form has forgot password option

- Form has  remember me option

Yummly.com


- On click brings up form on same page

- Showing two forms/actions together

- One of actions can be achieve by just filling two fields for login and four fields for registration

- No page change or next page after login

- It has forgot password option

- Form has no remember me option


I hope this is some how hopeful for readers and if some one has any thing or pattern to add here please message me on our profile.