WEB101 - Web Form Design


Designing online forms won’t be the most exciting thing you ever do on your website but getting it right will make the difference between a visitor completing the form or opting out.

Picture this scenario – you’re filling out a form (a long form at that), you get to the end and hit submit, the form displays red fields ‘ go back and complete’ – you think to yourself "it would have helped and saved me some time if it indicated which fields were mandatory in the first place…." so you review the fields and are now ready to submit (again)….but now the security code captcha is now asking you to re-enter the code – code containing obscured characters, so difficult to read or are too small to view clearly on screen that your stress levels are rising steadily…. you finally give up and don’t proceed with your subscription/enquiry.

To avoid form abandonment of the above kind here are 5 points to apply to your own forms :


1.
Print vs. online form design - Form design for print is different and should not be duplicated for online. Paper forms are traditionally designed to maximise space – fields are extended to fill the page. Web forms shouldn’t follow the same convention. It’s recommended that field length be different sizes depending on the length of expected input.

2.
Top vs. right align fields – The alignment of field labels is important and the best form labels are top-aligned so they’re in close proximity to the field (reducing the distance the eye has to jump to). The next best layout is right aligned and left aligned is not recommended.


3.
Use Labels - Provide labels (or hints) within the field itself describing exactly what is required - 'name' could mean first, last or full name.

4.
Add asterisks to mandatory fields - Be clear if a field is mandatory with an asterisk or another indicator - make it red so it really stands out and remember to add a foot note stating its meaning.

5.
Always confirm successful submissions - Create a 'thank you - your submission has been successful' landing page that confirm to a user that the form have been submitted successfully.