Web form design: eight common mistakes to avoid

A badly designed web form can mean a world of pain for users, and can be a major cause of abandonment. Many web form mistakes are common, and can be easily avoided. Here's a selection, but feel free to suggest others.

A badly designed web form can mean a world of pain for users, and can be a major cause of abandonment. 

Many web form mistakes are common, and can be easily avoided. Here’s a selection, but feel free to suggest others in the comments below.

Unclear error messages

Error messages should be used to explain why the visitor has made a particular error, and to tell them about the action (s) they need to take to rectify the problem.

For example, if I’ve forgotten to add my email in the correct format, the site should highlight the field where the error occurred and tell me what I need to fix.

However, many messages are generic and do too little to help, using language like this:

web form error messages

If the mistake isn’t immediately obvious, then users can be left scratching their heads wondering what they did wrong.

Image credit: uxmovement

Making data entry harder than it should be

It should be as easy as possible to complete forms. The smoother the process, the more likely that people will complete them.

Here, the Halifax mortgage quote form asks for users to enter their date of birth with the day, month and year separated by a dash.

Mortgage_date_entry

This means more work for users and also increases the chance that they’ll skim over the microcopy explaining the required format and make an error.

A better approach would be to split the fields, as ASOS does here:

Asos-DOB-question

Using captchas

Captchas are sometimes necessary, but are generally very annoying. In web forms they can present a real barrier to conversion.

Here, Halifax uses one in its mortgage form. Why?

Captcha form

Label mandatory form fields

If form fields have to be filled in label then clearly. An asterisk is often the way.

Otherwise, people will leave fields blank and trigger errors.

nasty form

Postcode entry issues

This can be a common problem, and is down to strict validation.

Zara’s forms look promising; the use of inline validation can be a great way to avoid too many user errors.

However, because I haven’t entered my postcode with a space in the middle, I’ve triggered this error message.

postcode

The problem is compounded by the fact that the error message doesn’t explain the problem. in this case, if users check and confirm that they have entered the correct postcode they may just assume there’s an error with the website.

The answer here is to allow users to enter their postcode in whatever format they like, as long as it’s correct.

Form fields in unexpected places

This is the shopping basket page for Playmobil (one of the worst sites you’ll see).

Normally this page is for checking basket contents and clicking through to the checkout to complete the order.

I tried this on Playmobil but wasn’t able to. This is because, unlike just about every other ecommerce site on the web, it asks for customers to read and accept the terms and conditions before checkout. Bonkers.

playmobil checkout

Asking for unnecessary information

Any extra information you ask for makes for harder work for visitors to complete forms and increases the chance that they’ll abandon the process.

Here, Chef’s Catalog asks for a phone number as a mandatory field.

This is something that is normally voluntary, and customers are likely to have concerns about whether this phone number will be used for marketing purposes.

form error chefs

Failing to explain rules on input formats

If information has to be entered in a certain format, then say so clearly.

In this example, Boots wants customers to enter a password in which the same character is not repeated more than twice. How are they supposed to guess that?

Of course, this triggers an error message. Only then does Boots explain the rules.

Boots password

In summary

I’ve listed eight mistakes to avoid here, but there are many more I could have mentioned.

The key here is that anything which triggers an error message or slows them down can make a user abandon a form.

Subscribe to get your daily business insights

Whitepapers

US Mobile Streaming Behavior
Whitepaper | Mobile

US Mobile Streaming Behavior

5y

US Mobile Streaming Behavior

Streaming has become a staple of US media-viewing habits. Streaming video, however, still comes with a variety of pesky frustrations that viewers are ...

View resource
Winning the Data Game: Digital Analytics Tactics for Media Groups
Whitepaper | Analyzing Customer Data

Winning the Data Game: Digital Analytics Tactics for Media Groups

5y

Winning the Data Game: Digital Analytics Tactics f...

Data is the lifeblood of so many companies today. You need more of it, all of which at higher quality, and all the meanwhile being compliant with data...

View resource
Learning to win the talent war: how digital marketing can develop its people
Whitepaper | Digital Marketing

Learning to win the talent war: how digital marketing can develop its peopl...

2y

Learning to win the talent war: how digital market...

This report documents the findings of a Fireside chat held by ClickZ in the first quarter of 2022. It provides expert insight on how companies can ret...

View resource
Engagement To Empowerment - Winning in Today's Experience Economy
Report | Digital Transformation

Engagement To Empowerment - Winning in Today's Experience Economy

1m

Engagement To Empowerment - Winning in Today's Exp...

Customers decide fast, influenced by only 2.5 touchpoints – globally! Make sure your brand shines in those critical moments. Read More...

View resource