HTML web form code

Web design usability best practice: support your users

Home » Tutorials » Web Design » Web design usability best practice: support your users

Filled in any good forms recently?

Web forms are a necessary evil of the Internet. Companies have to collect information about prospects and customer feedback. 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. When placed together these fields make up an HTML form.

Forms create friction

Convincing people to pass their personal information on to you can be difficult. This is not just because it’s laborious, but also because of issues surrounding trust and privacy.

That’s 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 to think 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 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.

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.

Now, on to the deconstruction:

A few usability brownie points

It’s always tactful to start on a positive note. It’s worth pointing out that the basic details you provide to the organisation when you sign up are entered into the directory automatically for you.

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…

Users recognise and understand web forms…

The commercial world wide web has been around for 25 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 input fields, such as text fields and checkboxes.
  • That in turn is ready to receive their input. They expect to be able to click a text field and see the cursor appear, ready for their input.

…but they get frustrated by form inputs that don’t do anything!

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 legitimate reasons to disable 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.
  • 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. This will lead them to question whether you have their best interests at heart.

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 are presented with:

An example of poor web form usability
Using a form to display read-only information is a bad idea.

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. 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, albeit a disabled one. That form could’ve already 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
Always make sure compulsory fields are marked.

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.

Don’t force users to make mistakes

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 task, 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 image file format for flat graphics such as logos.

Make information easy to decode

Example of a usability issue: a lengthy list of codes without supporting information.
Could you find your business’ SIC code in here?

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:

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“. I mean, a website is technically software but I wouldn’t class myself as a software developer.

Only collection information that is necessary

So the problem is twofold:

  • I’m just presented with a bunch of codes without any supporting information.
  • Even if I had that information I’m not confident that I know the most appropriate code for my business anyway.

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.

Provide supporting information where it’s needed

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. 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 I’m not going to find my industry in there so I can quickly skip a sizeable chunk of codes. This quickly reduces the size of my search and the complexity of the task.

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 to Companies House should be added to provide some support to the user.

Conclusion

Building web forms that collect considerable amounts of information in one go is never easy. Make sure you’re offering something the user finds desirable to motivate them to even attempt filling it out. But once you’ve motivated them it’s equally important to remove roadblocks that might cause them to abandon the form.

Every business owner knows the value of information to their company. Information allows us to capitalise on opportunities as they arise and make better business decisions. It’s worthwhile investing time and money into your web forms. Ensure the forms you use make it as painless as possible to capture data.

Are you struggling with web forms or data capture? Remember you can always have a friendly chat with us to discuss your needs in more detail.