There are many ways to design registration and login forms. Most designers are familiar with all the standard tools. However, if you apply some innovative techniques, forms can be simpler and more efficient.
In this article we want to present you with a few new ideas that you may find useful for your projects. Of course, before you apply any of these techniques you need to make sure that they make sense in concrete cases.
A Simple Registration / Login
The meaning of each form for registration or application is to be completed and sent successfully. However, if the form is too long and too complicated, then the user’s interest to deal with it rapidly go down, which may lead to the user’s giving up altogether. Here are some innovative techniques that will make your forms easier to fill.
Ask For a Username After the Registration is Completed
Registration forms usually require the user to create a username that is unique. But coming up with a username can sometimes take time. Instead of asking the user to enter their username during the actual signup, ask the user for it once the process is complete.
This way you won’t lose customers who are frustrated with long and confusing log ins and you’ll prevent creating of any names that are easy to forget just for the sake of satisfying all required fields in the form.
Ask for Password Insertion Only Once
Most registration forms require the user to type in the password twice. The reason is understandable. Forms mask the password for security reasons, to prevent typing errors and increase the chance of entering the correct two separate entries are necessary.
In practice, this can cause larger errors since the user has to type double. They cannot see the characters entered and thus it gets difficult to know whether you entered the correct password each time.
A more efficient approach would be to ask the user to enter the password only once and set the checkbox which gives the option of (un)masking the code and check whether the entered password was correct.
AutoFill city based on ZIP code
If you require users to enter their address, then consider autofill fields for their city based on ZIP code. Filling in will go faster because the user won’t have to go through all that trouble of manually choosing the city from the list.
The Proposals in the “State” Field
The conventional way would be for users to select a country from the drop down menu. A more efficient way is to use a text box that gives them suggestions. The user only needs to type the first letter of his/her country in order to see the desired country in the suggestion list.
Autofill Data Related to Delivery
If the user buys a product he has to enter payment information and shipping information. In most cases, these data will not match. Therefore, allow them to be copied. You can put a link that says “The same data as for payment”, and when the user clicks on the link data will be overwritten.
- Copying of data on payment address and delivery through jQuery
- Copying data within forms from one field to another through jQuery
Do Not Check the Newsletter Option by Default
Most owners of web sites keep newsletter checkbox checked by default, hoping that in such a way they will get more newsletter users. Chances are it might work, but the application is meaningless if the user is logged just because he/she overlooked that option. Sooner or later they will unsubscribe as they weren’t interested in that option in the first place. Forcing users to sign up will not help in the long run.
A more efficient approach is to make sure that the user wants to sign up for the newsletter by giving them a piece of the same. This way they will know what they’re missing if they don’t apply. In addition, you will be more peaceful because you’ll know they are actually interested in the content you are offering them.
Fight Spam Without Using CAPTCHA Plugins
If you get a lot of SPAM then it is probably necessary to rely on CAPTCHA. What is not necessary, however, is to have CAPTCHA discourage users. Standard procedure is to have CAPTCHA ask the user to retype some a bit distorted letters visible in the image. But, research has shown that this approach kills conversions.
A simpler approach that will not affect conversions is to use hidden fields that are mandatory and are generated through JavaScript. SPAM bots cannot fill these fields because they cannot interact with JavaScript objects.
Besides, apart from this approach you can always rely on Honeypot Captcha. You are given the option to create an empty field and hide it through CSS for it not to be visible for users, but it will still be visible for bots. When form submitting is done, check whether this field is empty or not. If not empty it is a SPAM you are dealing with and you can ignore that entry altogether
A Much Simpler Login
The purpose of each login form is for the user to successfully log in into their account. Here are a few techniques that will help make this process more efficient.
Allow Login With Email Address
It is always easier to remember an email address rather than a username. People find it easier to remember their email address since they use it on daily basis. Allow users to log in with their email address, but leave the option of logging in with a username. Flexibility can save time and headaches about restoring a username that has been forgotten.
Let Users Login Without Having to Leave the Page
Logging in to a site is a very common request. Users will require to be able to log in from any point on your site. As soon as they do it, re-direct them onto the page they had previously been on. This will speed up logging and users will soon get back to what they were previously doing.
There are several ways to do this: drop-down forms or pop-up windows.
The drop-down form will open without forcing the user to go from the side. It occupies only a part of the side which makes it a fast and light option.
- Simple and efficient jQuery login form
- jQuery Drop Down AJAX Sign In Form
Pop-up or modal window also keeps users on the current page, or opens in the middle of the window and focuses on the user log-in form. This option provides space to add some additional information in the form.
- How to implement a login form in jQuery modal box
- A simple jQuery modal window tutorial
Auto-focus on the First Text Field
When the user sees the login form he will already be ready to log in. Make the process more efficient so that the cursor is automatically set to the first input field. This significantly shortens the time needed to get to the fields and to click. The user can keep their hands on the keyboard and immediately start typing. Auto-focus should tick the box so users know they can start typing.
Allow the User to Remove Code Mask
This option has already been mentioned at registration section, but it is equally important with logging. Since the user does not see the characters that can be entered, it is very easy to make a mistake. If the entry is rejected the user will have to re-try typing in the correct password all until they finally get it right.
The problem is that users do not know which characters are wrong so they cannot correct the error. This leads to increased workload and slows the users down. Avoid this problem by putting a checkbox which enables the user to take off the mask off the codes and check what he entered before clicking the button.
Use a Question Mark as a Link for Obtaining the Code
You should give users a clear link which will reach their codes. Instead of using the standard “Forgot Your Password?” consider putting a question mark next to the input code field. This won’t take up much space, nor lose itself within other links.
Given that question mark is a universal symbol for help, users won’t even have to think twice where to click when they realize they’d forgotten their password.
Create the “Submit” Button in Width of the Input Field
Login button is not just for taking action, but it’s also there to tell the user what action will be performed by clicking on that button. A little button will have little impact and the user will be unsure at login.
A wide button is definitely a better option, as the user will hardly miss it. The name on the button is also better visible so the user should be clear on that fact which action he is undertaking by clicking on it.
Allow User to Log in Using Facebook, Twitter or OpenID
Nowadays almost everybody has a Facebook, Twitter or OpenID account, so allowing users to log in using these tasks brings certain benefits. They can use your site immediately without going through the registration process. Also, they don’t have to think about different usernames and passwords on different sites.
You can go even further and use Facebook connect and fill in the data that your users enter. In the example below, the site Friend.ly’s is a Facebook application, and all a user needs to do before using the service is to click “Register”.
User data is loaded automatically, but that can lead to certain matters of privacy violation, so it may be good to think about this before you go down that road.
Conclusion
Your forms, regardless of whether they are related to registration or login, aren’t there to make your user’s life difficult. Filling out forms is nobody’s idea of fun, that’s for sure. These innovative techniques will make your forms simple and efficient so that your users can register quickly, log in and enjoy the content that they are offered.
0 Comments