A hunt for the perfect date picker UI – UX Collective

Today is the date picker day! After creating so many of them for different projects, I am still on a hunt for the perfect one. Let’s try to find out what makes a date picker good or painful to use.

The date picker design only looks easy. In fact, picking the date is often a painful experience. Bad examples can be found all around the web.

I truly believe that to design a good experience, it is important not to jump into decisions from the start. Take a time to ask questions, find the answers, create user stories and explore the web.

Common date input patterns

1.Text input. The simplest way to go is to let the user type in the date. This always works if the proper validation is provided. Can be used together with the calendar date picker.

Date input example

2. Dropdown to choose each value: date, month, year. Still frequently used on the web. Can become really frustrating, especially if the user needs to input time also.

Date of birth picker by Charlotte Swift

3. Calendar. The most frequently used way to choose a date range. Multiple examples can be found online. Mobile-friendly.

Calendar by Andrew Lucas

4. Timeline. Good for picking a date range in the limited period. Can get inaccurate for longer periods, not mobile-friendly.

Timeline example by Bilal

5. Scrolling date picker on mobile devices. Works nicely, when the user does not have to scroll too far into the past/future.

Mobile date picker

Using these patterns combined or alone can create a good user experience when choosing a date. How to combine them is a question for each specific project.

Example of text input and calendar patterns combined

We will be reviewing the real use case, because context drives most design decisions (and it better be taken into account!). We’ll try to choose the best pattern for the situation.

Case: device performance analysis. 
User: technical manager. 
User’s main goal: analyze device performance, detect performance degradation over time.

User Q&A

So we already know our user and his goals. The date picker is one of the tools to reach this goal. But there are still questions to be answered before we grab that sharpie.

  1. What should a date picker be used for?

“Drilling down to the older performance data. I want to easily see reports from the certain period.”

Author: Kateryna Romanenchuk

Collect by: uxfree.com