The time when the sole responsibility of a designer was to create pleasing graphics for the internet has long been gone. Today as a web designer you will have to consider other properties of user interaction and coding. User experience design is surely the most important topic to cover and it is especially true designing web forms.

At no moment of time you should forget the real reason behind the creation of the form. Your aim is to provide the simplest possible path for your users to move from filling out input forms to hitting the submit button. Although most of the designers pay far more attention towards making their forms more appealing to the user’s eye, it is hardly important. What’s really important is the user experience, in this article we would like to focus on the user interaction and how each user is experiencing your forms. We will discuss the techniques that can streamline the process which converts to less frustration in your audience.

Keep it Simple!

You will hear many of the users complaining about signup forms that require too much information. If your goal is to increase the user registration then you should keep the form as simple as possible. This is also true for the newsletter signups and other similar types of input data. Of course the minimum number of fields will depend upon your objectives. If you are designing a registration form then you may ask for a username, e-mail address and two password fields. Such a form can provide you with reasonable information and a user looking to signup will be expecting these fields.

But you can make it even more simple, consider the example of the default wordpress form where all the visitors are required to provide is a single username and an e-mail address. The system automatically generates a password and sends an email to the given address. This will reduce the size of your form and will also keep the spammers at bay.

Form Should Behave Naturally

The thing that nearly all the users hate the most is unexpected and unnatural page activity. You should make sure that the page behave in a natural manner and reduce any JavaScript extras, popup guides and Ajax validation are key components. A good form is the one that is not split into multiple columns and spanned across the page.

One mistake i run into often is the wrong usage of tabindex property of HTML. The property itself is absolutely wonderful from the usability point of view as visitors can fill out forms even if they don’t have a mouse. But when you have these numbered in a wrong order or only fill out a few input fields then the whole system is thrown off. This is not only true with the signup forms but i have found other types of inputs and especially the online shopping carts.

Security Should Always be the Main Concern

Security is not only important for the forms which require customer’s credit card numbers but is even important for the ones that capture the simple e-mail addresses. Keep in mind that visitors are trusting your website and backend code to process each form properly and store date in a secure database and you should let them down.

An SSL certificate is always recommended for your entire domain wherever it is possible. This does not only makes the signup process protected but the entire viewing session gets protected via https. Having an SSL certificate is not a requirement for every site but if you want to make your users feel much safer and want to build their trust then you should opt for it.

Right Size of Inputs

Many people provide different arguments about the right size of the web forms. Most of the CMS brands like Joomla, Drupal and vbulletin use smaller text sizes like 10x-12px fonts with very little padding.

But if you take a look at some of the world’s most visited websites they tend to provide their users with a spacious inputs. Take the twitter’s registration form for example, it is oversized so you can’t miss a beat. They have used extra white space that gives more prominence to the input fields. If you drop the color to a lighter grey then you can easily distinguish between user added text and the field presets.

Conclusion

Web forms deserve just as much attention from a designer than any other element of the layout. I hope these user experience guidelines can help you in building better web forms. The process of handling backend data is a tricky business even if you are doing in simpler languages  like PHP but with a little practice you can find a system that works for you.