Tips for online forms that create better user experience

Takeaway: Ryan Boudreaux has several tips for how to design online forms that won’t annoy your users.

Does this sound like a typical online interaction you’ve had in the past? I start filling out a payment form to submit my monthly bill, which is due for the a certain cable company, all the information is entered and then once I hit “Submit” it sits there chugging away…about five minutes later the page results in an error message, and I have no way of knowing if my payment was accepted. This is just one of several failed form submittal experiences I’ve had in the recent past. I am sure you could share similar stories of online form FAIL! As a stakeholder of your organization you should be aware of the User Experience (UX) and level of acceptance that your online forms have with respect to how your customers interact with your online forms. This article will review several tips for ensuring that your forms are giving the best UX for your customers.

Select menus

Have you ever come across a select menu that has just five or less options, or maybe over fifteen options? In either case it is not going to earn you any points for effective user experiences. If you have less than five options you might want to opt for a set of radio buttons, which will allow the users to make their selections faster; all they have to do is look at the few options and click once instead of having to click the select menu and then click the selection. Figure A displays the offending two option selector, and Figure B displays the preferred radio buttons.

Figure A

Figure B

And on the other side of the spectrum anytime you have more than fifteen options within a select menu it becomes a burden to scroll through such a long list of options; the user gets bogged down with too many choices as in this typical month, day and year select menu in Figure C.

I know you have seen and probably created similar date select menus on websites, so in this example, how do you provide an option for users to enter the date without such a huge drop down selection menu? Keep the month drop down select options but then make the day and year set as text fields as  shown in Figure D.

All the user needs to do is select the month, then tab over and type in the day and then the year and the extensive drop down selectors are eliminated.

Labels

You want to give your users the easiest means of entering their data, and one of the best practices includes having your labels top-aligned in relation to the associated form fields. You can see examples of this in each of the four previous figures above. The identifying label is positioned above the actual form fields or top-aligned so that it is easier for the users to recognize and process the associated input fields. Top aligned labels are also better suited for mobile devices that rely on compressed and smaller screens.

Checkboxes

I am sure you have filled out a form and clicked submit only to wonder if you remembered to uncheck the box that was automatically checked, meaning you would be signed up for a monthly credit report, or some similar offending selection. As a common courtesy to your customers and users, please leave it up to them to make the decision to select a checkbox, even if it is for a free newsletter. I can’t remember how many newsletters have ended up in my inbox because I forgot to uncheck a checkbox.

Alternatives to captcha

Many online forms today end with a captcha phrase so that you can let them know that you are not a robot. While this is an effective way of reducing your SPAM, what you are doing is telling the world that you have a SPAM problem, and that you are off loading the work of preventing that SPAM onto your customers and users. Alternatives to the captcha technique are to use what is known as a honeypot captcha which is essentially an invisible captcha that bots and robots can see but people cannot, and the robots cannot tell the difference between the real form fields and the hidden honeypot field. There is some controversy with the possibility of screen readers detecting the hidden field, but using display: none will likely prevent most screen readers from picking the hidden fields. Another option is to use the jQuery-based solution for creating Safer Contact Forms without CAPTCHAs, which utilizes a simple method of adding a layer of security to any contact form using Ajax and jQuery.

Omit optional fields

You want to keep your forms to a minimal level, and big, long winded forms are just bad. You want to concentrate on vital information only. If the information is going to be used, then it needs to be a required field, enough said.

Why the reset button?

Exactly, why do we need a reset or cancel button anyway? We don’t! In the overwhelming majority of cases, a reset or cancel button is not necessary. Why add one more button, especially one that clears out the entire form, for goodness sake. Why would you want your users to clear their valuable data?

Form validation

Remember to add form validation to all your required fields; this can be a simple client-side validation technique using JavaScript. And while it is hard to prevent all user errors in filling out your forms, good form validation will also give users a heads up to see what might be wrong or missing while they are still typing into form fields.

The form tips described in this article will help boost your forms performance and improve the user experiences at the same time. Do you have any other quick form tips that you utilize for your online forms?