Web Form Usability Best Practices

Everyone hates web forms. Filling them out is tedious, and has brought on, at least in part, websites like Bugmenot, to get around filling out login or sign up forms to access sites as you surf. But, you can make these forms less of a chore, if you just follow some basic web form usability practices.

No wait, don’t walk away, I’m serious. I’m not just talking about W3C compliance, or programming standards or the very basic tenets of usability and UX like spacing and aesthetics here. I’m talking about real web form usability practices in how the actual form is planned and how it’s designed to work, to require minimal annoyance from the user.

Web forms will always suck. I can, however, help you make them suck much less!

#1 – Tab Ordering

Yeah, this is such a simple thing, and any programmer will go “um, duh” at this, but a lot of web designers and SaaS designers overlook this, because they badly underestimate the computer literacy of web users these days. They expect people to instinctually use the mouse to click on every form item, to fill it out, or alter its value.

But the truth is, anyone who’s used a computer for more than five years, and is comfortable typing at all, will be more than aware, and appreciative, of using the tab button to move through the controls in a form in order. They can then type in values, use space to check or uncheck things, and use arrow buttons to move through lists and combo boxes (also known as drop down menus). This makes filling out the forms faster and less tedious for the intermediate user on up.

#2 – Minimalism and Simplicity in Data Requirements

Ok, this sounds complicated, but let me explain. Minimalism in your data requirements can be pointed out by a simple example. Say you need a date of birth. Requiring the full four digit year, written out month and day is excessive and annoying. Granted, a two digit year could cause confusion in this trans-century era, but it’s an issue most databases can resolve through algorithms.

As far as simplicity in data requirements, use regular expressions behind your forms. I’m not about to try to explain in detail what these are, but if you’re at all familiar with the concept, you know it allows you to match text values that aren’t literally identical, thus removing issues with requiring spacings, dashes or other elements to be definitely omitted or included in your form.

#3 – Have Mercy with your Anti-Bot Precautions

For the love of heaven, I can’t fit all I’d like to say about this in here so let me be brief. Anti-bot precautions to prevent abuse and spam are necessary. How you do this, though, differentiates the cautious from the sadistic.

Captchas are the worst thing ever. But if you must use these, then have the simplest kind possible, with very legible text. Use flash or something, so that optical recognition has a go of trying to parse it, but people can still read it. Avoid commercials being required to watch, to get the clue to enter, or text with weird fonts, distortions or other hard to see effects. Oh my goodness this is the worst solution to anti-bot procedures we could have made standard! But, we did, so … yeah, don’t go overboard. It’s mean!

With these web form usability practices in effect, your forms will still be annoying. But, they’ll be less annoying, and that, my friends, is a light year of progress, when it comes to these.