I'd like to know which direction is better with your help. I would like to find out which of these 2 layout is intuitive enough for informing the user on 3 points:

Which of these 2 layouts is best to inform the user on these 3 points:

  1. Open today
  2. Open days
  3. Closed days
  • The second version for points 2/3. Point 1 involves user selection to display relevant feedback (hours)?
    – user78654
    Commented Jan 25, 2016 at 12:48
  • 4
    the first has nothing to do with opening hours - so you're not comparing like with like. So the second one is obviously better on all counts.
    – icc97
    Commented Jan 25, 2016 at 16:02
  • 18
    The one on the right is marginally better because it says 'Open Now', but neither of them are particularly good at showing opening times. They're not clear enough. For instance, if I work until 6pm and I want to know which day I should come in (many shops have a open-late day), I don't want to click through each to see. I'd prefer a table layout with today shown in bold.
    – Prinsig
    Commented Jan 25, 2016 at 16:35
  • 2
    I second Prinsig. This isn't the right tool for a list of open hours. A list of open hours would be much easier to scan and understand.
    – DA01
    Commented Jan 25, 2016 at 17:41
  • 1
    Also to consider is what business does this serve? Am I coming in to a location, calling in, being visited by or other? Am I showing up for a pre-scheduled appointment, or is this walk-in style? The expectations I have from the company should inform the UI of the availability schedule. Drive it to the task with facility to accomplish the "end goal". If the end goal is simply to inform, then the "mode" of the thing they are coming for becomes the most important concern for the display. Both of these are generic. Make it clearer why I care about when you're open.
    – Luke
    Commented Jan 25, 2016 at 19:11

9 Answers 9


Why make the user click when they don't have to? You could easily show all of the open and closing times for the week, and I don't think it would be information overload as the user will already know what day(s) they're looking for. Here's a rough sketch of what I'm talking about:

enter image description here

It simply and elegantly displays what days and times the store is open/closed and whether or not the store is open right now.

  • 5
    I'd generally arrange the days vertically for this, as they would be on a physical sign on a storefront.
    – Random832
    Commented Jan 25, 2016 at 18:26
  • 1
    Or, especially if the hours vary day-to-day, you could show the range on each day graphically in columns a la a weekly calendar (while still labeling the ends of the columns). Commented Jan 25, 2016 at 19:09
  • 3
    I generally like this idea quite a bit. If you're going to incorporate Opening and closing times for all days, you no longer need "OPEN HOURS..." though. And (basically) no one is looking for the open time for the current day if you're open, they only care about closing. So replace that text with "OPEN TODAY UNTIL 8PM" as long as it's past opening time. If the location still hasn't opened for the day then show open and close times. Commented Jan 25, 2016 at 19:47
  • 2
    @DoyleLewis I might be interested in today's opening time if I expected it to repeat i.e. knowing that they open 10AM on Tuesdays might be information I want to know (even on Tuesday afternoon). Commented Jan 26, 2016 at 1:25
  • 5
    I'd also suggest aligning the : in the times. Commented Jan 26, 2016 at 10:55

Neither of the images are great, but the second is obviously better than the first.

You could try using a similar concept to these redesigned Parking Signs

enter image description here

I've seen this kind of horizontal design for opening hours on quite a few shops in Belgium (where every shop makes up it's own random set), something like this (sorry, couldn't find an image of it):

    |08  |09  |10  |11  |12  |13  |14  |15  |16  |17  |18  |19  |20
Mon |----|----|----|----|    |----|----|----|----|----|----|----|
Tue |
Wed |----|----|----|----|    |----|----|----|----|----|----|----|
Thu |----|----|----|----|    |----|----|----|----|----|----|----|
Fri |----|----|----|----|    |----|----|----|
Sat |
Sun |

enter image description here

  • 4
    This works great for multiple or potentially confusing time ranges, but for one simple open–close per day, I would prefer just reading the numerical times rather than interpreting a graph.
    – grg
    Commented Jan 26, 2016 at 19:22
  • 2
    I like the parking schedule example, with one addition: a thin line indicating the current time. With that, it's easy to see if the store is currently open or not, and how much longer they're going to be open (to see if you need to hurry over before they're closed).
    – TMN
    Commented Jan 26, 2016 at 20:17
  • I created a similar question ux.stackexchange.com/questions/85752/… See if this is of any help...
    – AT - UID
    Commented Jan 26, 2016 at 20:22
  • @grgarside I think you're probably right. I wish shops were more consistent in Belgium. If the opening time is consistent then you only need to remember the closing time. If you can keep all you closing times the same except for e.g. 'late Thursday' shopping even better - then all you need to remember is 'X shop has late Thursdays'. It's a big usability gain for customers to have consistent opening hours.
    – icc97
    Commented Jan 26, 2016 at 21:29
  • I feel like I need a "You are here" in those signs. Commented Jan 27, 2016 at 1:40

I prefer the second one for the following reasons:

  • Look more like a calendar compare to the first one which reminds me of a form with radio button.
  • Show clearly the days that are open.
  • As well as the days that are not open.

However there are areas that can be improved.

Open today vs Open days

What is the difference between opening today and open days? Is it necessary to show that it is open today when you have already indicated that it is open from Mon - Fri?


People only read word-by-word on the web when they are really interested in the content. They usually skim the pages looking for highlighted keywords, meaningful headings, short paragraphs and scannable list. Since they’re in a hurry to find the very piece of information they’re looking for, they’ll skip what’s irrelevant for them.

Not that you have long paragraphs in your mock-up but I prefer how the time was been written in the first example. Timings: 15:00 ~ 00:00 is so much easier to process and digest than OPEN HOURS from 10 am to 8 pm. Perhaps you could rewrite the labels into Open Hours: 10 am - 8pm, Fri 10 am - 4pm

Remove the days (21, 22, 23..) in the calendar, unless you operate on specific dates only.

Text Contrast

You need to bump up your text contrast especially the white text against the yellow background. Users who are visually impaired might have difficulty reading your content. Use a color contrast analyser to check your content against accessibility


I would also prefer the second one. The colors are nicer, the hours during which time the store (or whatever this design is for) is open are more obvious. It is not clear what "Timings: 15:00-00:00" means?

Having the "open now" notification does not bother me, it's something that also appears on Google Maps for example (when looking up a certain company, it shows both the open hours and whether it's currently open or closed; people who are looking up opening hours, are often interested in going at that time).

Two additional things you can consider: 1) Is the "coupon" statement important? You mention it on ex.1, but not on ex.2. 2) Keep in mind your audience. Not all countries start their week on the same day and not all countries use the same way of stating time (AM-PM vs. 24-hour). If you expect most of the clients coming from a country where one is more prevalent, use that one.


Version 2 is visually more appealing and slightly better (because it has better cues about opening days), but I find both designs quite confusing. Design 1 ambiguities:

  • Do the timings apply to all days, or to the day currently selected? Not sure until I try to click one of the days.
  • Until I click another day, no way of telling on which days this store is open.

Design 2 ambiguities:

  • Do the opening hours apply to all days, or to the day currently selected? Not sure until I try to click one of the other days.
  • The days also have a date: how to I find out opening hours for next week?

The confusion (at least in my head, it may be me) probably is because the opening hours are displayed ABOVE the selected day/ which is somewhat counter-intuitive.

As an alternative (where no clicking is required to answer all questions):


download bmml source – Wireframes created with Balsamiq Mockups

This could work if your opening hours schedule is relatively simple:

  • simple start and end time, no closed-for-lunch complications
  • same opening hours every week, with only very few exceptions

If things are more complicated, then more extensive design in some other answers fit better.


Definitely the second one. I like how my eye is drawn to the day of the week right away.

I generally agree with the other answers about making the hours more clear - maybe a simple animation to guide your attention to the hours once you choose the day.


Second one

I didnt unerstand the first one at all.

But the second one can be improved by saying clearly that it is closed saturday and sunday


The second one, but simply because the first one is so bad.

The second one has problems of its own:

  1. open now has yellow color, currently selected day has yellow color as well, if I were to choose another day in which it is closed the selected day would be yellow again?
  2. the open hours and the indication of hours on the bottom are redundant.
  3. I need to click on all days to see hours.
  4. Saturday and Sunday are greyed out but it's not clear whether it means they are always closed or not, so do they have an opening time or are they simply disabled?
  5. it's not clear which is the current day and time

I think the general interface used is not the best one, a totally different approach is needed.

Still this kind of interfaces is more difficult than most think.


To be perfectly honest, i think that visual presentation in this case just throws in more confusion than needed.

I'd rather rely on good wording than on building slick UI.

I'd write something like "open on workdays from 10AM until 8PM, weekends from 10AM until 11PM", or in case the schedule is not simple you could use "Mon, Tue and Fri from 10AM until 8PM, other days from 10AM until 11PM".

If there are more than 2 sets of opening times in one week then UX problem is with the owner and being inconsistent with opening times.

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.