The Anatomy of a Perfect Login Page
In this article I am going to analyze what a perfect login page or login form should have. Also you are able to download the pure CSS3 login form for free.
Login forms are very simple in terms of the required elements. When it comes to forms, it doesn’t get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.
Let’s take a look at what I think are necessary elements.
Take a look at the login page or
Download the demo
1. The title
I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.
2. Non members
Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.
3. Input fields and labels
Although login forms usually contain two input fields, it is important that they’re styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels “connect” them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.
4. Forgot password link
This is also very important link. Many users have numerous accounts and passwords and they often can’t remember which one they used on your site. The best placement for this link is near the password field itself.
5. Submit button
This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.
6. Remember me
Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.
7. Back link
If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.
Validation
Although the form shouldn’t rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.
Demo
I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you’ll enjoy it!
