Which of these 2 layouts is best to inform the user on these 3 points:
- Open today
- Open days
- Closed days
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.
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 |
I prefer the second one for the following reasons:
However there are areas that can be improved.
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.
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.
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.
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:
Design 2 ambiguities:
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):
This could work if your opening hours schedule is relatively simple:
If things are more complicated, then more extensive design in some other answers fit better.
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:
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.