Mobile datepicker UX

Question

We are implementing mobile datepicker and considering 2 options:

Vertical Scroll

Horizontal Button Change

Which is better UX wise?

Answer 1

Favouring B

Android date picker default is your 'Horizontal Button Change', so that is the most common pattern that people will have come across. I always pick the most familiar pattern even if perhaps there are alternatives that might save a few clicks. It is also one of the most common patterns on the web.

There are some apps e.g. Sunrise that popularised the scrolling date picker. However this is a calendar app, so it would appear that most of the time you will never need to scroll for more than a couple of months. Most of their videos don't use the date picker at all, they seem to favour use cases where appointments will be this week rather than this or next month, e.g. meeting for lunch tomorrow.

So if you intend users to scroll for more than a couple of months I would again favour the 'Horizontal Button Change'.

Favouring A

Saying all that, the scrolling calendar is quite a nice 'emotional' experience, there's a nice flow to scrolling through dates with your thumb, each month scrolls to the top and then sticks there. The Sunrise demo video is attractive.

Consider your requirements

B is simpler and less confusing, depending on your target audience A has benefits.

There's quite a nice article that takes you through the process of deciding upon the UX for a date picker. You need to consider the use cases for your date picker. How far forwards / backwards in time do they want to go? The article has the following initial suggestion:

Before working on the sketches, it was imperative to pick the different ways dates could be represented and sorting the information that went along with the dates on the form to create an information hierarchy.

The form elements were deduced to-

1. Place — Where the user wants to visit.
2. In-Date — When the user wants to check-in.
3. Out-Date — When the user wants to check-out.
4. Number of guests — How many others traveling.

Answer 2

UX-wise, you should test it with users. But a scrolling datepicker is quite common on mobile. 2 Things you could take into account:

1. A fixed header for the month; now if you scroll down, the month February disappears, with a fixed header for the month, you keep the context on screen at all time.
2. What is the average input for the datepicker? Is it days, weeks or months away from the current day? In case of a large timespan, it could be beneficial to add the option to type in the dates instead of scrolling towards 2020 for example.

https://www.nngroup.com/articles/date-input/