Usability in Forms: 8 Simple Guidelines

Face it.. if you are spending 70% of your Internet time, reading content on web pages, you are probably spending the rest 30% of your time filling up forms on the Internet.  It could be from a simple Login page, a registration page, a comments box on a blog or a discussion forum or that one big search box on the Google homepage, through which you usually start your Internet session with. At the end of the day they are all nothing but forms.. and Usability in forms is something which probably is ignored by most developers, and which can be an frustrating experience for your users.

Here are some points to ponder upon while building forms

#1 User name of email for login
Should we ask our users to enter a username or email with password to login.. a very insignificant thing.. and usually most of the sites are divided 50-50 when it comes to using a Username or email to login. But just think of it.. usernames tend to become very difficult to remember when you have a different username for each site. Also trying to have a common\ username across multiple sites isn’t quite possible because while a username is available on one site. it may not be available on the other and you finally end up adding some numbers or your date of birth to the username you originally wanted.. An email on the other hand is obviously unique and since my email  IDs are few and something that I can easily remember it helps a lot while trying to log into your site.

#2 Confirm Passwords
Ok now do you really need that confirm password thingi..how many times has that confirm password box prevented you from putting in a wrong  password. The most common error while putting in passwords is leaving the capslock on and this box doesn’t really help with that.
Moreover you still have the ‘forgot password’ thing to get back your password even if you put it wrong. Well I could live with the additional text box or confirm password. but lately I’ve started seeing a confirm email address along with the confirm password box.. Wow.. I thought we were trying to make things simple by keeping lesser number of fields for the user to type in.. I guess the day isn’t far when we’d have something like
Name: _________
Confirm Name: __________________

Email:_____________________
Confirm Email:__________________

Address : ____________________
Confirm Address_________________

Jeez please do trust your users in having some bit of intelligence and sanity.

#3 Country State:
OK from the list of countries I select Canada, when I go to state… why on earth are you showing me those 50 odd US states and right down after that the Canadian states for me to select from.
Why wouldn’t you use a simple AJAX script to display only the Canadian sates based on the Country I selected.. saves the user a lot of time

#4 Username Availability  check using AJAX
In the event you do really have to use a username as login.. try and use AJAX again to check if that username is available.. Don’t make the user fill the whole form submit it and only then be told that the username is already taken.
Here is a small tutorial I wrote on how to use AJAX with CakePHP to get this done. https://vincirufus.wordpress.com/2007/12/09/user-availability-check-using-ajax/

#5 The Reset Button

Ok have to admit.. there is a little bit of lemmings inside all of us. We saw the Reset Button being used ages back on some form and we continued to put it into our forms. Give me an honest answer how many times did you use the Reset button in your Internet life, if you didnt use it why give it to your users. Also imagine the frustration when you fill up a really long form and the mouse slipped and you hit the Reset button which is always so close to the Submit.  Why would some one use the Reset Button in the first place.. I either hit the browser Refresh or only change the data in the fields I want to change…

#6 Submit on Enter key:
This is a really small thing.. but it drives me crazy when on some sites.. I fill up the whole form and hit enter only to see the page refresh and come back with all blank text boxes.. why because the programmers didn’t really write the code to post the form on the Key press event. I’ve seen this mostly when people want to use images as buttons and simply write the code for an onClick event and not the key press event. Making sure your form submits on the Enter key is a huge relief to many of your users.

#7 Tab Indexes:
Usually this doesn’t come into play if you have the fields in a single column. but if you have your form designed in two columns or from my experience forms designed in Flash.. tab indexes play a vital role.. Imagine your users’ frustration as the cursor jumps around instead of going through a sequence while hitting tabs

#8  Save form data:
Yeah again a simple thing which I guess gets implemented in asp.net applications automatically thanks to ViewState.. suppose the user fills up a form and then after submitting comes back to it for various reasons.. please make sure you capture and display his/her filled in data when they return to the form. You dont’ really want to agonize your users by showing them a blank form each time they return due to some error!!