in ,

10 Useful tips to create Forms which enhances the User Experience


Before becoming a member of your site, a user has to go through the process of filling out the form. A form is like a gateway one needs to pass to become part of the online community. Most sites fail to realize this and end up making this formality a complicated user experience. Inadvertently, users take more than required time in completing these forms while facing irksome disruptions. Naturally, this experience makes a user disinclined to move ahead and the site loses its potential member which is not good for its business.
A form should not impede membership, on the contrary it should facilitate it. A form reflects the kind of customer service that will be provided and gives an impression of how the website runs its affairs. If the user is disappointed at the first stage, revision of the form becomes absolutely necessary.
Following are the tips that can easily enhance the user experience once implemented.


Layout refers to how the information or questions are presented in a form. A form’s says a lot about the website owner’s designing skills and organization capabilities. A bad layout will impede form usability, while a good one saves time, and makes the application process easy and user friendly.
Left-alignment of labels consumes more time and users find it difficult to scan the input box to the corresponding label. It is recommended to use this type of alignment when the intention is to slow down the readers so that they can carefully insert the data and avoid incorrect information for e.g. filling out credit card information. Since right alignment is closer to the field, it permits users to fill in the data quickly. Top-alignment also serves this purpose and leads to a better positioning.
Another point that hampers a good user experience is when the form is divided into two columns. This should be avoided at all times because a user is likely to overlook the information on the other column and is prompted by an error message.

[divider]How the users can input the data[divider]

Instead of asking users to type in long messages give them the option to select options from a series of input entries such as radio-buttons, check-boxes, or drop-down menus. This promotes a better presentation and reduces time. Users mostly prefer the availability of such options since it eliminates a lot of thinking.

[divider]Optional information/ layout[divider]

Start off with the basic contact information (name, e-mail, number) which the user puts in as a reflex, speeding the process.
A lot of sites make the mistake of asking too much information which is not even related to the service that they are providing. For example, you don’t need the user’s physical address when they are creating an account. Remember, the shorter the form, the better it is; otherwise the users would close their window in between when they are asked to answer every single detail. Ask only what you need to know. Most site owners add too many questions for marketing purposes. In that case, the user should be informed of the information that is required and the one which is optional. Most forms use asterisk to clear the distinction.

[divider]Immediate sign-in[divider]

Most sites ask the new members to verify their membership through their e-mail. It only delays them from using your site and adds to annoyance by being obedient to unnecessary formalities. Similarly, immediately after creating their accounts, users have to type their username and password before they can view the site. An enhanced user experience would directly log in the member and permit site surfing, rather than obstruct it.

[divider]Mobile-user experience[divider]

In spite of a sharp increase in mobile-internet browsers, form accessibility from mobile phones still remains a problem unattended. Even the background work is quite simple, most developers do not optimize mobile experience of filling out the form.
Using mobile to for this procedure is already a difficult because of the size of the screen, reduced functionality of some options, etc. By adopting some techniques, this experience can be turned around. Focus the field once the user taps on it for a better view and switch to digital pad from a keyboard at appropriate fields, and make sure the input entries such as radio –buttons and check-boxes work on cell phones to avoid any trouble.


Being constantly prompted by an error message makes the entire experience unpleasant. It puts the form designers at fault because they did not put in proper guidelines to prevent such errors. Tackling these errors are frustrating, and leaves the user scratching his head to figure out the correct way to put in the data.
Minimize errors by showing an example that follows the correct format of data entry. Else, user would be punching in the data repeatedly without any clue of what he’s doing wrong. Facilitate user-friendly experience by immediately notifying the user when the field has been filled with invalid entry. It removes the hassle of filling other fields’ information all over again after an error is encountered. What’s even better, don’t clear out existing fields due to an error.

[divider]Creative forms[divider]

Not all forms have to be boring. You can convert this tedious requirement into a fun little activity by using different font style, creative punch lines, and colorful designs. This is suitable to more creative related to art, writing or social media. This way the user is engaged and won’t mind filling in the details. Following are good examples of how innovative forms whilst still maintain the need for precision:

[divider]CAPTHCA-human verification code[divider]

CAPTCHA or commonly known as the human verification code is found at the end of most online forms. It is included to make sure that the form is submitted by a human and not an automated submission. It is an annoying requirement, especially when the code entered is not correct. Most of the sites don’t need this code, and those who do can use alternatives such as asking to put in a word, simple mathematics question, or a checkbox for “I’m a human”.


Make obvious distinction in terms of size, color, or text between SUBMISSION option and other options such as RESET, CANCEL to prevent the user from clicking the wrong button.
Once the form is submitted, display a confirmation message followed by welcoming the new member to your group. As a member, the user expects a cordial relation from your end. Give a brief note on how you value their entrance as a new member, and that you will ensure their experience fulfils their expectations.


Written by Syed Ali

I'm a self taught web designer, experienced freelancer and an addicted blogger. Always remains ardent to get acquainted with new technology at the first opportunity.

Leave a Reply

Your email address will not be published. Required fields are marked *

30 Cheap-Yet-Good Web Templates

15 Top Websites to Learn AngularJS