Proper design for date pickers
It’s not always obvious how to design a decent date picker. Let’s explore the best patterns.
Inputs are crucial components of any digital product. They may seem insignificant, but in any form — a input box, a check box, a drop-down or a date picker, they contribute greatly to user interaction experience. Any errors in the date input design may irritate and disappoint users, making them give up on dealing with the product interface. To avoid this, a designer should choose an appropriate pattern based on the aims of the end user.
Therefore, the most common patterns include:
1. Scrolling date pickers
2. Split date fields with drop-downs
3. Typing the date
4. Calendar picker
5. Year autofill pattern (not common, but we’d love to use)
1. Scrolling date pickers
This pattern suits for portable devices, but it works well only when the user has a limited choice of dates. Otherwise, entering a date turns into an inconvenient and tedious procedure.
2. Split date fields with drop-downs
Drop-down patterns are widely used in web to enter dates of birth, event dates, etc. In this case, the user is required to fill in three drop-downs: Day, Month and Year. Yet, is it not too many steps to complete only one date entry? Each of the three fields requires one click and one scroll, and if the date is in the distant past (a date of birth, for example) or future, scrolling the drop-down may weary the user. Now imagine a date range input, where one needs to put in two dates and complete 6 drop-downs respectively. We need to make the date input process as easy and quick for the user as possible, so it is advisable to use this pattern in combination with others.
3. Typing the date
This pattern is the easiest and often the most effective way to provide the user with a date input opportunity. It suits best for the dates in distant past or future, for example, for dates of birth. When applying this pattern, it is important to consider any possible user mistakes and set up the validation correctly.
Moreover, one should keep in mind that there might be differences in date format. For instance, an American user would read a date like 08.06.2019 as 6 August 2019, while for European users it would mean 8 June. This is why the input boxes should always be assigned appropriate labels.
4. Calendar picker
The pattern reminds us of a well-known printed calendar. Its advantage is a good layout that allows the user to choose a date quickly and easily. While it works well with the dates close to the present (+/- one year), in other cases it is better to allow manual date input by a combination of patterns. The calendar is particularly usable when a date range is needed, but you should remember to show the user two months at a time, since the date range input requires a greater scope of dates. Do not forget to provide letter indication for months to facilitate user navigation.
5. Year autofill pattern
Are there any ways to make user interaction with a pattern even more convenient and quick? Let us consider a typing date pattern. The pattern may be simplified by reducing the number of digits to be entered. Instead of a four-digit year format, use a two-digit one so that when the user enters two last figures the system fills in the first two, giving the user a chance to correct the date. For example, the user is required to enter their date of birth. The two last digits are 8 and 1. Obviously, the year of birth is 1981. Should any confusion arise, the user will always have the opportunity to correct the date.
Conclusion
As we can see, there are no universal patterns that suite every situation. That is why a user-friendly interface requires identifying the user aims correctly and then choosing the appropriate pattern. Quite often the best choice will be to use a combination of patterns.
For instance, a calendar picker will be appropriate in many cases, as it is a familiar, easy-to-see, simple and handy pattern for the user, which helps to lower the probability of date input mistakes. However, the calendar is not handy for the dates that are too distant from the present, so in some cases it might be expedient to combine it with a typing the date pattern.
Another illustration of a good grouping of patterns would be a scrolling and typing combination. Imagine a mobile phone application that allows its users to create tasks and assign the deadlines for their completion. The deadlines for the tasks may be short-term (1–5 days) as well as long-term. In case of the former, scrolling will be quite convenient for the user, while in case of the latter it will be lengthy and tiresome, so a better option would be allowing for manual date input.
If you enjoyed this post, click on the applause button to help other people find it.
Thanks,
