Web forms
should provide a high level of clarity for users who
should be able to efficiently provide the required input and with the maximum ease possible. Following is a list of the
guidelines for web forms:
- All form fields must have clear labels beside them to specify the purpose of each field.
- Cursors must be positioned appropriately especially in Arabic input fields.
- Focus should be initially set to the first input field when a user accesses a Form.
- Some fields should have a sample of the required input whenever this input is required in a specific format
- Each form field must provide enough space for the predicted user input (for instance, a field for the “Full Name” cannot be 10 characters in width but rather should accommodate more characters as most full names will be more than 10 characters).
- All required fields must be clearly defined on the form so that the user can easily recognize the mandatory data he has to provide.
- Any form must have an introductory text (at least a sentence) that explains what the purpose of the form is.
- All forms must have strong validation rules that provide the users with clear information on any input violation (like invalid email address, or invalid date etc.). Validation messages must be clear enough to have the user fully understand what needs to be fixed in his input data.
- Comprehensive forms should be split into logically related groups. In the same way that texts are easier to read when they are divided into paragraphs, comprehensive forms are more clear and easier to understand if they are divided into several sections. The different parts can either be presented in different sections on the same page or be distributed over several separate pages. An instance of this type of grouping is “Postal address” with fields for Address/Box number, Postcode and City.
- Form fields that require the user to input a value from a predefined set of values must be presented using the proper controls like radio buttons, drop down lists, check boxes etc.
Example:
A field where the user is required to select his country should be a drop down list which presents all the countries and allows selecting only one.
A field where a user should select his gender should be a radio button field with the 2 “male” and “female” options and allows the user to only select 1 of them.
- Forms that require a challenge-response test may use “Captcha” images that act as an additional level of security in the face of automated scripts that hackers write against online forms.
- The “Captcha” functionality should be easy to use and should provide a way to regenerate the image. See section Forms
- Any form that includes sensitive data (like online payment forms) must use SSL (https) protocol in order to have all data being communicated encrypted.
- All forms must have a clear confirmation message that indicates the success (or failure) of the operation.
- All forms should contain a message informing the user about the next step to take to get his task done.
- All form fields should be well aligned with each other to provide a consistent experience to the users.
- Clear buttons should be present on the form to indicate to the user the possible actions that he can take on that form.
Example:
A form for data entry should have a save/submit button and a Reset/Clear button to clear all the filled in fields.
A form that acts as a step of a multi-step process should have a button to move to the next step, a button to go back to the previous step and a button to cancel the process.