User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
share|improve this question
    
The second version for points 2/3. Point 1 involves user selection to display relevant feedback (hours)? – Adam Pollock Jan 25 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 Jan 25 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 Jan 25 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 Jan 25 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 Jan 25 at 19:11

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.

share|improve this answer
5  
I'd generally arrange the days vertically for this, as they would be on a physical sign on a storefront. – Random832 Jan 25 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). – Ghillie Dhu Jan 25 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. – Doyle Lewis Jan 25 at 19:47
1  
@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). – Kelly Thomas Jan 26 at 1:25
4  
I'd also suggest aligning the : in the times. – anaximander Jan 26 at 10:55

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.

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

share|improve this answer

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

share|improve this answer
3  
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. – grgarside Jan 26 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 Jan 26 at 20:17
    
I created a similar question ux.stackexchange.com/questions/85752/… See if this is of any help... – AT - UID Jan 26 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 Jan 26 at 21:29
    
I feel like I need a "You are here" in those signs. – tudor Jan 27 at 1:40

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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):

mockup

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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