When I started developing interfaces, I reviewed all the most popular approaches to designating required fields. I tried to apply them to my project and nothing was suitable. Data entry forms in my case were randomly changing: one had lots of required fields, while another had few. Some forms contained dozens of inputs, while other consisted of a pair of fields. At the same time, it was necessary to apply one approach within the application. So, I had to find something universal for any potential situation.
In this article, I collected ideas I found from various sources. All of these solutions are applicable in the right circumstances. I will explain why these concepts did not work for me and share my approach.
Labels with red asterisks
This is the most popular and the least expensive approach in development. However, where it doesn’t fit is on the forms loaded with required fields. The complex form factor of the symbol is noisy and overwhelming for users:
-
Asterisks push labels and beat the grid with it.
-
Difficult to isolate required fields.
-
Even if the fields are filled, the form doesn’t become visually lighter.
Border highlighting
This is applicable only in very rare cases, when there are 1-2 required fields for the entire form. And as a rule, the fields are not highlighted initially. They are only highlighted when the user has already confirmed a form with empty required fields. Otherwise, the interface just screams at the user:
Red subtitles
Minuses:
-
it increases the height of any field, even if it is optional,
-
applicable only if there are few required fields and the form is small.
By the way, the signature doesn't have to be red. We could use less aggressive colors but then the eye wouldn't be able to distinguish it. Not suitable for regulations in my field. So the form screams again:
Non-red subtitle for optional fields
I like to see this option in interfaces, but in terms of applicability it mirrors the previous option. It is good when there are few optional fields and they are grouped. Otherwise it would be unnoticable like this:
Stepper
Can be used when a large form has very few required fields. Before filling out the form, you can inform the user about which fields are required. These fields are usually grouped together and focus attention towards them. It is often impossible to continue without them.
I like this technique more than others, because there is clear communication with the user. But this option doesn’t suit me: our business forms are too complex to always be able to group fields and customize the form for any given situation.
Icon with a tooltip
Even better: the icon serves as an anchor to which the eye clings. There is always a tooltip explaining what is mandatory, and there is no need to allocate space for a legend. Why it didn't work for me:
-
many icons, again, create a lot of noise,
-
our regulations don't allow avoiding the red color to indicate required fields,
-
in our interfaces this place is already occupied by an another hint :)
A philosophical question: why optional fields?
There is an opinion where a user-friendly interface will not require the user to waste time filling out optional fields. Therefore, there is no need to annoy the user with red stars and warnings - only required fields should be offered for completion.
I can agree with this opinion in certain cases:
-
if I am registering on a website/application,
-
if I am buying a ticket,
-
maybe, another well-formalized operation.
When it comes to a delivery address or table reservation, optional fields appear:
-
comment for the courier
-
wishes for the table
-
additional contact number
So the question of designating required fields is and will be a part of our reality in the years to come :)
My solution
At the time when I was designing my first UI-kit, I wasn't able to find this solution in other interfaces. Perhaps by now someone else has reached it:
Mandatory:
-
a circle instead of a noisy star significantly relieves our complex forms,
-
the marker is inside the field and does not affect the layout.
The marker changes color when filled:
-
attention shifts to other fields,
-
the operator receives a small achievement: “the light has stopped burning",
-
the form is additionally unloaded as it is filled.
This technique of indicating mandatory solved all the problems of our forms associated with unpredictability and regulations. In any given situation the interface looks structured. As the required fields are filled out the user sees progress:
