Tips and tricks for user-friendly web form design
Guest author Abbey Fitzgerald presents some great tips to improve web form usability and reduce customer frustration.
Forms are key to the success of many digital products. If you are asking users for information to register, sign up for a demo, or make a purchase, the process needs to be seamless.
A form that is hard to use will undermine the user experience and can negatively affect conversions.
Form usability can be a pretty complex topic, and this article will just scratch the surface. However, these tips are a useful guide to get you started.
Web form basics
If you’re new to UI design, it’s important to know the different parts of a form. As a consumer of a digital product, you may be so used to consuming them that the terminology may not be clear.
Knowing the design lingo will help when designing user-friendly forms.
Keep field labels visible
It’s not uncommon to find a form that shows the labels as placeholder text before the user has entered data. This may seem like an obvious issue, but it’s surprising how many forms are not designed so the field labels remain visible when a user starts typing.
When users are typing along and the labels just disappear, this can potentially cause frustration. The form may have been designed this way as a space-saving measure, but the risk is not worth the reward.
Life happens and if a user is typing in a field and gets distracted, they could easily forget what the label was. In most cases like this, the user has to delete what they were just typing to see the form label again.
There is the potential for a data error, which is not good for the user or the product. Depending on the product, there is the potential for more serious errors (medical data, banking, etc.).
There’s an easy fix to prevent user errors. Keeping the field labels visible at all times will help the user make the connection between the data they’re typing and the label.
Labels can be placed to the side or above the field. There are form types that start by having the label in the field, but then on focus, the label moves above the input.
That has become a common UI pattern and it does solve the potential problem for the user.
Make required and optional fields clear
The last thing users want to do is fill out a long form. It’s important to value your user’s time and attention span, so including only the necessary fields is the first step.
There are two types of fields, those that are required fields and those that are optional. If you use optional fields, be sure they are clearly marked. There are two approaches:
- Only the required field(s) are indicated in the label text. Required fields most often are marked with an asterisk and in many cases include ‘required’ text next to it.
- Only the optional field(s) are indicated in the label text. Typically the field would have “optional” included in the label text. The other approach is to mark only the optional fields, which is typically more user-friendly and less intimidating.
Studies have shown that users will submit more data if the fields are marked optional, rather than the required approach.
Is that always true? To find out, it’s important to do research and testing to ensure that your users respond to this approach.
By testing your form design, you’ll learn what your users prefer and what approach is more successful.
Make form and error messages clear and helpful
It’s safe to say that most people really don’t enjoy filling out forms. They especially don’t like having to guess where they made an error.
There’s no way to prevent all errors, that’s why error messages need to be user-friendly. Mistakes happen and it’s important to provide error messages that are clear and informative to your users.
Things like formatting errors, required fields that a user forgot to fill out, and incorrect passwords are common examples of form errors. This is a chance to optimize the experience by clearly conveying a message to the user.
Let’s use an email field as an example. The message needs to be clear so it will help them make the needed corrections.
When writing user-friendly error messages, it’s important to be specific and help the user to identify the error. Then tell them clearly how to fix it.
When there’s an email formatting error, it’s clear to the user what the error was. I forgot to include the “@” sign and the error message informed me of what I did wrong.
Time-saving lookups
When asking users to choose something else with a large number of predefined options, predictive listings help save time and prevent errors.
Predictive results reduce the amount of typing and cognitive load of the user. When information populates for names, addresses, postal codes, countries, etc. it is very helpful.
As a user types, options are refined. In most cases they save time because they do not have to type out the entire string to find the correct option.
Order the form logically and group related information
Forms can be intimidating, especially if they are long. Things like finance applications, ecommerce checkouts, and any other long forms should be carefully optimized.
Related information should be grouped in logical blocks, while grouping related fields together also help the user understand what information is required.
For example, you’d want name fields, address fields, and credit card information to be in separate sets with the information to be grouped accordingly and in the expected order.
It would seem kind of weird for users to enter their zip code before they enter your first name during the checkout process.
Details in the form should be asked logically from a user’s perspective. The idea of engaging with logical blocks of content makes it clear to the user what type of information they are filling out and shows them a clear hierarchy. Maybe it’s just me, but there’s a sense of satisfaction in completing a group and knowing that you are nearing the end.
This form has great logical grouping and the checkout process is clear. This form also uses a progress bar because it is multi-step. It helps communicate how far they’ve come and how close they are to finishing.
Keep mobile in mind
It’s important to optimize form design for mobile, as it can be a harder experience than desktop. A simple one-column design is best for mobile, as users should be able to easily scroll down the form.
One thing that seems to be slowly getting better with form design is the presentation of the correct keyboard based on the input type required.
It doesn’t sound like a big thing, but it really helps the experience when this is done correctly. For example, when I’m entering my phone number on my iPhone, it’s great when the numeric keyboard pops up.
Instead of having to make that extra tap to switch the keyboard, it’s automatic. If doing something like entering your name, it’s great to have the default be the keyboard for text entry.
It’s really helpful when the input type matches the correct keyboard type for data entry. In this case, Target shows the numerical keypad for the phone number field.
Mobile users should be able to accurately tap on the field. Having enough padding and a minimum height will help prevent errors caused by tapping out of the target area or in the wrong area of the form. Both form fields and buttons should be at least 48 pixels high.
Forms are a great opportunity to create a seamless experience. Providing clarity around errors, time-saving enhancements, logical ordering, and more will provide a user-friendly design.
Further reading
To learn more, here are a few other resources you might find helpful:
Deliver exceptional digital experiences with UserZoom
