In this post i’m going to deal with a simple User Interface concept in web designing. The part i’m going to deal with is Forms. More specifically Login Forms. They are found in almost every other website that you’ll come across. Also, they’re one of the most used elements of the websites that use them. Though i use “Remember me” feature on almost all the websites i use, there are people who don’t use it. For them, the login form needs to be the most usable. I’ll give you some tips on how to improve your login form’s usability. (Note : I’m not a usability expert)

KISS : The Markup

<input type="text" name="username" />
<input type="password" name="password" />
<input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label>
<input type="submit" name="login" value="Login" />

Keep the markup as simple as possible. The above is one of the simplest markups. If you use email address for logging in, keep the input box’s names relevant like “email” “email-address” etc. Sure, names like “my-site-e” “my-site-login-field” will work. But, Google Toolbar and the like will not be able to “AutoFill” the form. This is a huge usability mistake.

Preserve The Form Order

The order of the form elements goes as above :

1. Username/Email address box
2. Password box
3. Remember me checkbox (if available)
4. Login button

Don’t insert other elements like “Forgot password ?” “Resend Activation” “?” links in between these elements. Place them after the Submit button. But, why ? The usual behaviour of users when they encounter a login form is :

1. Enter the username/email address
2. Hit [Tab] and type password
3. Hit [Tab] and hit [Space] to check the Remember me box (if available)
4. Press Enter to login

When you insert other elements in between, they’re selected by hitting tab. So, users are forced to click-focus on the next element, or hit [Tab] repeatedly. This really spoils the usability. Check out Blellow’s login form, which breaks this order. (In fact, this is what triggered me to write this post.)

AutoFocus The First Field

When you reduce the work of the user, you increase the usability. 99% of the users use the login form for logging in. So, it makes sense to automatically place the I-beam in the first input box on the login page. Examples that come to my mind are Google, Digg, Facebook. Click on the login link and the cursor will be already placed in the username field. It can be easily achieved using jQuery. Here’s how :

$(document).ready(function() {
	$("input[type='text']:first", document.forms[0]).focus();
});

The above code will focus on the first text field in the first form on the page. If you’ve some search form or other form before the login form, you’ve to adjust the index of document.forms[n] accordingly.

Hope the post was useful. As i stated previously, I’m not a usability expert. So, if you have some more tips to improve a login-form’s usability, share with us in the comments.

If you’ve been reading GotChance for a while, you’d know that I used to have Justified text alignment on the content of blog posts. I had always thought that it was cool to have the right and left margins set evenly. But I was wrong. I came to know that Justified alignment was difficult to scan, read than a normal left-aligned text.

Another problem with Justified alignment is the "rivers" as you see in the picture to your right. They are some continuous gaps that run down the paragraphs, which make them visually less appealing. Considering all these, I’ve switched over to Left-aligned text.

Coming back to the title of the post, which alignment should you choose for your website ? There is no point arguing over this one. Definitely, left-aligned text is much better than justified text. So, if, by chance, your blog theme has justified text, it is better to remove it. But, How ? I’ll tell you.

Text if often justified using CSS. If you look through your Stylesheet (.css file), you’ll find some like this:

text-align: justify;

Just remove that and the justification is gone. Text will assume the default alignment, that is the left-alignment.

In my last post, I presented 7 examples of how the same theme can be used on different blogs and still be kept unique, just by changing the colors scheme. I also said that, as a series post I’ll be posting about the necessary features in a theme to make it easily "color-variable", as I call it.

These are some very basic tips that you might want to keep in mind if you are creating a theme to be used on multiple blogs. Even if you are not a designer, you might want to make sure that your designer follows these, so that you can use the theme on multiple blogs.

Avoid Inline CSS

Inline CSS is not something invalid. But, avoiding it is a good practice in general web development. In our particular case we have to completely avoid inline CSS so that our stylesheet will be the only file we need to edit to vary its color scheme.

Avoid Excessive Use of Images

Its a good practice to avoid images, when you want to edit your color scheme. Because, it’ll save you from the need to edit your images to reflect your changed color scheme. Whenever there is a possibility to use CSS instead of images, do it.

Make The Images Simple

There are places where CSS can’t fill in. In such cases you’ll need images. When you are forced to use images, keep them simple. To make sure it’s color can be changed, open the image in Photoshop or your favorite image editor and change its HUE (Ctrl + U in Photoshop) to see if it looks good in other colors.

Pick Color Schemes Wisely

Not all colors schemes can be easily varied. If you are using a set of 10 colors in your design, sure it can look great. But, it is not that easy to change the color scheme. So, if you want to keep it simple, it is best to follow "Your Color + White" scheme. That way, there is not much to change.

These are really simple steps to follow if you follow them from right from the beginning of your design process. Make sure its not too late.

There is another post coming up in this series. In that post I’ll deal with how you can create virtually more than 1000 themes using a single design, just by varying the color scheme. And, doesn’t it take even better if I say that the color scheme can be chosen from the admin panel, instead of installing different themes. Stay Tuned.

Series Posts :

1. Using The Same “Unique” Theme On Related Blogs
2. Creating Easily Color-Variable Themes