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

You can ask users for their date of birth in many different ways.

First of all, it can be a side note.

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

Let’s review typical mistakes and then devise a plan for designing a perfect date of birth input.

Using dropdowns for age

While for days and months, 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 precisely how to write 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 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 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 hints at the number of digits the user should input. It would also be nice if your system recognized whether the user typed a value with or without the leading zero.

When the first value is filled, the focus should automatically change to the following input.

This is ideal: users already know their date of birth, so they will naturally enter the numbers that they have 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 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.

natalia

Recent Posts

Ultimate green color guide: psychology, codes, and why your brain is obsessed

Your eye peaks at 555nm wavelength. That's literally green. So when you can't stop staring…

3 days ago

Free MCP server that will save you 3 hours of icon hunting every day

AI coding tools got smart about everything except icons. Still hunting through browser tabs like…

2 weeks ago

Liquid Glass icon generator, 53 curated styles, and more: Illustration Generator vol. 2

Your design workflow just got stupid fast. Skip the creative block spiral and generate exactly…

2 weeks ago

UX gems: from tooltips to flying unicorns

Small design touches that create loyal users and word-of-mouth marketing—secrets that will make people love…

1 month ago

Is this the end of painful character design for game devs?

How Distinctive Games used AI generated faces to nail character design for Rugby Nations without…

1 month ago

What they don’t tell you about taking your freelance graphic design career

From insurance chaos to client nightmares—the freelance design world hits different when you're flying solo.…

1 month ago

This website uses cookies.