Web Design Usability Tips for Online Forms

Generating a healthy number of hits on your website is a great start on the path to success – however, in order to extract full value from your growing audience, your website will need to include an online form. Online forms are one of the most important parts of your website: allowing for purchases to be finalised, subscriptions confirmed, and contact details saved – but can also be the most overlooked. Filling in an online is often the last thing a customer will do on your website, and is usually the least interesting part. This makes it extremely important that the form be accessible, user friendly, and engaging.

The tips listed below will help you identify the key features and tools that define the best online forms.

 

Clarity

Regardless of the complexity of the information you are requesting from a customer, clarity is integral to the success and functionality of your online form. You need to ensure that the information required is made obvious: a customer will not want to spend time asking themselves what data you require. Ensure that any more complicated data entry requests include a sub-heading explaining further the requirements. Keep this a concise as possible however, so as not to put the user off.

 

software testing news

Presentation

The successful submission of your online form will usually conclude a user’s experience on your website, and should be designed so as to encourage and streamline submission of their data. Presentation in this regards, is absolutely key. A badly designed online form can be intimidating to look at and discourage people from continuing, but a well presented one can make user experience almost effortless. Make sure that a good amount of spacing is used between subject titles and submission fields: don’t crowd the page. If your form is longer and requires either more complex or a greater volume of information than more basic online forms: try to break the form down into smaller, more manageable chunks. An extensive list of data fields can be intimidating, and a chore to fill out: but by breaking the form down into smaller pieces, you immediately make the process look a lot more manageable.

 

“In some cases it may be worth breaking this down further into steps that are visibly ‘completed’ by the user. If you need multiple sections of data to be submitted, let the user see the progress they’ve made, and how far away they are from finishing”, – explains Jennifer Mahoney, a UX blogger at Writemyx and AcademicBrits. Ensure that similar chains of data (e.g. addresses, demographics) are grouped together so as the users data entry flows organically. Imagine yourself inputting this data – what question might you expect to be asked next?

 

Ease of Use

Getting your online form presented in the best possible manner is a great start, however the most effective and functional online forms also excel in streamlining the date entry itself. Ask yourself what you can do to simplify the amount of thought and effort the user will have to go to to complete the form. In cases where a submission field can only be comprised within range of a certain set of data (e.g. Sex, or Employment Status) –  let the user choose from a drop-down list of choices.

When the information required is subjective, the drop down bar can also be a useful tool in order to guide the users thoughts. Another effective way in which to improve the functionality of your online form is by enlisting the help of customised spacing. Customised spacing allows for data to be spaced out, divided and/or formatted whilst being inputted, which is particularly useful when the user is trying to fill out long strings of information.

Robert King, a Web Design Manager at Originwritings and 1Day2write comments: “By breaking down the information needed to be submitted, and in some cases (e.g. phone numbers) formatting it in the correct manner – you absolve the user from worrying about the intricacies of their data entry, and give them greater confidence in the accuracy of their submission”. The most obvious example of this is in relation to card detail – often times forms will break down account numbers into submissions of 4 digits at a time.

 

huddle-software testing

Review

It is imperative that you include a post submission ‘review’ of all the information the user has provided you with, so as they can check and authorise its accuracy. For continuity purposes, this review should be presented in a similar manner to that of the form itself – as the user will already be familiar with the presentation and trust in it. The user should be able to edit information within the review section, so as not to be made to go back on themselves – this will only put the customer off completing the form.

Tags:

UX
About the Author

Nicola

Hi All, I'm Nicola and I am part of the EuroSTAR team. I enjoy outdoor activities and martial arts, it's fun! I joined EuroSTAR in 2018 and am excited to meet new people every year during the conferences. Tester Friends are for life :)
Find out more about @nicolag