Forms are everyday work for developers and UI designers around the world. This can either be a usability nightmare or a perfectly applied solution that users don’t even realize it took a lot of effort to plan, design, and code.
Here I’ll give you some guidance on how to better up our form design.
Forms and their fields have been around for years, be it some decades ago when the digital world was taking its first steps and someone had the great idea of asking other people visiting websites to input information, even way before that in the 1500s when John Doe, the Carpenter used printed forms for people to fill in and have all the information for his work process or be it in ancient Babylon when innocent customers had to explain what they wanted to a merchant and he had to “write” it in a clay tablet (and such customers also had the power to use their clay tablets to complain but that’s another story).
So it’s not a new thing for us: humans communicate. And in every instance of technological progress, the conversation in written information has to be completed.
Tips for the tasks
Now we will go to the important details a form should have to improve the accessibility and experience of submitting information in our digital world.
We will touch these topics:
- Make forms simple
- Building trust
- Divide information
- Labels
- Error Messages
- Autofocus
- Required vs Optional
- Group fields
- Alignment
- Actions
- Radio buttons vs Dropdowns
Let’s start!
#1: Make forms simple
Try to make everything simple for the user. Ensure that the form has a clear purpose to avoid confusion and drop rates.
- Just ask the necessary questions.
- Explanations should be short and straightforward and don’t include unnecessary information.
- “Word walls” should be avoided at all costs.
- Start with the simple and easy questions, then start increasing the difficulty.
- Pick the right moment to ask a question: relate and group the information.
#2: Build Trust
Users will give out information and they need to know what and why you need what you’re asking. To do that, you need to build trust. How do we do it?
Branding
Always include the branding (logo, colors, layout) and make it consistent with the app or site. It shows that the form is published by a real organization.
Include a Title and Description
Forms should always tell the user what their objectives are. Subscription? Download? You name it.
Contact
Make it easy for the user to contact the company or owner of the form, in case of doubts or need of help. If they can see who’s the one that will get their information, trust will be built.
Thank you page
Maybe this will be too obvious, but yes… include a thank you page! Give the user the warm reward for the effort put into the form.
#3: Divide and conquer
Sometimes the user should fill a very long form and the great number of questions cannot be reduced. In this situation, the best is to:
- Break the form into several steps
- Show the progress
Giving the user how much is left to fill and giving the sense of progress, increases the chances to finish the form. And another important point: start with the easiest fields to fill and finish with the most complicated ones.
#4: Attention to Labels
The labels are a very important part of a form. They’re linked to the input field and can be detected by screen readers. Make filling the form easier by clicking on the label, it benefits mobile and movement impaired users.
Don’t replace labels
It’s not that recomendable to replace the labels with placeholders nor eliminate them. The user should be able to know what this field is meant for, even after the information has been filled.
<label for=”my-input”>Label</label>
<input type=”text” name=”my-input” id=”my-input”>
Always include a <label> and use the “for” attribute.
<input type=”text” name=”search” aria-label=”Search”>
<button type=”submit”>Search</button>
In case you don’t want to show a label, you can use the “aria-label” attribute.
Don’t replace the placeholder. Include always a label element or an aria-label attribute.
Short labels
Labels are meant for the field, not an extensive description of what should be done. Friendly communication to the user can be done in a description before the form. It’s better if labels are simple, straightforward, and short.
Labels up!
We’ve long left behind the golden age of horizontal forms. Do we? In any case, it’s always better for readability to place the labels always on top of its input field, with clear differentiation from others.
When you design forms this way, the reading flow changes and becomes faster than in a horizontal design.
Label Space
Now that we’re on it, every label and its field should be differentiated from others, delimiting them by using space.
Space is important to us, it’s a visual cue to related information. If the spaces aren’t consistent, the rhythm is erratic and hard to read. Notice how the form at the right looks pleasant to the eye because the spaces are consistent and the labels are part of the field. We’ll see more about this later.
#5 Error Messages
It might be tempting to just include a summary of the errors in the form (missing fields, misspelling, etc) but the right way to go is to show where things went wrong.
Inline Validation
In the left form, you don’t know what’s wrong. But now look at the right one. You know exactly what needs to be done to finish.
Visual representations are important too. We go through the world scanning everything we see, so it’s easy for us to link “red” and “cross” with something that’s not right. In the case the user has a color impairment, the visual cues are important to differentiate it from any other kind of message.
Validate early
You can go further and save the user the pain to see what’s wrong until they click on the “send” button, disabling it until the form is properly complete and/or applying real-time validation. It works well too with real-time validation. But beware: only validate it once the user has finished. It’d be a different kind of pain if you get error messages when you still haven’t finished typing.
Be gentle with errors.
Errors get in the way of completing a form, they break the flow and tell the user something like “you messed up”, well not something like that, exactly that.
So, committing errors is human. We developers, and designers are human, and we should have empathy and respect towards others (even if they messed up).
- Be polite, assume that users are trying their best.
- Don’t use a patronizing or accusing tone.
- If possible, suggest how to correct the error.
- If the error might be due to a privacy problem, explain why you need the data.
#6: Autofocus
Taking into account that the user should always be aware of what’s happening, autofocus on the current working field is important. And as we’ve seen before, you should consider that colors and contrast are important in terms of usability: not all users perceive colors in the same way.
#7 Required vs Optional
This one is the reason for great debates. Both are correct, depending on the number of required or optional fields. Let’s say, most of your fields are optional, in this case, the “required” field should be the one explicitly marked. On the other hand, if most of your fields are required, then the optional ones should be marked as such.
And of course, the * is already established as a mark for a required field. The only recommendation I can give on this one is to explain what it means, preferably before the form, so the user will know beforehand. It doesn’t matter if the indicator is before the label, immediately after the label, or immediately before the field.
#8: Happy Together
Group semantic fields. If some fields ask about personal information, it’s better to break it down and group those fields.
This is related to our tip #3 Divide and conquer. It becomes easier if the information is all related to each other instead of bits and pieces scattered around. Users will most likely feel engaged if they feel comfortable with the order of information to give.
#9: Alignment
This is a very important design principle to practice. In forms, it’s always better for the reading flow to give that pleasant impression of order.
Let’s look at this form:
Our day-to-day is to work with forms that are either prehistoric or made with good intentions. How can we make this look better?
By keeping the same design, we can improve this great with just alignment:
See how much it improved? It’s keeping the same two-column style, and all fields are aligned to each other, keeping white space between them and using tip #5 Required vs Optional telling the user that all fields are required.
We can improve it more, of course. With a bit more work it could look like this:
And now we’re talking. Information is grouped, the alignment is being kept and maybe you’ve noticed something about the Submit Button. Let’s talk about that.
#10: Describe the Action
Users want to know what they’ll get once they click on the CTA button. Maybe a Case Study document, or a recipe ebook, or a subscription to your newsletter. The buttons have an important role in this: They reinforce the action that will be made. They need to describe the outcome clearly and concisely.
It’s more engaging for the user a “Request recipe book!” than a plain “Submit”.
#11: Radio button vs Dropdown
I know it’s easy to dump a lot of options to a dropdown… or a select, or a radio button, or simply a type box.
Well, they all can be the right option, but sometimes, is it really necessary?
Radio buttons are quicker to fill than select dropdowns. The issue with dropdowns is that the user doesn’t know the answer until the interaction with the control starts. On the other hand, with the radio button, you can see what the options are and quickly select the one you need.
Use radio buttons when…
- You want the user to quickly go through the options
- You have less than 5 options
- When the user needs to compare the options
- When visibility and speed are important
Use dropdowns when…
- You want to have a default option.
- You have a large number of options.
Remember to facilitate the user’s effort and include a filter if the options are too numerous.
Conclusions
I hope this will be useful to you. Of course, there are way more tips and tricks to forming creation. It’s a constant research matter for UX teams in this digital era of communication between apps, sites, and users.
There’s a lot to be done, from knowing your user, grooming with stakeholders and clients and testing, lots
References
Joe Natolli – Better UI
“Forms that work” 2008 – Caroline Jarrett & Gerry Gaffney
https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1
