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

    8 years ago

    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

    +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 :-)

  • 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.

    enter image description here

    This is not a bad idea. I'd maybe suggest midnight/noon instead of night/day, though.

    night/day is much more straight-forward without any thinking at all. Besides, I think noon is only referring to 12 o'clock PM, if the minutes isn't 00, it doesn't make sense, since both 'noon' and 'midnight' are points.

    Maybe it's cultural. In the US, noon = 12pm, midnight = 12am.

    that's what i meant as well, I am saying what if it's 12:30pm, is that still noon? or afternoon? 12:30 noon doesn't make sense as noon is referring to 12:00 only.

    Oh, i see what you are saying. I was assuming the night/day drop down only appeared at 12:00 while you suggested it appear at 12:xx. In that context, I agree with you, night/day makes more sense for something like 12:30.

    This could extend the ambiguity. Especially now (winter months), "6 at night". It's dark at both 6AM and 6PM. This becomes much more subjective to the user. If you start work at 6AM then 6AM and 6PM could both be "Day" (speaking from personal experience I don't know which I'd consider Day or Night, would depend on how tired I am when I fill this form out).

    please read my answer carefully, I said it changes to night/day only when hour is 12.

    Either way, people often don't know if 12 midnight is the end of one day or the beginning of the next. I've seen more than one person show up a day late for a 12:00 AM flight.

    There are some places in the world where you get very few hours of daylight (near the poles) for several months. Using "Night" and "Day" is very, very confusing. Everyone knows what AM/PM is though (if you use the 12-hour clock).

  • 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 -

    enter image description here

    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.

    Wouldn't that information seem in most cases very redundant?

    No, you can think of it is a minor validation check. Something similar to when you fill out a form, you usually get a validation check after the form is filled. This is something similar to that. It's not interfering with the usability of the software at all, neither is this field all over the place, which could have led to downside user experience. (thats where redundancy is a problem)

    My idea is similar; when they select `12`, show a subtle moon / sun icon as a visual hint

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

    This answer is very low on reasoning and detail. Can you expand this answer to say why this is a good suggestion? Otherwise its not really a suitable answer; it's just your subjective opinion.

    I think it's a good suggestion.

    It is, but I think JonW is saying Mark should add some reasoning for this. I've seen this used on sites before, and it's the simplest, least intrusive way of doing things, that doesn't require a lot of change to how the form already works.

    I think the reasoning is obvious.

    ah, but is it midnight at the end of that date, or midnight at the start of that date? The system in the question appears to think its the former, which makes sense if you then set the minutes to something other than 00.

    @Erics that's actually an excellent point that I think a lot of us (myself included) missed in the initial question. That's a much more complicated (and likely more common) problem. I think, technically, midnight doesn't belong to EITHER day, so people can make assumptions both ways.

  • 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.

  • 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.

    12:01am is still ambiguous here as I wouldn't be sure if it means almost midnight or almost noon.

    From what you are saying, 12:01am is ambiguous to you, but you reference "almost midnight" or "almost noon" … I'm a little confused because 12:01 would be "just after." Regardless, what I hear is that 12:01 am still doesn't strike you as being clearly in the dark or light of the 24-hour cycle. This is somewhat similar to the issue of the new year beginning smack in the middle of the coldest, darkest days of the year (in the northern hemisphere). In many cultures, it begins in spring, which feels like a new beginning to a day. But I digress.

    I am saying that 12:01 AM/PM is confusing because I wouldn't know when AM or PM takes place. 11:59 is less confusing because it is within the 1 – 11 hour range where AM/PM makes sense, but when it becomes 12 with or without minutes after it, it becomes confusing. When I said "almost midnight" and "almost noon" I meant one minute off. My main point is that AM/PM becomes confusing when the hour is 12 because it's unclear if it loops around there or not.

  • 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.

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM

Tags used