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

Question

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 1

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

Answer 2

So the real problem here is, given that the user selected 12 for the hour input, how should they know if PM = day and AM = night.

Here's a solution - when the hour input is anything else but 12, show am/pm for the dropdown menu; when the hour input is 12, the dropdown menu should change to night/day from am/pm.

Answer 3

I find that instead of putting in 24 drop downs, A display of selected field works best.

You make a selection in the drop down, the field just indicates what you choose.

In your current form, it would look like -

So, whenever you change something in the drop down it shows you what time you selected. For 11 AM, it would say - 11:00 AM. For 12:00 AM, it would say midnight and 12:00 PM it would say noon. Its just a display thing that cannot be edited unless you change the dropdown you selected.

This small display functionality is easy for a form to handle (just getting the value from the drop down and updating itself). It makes it clear for the user what selection he is making; also its not interfering with good interface practice since you are not compromising on your functionality and/or making it any less convenient for the user.

Answer 4

You could add hint text that "12AM = midnight"

Answer 5

I really like the idea that was suggested by Sylar with the little tool tip pop up but I would keep the 'midnight' or 'noon' information located within the dropdown window so that the "Now" button does not move around as seen in United's implantation here.

The suggestion of using the 24hr format can be confusing for American's who do not typically have a lot of exposure to the system. However, you can still use the "24 option idea" (as mentioned by DA01) to list all the times from 1am at the top to 11am and then from 12pm to 12am at the very bottom. This sort of progression may give the user a better idea of time since they "scroll" through the time progression in their head potentially better conforming to their mental model of time. See this example at Delta. This would probably be my preferred method of choice.

If you do want to keep only 12 options in the dropdown, I do like the idea of moving the # to the top because then if the user has to select 12 they will probably give it slightly more thought if it's not immediately after the number 11. You can adjust the (noon vs midnight tool tip accordingly based on the AM/PM seleciton).

The next question would be, just how fine grained do you need your search to be? For example if you dont need exact minutes an hours you can use something like: 9am - noon, 12:01pm - 3:00pm, etc and break it up into a few categories or get rid of it all together. I believe Paypal's advanced history search tool doesn't specify a time and only a date.

Answer 6

To be as unambiguous as possible, we use 11:59pm and 12:01am in our drop-down options. It's a little odd looking with all the rest of the even times, but the oddness helps people pay closer attention to it.

Answer 7

You could adopt the Thai Six hour clock

The hours in each quarter (with the exception of the sixth hour in each quarter) are told with period-designating words or phrases, which are:

... mong chao (Thai: ...โมงเช้า,  [mōːŋ tɕʰáːw]) for the first half of daytime (07:00 to 12:59)
Bai ... mong (บ่าย...โมง, [bàːj mōːŋ]) for the latter half of daytime (13:00 to 18:59)
... thum (...ทุ่ม, [tʰûm]) for the first half of nighttime (19:00 to 00:59)
Ti ... (ตี..., [tīː]) for the latter half of nighttime (01:00 to 06:59)

Which translates as Morning, Afternoon, Night, Early Morning.