Filled in any good forms recently?

HTML web form codeWeb forms are a necessary evil of the Internet. Companies have to collect information about prospects and customer feedback, and more advanced websites may need to allow users to register and set their own preferences.

On the web, this information is collected via a one or more HTML fields, which together make up a form.

Forms create friction

Convincing people to pass their personal information on to you can be difficult, not just because it’s laborious, but also because of issues surrounding trust and privacy. This is why it’s so important to spend time getting web forms right in order to reduce friction points and maintain user trust.

Keep your forms well-polished

When I see a web form that’s been poorly executed I find it hard to resist the temptation of thinking about how it could be improved.

The example of poor usability used in this tutorial is not intended as a criticism of the organisation in particular or the individuals involved with the creation and maintenance of their web presence. It is however intended to offer an opportunity to demonstrate how the user experience of the website in question could be improved for the benefit of members and the organisation overall.

I also believe that by deconstructing good and bad design decisions and making suggestions for improvements I can help other website owners who can use these tips to improve their own web properties.

I won’t name the owner of the website under study because this is not relevant to the task at hand, suffice to say it is a well-respected organisation that represents the best interests of small businesses in the UK. The form in particular where the difficulty arose is related to updating your business details for inclusion in the member directory.

You might well recognise the screenshots if you are a member too, and you may have had similar thoughts along the lines of how things could be improved. If so, I’d love to hear your take on this matter — did you find filling out the form too much of a challenge? Or did you give up completely? Please do leave a comment below.

Now, on to the deconstruction:

A few usability brownie points

It’s always tactful to start on a positive note, so it’s worth pointing out that the basic details you provide to the organisation in question on signup are entered into the directory automatically.

This means there’s no need to re-enter information they already hold, which is a usability win. One of the best ways to put people off using your website is to force them to repeat an action or do something that really ought to have already been done. Good work.

But now on to the usability issues…

Web forms that don’t do anything

The commercial world wide web has been around for almost 20 years now and has become a ubiquitous part of modern life. Most Internet users can recognise an online form as something that consists of various fields, such as text fields and checkboxes, that require their input. In short, they expect to be able to click a text field and see the cursor appear, ready for their input.

So when you subvert this convention by displaying input fields that don’t allow the user to enter any information, you run the risk of confusing and frustrating them.

There are legitmate causes for disabling form inputs — when the user selects an option that invalidates other options for example. The only alternatives to this approach would be to remove the invalidated options from the form entirely, or to allow the fields to still be used, but then rely upon form validation to flag up an error and encourage the user to change their input accordingly.

The first alternative will unsettle and disorientate your visitor, the second alternative will have them cursing your lack of consideration for their wellbeing and lead them to question whether you have their best interests at heart. Ultimately, form inputs can be disabled for a good reason, but there are also plenty of bad reasons to disable them.

When you display 15 input fields, all of which are disabled, you really need to consider whether displaying this information using form inputs is a good idea at all.

Sadly, this is exactly what members of the website under study who wish to update their business information are presented with:

An example of poor web form usability

Despite closely resembling a web form that accepts user input, not a single one of these fields can be edited from this page. Instead, the user must click the link at the bottom. This then opens a new tab, where you must then select the business you wish to edit.

Upon making a selection and clicking the edit button, this time a new window is opened instead. This new window contains a new web form which does allow edits to be made. However, another usability mistake has been committed along the way.

Links that force new windows to open

Forcing a new window (or tab) to open from a link is bad for accessibility and usability. This is something else that will infuriate and disorientate your website guests and is considered a big usability no-no. It will also make your website less accessible to users with visual or motor impairment.

The default action in all browsers is to open links in the same window/tab. From a usability perspective, this action can be overridden under a few select circumstances (such as to open a calendar date-picker).

However, it’s best practice to allow your visitors to choose whether they open your link in the same window, or a new one. If you force their hand, you’ll only succeed in undermining their trust in your website, and by extension, your brand.

And let’s not forget that at the start of our journey we were already looking at a web form that could’ve been perfectly suitable to allow us to achieve our objective, had the functionality not been disabled.

Support users by providing relevant information

The web form that appears in the new window however does at least behave as a normal form should. But it makes one more crucial mistake, and misses an opportunity to fully support the user in their completion of the task.

This is the form as it appears by default:

Example of a usability issue: form that doesn't support the user

Now, without cheating, can you tell me which of these fields is compulsory? I only know because I’ve attempted to complete the form once before and failed. Before your business details can be updated, you must pick an appropriate SIC or else the form will be thrown straight back at you.

It’s only after being forced to make a mistake that you are presented with the information you should have been given right from the start. In terms of user experience, there are few things worse than spending precious time completing a web form, only to then be told at the end that through no fault of your own that your efforts are not good enough. This is the kind of usability mistake that kills conversions and costs website owners missed opportunities.

To elaborate on this point further, which file formats do you think are supported by the logo upload function? Again, without testing it, there’s no way of knowing that this form doesn’t accept PNG files. Another missed opportunity, because for web use PNGs are actually the best file format for flat graphics such as logos.

Make information easy to decode

But the biggest problem I had with using this form was actually choosing the SIC. The drop-down menu presents an exhaustive list of all the UK SIC classifications available. The screenshot below is just a small snippet:

Example of a usability issue: a lengthy list of codes without supporting information.

I don’t know about you, but when I’m presented with an enormous list of anonymous-looking numbers my brain switches off. I’m sure anybody who works at Companies House would know these off by heart, but the typical small business owner is likely to struggle.

To add to the difficulty, the current 2007 codes still fail to offer a satisfactory classification for web design businesses. The closest match I’ve found is “62012 — Business and Domestic Software Development”.

So the problem is twofold: firstly, I’m just presented with a bunch of codes without any supporting information, and secondly, even with that information I’m not confident that I know the most appropriate code for my business anyway.

Thirdly, I might also ask: is it strictly necessary for the organisation in question to collect this information? How does this help a fellow member find my company? How does it help them to decide whether my company can provide the service they are after?

The number one rule for web forms is that you only collect information that is strictly necessary. If you ask for too much information or expect the user to perform a task that appears unnecessarily difficult you’ll find your form drop-off rates skyrocket.

Room for improvement

The shortcomings of the UK SIC is not the fault of the website owner. However, assuming this information does still need to be collected, more could be done to make it easier to select the correct code.

The SIC for my business is not a number that means anything to most people, and for that reason it’s not a piece of information I would take the trouble to memorise. This is a perfect example where providing additional information would help the user immeasurably.

The approach that Companies House takes allows a visitor to find the correct code by searching by the SIC description. They also make use of human-friendly broad industry groupings, for example “Agriculture, forestry and fishing” — I know for a fact I’m not going to find my industry in there so I can safely skip a sizeable chunk of codes, thereby quickly reducing the size of my search and the complexity of the task.

To improve this web form the website owner could make use of these broad industry categories by allowing users to select the closest broad match first. This would narrow down their range of options considerably. Or at the very least, a link through to Companies House could be added to the form to make the task a little less daunting.

Conclusion

Building web forms that collect considerable amounts of information in one go is never easy. For one thing, you need to be sure you’re offering something the user finds desirable in order to motivate them to even attempt filling it out. But once you’ve the motivation it’s equally important that you remove any potential roadblocks that might cause the form to be abandoned.

Every business owner knows the value of information to their company — it allows us to capitalise on opportunities as they arise and make better business decisions. So for that reason it’s worthwhile investing time and money in making sure the web forms you use make the process of collecting that information as painless as possible.

If you’re struggling with web forms, or web design issues in general, remember you can always have a friendly chat with us to discuss your needs in more detail.