Best practice for month / year input

Question

Is it best practice to have text fields or dropdown + textfield combination form month year? Does it changed if the month is listed as 01 vs January? (The ^ indicates dropdown)

Note: Users use the form often where speed is most important metric.

Option 1 - both freeform with placeholder text :

[MM][YYYY]

Option 2 -month as dropdown:

[01 ^][YYYY]

Option 3 - month as dropdown with year as placeholder:

[01 ^][year]

Option 4 - month as dropdown with name listed out (Google method):

[January ^][Year]

Answer 1

Something relevant for choosing data format : The source of the user's input:

If you know the source from user's input is formatted in some way you will want to maintain that format, because you don't want the user to make unnecessary mental conversions. Examples of this are expiration days in credit cards or invoices (at least in my country).

If there're are no clues about the source, question: Would most selected years be ...?:

• Frequently not showed in the first options of the dropdown => Text input for year.

• Mainly recent years => Go with the dropdown. Here you get the advantage of avoiding unnecesary typos within text inputs.

About the month, I prefer dropdown because it's a known and short list and there's not too much to go wrong with it. Also the month as a number has more cognitive load and could lead to more errors (is more probable that in a rush anyone could get wrong with the number-monthName association, again: unless the source is in the same format).

Answer 2

If speed is your most important metric then probably option 1. There are in-line editing and checks that can be done to improve accuracy that you lose by not using droplists:

1. Ideally the MM and YYYY letters get replaced as the user types it in. The placeholder text should be clearly differentiated from input text so as you type. For example it would look like "0120YY" if you were in the midst of writing Jan 2014, the YY would be in a light gray and the 0120 would be black.

2. Auto insert and remove spaces and special characters. If the user types in 012014, it should auto insert a space so it reads 01 2014 for better readability. If they type in 01 2014/ it should remove the extra space and the excessive character. There are a few ways you can improve readability, this is just one example.

3. On focus, allow a mini calendar selector to appear as well allowing them to see the month change as they type and the year. It also allows them to use the selector if they choose to do so. Obviously this adds a bit of extra effort in terms of build.

Answer 3

General Usage:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Without any context, spelling out the month (Jan, or January) in a dropdown probably cause less confusion as compared to "01" in a dropdown or a freeform digit input box.

I'm speaking as a user from North America, we rarely enter months and year without the day (unless you're referring to credit card expiry dates). We say it out loud as "January 2015", not "1 2015". So using the word removes the mental translation. There's also only 12 months in the list. So it's a reasonable number of choices even if the user does manually click on the month instead of typing in the dropdown to access the right month.

As to the Year, the choices are rather numerous so a text input makes more sense. Since there's only 1 way (in numbers) to write in the year, there's no mental translation needed.

Credit Card Usage:

^{download bmml source}

The other common exception case I want to bring up is for Credit Cards. Because the numbers are printed at the back of the card in "MM / YY" format. It makes more sense to provide text inputs for user in that exact same format so they can type it all in exactly as its printed on the card.

Answer 4

Your question didn't specify the use of the form. I'm currently working on a form which allows sales people to enter dates by selecting calendars. They have dozens of actions to perform on each sale including sale date, cancellation date, payment due date, delivery date, and last day to request a return.

They go through many such sales forms at one time. I solved that problem by using calendars where they select the day in the month by selecting the day in a calendar. There are a limited amount of months (no more than 180 days from the current day).

EX:

+---------------+  +---------------+
|      JAN      |  |      FEB      |
| 1 2 3 4 5 6 7 |  | 1 2 3 4 5 6 7 |
| 8 9 ..........|  | 8 9 ......... |

Now this solution obviously does not work in every use case but in this case it presents a very fast way for the sales force to enter the requisite information.