Designing the Month Selector

We have been using date range selectors to get reports on the InMobi Interface. Recently, I was asked to design a month selector, so that users can get the transaction history across a few months.


I started off exploring some interaction patterns for selecting a range of months. I first looked at some internet banking applications that I have been using. They just have drop-downs to select the FROM and TO months. Or they give only monthly statements. If you need statements for a range more than one month (ah, they're so difficult to figure out!), there are date selectors, and not month selectors.


Here are the designs that I explored. 
Note: Pardon the bad experience caused by the funny alignment and sizing of images in blogger.


Drop-Downs
Having two sets of drop-downs for the Month & Year, for the FROM & TO months respectively. It may be alright to select just one month of some year (such as your birth-month). But it's obviously a very inefficient way of selecting a month range (8 clicks and lots of scrolling).


Some portals commit the sin of having the years in ascending order in the drop-down, especially for the birth year. Scrolling down from 1900 or 1950 - causes HATRED in users.


We can optimize this a little by merging the month and the year. Though this will take two separate sessions of scrolling. And it will be worst, if it's a small gap of months, that occurred long time ago.

I tried to optimize the design further by getting straight into the context. 

• The design was for records spanning not longer than 4-7 years. So in the above solutions, the user may not have to scroll at lot.  
• Disabling months that are not relevant.
• If a user has registered for the application in June 2009, then the months before June 2009 should be disabled.
• It's February 2012, so the months thereafter should be disabled.
• The years before 2009 and after 2012 will not be visible at all, since there are no selectable months in them.
• We should set the default selection to: 
• FROM: 6 months ago
• TO: Current Month
• Also, the design should be agnostic to the order of the months. If the FROM month is after TO month, then on click of 'Apply', the values should be instantly swapped. 

Double Scroll 
Taking some inspiration from the pattern for drop-downs in the Apple iPhone, I came up with the following designs for the web platform.
What we do here, is just have two scrollable components in the same drop-down.

In the design below, we can have a fixed selection pane, and the month & year scrolls in the background can be moved to make the required selection.

The month selection can be viewed near the 'Apply' button. We can also have the 'Cancel' button preceding the 'Apply' button, the way Apple does it. 

Selection Range
The user can drag the pins FROM (1) & TO (2), to the months they want to generate the reports for. 

As you drag the pins over the points, the month and year should be displayed below it to notify the selection. In this case, default selection can be complete life of the account. 
Well, the user effort required in such a drag-and-drop of the pins to the required month (twice!) acts as the disadvantage of this design.

Anyway, more optimization is also possible - such as demarcating January of every year.

Meters
Meters can be visual panels controlled by the UP ▲ & DOWN ▼ arrows.
The component can also be controlled by the keyboard. 

The contents text boxes can also be changed using the keyboard. But incorrect values should not be allowed to be entered.

Select the Month, then Year.
Here, I'm exploring a design where the selection of the month precedes the selection of the year. Well, that's how we language dictates it - the name of the month, followed by the year. 





This would be a bit like the Google Analytics date selector. The FROM field being the default selection. On clicking of the month, the year can be selected (then the year panel closes).
Immediately, the TO field will become active and the months will appear like links again.


Select the Year, then Month.
In this pattern, we show two selection panels, for FROM & TO. The valid years are displayed first. On selection of the year, the valid months are displayed for selection.





In the following pattern, I'm exploring vertical alignment for the years and months.

And finally...
So the design that I suggested was the following. I merged the years together. Users can use arrows to go back and forth with the years.
Again, the invalid months can't be selected, and the invalid years can't be viewed (no prev/next arrows accordingly).
Default selection is: 6 months ago to current month. 

I shouldn't forget to mention this incident. We had a little confusion about which month is exactly 6 months ago - how do we include the current month and the corresponding month 6 months ago? And to resolve the confusion, our Product Manager Sriyansa Dash made a great quote - our user would always prefer more data than less :)