12

I want to offer the users a way to select a range of months within a year. The selected months are used to display a table of data. The control should be placed above the table and since vertical space is limited, it shouldn't take up much vertical space.

I thought about a list of checkboxes:

[] January  [] February  [] March  [] April  [] May  [] June 
[] July  [] August  [] September  [] October  [] November  [] December

That has as problem that it is not clear which months are selected. It offers the possibility that people could select a broken range (which is allowed but most likely not wanted).

An other option could be a multiselect control like the one found in Chosen Chosen Multiselect control

That does seem a little overkill for just twelve options.

What control could I use?

Improve this question
3
  • From the answers already given, I think it might be worth clarifying what you mean by a "range of months within a year". Does the user first select the year (e.g. 2011), and then choose the range (e.g. Feb-Aug)? Do you want them to be able to select multiple ranges (e.g. Jan-May and Oct-Nov)? Can they select a range that spans two years (e.g. Nov-Feb)? If so, how do you determine which year it refers to?
    – Alex
    Feb 10, 2013 at 8:25
  • @Alex the current design lets the user first select a year and then select the months within the year. But I might need to reconsider that in light of the answers.
    – Pesikar
    Feb 10, 2013 at 13:14
  • Are the months always within one year? Would a person never have to select Nov of one year - Feb of the next?
    – DA01
    Feb 11, 2013 at 16:32

6 Answers 6

Reset to default
6

I think if you are selecting a single range within a single year you can keep it super simple (and easy to use) with a pair of select boxes.

select boxes

Advantages:

  1. Minimal Vertical Space
  2. Easy to select the month (the user can just tab and type the first letter of the month)
  3. Minimal development cost
  4. Easy to add helpers (e.g. hints that show number of months selected)

Disadvantages:

  1. Hard to select multiple ranges
Improve this answer
2
  • 1
    KISS. And it wouldn't have to be that hard to add multiple ranges. Eg, a button to add another pair of drop-downs, and it sounds from the OP that it's a rare occurrence anyway. This also lets you do the 'Nov to Mar' option if you need to.
    – Roger Attrill
    Feb 10, 2013 at 22:31
  • 1
    ...why didn't I think of that?
    – Sam Pierce Lolla
    Feb 16, 2013 at 22:21
12

If you are asking for data that usually follows a particular format, then ask for it in that format. Visually people are used to months shown in a calendar, so show it in a calendar, and let them select the months that they want.

Visually it is very easy for someone to see whether they have the months that they want like that. Here is a quick example of what it could look like with three examples of different data entered.

enter image description here

Improve this answer
1
  • This + shift/select excel-style fits the bill best for me.
    – Erik Reppen
    Feb 11, 2013 at 14:16
12

As long as it truly is within a single year, a range slider seems appropriate here.

enter image description here

via Kevin Anderson on Dribbble

EDIT:

The date range picker on the google finance site solves the problem with my previous answer. This example doesn't "snap" to month increments, but a different implementation certainly could.

enter image description here

Improve this answer
3
  • 3
    And how would you do November through February in this?
    – Marjan Venema
    Feb 9, 2013 at 8:41
  • 2
    Good point--hence, "as long as it truly is within a single year." (Pesikar wants to find a way to select "months within a year".) I'm assuming a year is one calendar year... if not, we'll need a different method :)
    – Sam Pierce Lolla
    Feb 10, 2013 at 0:03
  • 1
    Nice edit (and find :-)
    – Marjan Venema
    Feb 10, 2013 at 10:42
11

If a range of months could span across the year end, perhaps a circular dial makes more sense.

Since you have limited vertical space it would have to be a dropdown though.

Something like this perhaps:

enter image description here

Improve this answer
7
  • 9
    Did somebody mention overkill round here?
    – Roger Attrill
    Feb 8, 2013 at 22:41
  • 3
    Really weird. In a year, December is not close to January.
    – Nicolas Barbulesco
    Feb 9, 2013 at 14:43
  • 2
    It might not be clear enough how to select March - November instead of November - March (esp. for the colorblind)
    – Sam Pierce Lolla
    Feb 10, 2013 at 1:19
  • 1
    The good thing is, you can change the colour scheme.
    – Roger Attrill
    Feb 10, 2013 at 14:08
  • 1
    @ErikReppen The controls may follow a circular arc, but your mouse movement doesn't have to. Certainly I'd advise against such a circular motion if you intend to repetitively do this all day long, like in some bulk data entry capacity.
    – Roger Attrill
    Feb 11, 2013 at 16:54
2

What about a type of slider control, but with a start handle and end handle? This control will clearly illustrate that they can only select a range of concurrent dates (and not randomly select dates, as either of the options you've shown above implies).

Improve this answer
1
  • 1
    And how would you do November through February in this?
    – Marjan Venema
    Feb 9, 2013 at 8:41
0

A multi-select dropdown with check box, will serve your purpose. Its simple and intuitive.

jQueryUI multi select widget

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

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.