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

Product designer

Researching ways to highlight required fields.

WebSite

Internal product of the company. It is an instrument for designing electronic document management systems:

* configuring the database in the storage through the interface
* configuring user access
* designing the appearance of forms for interaction with operators.
  Neat UI often serves as a prototype for project customization for the customers' purposes, but sometimes it's enough to be a finished product.

Neat UI - DS

My first task at MetaPrime was to create a new logo for the company. The main requirements were:
- abstractness
- inheritance of the shuriken idea from the old logo
- blue or green tones

Rebranding for MetaPrime

Monp UI is a design system for document management software in style of gosuslugi.ru:

* two information systems are developed - social services and GIS service

* accessibility is released without plugins - with native browser capabilities

Monp UI - Design System

How often do we thank each other? Sometimes we get used to the good things and forget to be grateful. And this is an excellent reason to pick up a colleague! It was my personal project for my colleagues. I made 160 unique postcards and put them in the kitchen. While the colleagues were waiting for their tea, they chose a postcard, signed it and put it in the mailbox. On February 14, "the postmen" delivered the postcards to the recipients.

Saint Endorphins' Day

One of my hobbies is painting with watercolors and sometimes - digital drawing:)

Freehand and digital drawing

"Feed your Cat" is a game based on the principle that you can feed a cat endlessly. Gameplay is simple and addictive, with moving music. Skill your attentiveness and reaction!

Feed your cat!

The most important thing in LEVEL 80 music studio is the atmosphere. Here students become friends, relax and play music. It doesn’t matter how new you are, they will always support and motivate you!

The studio gives lessons in vocals, piano, guitar, and solfeggio. The mood and style of the studio is expressed in it's atmospheric posters. Everything is designed in black and lilac tones and contains musical elements.

Level80 music studio website

Sometimes I draw posters for the music studio where I practice vocals.

Posters

* designing of the frameworks Neat UI and Monp UI from scratch
* research, analytics, gathering requirements
* holding meetings
* building communications with related departments
* brand creation
* taking part in organizing corporate events

* UX-research of human-computer interaction

* designing CLI

* mentoring

Product Designer

UX\UI, graphic designer

* improving the internal products of the company
* some government projects across the country
* writing product documentation
* facilitating meetings
* developed onboarding plan and accompanied 10+ new team members
* planning, hiring and mentoring
* leading a 7-member team of UI developers and designers

Nataliia

Work Experience

Projects

Writing

Side Projects

Education

Contact