A perfect log in form or page should have various aspects and they should be properly aligned too. You can also download CCS3 login form for free.
Login forms are simple by the element count. IN fact no other forms can be simpler compared to the login forms. But some important elements are often forgotten about, and those are really important for your users and potential new users.
Let discuss the necessary elements for a login page.
The Title
Each login page should have a clear title so people know where they are. Although most visitors come to a log in page intentionally but when otherwise they will have a perfect idea of where they are. The login page title needs to define what the form is all about.
Non-members
If somehow a new user lands to your login page, you should ideally guide them to the registration page for new users. It will save them time, the effort to manually search for the registration page and also earn you more new users.
Input Fields & Labels
Mostly login forms are comprised of two fields, the username and the password. These boxes should be clearly labeled and readable so there is no misunderstanding about these. Many websites miss out the clickable labels. The FOR attribute should be used on the labels to connect them to the proper input field. It wouldn’t take even a minute for the coder to do it and yet, it can make a great change in usability.
Forgot Password Link
This link is very important as well. People nowadays have lots of accounts and for each of them they need to memorize a password. Thus it is probable and very possible that they forget the password on your site. Placing “I forgot my password” link just near the password field will help them greatly.
Additionally, people might forget the username as well. “I forgot my username and/or password” link should be there to help these users.
Submit Button
The most prominent thing on the form is this button. This should look like a button and moreover you should use colours to create a boxed shape and make it contrasting enough to make it noticeable in the first glance.
Remember Me
This feature will help the regular users a lot. If you can incorporate this feature, please do so and your regular visitors will surely appreciate the gesture.
Creating a box around the checkbox and the text of the same label is extremely important, as per our belief. Generally checkboxes are hard to click due to the small area they capture. However when the complete text goes inside it, they occupy a rather large area and it’s easy to click on those.
Link to Home Page
There can, optionally, be a link to your home page. If the user doesn’t want to login but surf the site, he should be able to go there directly and easily.
Javascript based validations are important as per our idea but they should never be your only option for validation. They give instantly filtered valid data, allow the users to immediately rectify the information they have entered and they make sure that the final valid data is sent to the server immediately.
It must be realized that the example of a perfect log in page might vary from person to person. The cultural differences can come in to play. The location of the boxes might change as well. For example, think of the Arabic languages which are written from right to left. The alignment of all the elements should do a mirror shift. The elements should come from left to right and vice versa.
Many people also think the submit button should ideally be just under the password field. However many people think below the password field should be the Remember Me box and under that should be the Submit or Login button.
The underlying fact is that the elements should be there, in an organized way so that the user can login easily. If they are facing any issues in logging in, they should be facilitated and guided towards the resolution. If they are not willing to log in, they should be properly escorted back as well.
About the Author: Ashish Kumar is a professional Web Development Strategist and has been researching on newer ways of how to reach results in lesser time and minimal hassles. He is associated with IT Chimes and loves to write stuffs on Web Development
