Date range picker in mobile app

Question

In my current project, I'd like to filter a list by a date range.

I'm not sure how I should design the interface in such a way that it's as easy as possible to select a range. My first idea was to implement it like this:

^{Source: http://analyticsapp.com | the target device doesn't have to be an iPhone}

However, in most use cases the exact date range is not needed, as the user doesn't know the exact date anyway.

Some use cases & restrictions:

• the further away a date is from the present, the more inexact can the result be. (e.g. it does matter whether it is 7th of april or 14th of april but it doesn't matter whether it's the 5th of january in 2002 or the 25th of january in 2002)
• default range: present <-> present + 30 days
• a precision of a week should be sufficient

I ended up looking for a range slider with a (pseudo-)logarithmic scale which might look like this:

• 12 months ago
• 6 months ago
• 2 months ago
• 1 month ago
• 3 weeks ago
• 2 weeks ago
• 1 week ago
• present
• [same as above]

How would you implement such a date range picker? Would you stick to the classic solution or do you know any different approaches?

Answer 1

That's a pretty nice challenge. I think the example you show is best for picking exact start and end dates. IMHO it doesn't work well for date ranges:

• up to 8 'clicks (click start date, day, month, year + scrolling to set the dates)
• changing then again requires a lot of clicking
• exact dates don't matter anyways if the date range is years ago
• exact date pickers also lack the 'inspirational factor', i.e. some example ranges like 'last 30 days'

I think your solution with a range slider could work really well. The challenge is to

1. make clear that long ago timeframes wouldn't return more accurate results if exact dates are picked
2. design the slider interaction in a way that both, exact dates and bigger timeframes can be picked easily
3. deal with past and future time frames

Maybe two different interfaces can help? The user would select whether he wants to use a time frame or exact dates and see the appropriate controls.

^{download bmml source – Wireframes created with Balsamiq Mockups}

By no means this is a final solution but maybe it's some inspiration for you and also others here on the way to solve this.

Answer 2

I think the problem is that with your stated use case you will potentially end up with two different levels of granularity within the one query. If I understand your use case, a query may be from (say) January 2002 to 27th March 2012. The precision of the start date is by month, the precision of the end date is by day.

I think the logarithmic scale would only work when the end date is fixed (i.e. at the present time). Having two logarithmic scales would end up with something like:

Start Date: 6 months ago

End Date: 2 weeks ago

I think this is quite a confusing structure.

My feeling is that the most user-friendly way of presenting it is to use the classic date control, with users being able to select day, month and year for both start date and end date.

However, the actual result-set would use a fuzzy matching system. For example, if the user entered 12 January 2002 to 27 March 2012, it would return matches for that period plus the remainder of January 2002 (or whatever level of precision is applicable at that point in the past.

For matches outside the specific range selected it could possibly include a message like "2 Days before 12/01/02".

Advantage: Easily adapts to all levels of granularity on the server side, so the user doesn't have to get their head around the concept of mixed granularity.

Disadvantage: May cause frustration if the user very carefully selects exactly 14th January 2002, only to see their result set show the whole of that month.