Creative and functional form design


Most of us spend a whole lot of time redoing our website design over and over again till it is just right. Many times the iteration begins when most of the work on the site is already through but we still start over with a shrug. However, despite all this effort we tend to gloss over the forms on our website which are actually the most important part of it.

Forms are the devices through which we get our website visitors to interact with us, leave personal information about themselves and place orders for our products. Yet when it comes to designing them, we just slap together a few text fields and a submit button and think that the job is done.

By designing forms I'm not just talking about the aesthetics of it, which of course is an important part of it, but also the ease of use and the pull factor:

A few points worth considering:

Customize form elements to the objective at hand. Example: I have seen country select boxes in contest entry forms where, while the contest was open to only countries in Asia, all the countries in the world were displayed. This may not be an annoyance for most but it doesn't say much for detailing.

Lengthy forms while in some cases are necessary can be intimidating and a turn off. To handle this consider breaking down such forms into a set of smaller forms distributed over a couple or more pages. Always verify if the info you are gathering is absolutely necessary and wherever possible do provide select boxes.

Graphic elements like image buttons and images that extend the theme of the site enhance the look and can actually ease the user into filling them.

Using css styles one can customize even form fields and buttons, breaking the stark nature of forms.

Clarity - sometimes the choice of word in the field descriptor may not be the best one and this will result in you collecting wrong, useless or redundant information.

Provide links to examples or demos if it will help the user arrive at a decision (e.g.: product models, color schemes etc)

Try to use the same variable names that you use for the form field labels (even if they are cumbersome) so that if the user is confronted with an alert dialog box (during form validation) informing him about an incorrectly filled field he will easily know which one.

Reiterate and elaborate on the offer if any through text and images on the page where the form is. This will act to dispel any last minute inertia about filling up the form and help clinch the sale.

Mark the required fields/or special form checks clearly so that the user is not surprised with an alert box popping open after finally filling and submitting the form.

Provide clear instructions on what he/she can expect upon submitting the form. If the processing will take awhile inform the user so that the form is not submitted twice or interrupted.

Display links to your privacy policy near your form.

So does your form page take care of these - not sure? Go back and take another look...

Bookmark and Share