5 Ways To Improve Website Form UX

5 Ways To Improve Website Form UX

4 MIN READ

 One of the most important elements to any website is the forms the user is required to complete while visiting, which are often the only way to get the information you need to capture. As they are direct requests for information, if designed correctly, they should be clear to understand and easy to complete. 

Forms exist for many reasons and getting website form UX right is key to providing a good customer experience. In this article, we look at a simple account registration form, but there are many other examples; newsletter signups, marketing preferences, eCommerce checkouts to name a few.

1. Start with a plan 

Before building your website form, think about the fields you require. Consider their order and whether every field of your form is strictly necessary for the context the user sees it.

In our scenario, the user will be signing up for an account with an online fashion retailer. Think about what is required from the user for them to become a registered user?

In our example, we will request their name, email address, password. That’s it! We do not require a date of birth or telephone number. This may be useful in some instances, but to sell clothes online we do not require any further information just yet.

2. Keep forms easy to read and well labelled

Ensuring a user can understand the form they are using is vital, a frustrated user will happily leave the site if they can’t accomplish what they need to in a reasonable amount of time. 

Website forms should always have labels, always! They are visual indicators to the user, explaining what the input they are using is designed for. Labels are not the same as placeholders and should be treated differently. Consider if a user completes a form using autofill, the placeholder information is removed from view, the user is then unable to confirm the correct information is in the correct input.

Ensure your inputs are easily distinguishable from the background they are on and large enough to be tapped/clicked without difficulty.

3. Keep errors inline and to the point

If a user enters data incorrectly let them know immediately. Telling them they didn’t enter something in the correct way after they submit the form is likely to frustrate them. This seems like less of a big deal with a short form like our example, but grow that form to 10 inputs and the frustration for the user also grows with it.

Use concise wording in plain language the user can easily skim read and understand how to rectify their mistake. “Input empty” is not very descriptive, “E-mail is required” is a more detailed error message, which informs the user the input they need to correct. 

Consider using icons in addition to your errors to link the input to the error.

4. Use placeholders to enrich your form

Sometimes a user may misunderstand exactly what is needed, placeholders can help users understand what is required before typing. An example may be if you are asking for the user’s date of birth and you would like the information as dd/mm/yyyy you could offer that information before the starts typing. 

However tempting it is, placeholders should not be used as input labels.

5. Help mobile users with contextual inputs

Using the correct input type can help your mobile users massively. If we require an email address use the email input type. This means the keyboard displayed will provide easy access to the email-specific keyboard. Another example of this is a telephone, use the tel input type. This will display the phone number keyboard layout which is much easier to use when adding a telephone number to a form. 

These small improvements can really help speed up a users form submission time. They set the expectation and limit the choices a user has to make.

Summary

By applying everything from above you will have a clear and understandable form with good usability across devices, and a form that has understandable errors and pointers for the user to reduce chances of an error ever occurring. 

Remembering to plan well and build on that is vital for each form. Every website form is a barrier to something, whether that is the newsletter, the purchase of a product, understanding when an item is back in stock. We have to ensure the forms we request our users to complete provide value, if they don’t we should question if they are needed at all.

Further Reading

Sign Up To Our Monthly Newsletter

Have our latest blog posts, company and industry news delivered direct to your inbox.

Andy Lyon
28th November 2019

Venditan Lake District Hike

Venditan Lake District Hike

A day in the hills

With the weather taking a turn for the better, four Venditan team members escaped Manchester for the day to enjoy the fresh air of the Lake District. The lighter and longer days meant the team took the opportunity to conquer one of the highest mountains in England, Helvellyn.

Leaving the car in the small village of Patterdale the team trekked their way up the side of the mountain making our way to the hole in the wall, which marks the beginning of Striding Edge. It is steep going and quite a relentless climb, but the fast ascent makes for rewarding views down the valley back to the villages below.

The team started their journey across Striding Edge, a first for many of the hikers who joined the exploration this weekend. Making their way climbing up and over the large rocky face of the edge, the challenge was in full swing.

With the edge complete, the steep climb up to the summit starts. Muscles aching and the sun baking the team finally made the summit of Helvellyn to take in the views of Ullswater and the surrounding area.

Helvellyn finished, the team plodded over the minor summits of Nethermost Pike and Dollywagon Pike down to Grisedale tarn and back through the valley to the car.

7.5 hours of hiking, 18km (11 miles) covered and 1200m ascended. Helvellyn complete.

If you’re interested in joining the Venditan team, drop your CV below – we’d love to hear from you! 

Apply Here

Please enter your first & last name along with your current CV.

  • Accepted file types: pdf, doc, docx, txt, png, jpg, jpeg.
  • This field is for validation purposes and should be left unchanged.

Andy Lyon
10th April 2017