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:

    confusing 12:00 AM dropdown menu

    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?

    +1 This confusion is why I always prefer the 24 hour clock... Though I suppose that people used to the am/pm stuff might not be as confused as those who are not?

    Despite the confusion, most applications still take that approach. Most users expect 12:01AM to be 1 minute after 12:00AM, so using AM is a slight compromise.

    Wow, I just realized that clocks are basically zero-indexed.

    When they select 12:00 am, giant neon green text on a dark purple background appears: "WITCHING HOUR!" Subtle and effective. Bonus points for creepy font, double bonus for witch flying across the screen.

    Okay, but I don't have the drop down option. The simple question is "Is midnight 12 am or not?" Please send the answer as a yes or no.

    @Perry it's both and neither at the same time--it's actually the moment of transition between the two.

  • DA01

    DA01 Correct answer

    9 years ago

    There is some interesting pedantic information on the weirdness of 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:
    13 (1pm)
    14 (2pm)
    • 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

    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

    +1 for last option it is very clear yet doesn't change the UI structure, which is a bonus

    You could also just put the 12 first in the list, indicating that it comes before 1 for a given AM/PM selection.

    I'd combine option 3 with the moon / sun icon suggestion. This has the advantage that it needs less screen space than trying to write 'midnight' and that its easier to understand for users who don't have a high level command of English as "noon" is quite an obscure word ( As I've just tested: my native English speaking, average at school, 12 year old has just told me that "noon means at the end of the day" :-)

    @PhillipW I notice that you're in the UK. It never occurred to me that 'noon' would be obscure. Looks like it's maybe an America-centric term?

    Noon is a proper British English word. And people with a large vocabularly will understand it. But it's not used very much. We use "midday" generally. ------ (Demonstrating once again, the dangers of the assumption that both sides of the Atlantic speak the same language :-)

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used