Forms should be aesthetically pleasing and easy to use in order to make interaction with them a good experience. The following are some guidelines on how these goals can be achieved:
- Related fields should be grouped together and arranged in a logical order, such as by enclosing them in a box or by using the same color, with each group having a meaningful title. The form itself should have a meaningful title.
- Layout should be visually appealing, with ample use of white space and properly aligned fields.
- The size of fields should match or be longer than the size of data to be entered, so that what users enter does not disappear into the left or right edges of the box, making it hard for them to follow what they are entering.
- Only really important questions should be asked; for example, asking for salutation is not always necessary.
- If possible, each field should be validated immediately after it is completed and correction should be requested, if necessary.
- Users should be allowed to enter numbers, such as phone and credit card numbers, in flexible formats, as requiring a strict format can create problems for some users, particularly the elderly.
- Compulsory fields should be clearly marked, such as with an asterisk, which may be in a contrasting color, typically red. However, too many compulsory fields can be discouraging, so fields should not be mandatory unless they are really necessary. Asking for users’ addresses, for example, is likely to discourage them; e-mail is often adequate.
- Keyboard focus should be set to the first field when the form is displayed, as this minimizes total number of clicks. Also, if possible, when a field receives focus, information should be provided on the type of data required for the field.
- It should be possible to change any entry at any point before a form is submitted, and how to submit a form should be clearly indicated.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.