Forms are a pain. They’re boring, tedious, unattractive, and downright annoying. Filling out a form is like bending your mind in order to tell a slow person how to get somewhere fast. But unfortunately, they’re also quite necessary; they’re sometimes the only way for us to communicate with an application.

Once, we used to fill out a form, submit it, and wait for its-majesty-the-server to come back with a favorable response. The less benevolent answer would be a series of fields that were filled in incorrectly. This whole process feels quite bureaucratic, with us sitting at the edge of our seats while our form is being reviewed. Also, when it comes back with multiple errors, we need to go one by one and correct them, usually by looking for flaming red indicators telling us how silly we are for not selecting a username with 6-12 characters in it, or a password that contains uppercase and lowercase letters, or an about field that is formatted like a proper Haiku. And to add insult to injury, security related fields, such as passwords, and authorizing fields, or “I accept the terms” checkboxes, would have to be filled in again. So, basically, the user would sometimes go through numerous submits before moving forward.

Many product development people realize this, which is why we see forms that are becoming smarter and more helpful. It’s basically an “if you can’t get rid of them, improve them” approach. So new methods were created to make forms more user-friendly, and to make them appear as if they’re watching over you and correcting you while you fill in the form.

Here are a few ways to improve forms that could work with the user, and not vice versa:

1. Tips. Very simple to implement, and quite helpful. When the user gets to fill in a specific field (focuses on it, in browser terms), the field shows a tip, usually on what the field is about and how best to fill it out.
2. Real-time validity checks. Takes care of approving or disapproving your input as you type it, providing useful tips and suggestions in the process.
3. Availability checks. This has mostly to do with username fields, where you select a username and are allowed to check its availability without actually submitting the form. When combined with real-time validity check, you don’t need to take your fingers off the keyboard to get an approval for your username selection.
4. Password strength. With the rise of online security awareness, this simple indicator might do wonders to the user’s peace of mind. A bar-layout-color-coded feedback is displayed next to the field, telling the user how weak or strong the password is. This very responsive gadget encourages the user to do well, to get to the green, and to select a harder-to-break password.
5. Auto-suggest. This goes the whole nine yards in terms of helping the user accomplish the task of filling in a field. While typing, the form actually suggests a possible value for the field based on the input typed so far. The user can then accept it, and dodge the most annoying task there is – typing. It’s not an easy thing to implement, but quite worth it.
6. “Formalizers”. Many fields require a specific format, like a date field or a location field. Most forms use drop-down lists to provide the user with options, but mainly to make sure they fill in the field correctly. “Formalizers” are field mechanisms that accept input written in natural language, and automatically convert them to a properly filled-in field. For example, a date formalizer could accept dates written in natural language, rather than selected from dropdown lists, and also accept relative terms, such as “tomorrow” or “next Monday”. Again, quite an advanced feature, which is becoming ever more popular.
7. One-time humanity check. We all know the terror of spam, and how forms are an easy target for such attacks. Many have adopted anti-spam checks, or humanity tests, to combat this phenomenon. As users, we accept this, though it makes a dull task even more wearisome. But there’s no reason why we should go through this more than once at a given form. If a form has returned with a response, for some reason (when all of the above failed), and the user has already passed the humanity test, it assumes that no sudden transformation has occurred, and that the human is still there; so the anti-spam field does not appear for the second time.

Under the hood

Apart from making the form-filling process less of a burden, it actually saves resources for the application itself by utilizing the processing power of the user’s computer to do some of these checks (validity checks and password strength). This means that instead of using the server to make these validity checks, the browser itself performs these operations, relieving the server of a substantial amount of processing (when multiplied by many-many users).

Even when the server is needed to verify a field (for availability checks, for example), the data posted and received is smaller in comparison to a whole page being sent to the user’s browser.  So instead of asking the server to verify a whole form, and to send an entire page, formatted and all, back to the browser, it is only used to verify a single field, and usually responds very succinctly.  This ultimately removes quite a lot of load from the server, and has a significant impact on the site as an operation.

Tags: form design, Product design, Watch-over forms