Designing a date picker may seem like it’s not a big deal. 🤷♀️ However, even such small details can lead to significant usability problems. Unintuitive date input leads to users’ frustration, stress and annoyance, which means they probably won’t use your app again.
Hard to believe? Imagine that you gnash your teeth seconds after opening the app, and you have hundreds of other apps to choose from. It can’t end up well. And there’s only one chance to make a first impression, isn’t it?
As designers, we must endeavor ourselves to improve such small, but fundamental things. In this article, we’ll go through handpicked design solutions related to date inputs, and share our opinions on what patterns are supposed to work in what situations.
When you’re done, take a look at resources we picked for you as our must-reads. Sip a ☕️ and enjoy!
Most common date picker patterns
To succeed in designing the date picker you need to know exactly what issues have to be solved. There are plenty of different interface patterns created, waiting for you to utilize them properly. Let’s flick through the most common ones:
- text input
- scrolling date picker
- dropdown list
Text input is the most basic option for date input and the most effective one in many cases. It can be used to provide dates that are far into the past/future. If you decide to employ it, don’t forget to suggest your users an appropriate date format and/or handle the field validation. Works incredibly in combination with the calendar pattern. 🌟
Scrolling date picker is commonly used on the mobile devices. And it does its job well when the user has a limited number of dates to choose from. Otherwise, it will turn out to be slow and unproductive.
Dropdown list is still the most frequently used pattern on the web. It’s usually divided into next values: day, month, year. It can be used to provide birthdates, appointments and special events dates etc. But there are some problems that lie behind this pattern: sometimes it’s too hard to find the proper year because of a very long list, and the whole process of picking the date can be elongating. Personal trick: make your user to type in the year instead of to select it from the dropdown. 😎
Calendar pickers usually display one or two months at one time and remind us of the well-known printed versions. They show the days of the week and allow us to perform a bunch of actions. This pattern will go well with events that are close to the present time (within a current year) - it will prevent extra navigation.
Time for sweets! 🍩
Must-read articles in addition.
Date-Input Form Fields: UX Design Guidelines
Formatting a date-entry field may seem like a minor detail; however, even small interactions can draw a process to a…
A hunt for the perfect date picker UI
Today is the date picker day! After creating so many of them for different projects, I am still on a hunt for the…
See you in the next chapter 👋
New month - new topic.
Follow 10Clouds to get even more inspirations from different areas of design.