We've all been there, trying to complete a web form that was clunky and difficult to use. Fortunately, there are some simple (yet often overlooked) steps you can take to improve the user experience on your forms. Most of these are quick to implement and will provide incredible benefits to the end user.
1) Optional and Required Fields
All across the internet, the red asterisk ( * ) is universally understood as a required field. This is great, because you don't have to reinvent the wheel when it comes to letting your users know which fields they need to fill out. On the flip side of the coin, George Washington recommends any fields that aren't required should be labeled as optional so the user clearly knows what they have to fill out.
2) Give the User Some Focus.
You should draw attention visually to the currently selected form field. This makes it easier for users to see what part of the form they're on, and what label, hints, or related fields are associated with that item. I'm not just talking about styling the form element itself, I'm saying go big (or your users might just go home.) Consider giving the entire section the user is working on a focused style, to neatly tie together the form element and any associated information.
The example above is from E*TRADE, showing the active section with a green background so the user knows what type of information they need to provide. Giving the user focus has definite advantages for longer or complex forms because it draws the user's attention to one part of the form at a time, and only the information being collected in that area.
3) Gimmie a Hint! Validation Messages for People, not Robots.
Any of your client side validation should give the user clear messages on why the form couldn't be submitted. Nothing is more frustrating than typing in your phone number and receiving a validation message that says 'Unable to process your request.' Be sure to clearly indicate which form fields failed validation. This example from eBay does a good job of telling the user where the form failed (red error text) and what was wrong ('Please enter your first name'). And remember, if you require information in a specific format, tell the user what it is! For example, 'Please enter your account number in the following format: xx-xxxx'
4) Don't Forget Your Mobile Viewers.
Mobile users have their own set of frustrations with web forms. Keep in mind their screen sizes are smaller and they will be navigating your form without the help of a mouse. Using the HTML tabindex attribute on your fields will allow mobile users to navigate between fields with their tab key. This is a huge benefit because it allows them to switch between form elements without having to switch to the keyboard and back to the screen.
Additionally, remember to give mobile users clickable areas that make sense. Your users (and their thumbs) will thank you. Have a look at this Wells Fargo example from an Android phone.
The login screen shows two fields for username and password. Easy enough, but where do I click?
The actual clickable area for the form is less than half of the form element's width, and not at all in a place where users would expect to click on it.
5) Use Labels.
Don't forget the importance of the HTML tag. First, a label tag is going to make your form more accessible to users with screen readers. Take this example:
Instead of the screen reader telling the user 'input box color' (the name for the form field), it will tell the user the value of the label, 'What is your favorite color?'
The second huge benefit of using labels is they make it easier for users to click on form fields. The impact this has is most noticeable on checkbox and radio groups. Instead of the user having to click an itty-bitty 10 pixel by 10 pixel area, they can click anywhere on the label text to manipulate the checkbox or radio button. Consider the following checkbox group example and demo:
This option doesn't have a label
This option doesn't have a label
Giving input elements a label allows users to interact with the form elements through the labels. This is especially helpful for the mobile web because it makes it easier for users to select form elements.
6) Ditch the Reset Button.
Form reset buttons are so last season! Let me give you a little scenario; A user navigated through your website, found the form they were looking for, then diligently filled out all the fields only to arrive at the end of the form and be faced with a critical decision: Submit or Reset?
Odds are your user isn't thinking, 'Actually, now that you mention it, every single piece of information I entered is wrong! I'd better start over.'
No, instead the reset button gives the user one last chance to walk away from your form by sending the message, 'Do you really think this is a good idea?' And it only gets worse from there, nothing is more painful than completely filling out a long web form and hitting Reset instead of Submit. So get rid of that reset button, it's only hurting your conversion rates.
The tips discussed here are fairly simple and straight forward to implement. With just a little bit of time, you can save your users from a nasty form experience.