Blog

Website usability guidelines - forms

About forms

Forms are a very important part of the page. In general, a form on a web page allows your user to enter data that is sent to a server for processing, for instance to contact, register, provide shipping or credit card data etc. Usually, it consists of a combination of interaction elements like input text fields, selection fields, radio buttons and checkboxes.

Tips to improve forms usability

Tip #1

If you don’t want to annoy your users filling in a form on your website, you should clearly mark the required fields, validate the input values as soon as possible, highlight problems and explain what was wrong. How can you achieve that?

Form labels, required fields, validationUse client validation on top of the server validation. Thanks to that, the user will be informed while filling in the form that something is wrong. When something is indeed wrong - clearly show where and what is the problem by highlighting this field or label and adding a meaningful explanation.

 

 

Input data formatting and masksTo reduce the number of mistakes, explain what type of data is required. You can add formatting examples or even use a mask.

 

Elements grouped in logical way

Tip #2

Consistency. Keep all fields’ labels at the same place (all above, or all left, closely to the field), so the user is sure where to provide the data. Keep the same placement and coloring of cancel and submit buttons through the site. Make sure that a submit button is easily distinguishable. You don’t want users to miss-click cancel/submit buttons.

Tip #3

Group the elements in a logical way. If you are asking for contact details, ask for all the data in the same block of input fields.

 
 
 

 

Tip #4

Allow your users to navigate using only their keyboard, not every user prefers to use his mouse to jump around fields.

Form navigation

Moreover, it simply might be faster to use the keyboard navigation while filling in data. Make sure that using the TAB button will allow them to fill in data in a logical order and the ENTER button will allow them to submit the form.

 

 

 

 

Ask for confirmationTip #5

Prevent doing things by an accident.

The user tries to close his browser or clicks on the back button while having entered but not submitted data? Let him know what is going to happen and ask for a confirmation.

Disabled submit button

 

How long does it take to submit your form? Consider disabling the submit button to prevent multi-clicking and multi-submitting your form.

 

Tip #6

Final confirmationFinally, when the user filled everything in correctly and submitted the data – confirm that. Make sure that user knows that the process ended up successfully. There are several ways to do that. It can be a a summary page, a pop-up window etc.

 

 

 

Are you thinking about having your own website? In this serie of guidelines we will give you an overview of all the essentials when setting up a new website.

Read also: our usability guidelines about  standard websites elements and navigation

Technology Technology

Op 15/06/2015 door Lukasz

blog comments powered by Disqus