Which is a more intuitive open hours and days schedule board?

Question

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

1. Open today
2. Open days
3. Closed days

Answer 1

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:

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

Answer 2

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

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 |

Answer 3

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?

Labelling

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.

• taken from UXMyths

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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.

Answer 9

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.