I freely admit that I do not derive bountiful amounts of pleasure from designing forms. Forms are a relatively dry subject. They rarely drive visitors to a site. Forms do not empower the user to take action, but they do dissuade the user from inaction. No one ever goes on and on about how much they enjoyed filling out a form. The vast majority of people recognize when forms are frustrating; the other handful may notice when forms are not frustrating. Forms are the offensive linemen of web design – amazingly crucial to the success of the collective, rarely given credit and only concentrated upon when they fail. I used to give very little thought to the design process of form layouts. I would concentrate instead on the “important” pages that I believed would garner the most attention. My point of view has completed changed. Forms facilitate users to make purchases, register into communities, exchange information with organizations, etc. These functions are the basic elements of a majority of websites – money, participation, information.

Forms as a Gateway to Website Goals

As stated previously, people usually do not enjoy filling out forms. Forms act as a conduit for the main attraction of the site. The quicker the user can complete the forms and get to something they would rather be doing, the better. The more obstacles we put in front of the user, the more likely we are to cause confusion and ultimately failure of correct form completion. Since much of what we do on the internet is to help drive sales, increase user participation/registration and/or gain valuable information about the user – form design may be one of the most important facets of our work to the actual goal of the project. I assume that the vast majority of us enjoy layout design much more, however, the paradox is that the execution of form design may have one of the largest single impacts on the success of a site.

Spend the Time on Clear Writing

There are a myriad of examples of specific HTML tags that can aid in the usability of forms. However, we all know that semantics alone will not ensure a highly usable form. It truly is amazing how much easier a process can become for a user when quality time was spent on well-executed copywriting. Simple things such as precise instructions, helpful labels, and clear error messages do quite a bit to aid in the user experience. If space is a concern, consider putting instructions into help tooltips for compact, yet easily obtainable, information. We have to remember that just because we understand how the form works, that does not mean that the user does.

CNN

CNN’s registration form does a good job of spelling out what each field is and what sort of information is needed in the right-hand column. Sure, this sort of form is fairly common, but small aids like this can help a novice get through the form with much less frustration.

Less is More (As Usual)

One of the easiest ways to aid user experience with forms is to keep the necessary form fields to a minimum. This is also one of the hardest things to convince clients of. We are all aware of how much organizations lust for personal information nowadays as a means to collect vital marketing demographics. The problem with that train of thought, however, is that there is very little control to ensure the accuracy of that data. In addition, the more daunting the form appears, the less likely the user will even consider filling it out. Designers across the world (including myself) have few good things to say about the design of MySpace. The irony however is how clear and simple the signup method is on the site.

MySpace

Visually, this form is not going to win any awards. Yet, from a usability standpoint, this form does not become an obstacle for the user’s ability to be in the MySpace community in no time. I have no doubt this is a significant reason why there are so many registered MySpace users. The commitment of time to fill out this form is fairly minimal, therefore people are willing to go through the process. There are 13 fields to fill out, three of which have a default value that will pertain to the vast majority of registering users – making a total of 10 fields for many users. Additionally, the form takes up a space of 430 by 500 pixels, meaning little to no scrolling. Compare this to Friendster, a competitor of MySpace, where there are 15 form fields, none of which have default values. In addition, the form takes up roughly 550 by 700 pixels. The difference in experience from one registration model to the other may have played a major role in the dominance of one website and the obscurity of another.

Kill Two Birds With One Stone, Not Three Stones

Another example of strong form design is the Amazon login/signup form. This design idea may be one of my all-time favorite UI design ideas I have seen on the internet. It does not appear to be anything special at first glance until you really start analyzing what it does, the number of clicks it takes to accomplish an action, and the space it takes to perform it.

Amazon

All from a minuscule 400 by 300 pixel space, users can both log in or begin the registration process for the site. In addition, it only takes 3 clicks to either log in in or begin registering. If you are logging in, you click the email field, then go to the password field (since the ‘yes’ radio button is selected by default) and then click the submit to finish. If you are registering, you type in your email, click the ‘no’ radio button and click submit. Lastly, subtle wording such as ‘Sign in using our secure server’ helps re-assure all those grannies that someone isn’t going to steal their information by filling out the form. Lastly, refraining from asking for a username makes the registration one step faster. The simplicity and power that this login/signup form has is amazing and something I use as a model of successful form design.

Worth the Time

I can speak for myself when I say that I do not spend enough time on the design of web forms. It is so easy for eyes to glaze over when speaking about the importance of web form design. In addition, clients are many times more interested in the “wow-factor” facets of their website. Nonetheless, sexy or not, strong form design and usability many times represents the most direct route towards a website achieving its end goals. We may not all like it, but a little improvement in form design can go a long way in the overall success of a website.

Additional Resources