Designing Login Forms

Since my last web design article was so popular, I decided to write a similar one.

This time we'll start with an ordinary looking login form. The usability experts reading this will immediately notice a few design flaws.

For small forms like this one, field labels should be aligned to the right to minimize the distance your user's eyes must travel. I've also moved the link and submit button directly under the input boxes.

I've encapsulated the form in a fieldset (<fieldset></fieldset>) and replaced the title with a legend (<legend></legend>). This isn't normally nessesary but it helped define the form within all the surrounding white space.

Styling the legend...

I've added a yellow background and border to the fieldset and given it some rounded corners. I also moved the submit button to the bottom right so less eye movement is required by the user.