How to avoid 12:00 AM midnight/noon confusion in a time input field?

I recently specified the wrong deadline for an assignment, for a "dropbox" in the D2L course management application. I was trying to choose 12:00 noon, and the time entry field showed 12:00 right below 11:00 AM, as shown here:

But of course, what I had done was specify 12:00 AM, which is actually midnight, a famously confusing time specification. (In my case it was also a time which had actually already passed, and the application actually created a deadline in the past.)

It seems to me that this is an especially confusing input form, since the 12 is below the 11, clearly suggesting that it comes afterwards in time.

In this case should the 12 should show up at the top of the menu, above the "1"? Or should it be at the top listing "midnight" if the AM/PM indicator is an "AM", or "noon" if the indicator is a "PM"? Or at the bottom, with those roles reversed, but misrepresenting the "AM/PM" indicator? It seems to me that the switching the menu between midnight/noon depending on AM/PM would be an extra complication, hard to do using some technologies, but clearer. Or is there another presentation that would be better?

Is there a usability guideline somewhere suggesting how to do this that I could refer the developers to?

Answer

There is some interesting pedantic information on the weirdness of midnight: http://en.wikipedia.org/wiki/Midnight

Specifically, technically, at midnight, it's neither am nor pm. But merely the instant of transition between the two.

Some ideas:

• Use a 24 hour clock. Perhaps with 12 hour correlations in parenthesis:

...
10
11
12
13 (1pm)
14 (2pm)
etc

• 
  
  

  Perhaps indicate the am/pm with an icon as well (moon/sun) when 12 is selected as the hour to emphasize the difference

  
  


• 
  

  use a 12 hour clock, but list all 24 options

  
  

...
10 am
11 am

12 noon
 1 pm
 2 pm
etc...

I think I prefer the last option for a couple of reasons:

• selecting from a drop down of 12 options vs. 24 isn't a huge burden


• you can remove the am/pm drop down since this handles both


• noon and midnight are very clear in this list