In my application, users select a date range for which results are required. The UI looks something like this:

My users don't like this, because the date picker requires them to select a specific date. This is far more precise than they require - most of the results compiled by the system have results just monthly or quarterly. Some are only yearly.

The two ideas I've come up with are these:

On the left, just use a combobox to select from valid dates. The problem with this approach is that sometime the results will be daily and the valid date range goes back to the 1860's. That adds up to far too many items to handle in a combobox.

On the right, using a trio of comoboxes to select the date. This has some advantages. If the results are going to be monthly, I could disable the day combo; if the results are going to be quarterly, I could also restrict the items available in the month combo. But, it seems that this design requires a whole heap of clicks to use.

What's an alternative design for the UX that allows users to select just "useful" dates more easily?

My technology stack is C#, WinForms, .NET 3.5

Update Oct 1

The date ranges selected by my users are typically long - several years to several decades - pulling back sparse results over a long period.

The only common defaults that have been identified are "As early as possible" for the start date, and "Until today" as the finish date.

Lots of good ideas in the answers to date - thanks to all.

Update Oct 2

Some of the answers below (and I assume many of the readers) are assuming I need the date range for report generation. Actually, this particular part of my application is more of a query engine. If this detail inspires any new ideas, please answer away.

13 Answers
13

In general users are pretty accurate and fast at entering dates as strings in a text box as long as your validation isn’t unnecessarily fussy and provides decent auto-correction and defaults for the sub-fields (e.g., accepting 2-9-04 as well as 02/09/2004). Calendar controls are great to provide as an option when the user isn’t certain of the date (e.g., for cases when the user is thinking “Wednesday next week”), but they shouldn’t be the only way to enter dates. Separate dropdowns for each subfield makes it slow for the user.

If you have access to query logs, study them to get a better sense what kind of dates users are using. While you may need to support arbitrary dates back to 1860, you may only need to optimize the design for a small number of dates or date patterns.

Here’re some possibilities:

Defaults. Possibly most of your queries are predictable just from the page the user is on (e.g., for last month or last quarter or last year depending on the page/window). Default your From-To range to these values for each page and users will hardly ever have to enter anything.

List of typical date ranges. If a few date ranges constitute the vast bulk of your queries (e.g., each month of last year), list them in a list box or radio button list. The last one would be “Custom” which enables a couple text boxes with calendar controls for user entry of specific dates.

Dropdown for common inputs. If there are a relatively small predictable list of From and To values, then provide From and To combo boxed that each accept any user-typed date but with a dropdown lists of the most From and To common dates (e.g., beginning of each quarter in the last year for the From field).

Single Text Box. If most date ranges are whole months, quarters, and years, then provide two methods of entering date ranges. The default has a single text box labeled “Month, Quarter, or Year;” which accepts input like “Sep” (defaults to most recent September), “6/09,” “3Q06”, and “1933.” Study user written materials to see what kinds of strings to anticipate. The non-default method provides separate From-To text boxes for arbitrary dates.

Micro-grammars. If it’s mostly your expert users that are complaining about date entry, then consider supporting micro-grammars for the From and To text boxes, where the user can enter an exact date or various other syntax shortcuts (e.g., “Last Quarter” or “LQ” in the Start box is interpreted as all from the most recently completed quarter). See Collecting data efficiently with text box micro-grammars

Microgrammars. Love the term -- thanks for this tip that was a highlight of your comment for me. I think Apple's Data Detectors are pretty awesome at this in Mail for instance.
–
Julian RHSep 30 '10 at 13:17

Great ideas. Given the typical length of date ranges (see my update of the question, above) not all of these are appropriate. Allowing flexible entry through a text box and forgiving parsing, perhaps with a microgrammar, seems like a winner. I'll include a prototype of this in my user testing.
–
BevanSep 30 '10 at 18:28

the textual input may give you i18n issues, is 2-9-04 in September or February? of course this may or may not be an issue for you depending on where it has to work and if you can localize
–
jk.Sep 27 '11 at 9:50

Well ... the application is used by a bunch of internal users (it's not outward facing), so it would seem defaulting to NZ regional settings D-M-Y would be safe ... except that many of my users pefer the american M-D-Y for some reason. Sigh.
–
BevanSep 28 '11 at 0:15

Something like that might let them visually pick it? With the bubble above the list, it should make it easy for them to see what they've got. Earlier/Later a buttons/tab stops to move the year, or similar. Slider is keyboard accessible.

Innovative. I'd need a twin-thumb slider to allow for date ranges; I think my UI pack has one of those. I'll prototype this to see what my users think.
–
BevanSep 30 '10 at 18:35

I like this, given that they don't have to choose the exact dates. A textbox could still be helpful for quick input (e.g. "Jan 80 - Mar 93").
–
dbkkOct 2 '10 at 2:50

Alternative to the "twin-thumb slider" should be a single point on the timeline but with a centred overlay which extends to the left and right of the centre point indicating the date range about the centre.
–
cottsakNov 2 '10 at 2:09

This is an awesome idea. Expressing the dates in a relative fashion and limiting the context to available data solves a number of problems just by the design. +1
–
cottsakNov 2 '10 at 2:10

Use two calendars and dim out the days that aren't selectable. You'll give your users the advantage of calendars (being able to see an entire month at a time, skipping back and forwards in time easily, and being able to select any date they like) with the constraint of only certain valid dates. When a user clicks a dimmed date, give them some feedback about why that date is invalid, or use a legend.

Hipmunk.com does a great job of simplifying this. They have two calendars in view at all times, and dates before today are greyed out (it's so obvious as to why in this case that they don't need to specify why, but you might have to). Clicking on a date selects the start date, and clicking again selects the end date. Note how they have date fields in place as well so you can type if you want, and the fields get highlighted as you click to indicate which date you'll be selecting. It's unconventional and not quite "don't make me think" yet, but it's a great way to combine these controls elegantly without adding a bunch of rich widgets. Check it out:

One thing Hipmunk could still do IMO is highlight the days between your departure and return, just as an extra visual detail. Right now your eyes still have to parse the space between the two dates as "oh right, each row from this date until that date is where I'll be away".

There's a lot to like here. I'll definitely prototype something in this style to try out.
–
BevanSep 30 '10 at 17:58

I love hipmunk but not their date input. The input field is away from the calendar display that is not very noticeable since it doesn't show up interactively. As as user it seems to throw me off: I click at the input field and expect and calendar to pop up, it doesn't, I look around, ah it's there. So ux is not very smooth for me.
–
Anna RoubenAug 14 '12 at 4:21

This is actually from a web-based software I use at work, but the idea can be translated fairly easy to WinForms.

I generate reports of varying date ranges all the time with this control. The textboxes are not masked, and they are rather forgiving on the values that can be converted to dates, so I can free-text different date ranges in without an issue. Once you tab out of the field, the date is formatted to a "proper" date format. If it can't figure out the date, the text turns red and has a little error symbol next to it (like if I type in an ambiguous date, like 1109).

If I need to do something specific, I can click the calendar button to the right of the textbox to see the calendar (say, if I need to see reports from the third week in March 2009, I don't need to know the dates off the top of my head).

I prefer this style, because it takes me barely a second to fill in the date ranges - it's just 010109tab030109tab and then I'm on to the next set of details.

As for your third option, I have a piece of software I have to use that uses that style, and I hate it - especially since I have to use the mouse. I'd also like to point out, the dates shown are the default dates when I load the page, so by default, it would like me to search for items greater than the future, but less than the present. A HUGE downside to this is that the years are hardcoded in the dropdowns - we had to wait until February 2010 for 2010 to be added so we could search for anything recent.

If you know in advance that a particular query only has quarterly results, you could change your layout some, and go with a selection and year choice like this:

And you could disable the quarters for the current year that haven't been generated yet.

I didn't read all the answers. Perhaps someone has already suggested starting with the controls that most users need most of the time, and then progressively disclosing additional controls. For example, click a link to reveal controls for the day and month, for several non-overlapping date ranges, and so on.

I'm not entirely sure what's going on, but it looks as though the user drag-selects the date range of interest. This would work well when the selection is usually short, but in my case the selection is typically several years, if not decades.
–
BevanFeb 21 '12 at 20:12

Not that implementation should matter here, but his question specifically states that he's working with WinForms. jQuery won't be much use.
–
Rahul♦Sep 30 '10 at 20:46

I agree that the jQuery implementation won't help much, but the concept is great. 90% of the time I want to pick the "last week", "last month" or "last year" etc. Having the "widget" determine this for me is very helpful in my opinion. It is great because I don't even need to know what today is.
–
scunliffeSep 30 '10 at 22:06

You could display a normal looking calendar picker, but if the user selected the month from the title bar then that would automatically fill in the start and end dates as the start and end of the month. Similarly for the year.

The user could override the end date if they wanted a slightly different range.

Can you present different date pickers for different report types (e.g. you said some were annual - in which case you don't need any more than the year - which could be a simple text field.)

Is start/end date the way that the users think about reporting? In several projects I've worked on the people who want reports think in terms of a date and a period of time rather than two dates. So for quarterly reporting they might want 4 years started Q3 1980.

You make a good suggestion. Unfortunately, the elements include for processing can be a mixture - any or all of daily, weekly, monthly, quarterly, yearly. And, at the point where the form is displayed, I don't know which of these will be selected.
–
BevanOct 2 '10 at 8:43

I was similarly thinking of just a year, but wondering—for cases where the user gets too many results—if you could expand a link to show more controls.
–
JeromeROct 3 '10 at 21:08

I just posted an illustration of what I mean, in a separate answer to this question.
–
JeromeROct 3 '10 at 21:23

Heres how i solved a similar problem ... you could change the 30 days / 60 Days / 90 days to alert the most common reports generated (yearly / quarterly / monthly). The date range feature opens a tool tip with date range capabilities for those users who are specifically looking for a date range, but doesn't force a user to enter in dates in order to generate results.