I'm designing a website for a client that has some irregular trading hours. Some days they remain open until 2am, others they close at 10pm.

They want these hours displayed on their landing page, so visitors can see what time they open & close at a glance.

The trouble is I have to work with an API that returns integers only. Based on these integers and the current time, I can display a currently open or currently closed flag accordingly. As it stands currently, this isn't possible.

I can't use custom text anywhere, only integers (24 hour time). I'm having some difficulty working out how to display the time.

Currently the client displays their hours like this;

Mon 8am - 2am

Tue 8am - 2am

Wed 8am - 10pm

Thu 8am - 2am

Fri 8am - 10pm

However I don't think this is correct, and looks quite confusing (what is 8am - 2am?) shouldn't it be;

Mon 8am - 12am & 12am - 2am

Tue 8am - 12am & 12am - 2am

Wed 8am - 10pm

Thu 8am - 12am & 12am - 2am

Fri 8am - 10pm

Admittedly, this also looks quite confusing!

Any ideas how I can achieve this in the most user friendly way possible, without using custom text?

  • Whether site may be accessible from different time zones? If so, why can't you use UTC timing?
    – Praveen
    Jan 7, 2019 at 17:51
  • Welcome TheOrdinaryGeek. If you did an A/B test with a couple of friends, showing one or the other and asking them if the shop is open at 1am Wednesday, I'd be curious to see which would get a better correct answer. Jan 8, 2019 at 18:36
  • Not sure what you are referring to with the API. Is the API supplying the times? If so, what information is it actually supplying (the raw data)? Jan 9, 2019 at 0:04

4 Answers 4


Try to think of how users would say this out loud, and how they perceive duration.

  • 'When does the market close?'
  • 'What time does it open?'
  • 'What are the trading hours?'

Show time as one unit

If you think of natural language, by giving one span of data to read (and subvocalize), users won't have to parse more words to get their answer.

By inserting and '&' you're asking the user to think of the location being open as having two distinct spans. 'It's open 8–12am and 12am–2am.'

See some of the research that Neilsen Norman puts out:

How Users Read on the Web

Summary: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.

It's an old article, but the principles still apply.

Consider building on familiar and widespread patterns already in use in the consumer world.

This is not hard research, but are your users familiar with widespread platforms such as Yelp, or Google locations?

You'll find they think of it as one duration.

enter image description here

Here's Yelp:

enter image description here

And Trip Advisor: enter image description here

  • 1
    Great answer, but I feel that the answer does not completely cover @TheOrdinaryGeek question. The information you provided has effect on standard opening times, so from morning till evening as this is what people normally see on websites. I believe that the question of TheOrdinaryGeek focuses on non standard opening times. As 8 AM - 2 AM feels to me at first that they are open only 6 hours while they are open for 18 hours (thought that might be just me as a non native English speaker).
    – Kevin M.
    Jan 8, 2019 at 13:33

The second format you have looks like it would only make sense if there are hours that the location is closed in between the opening hours.

Using the 24 hour format would be great using the first format you explained.

Just taking a quick look at some restaurants sites they use the basic format i.e. Saturday 10am - 1am


There are a number of issues here, but I'll just mention one:

Avoid 12am and 12pm

These times are confused by a lot of people - both in the "am" vs. "pm" factor (12:00am == midnight, even though it follows 11:59pm and is a bigger number) and in "what day is it". Because of that, you will typically see insurance policies and other legal documents refer to 11:59pm and 12:01am.

Listing opening/closing times as 11:59pm or 12:01am is a bit silly, so I recommend using 12 noon and 12 midnight in most cases to avoid confusion. Everyone should understand 8am - 12 midnight but you'd be amazed how often you might get a question "Are you only open in the morning?" if you list 8am -12am.


I think that 8am - 2am makes more sense than 8-12 & 12 -2. As soon as I saw the second one, I was looking for closing time in between, and it was harder to understand. Another option would be like Mon: 8am - 12 am, Tue: 12 am - 2am & 8am - 12 am, Wed: 12 am- 2am & 8 am - 10 pm... One pro would be that on 1 am Friday, I won't have to look at Thursday's time to find whether it is open. Friday's time would be - 12am - 2am & 8am - 10 pm.

Is this an issue with what API returns?

  • If I wanted to know how late a business is open on Thursday night and I saw "8pm - 12am" I would simply interpret that as they close at midnight and would not consider looking to see if they continue being open in the early hours on Friday. Jan 8, 2019 at 17:29

Your Answer

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

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