How to improve form's UX design
Which one should we use for good user experience design in form fields?
Required labels let us know which fields are mandatory in a form.
However, when required labels or required form fields outnumber the optional form fields, it can create visual clutter.
When we look at these two options, Option 2 and Option 3, we can tell which one is busier visually.
If we only label the optional fields, it takes the opposite approach and tells us which fields are not mandatory and which fields are not required.
One approach is when we have all mandatory fields marked with an asterisk.
This approach also focuses on the required fields by marking the mandatory ones, but we remove the instruction line.
In this last option, we mark only the optional fields.
The answer is my favourite answer: it depends.
It really depends on the form.
For example, if we have a form where all fields are required, then instead of marking each of them with an asterisk, maybe this is something that you could do.
We can say 'all fields are required' on the top of the form, and by adding this line, we remove the visual clutter of all of the asterisks.
One more thing to keep in mind when using an asterisk...
You must have seen a lot of forms on the internet using a red colour on asterisks. But don't follow that design.
I'd instead recommend using a different colour because we should keep the red colour for error messages. Choose something very distinct from red and different from your brand colour scheme.
Here I'm using a teal colour:
NN Group recommends marking required fields in forms.
They suggest using an asterisk to mark required fields because it's an easy way to improve the form's usability.
Only marking optional fields makes it difficult for people to fill out a form.
Looking at our three options, based on NN Group's suggestion, they would recommend against Option 3. So they would either suggest Option 1 or Option 2.
The form's usability wouldn't be complete without including the accessibility of a form.
What Deque says about accessible forms:
The correct answer is still, well, it depends.
It depends on the form. It depends on the product.
For example, if we look at the Picsart app and its registration flow & how they present the input field without labelling any of them:
This is a perfect example of breaking the rules and UX best practices because they have a good reason.
In the Picsart registration flow, all of these fields, e.g. email address, first name, last name, and username, are presented separately on the screen. One input field, one screen, and one call to action button.
You can get away without labelling the input fields with mandatory and optional text if you do something like that.
Because it's easy to understand for users that if they see one input field on the screen, they need to fill it in to go to the next screen.
If it is a larger form with more input fields, and I can't break it down into chunks, I prefer Option 1. Option 1 is my go-to version, and you can't go wrong with that.
Another discussion suggests that if an input field is optional, why do we even display it on the screen if we don't do anything with it? If it doesn't provide value to the customer, why do we ask for it?
So, this is just another thing to consider & think about when you add an optional field to a screen.
Let's ask ourselves, is it essential? You might want to remove the optional fields if they are not mandatory.
If the company doesn't do anything with the data, why do we even ask for information like that?
When designing a form, always consider the user's experience & always ask yourself whether an input field is required or optional.
This article is the written version of my YouTube video, check it out if that’s your thing 😊