Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In our Java app, we let users see a full list of all events. Users need to filter the event list so that they see only the events they care about.

Most users are happy to use canned date ranges (today, yesterday, last 3 days, etc). However some users need to specify the start and end date of their range.

Currently we have this setup in a bar immediately above the list of events:

mockup of data filtering options

If the user picks something from the Date dropdown, the From and To boxes are populated automatically. If the user picks or types a date in either From or To (or both), the Date box shows the text Custom. This is not a pickable option though... it doesn't appear in the dropdown.

I am concerned that this is a non-standard way of handling this situation. Is there a more established way of letting users easily switch between a canned range and custom ranges?

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

Inline with other posts above I can't help thinking that Google have done this well in their Analytics console...

enter image description here

Whereby the user can select their date range from the calendar control (or type dates, in a variety of formats, into the text boxes.

However if they select anything but "Custom" from the Date Range dropdown control these options are disabled.

Have a play!

share|improve this answer
    
Thanks. I'm picking this as the answer because your example has led me to my solution. I'll borrow lots of cool things that Google did. I like the error handling (the date box gets a red border if you enter nonsense) –  Melanie Albrecht Jan 15 at 20:33
add comment

I'm currently implementing a date range picker like yours but with a few differences:

  1. I have "other..." as an option below the canned date ranges. This way people will know that they have more options and will choose that if their choice isn't in the list.

  2. The custom fields are hidden until "other..." is selected. This is just a design choice to make the filter clear from clutter.

  3. I don't use date pickers because I offer just months and the last 5 years. Picking dates is a little easier and quicker this way. But it depends on how precise you want it to have off course.

So before the custom option (Other...): enter image description here

And after: enter image description here

share|improve this answer
add comment

For all the values you have currently in the dropdown, the From and To could be only text that is populated automatically. (i.e. Do not show them as boxes with a calendar icon next to them. Show them only as text)

However, you can add a Custom field in the Date dropdown. When selected, the From and To calendar boxes appear allowing the user to select the dates.

Beware of the following: Users selecting an To date > From date

So you need to have some error messages ready.

share|improve this answer
    
Thanks for the reminder about error messages. I plan to start with just the red borders (as Google does) and then test to see if users get enough info from that alone. –  Melanie Albrecht Jan 15 at 20:36
add comment

I don't think that there is really a standard way. We have this setup:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It presents a couple of canned ranges (for images to archive, in our case), and offers a 'custom' range. Only if the custom range is selected, do the from and to date edits (and for us: even time edits) appear. In our case we have a dialog, that uses a short animation to make space for the needed widgets for the custom range.

Note that the date edits don't have a calendar. Don't be confused by that, we have a custom date edit widget that allows you to type dates an almost any format, and that will suggest full dates that match in the dropdown under it. How the dates are interpreted depends on the system locale and the intended use of the date. That allows much more natural and quicker date entry than picking from a calendar we think.

Works well for us.

share|improve this answer
    
Too right - there is not a standard solution yet! Maybe Google's approach will become the defacto std...? –  Melanie Albrecht Jan 15 at 20:47
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.