Tips for Creating Online forms

Usability is central to the successful completion of online forms. Whether applying for insurance, completing tax returns or simply making an online purchase, a poorly designed or confusing form can lead to users abandoning the process. The following are some tips when designing online forms:

Before the user begins...

• Inform the user of any information needed that they may not know off hand e.g. tax numbers, account numbers, bank details, etc.
• Provide an estimate as to how long the process will take and/or number of steps
• Communicate that all information submitted is secure

Filling in the form...

• Clearly indicate mandatory fields (typically highlighted with an ‘*’)
• Avoid long forms; break the form into sensible steps if possible.
• For multi-step forms, indicate where the user is in the process
• Allow users to navigate back in the process without losing data already submitted.
• Provide clear, obvious calls to action e.g. next, previous, submit, cancel, etc.
• Be careful where the scroll line falls (for all key resolutions settings); ensure the user is aware of any fields and call to action below the scroll line.
• Explanatory text should be placed above or before the related field; users rarely read text placed after or below fields in online forms
• For individual elements (e.g. date input), don’t mix dropdowns and text fields
• Provide auto-tabbing where relevant throughout the form
• Allow users to tab between input fields from start to finish
• Avoid irregular form layouts where users may miss fields
• Avoid large blocks of text; task driven users will ignore them!
• Tick boxes and radio buttons should be placed in front of their corresponding text, rather than after
• Red text and the general use of red in the form is best left to highlighting errors

Dealing with errors...

• Adopt an apologetic tone when highlighting errors
• Use plain language to explain the error and what the user needs to do to rectify it
• Highlight fields and/or sections where errors have occurred; the more visual impact the better, ensuring users see where all errors are occurring
• Place error explanations beside the relevant field

After submitting the form ...

• Provide a confirmation screen informing the user that the process is completed
• Summarise important information that the user has input
• Provide a ‘print friendly’ version of the confirmation screen an obvious print button
• Provide actionable button at the end of the process e.g. Back to Homepage

A well designed online form will encourage use, ensure successful completion and maintain a positive perception of your brand.