UX

Scrutinizing inputs: you ask for your user’s date of birth wrongly

Expert tips on how to build “date of birth” inputs for your forms.

This is a part of the book “Re:Form” written Victor, who has been working as a frontend and backend developer for more than 10 years and has 3+ years of experience in UX design. Here we are covering only one type of input, more interesting and applicable insights you can find in the full version.

Date of birth

There are many different ways you can ask users for their date of birth.

First of all, it can be a side note.

We shouldn’t forget that in different countries the format of the date varies. It might be MM/DD/YYYY or DD/MM/YYYY. This should definitely be taken into account.

Let’s go over typical mistakes, and then we’ll figure out how to design a perfect date of birth input.

Using dropdowns for age

While for day and month it might be more or less okay to use a dropdown, the year is not a good fit at all.

Dropdowns don’t work well with a large number of options. In the case of the year, the question is: how many years should we display? 80? 90? 120? In any case, the number will be huge.

Incidentally, sooner or later, many of us get the feeling that we’re getting too old because we need to scroll more.

Also, remember that users probably know exactly how to write down their birth date in their local format. It’s almost like a signature, it comes to people right away.

If you use a dropdown, users will need to scroll instead of type, and this is not as natural as typing what you already know and have written down many times while living in your country.

Calendars

There is no point in using calendars at all because you don’t know what initial date to set and, in any case, users will need to click or tap way too many times. So calendars are absolutely not suitable for this.

Using masks and placeholders

Using placeholders and masks looks like a decent solution. The problem here is that not everybody knows what the “DD”, “MM” and “YYYY” are.

Apart from this, it might take some time to realize if you should or shouldn’t set the leading number at zero. For example, should it be 05 or 5 for a month? Yes, we have two letters “M”, but users probably need to spend some small amount of time to get it.

Best solution

So the best solution is to have three inputs: day, month, and year. Depending on the user’s locale, you might need to change the order to month, day and year.

Every input should have a label and a placeholder.

The placeholder behaves like a hint of how many digits the user should input. Aside from that, it would be nice if your system recognizes the case when the user has typed a value with or without the leading zero.

When the first value is filled, the focus should be changed to the next input automatically.

This is ideal: users already know their date of birth. They will naturally put the numbers that they have already inputted many times before.

There is almost no interaction cost because users don’t need to open dropdowns or calendars, manually switch between inputs, or perform any other kind of interaction.

About the book

Re:Form is the book for everyone interested in forms usability.

About the author

Victor is a full-stack developer who is passionate about making good UI.

Recent Posts

Icons that are perfectly shaped for any design

Each design has its own scale. It applies to elements size and like thickness. Now,…

7 hours ago

What is a glyph icon?

There are many ways to define a glyph. Let's take a look at what glyph…

1 day ago

Hues unraveled: exploring lavender in design

Learn how to use lavender color in your designs. (more…)

3 days ago

6 websites that demonstrate the power of surprise

Keeping visitors on your page with surprising, creative tactics can help you convert them into…

1 week ago

Search for an icon or generate one? SVG icon AI-generators test

As designers, we don't need just any icon. We need one that is a perfect…

1 week ago

The ultimate graphics plugin for your Miro boards

This Miro plugin has it all: icons, illustrations, and photos from the Icons8 library to…

3 weeks ago

This website uses cookies.