4

I have many screens in an app I am working on with a Date Range selection as part of a filter for some data (graphs, etc.).

Currently the most typical options are "Previous Month", "Current Month", and Date Range (where they select a start and end date).

enter image description here

But there are some screens with other options like "Last Week", "Current Week", "Yesterday", "Today", "Last Year", "Current Year", etc.

I want to have a consistent date selection filter across all the screens to make the user comfortable.

I would like to consolidate these options, but adding all these in together really starts to seem a bit confusing. But maybe not.

enter image description here

What do you think? Should I stick with "Previous Month", "Current Month", and Date Range, or should I add in other options as well?

When are the options actually slowing the user down instead of helping them along?

Improve this question
4
  • This year/month/week, not current year/month/week....
    – Assaf Lavie
    Oct 31, 2011 at 4:58
  • You are suggesting that as a better more readable way to label them?
    – richard
    Oct 31, 2011 at 5:01
  • 2
    What are your users using the most? I'd start fresh after testing a few users to see what you can eliminate. That way you're not combining a bunch of options together that aren't relevant or helpful.
    – Nic
    Oct 31, 2011 at 5:32
  • @RichardDesLonde, yes.
    – Assaf Lavie
    Oct 31, 2011 at 12:04

3 Answers 3

Reset to default
4

Hi and congratulations on caring about making things easier for users!

My first suggestion is to ask users. Do a paper or post-it prototype (Wikipedia: paper prototyping) and go ask five people. (http://www.useit.com/alertbox/20000319.html)

Second: it is tempting to think that users will be comfortable when all screens have the same mechanism. You are right in principle, but that is "the letter", not "the spirit" of the idea. People are flexible. You don't need to make the screens look the same, you just need to make them look consistent with each other AND match the input needs for the task.

This means:

  • if most people in a particular screen will choose yesterday and today, you don't need to display month/year there. Same for week/month. You may get by with three buttons: Yesterday, Today, More choices (which opens a dialog to accomodate the few special cases).
  • you can eliminate year input just by intelligently detecting that, today, 23 December refers most probably to 2011, while 7 July to 2012.
  • let users specify the date freely, then parse it and say "We understand this date as ....", so the user can write it differently if the system got it wrong. Check Google calendar's "quick add" for inspiration. If the range typically has dates close to each other, consider doing a cross-table, like the Germanwings reservation system for example.

As to the consolidation idea: Any date within the year represents ~8.5 bits of information (365 choices, log2(365)=8.51). It just feels weird to have 9 one-bit controls (radio) AND two n-bit controls (drop-down) to gather just 8 bits of information. That kind of consolidation seems indeed overwhelming and you should look into simplifying it. It's probably too fancy, but consider doing a KLM-GOMS analysis of the ideas you come up with, in order to cut out the complicated slower ones.

Improve this answer
3

My advise would be not to use radio buttons, but always letting the date pickers display the date range (as you depict with select boxes - I would suggest using an "augmented" text field instead, see Filament Group example below). This way ambiguity can be reduced/avoided, since "previous month" might be interpreted as (if we have a current date of e.g. 20th of October) for instance 20th of September to 20th of October OR 1st of September to 30th of September.

Then you could have some UI control "feeding"/populating these date pickers with the most relevant presets.

This thread might be of interest: How to present presets relating to a date range picker

And you may be inspired by this demo UI control: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

Improve this answer
1

Try a smart text field with autocomplete a proper tool tip. It should accept all kinds of date terms like "yesterday, last month, next month, next year, 9/11, tomorrow noon".

These aren't that hard to parse and there are existing libraries for many languages.

Examine the input as it is entered (so for y, offer yesterday as completion). For 9/11, offer 2011/9/11 and 2009/01/11 (take the first number as month or year). Try to leave user input alone and show the date range in a text-only label next to the input field.

For mouse-lovers, offer a date popup.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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