0

I'm implementing a datetime selector for events taking place mostly in the evening. The audience is mostly based in the US, but there might be international users as well, so I followed this suggestion of providing a 24-hour time picker (like this one from Material UI) for clarity.

24-hour datetime selector

However, some casual testing has revealed that US-based friends would choose 6AM when they meant 6PM. The sample size is small, but one pointed out that the hours after 12 are also smaller and inside the other circling, suggesting they'd be secondary, more like minutes to select after selecting the hour. In reality, hours should have equal emphasis from 0 to 23, and actually evening times should be emphasized since these events would take place in the evening.

What would be a clearer way to provide a time selector? AM/PM indicators instead? I'm afraid those may not be as common in some locales, while the 24-hour clock is universally understood, even if less used in the US.

Improve this question
4
  • What language/framework are you using? Far as I'm concerned, the input should change and adapt based on the user locale(24 for international, AM/PM for US), this of course considering you're using something native or React Material components(Since you mentioned Material).
    – Nick
    Jun 14, 2020 at 0:10
  • On additional note, I just tested with Native and HTML5 inputting, they both change based on the device locale, on both iOS and Android.
    – Nick
    Jun 14, 2020 at 0:12
  • @NickLeBlanc: React + MUI. I'm all for native controls, but I want to restrict the input minutes to multiples of 15, and that doesn't seem possible with the native control.
    – Dan Dascalescu
    Jun 14, 2020 at 0:22
  • Technically speaking, it its, it's been around for quite some time, it's the 'step' attribute, nothing stops the user from selecting invalid inputs, but on submission the native validation will trigger an error. Is the issue you linked already fixed? If native is not really possible, you can always create your own component, a simple if with the user locale and the ampm={false} prop should do the trick.
    – Nick
    Jun 14, 2020 at 0:48

1 Answer 1

Reset to default
1

Usually you would provide an option to select the time format (i.e. AM/PM or 24HR) to avoid the ambiguity and cater for different user preferences.

There will always be a trade-off between coming up with a design that works for everyone and tailoring the design to the majority of the users.

As you have already done some testing previously, you can also test some of the approaches and suggestions provided in the comments or answers.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.