I’m currently working on a web application that involves a lot of form fields. Thought of putting it out here as notes to myself and to anyone who may also find it useful.
*Rather than taking this as general rule, do remember that context is everything. Here’s a recommended reading if you want to learn or need a refresher on the basics.
And so here they are:
1. On page or screen load, automatically set autofocus on the first input form element if it’s a text field.
Why? Encourage the person filling up your form to go straight to typing. That’s reduced time and effort spent on selecting the field — whether it’s positioning the mouse cursor then clicking on it or tapping it on a touch-enabled device.
How? The simplest way – add the attribute autofocus to the input tag:
<input type="text" autofocus />
It may not sound much, but it’s something that makes the user’s life easier and complete the form faster. One task less to do for the person = plus points for a positive experience.
2. Use the 'for' attribute for accessible checkboxes and radio buttons.
How: You can definitely add some extra CSS styling to make them easier to click, but never forget the fundamentals — make sure that there’s a for attribute on the <label> referring to the checkbox:
<input type="checkbox" id="accessibleChoice" >
<label for="accessibleChoice">Check me!</label>
3. Tooltips / Popovers for helper text
Why: First things first —the general rule is do not hide helper text. Place them appropriately, near the field to which it is referring to.
Now what if you have a rather complex form, like it’s necessary that each field have their helper text in the label?
Look, you should eliminate helper text if a label will suffice. Break down a form into sections if it’s too long. Those are general recommendations. But in case that those won’t be enough, how about using tooltips or popovers to prevent the person from getting overwhelmed with all the content in front of him or her?
Note: Ensure that the design works well on whatever screen size, too. For smaller screens, it is perhaps best to go simple — no tooltips on focus, just permanently display the helper text.
So far these are what stuck with me. Will update the list if I get to discover more tricks. I would love to hear your comments and ideas, too! 🙂