Doteasy Technology: Using Webforms to Your Advantage
Using Webforms to Your Advantage
You might be wondering why a whole blog entry is dedicated to talking about webform designs. Afterall, people just read what they need to enter, fill in the form, and off they go...or is it?
A webform is so much more than just a form. For an e-commerce site, it enables purchasing by users, thus, maximizing sales. For a community site, the ease of filling out the form may make a difference in attracting more members or driving them away. It also increases user participation and allows you to collect information that may be useful and beneficial to your website.
Ideally speaking, a webform should require minimal efforts in completing. Filling out forms is not a fun task for most people, so make it clear what information you want. You should also provide smart defaults and suggestions for common inputs, so that you will end up with consistency in your data. Another thing is to highlight a path to completion. This is the bar that tells you how many steps you have to do before you are done. People want to find out how far they've gone and if they can see their progress, they would be less likely to abandon the task.
One of the more troublesome issues with building a form is what to do with the form labels, which are the words or phrases that tell you what to put into the input field.
There are three common ways to go about this (please click to see enlarged image):
A webform is so much more than just a form. For an e-commerce site, it enables purchasing by users, thus, maximizing sales. For a community site, the ease of filling out the form may make a difference in attracting more members or driving them away. It also increases user participation and allows you to collect information that may be useful and beneficial to your website.
Ideally speaking, a webform should require minimal efforts in completing. Filling out forms is not a fun task for most people, so make it clear what information you want. You should also provide smart defaults and suggestions for common inputs, so that you will end up with consistency in your data. Another thing is to highlight a path to completion. This is the bar that tells you how many steps you have to do before you are done. People want to find out how far they've gone and if they can see their progress, they would be less likely to abandon the task.
One of the more troublesome issues with building a form is what to do with the form labels, which are the words or phrases that tell you what to put into the input field.
There are three common ways to go about this (please click to see enlarged image):
Top Aligned: The labels are put on top of the input fields (see above). This method is perfect for when the information being collected is familiar (ie. Name, address, etc) and tend to take the least amount of time to complete because it requires a single eye fixation to see both input label and field. It is also flexible enough to accommodate localization (adaptation of languages) and longer labels or input fields. However, it does require more vertical space and spacing and contrast are crucial to enable efficient scanning of the form.
Right Aligned: In contrast to the previous option, this method is a bit slower to fill out, but needs less vertical real estate. This alignment is also difficult for users to scan the set of labels effectively as a left rag text impedes readability. While there's a clear association between label and field, localizing applications can be an issue as some languages, such as French and German, can sometimes be twice as long as English.
Left Aligned: Out of the three labelling methods, this takes the longest for users to complete due to the spacing between the labels and fields, which require a number of eye fixations. However, this is ideal for forms that require a lot of optional or unfamiliar fields because users can easily scan the list of labels. At the same time, users take a longer time to guide their eyes from the labels to the fields, thus, giving them more time to consider each of their input before they fill in the information.