I have a web application where users select two custom dates using datepickers, to generate a report. For convenience, 'year' and 'month' have shortcuts. The user presses an update button to refresh the report. The current implementation looks like this:


download bmml source – Wireframes created with Balsamiq Mockups

Is this a good design? How would you improve this design?

  • better usability
  • simpler
  • take less space / better layout
  • 1
    I don't understand the relationship between the radio buttons and the 'year'/'month'/'custom' - this would imply that you can select either year, month or year-month-date but not all together.
    – ethrbunny
    Aug 1, 2013 at 13:30
  • @ethrbunny yes - you select either 'year' (i.e. the last year), a month within the last year, or any custom duration between two dates. The radios indicate you only choose one of these. In fact, 'year' and 'month' are purely for convenience - these durations could equally be selected by manually entering the relevant dates using the datepickers (but this would take more clicks). Aug 1, 2013 at 15:03

2 Answers 2


First impression: The radio group seems a little bit confusing (since I don't know the context).

Does that mean I can choose to "update" based on: (1) Just the year, (2) Just year and month (specifying a specific month), (3) Full date range ?

In that case, you may want to know how frequently a typical user would go for each option. Another concern may be what kind of date is usually selected for use -- Datepicker probably is great for selecting a date that's close to current date (as quick as just 2 clicks away: click datepicker, then click a date in current month). For selecting a date that's far forward or backward, datepicker is not necessarily an efficient UI (multiple clicks and even keyboard inputs).

Thus it might reach better usability if we design according to the user's actual goals.

Imagine an case in which a user, in most cases, would only go for a specific month in a specific year, and just occasionally need to pick a specific date range, and assuming that the selection range would be relatively small (a few years back or forth), then it might be possible to realize better usability by designing as such:

A "monthpicker" (or the "month-year" dropdown as in your design); A day selection dropdown (default to none, e.g. "--"); A checkbox of "Full Year" (when checked, the day selection disabled); A checkbox of "to range", when checked, another pair of monthpicker and day selection dropdown appears.

Or something like that. The point is, we need to know the user's common tasks or goals in order to optimize the UI accordingly.

  • 'update' is always based on the period between two dates. The 'year' and 'month' radios are purely for convenience (i.e. alternative controls to reduce the number of clicks when selecting the start and end dates for specific months or for last year). The context is business reporting (charts, tables of time-series data etc). So annual and monthly reports will be common, and custom dates infrequent. Aug 1, 2013 at 15:12

I would recommend you to look at how others have solved this kind of problem before. I took inspiration from how financial sites update stock graphs based on date ranges. (e.g have a look at Avanza)

  1. Make the year, month, day options into buttons. Their is no reason why a user should have to click two different elements when it could be done immediately. Once a click is registered, update the content.
  2. Separate the date ranges/pickers visually from the other elements. They offer a completely different operation, something a sort of power-user would use, and should not be of the same UI-element as the simpler year, month, day.

Furthermore, I would make use of good defaults for the date pickers. Say a user selects to: 2013-08-08, well then simply default the from date to today and update the content accordingly. Naturally, if the content can't be driven in such a dynamic fashion, simply add a button that lets the user manually update (as in your initial design).


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

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

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