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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2Fa9449f2a-3672-4a62-b5fa-e9f7a660e92b.png?alt=media&token=6c9bc693-32ac-49bb-b424-5d927cfb4642","id":"a9449f2a-3672-4a62-b5fa-e9f7a660e92b","width":1155,"height":836,"filename":"1.png","type":"image/png","caption":"","border":false}]}
```

* 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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2F3b503aee-ffb5-4a16-a180-e2909315cea3.png?alt=media&token=7ed29301-3fbc-4a26-afa1-c73c881153b2","id":"3b503aee-ffb5-4a16-a180-e2909315cea3","width":1155,"height":836,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

**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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2Fcbddec43-6998-410d-8596-0fa2121f9a7a.png?alt=media&token=f454ed3c-e376-4cdc-b57b-1a3a47492fb4","id":"cbddec43-6998-410d-8596-0fa2121f9a7a","width":1155,"height":969,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

**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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2Ff7da2ac1-c371-4931-9d21-69fa5da7e681.png?alt=media&token=ead4a483-4274-4edd-8e8a-41d9c56e5511","id":"f7da2ac1-c371-4931-9d21-69fa5da7e681","width":1155,"height":969,"filename":"4.png","type":"image/png","caption":"","border":false}]}
```

**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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2Fe3e7b0dc-3764-477d-a913-a59efee3b84e.png?alt=media&token=1a2f5592-fe16-4f42-ae39-310a8c78db5c","id":"e3e7b0dc-3764-477d-a913-a59efee3b84e","width":1155,"height":852,"filename":"5.png","type":"image/png","caption":"","border":false}]}
```

**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 :)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2F221f01e8-4ccd-4f61-8435-21210462ceee.png?alt=media&token=6822e017-c711-4fa6-864e-8d31b94b2631","id":"221f01e8-4ccd-4f61-8435-21210462ceee","width":1155,"height":729,"filename":"6.png","type":"image/png","caption":"","border":false}]}
```

**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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2F75ba91dd-868f-4a52-aa4e-6d0039ad84aa.png?alt=media&token=ae7fc542-e14a-4865-b6b1-93d3f9032d15","id":"75ba91dd-868f-4a52-aa4e-6d0039ad84aa","width":1146,"height":138,"filename":"7.png","type":"image/png","caption":"","border":false}]}
```

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:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2F9plUegN8VNod9vpnycTa%2F976f4bf6-c07f-4275-832c-a2aa74e715bf.png?alt=media&token=b27edce3-90dd-4eb3-a403-36b4820457d0","id":"976f4bf6-c07f-4275-832c-a2aa74e715bf","width":1155,"height":729,"filename":"8.png","type":"image/png","caption":"","border":false}]}
```

Required fields

### About

The company is engaged in government projects in many regions of the country. For me, as a former applicant, this was an interesting fact. Russia is a large country and it is often very pleasant to see references to your hometown in an unexpected context. Therefore, on the main page we decided to show in which regions we work.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2FGZBIkjjkdggT03rjpwrO%2F41003f24-944a-4d47-a2b2-1141de71ec94.png?alt=media&token=c96276c9-f415-4bc8-8ab8-a9c86472eadb","id":"41003f24-944a-4d47-a2b2-1141de71ec94","width":1160,"height":843,"filename":"metaprime.png","type":"image/png","caption":"","border":false}]}
```

When you hover over a location, you are able to see the landmark of the region.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2FGZBIkjjkdggT03rjpwrO%2Ff043ec41-9f89-4b93-abeb-7510ed787bc1.png?alt=media&token=bcf0d410-c1c3-4140-b7a1-8b0e51b6a0d2","id":"f043ec41-9f89-4b93-abeb-7510ed787bc1","width":638,"height":361,"filename":"spb.png","type":"image/png","caption":"","border":false}]}
```

### For future colleagues

I also paid a lot of attention to the contact page. Our office is located in a business center with a complex internal layout. We posted a photo-quest "how to find us" on the website. Almost every new employee of ours thanks us for this page to this day :)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FbdrgG6X3FjYSTPG9PLDpKoDqAII2%2FGZBIkjjkdggT03rjpwrO%2F773e9888-171d-4e82-85bd-b9a7ae68104f.png?alt=media&token=f9ad0c48-e079-4ace-80cb-b823315d4b9a","id":"773e9888-171d-4e82-85bd-b9a7ae68104f","width":1872,"height":1188,"filename":"Frame 128.png","type":"image/png","caption":"","border":false}]}
```

### Saving traditions

The filling of the site was carried out by the heads of departments. It was important for them to work in a familiar Wordpress editor. Regarding my role in writing content for this website, I was only engaged in the design of vacancies and the description of the Neat UI product.

MetaPrime website

About

For future colleagues

Saving traditions