You may want to look into the future or dissect the past, when searching for some data it is likely you want to do it by filtering on some kind of dates.

Don’t be lazy and render 3 dropdowns for month, day and year. That just shows you don’t care for the user. As Luke Wroblewski demonstrates, picking a departure and return date this way takes 24 taps in total.

Image Credit: Luke Wroblewski

Looking into the future

A very common use case for picking date ranges is when you are interested if something is available in the future, like when booking a flight, a car or a hotel room.

Make sure to disable dates that are in the past. If your business works in a way that it only lets people book up to one year ahead, make sure to disable dates that are outside that range.

Don’t leave open question marks, explain why it is not possible to select certain dates. If the user has to pick up the phone and call in, that will cost you money, but your visitor might as well leave and never come back.

Filtering the past

Another common use case is filtering for past data. Think of any type of reporting or analytics tool. We come across date filters in almost every business application. When filtering for past dates you want to default to something meaningful.

For example if the user usually starts out with today’s data, it does make sense defaulting to it. Observe and find common ranges that the users are constantly getting back to and create presets for them. They might be interested in Q1, Q2… Take a look at your logs and figure it out.

Sacrificing speed for minimizing mistakes

Enterprise users are more likely to type than use nice dialogs and UI for picking data. They prefer typing and use shortcuts because they can do it faster. Typing is OK in certain scenarios, however it would be even better to aid the user for getting structured data.

Presets and smart defaults work like magic in these scenarios. Provide shortcuts to common selections. Typing is cumbersome on a mobile devices so providing alternatives for people who like to type on the desktop will make happier users.

Be smart about the defaults

When setting defaults zoom in on the user and their goal. Focus on what the user wants to see.

Let me give you a couple of examples.

• If someone is looking to book a room for a conference and is following a link to the hotel, remember the dates. Don’t use the generic default that everyone else sees on the website. Show something meaningful to the user. You can also think about enhancing the form with something like “arriving x days earlier” and “leaving x days later”. Make it easy for the user to pick and adjust.
• You are looking at a nice hotel for a romantic weekend. You get on the hotel webpage and see some dates selected by default that look good. You hit search to find out the price, and it shows no rooms available. Why even default to those days? Furthermore, if the hotel is fully booked don’t even have those days available as selections. Tip. If the user ends up at a “no results” page, get creative and show something engaging.
• You are looking at monthly performance reports. When you open up the page it is likely you are interested in the last complete month. Having the screen defaulting to today doesn’t help you get to the data faster.

Make the page remember what the user saw at their last visit, it can give the user a massive head start.

ABV (Always Be Validating)

Don’t let the user enter “end dates” that are before the “start date”. Restrict the UI as much as you can and enforce a valid selection, but also beware of doing arbitrary choices for the user. If the user puts “return” before “depart”, moving both around to fit the rules is a bad choice, not just because the previous state of the UI is lost but also because the user won’t know what just happened. Automatically disabling the dates that are before “depart” is a better solution for this.

The calendar

Use the calendar whenever the user needs to cover a short period of time. It helps visualize the dates within a week. Enforce a valid selection, disable days the user should not select. Use a single instance of the calendar for picking both a start and an end date instead of having two popups.

See an interactive demo of the Calendar

Scroller

The date scroller is a familiar UI control for mobile users. It helps the user get to past and future dates very fast, so getting to 1960 is a breeze.

See an interactive demo of the Range Scroller

If you don’t need to get a full date and you are only interested in the year, think about making something easy to use and understand. Try fitting the selection onto one screen instead of two separate dropdowns.

See an interactive demo of the Custom Scroller

Predefined selections

Use presets for quick access and help the user be more productive. Remember that he is not there for picking a date, he is interested in the filtered data.

See an interactive demo of Range Presets

No matter if your users are picking dates to look for upcoming schedules or analyzing logs and past data, make it easy on them by providing smart defaults, presets and shortcuts.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.