Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am designing an interface where restaurants need to input their operating hours. I am thinking of using a slider control for timings for a single day, and then let the user choose days of the week on which that timeline would be applicable.

The problem is, that some restaurants close for a few hours between their hours of operation. Any ideas on an elegant solution to this problem?

** Update **

This question got mentioned by Sacha Greif in his weekly newsletter, so I thought I should state the requirements more formally.

  • Restaurant owners should be able to put in their opening hours, including breaks between business hours & different hours on days of the week.
  • Days/ dates when restaurant is closed. This requirement came up from a tweet: enter image description here
  • The interface should primarily be aimed at restauranteurs who (we assume) might not be familiar with complex interfaces.
  • The goal is to encourage restauranteurs to sign up, and so minimal effort on their part is ideal while they're filling up the sign up form.

I appreciate the interest this question generated and welcome your suggestions.

share|improve this question
    
Are the hours query-able? Meaning, can people browse the data via search of some sort? If not, I'd suggest using a text area and let people free-form it. –  DA01 Jan 26 '13 at 15:36
    
@DA01, yes the data needs to be acted upon, so textarea is not an option. –  capex Jan 26 '13 at 15:47
    
The form should also allow inputs where opening hours span across days. (E.g. M-F 11am to 2am, SaSu 9am to 2am.) –  Heng-Cheong Leong Jan 30 '13 at 4:21

17 Answers 17

up vote 21 down vote accepted

This is a tricky interaction, mostly because it has to be super intuitive since the end users are not computer savy. I know it because I´ve had to deal with it in the past :)

I had the same problem while working in the UX team at 11870.com (a recomendations website similar to Yelp), this is the way we handled it, might not be the ideal solution but it worked fine and the restaurants and businesses had no problem configuring it:

The user chooses the open days and hours.

If the service is split (99% of restaurants split in 2 as much), clicking on "split service" shows two more selects and changes the text:" from x to x AND x to x" and the link changes to "continuous service" so the user can go back to the previous state.

The time frame is of half an hour. And as a default, the most common choice (09:00 to 17:00 here)

enter image description here

Below, we show the user the info And that is also how it will display in the page

Here is the tricky part..

You have to display it in an easy and understandable way that doesn´t turn into a huge block of info..

grouping is the key, group the days with the same schedule.

think of every possible combo, for example:

  • if user chooses all hours every day, display ”open all day” instead of showing all the days and hours which will be redundant.
  • If more than 2 consecutive days can be “grouped” on the same schedule, display “mon to wed”
  • if only the weekend is selected: display “weekends: from x to x”

etc...

you can see an example of displaying a tough selection (open mondays-thursdays in split hours + friday and saturday in another set of split hours + sunday in full schedule):

mon- thur: 13-16:30h / 20:30-0h fri and sat: 13-16:30h / 20:30-0:30h sun: 13-16:30h

check it live here: restaurant page in 11870.com


As per vacation time and special closing days, my recommendation is to create a different section or users will be easily confused.

For that, a calendar like interaction is best.

Differentiating normal opening hours and days from special vacation time, will also allow users to change one not affecting the other.

share|improve this answer
2  
Can you include the text from the images in the actual copy of your answer? It's not searchable when its in an image. –  JonW Jan 27 '13 at 11:39
    
There are some great answers to this question on this page, but I've chosen this as its simple to understand, and requires minimal user input. The elements can be styled to make it look attractive, but I agree with the basic interaction with a few modifications. The final solution would probably make use of @Alex Ovtcharenko's initial interaction box asking for a simple set of hours, and then expanding into individual day-hours input. –  capex Jan 30 '13 at 22:27

Some ideas.

1) Allow for 'split' hours:

Hours:
[      ] to [       ] (+ split hours)

And if they decide to split:

Hours:
[      ] to [       ]
[      ] to [       ] (+ split hours)

2) Let them free form it as a text area:

Enter your hours of operation:
----------------------------
|                          |
|                          |
|                          |
|                          |
----------------------------
share|improve this answer
    
I agree with option 1, though I am not sure if it would be intuitive for restaurant owners.. may be a different verb would do the trick. Thanks a lot for the suggestions. –  capex Jan 26 '13 at 15:47
    
Yes, definitely check with the user to see if the terminology makes sense. Back in the food industry days I'd often work 'split shifts' but I don't know if that terminology also translates to operating hours. –  DA01 Jan 26 '13 at 20:36
    
Option 1 is the closest analogue to natural language, but I'd add that when you hit "split hours"/"add break" it cuts the end time from the previous shift and adds it as the end time for the shift you're adding. –  twome Jan 27 '13 at 10:05

I think it can better to make a visual support for such input, that will allow to enter not only breaks, but also days off. Input can look like this:

enter image description here

Clicking on row or cell header (with hour or day) should turn on/off all days or hours. Also you can add popular variants at top of table to select them faster — «24x7», «All days without weekends» etc.

Also, using slider for simple (without breaks) input may be not very convenient, because to some of your audience (not very familiar with modern interfaces) it can be hard to select exact time.

share|improve this answer
    
I like this, though it may tend to get complex if one needs to take into account half hour increments. –  DA01 Jan 26 '13 at 20:38
1  
@DA01, yes, this variant is inapropriate for such case. It is possible to add triple-clicking (all hour operating, half an hour operating and no operating) for every square (filling only half of it for 30-minute case), but I'm not sure it fits to context (complexity to audience). –  Alex Ovtcharenko Jan 26 '13 at 21:01
1  
I agree, half hour increments is something we need to have, and this would make it too complex for the intended audience. –  capex Jan 27 '13 at 1:22
1  
To deal with half-hour increments, you could do something similar to what Google Calendar does. For example, user selects '8AM' box. Dialog overlay appears showing 'Opens at [08:00]' and 'Closes at [09:00]'. The user can then fine tune the times to 8:30 and 13:30, for example. –  Brendon Jan 27 '13 at 10:53
    
@adnkhn You may also add extra click (or alt+click or something) for half of hour increments. Like 1 click if full hour and second one (I believe full hours are used often) for half of the hour and the third one is for clearing the cell. –  alexeypegov Jan 27 '13 at 20:35

This is a tough problem. When addressing a difficult UI problem I think helps to spell things out and not try and be terse and compact, be simple at the expense of potentially wasting space. Another thing that helps is to show the user the result of his/her work, so as the user inputs information there's an output section that shows how the information will be interpreted and displayed.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Now I'm not 100% satisfied with the input section (left side) of this example (it's passable but it wouldn't surprise me to see better suggestions), I think the important thing here is that the result of the input is shown in real time in the "output" section on the right. This allows the user to explore and experiment and see the results and help them arrive at a result they are satisfied with.

share|improve this answer

Why not something similar to mac's calendar?

http://km.support.apple.com/library/APPLE/APPLECARE_ALLGEOS/HT2513/HT2513_01-mac-101-ical_id-001-en.jpg

This is very clear visually, but also allows click and drag, making creation and adjustment of the time blocks quick to use.

share|improve this answer
    
Thanks for the suggestion, but I think the goals are different here. My task is to create something where users can input their restaurant hours using minimal effort and mental processing. –  capex Jan 27 '13 at 9:21
    
Yes, I believe the screenshot I uploaded could be modified to make something requiring minimum effort for the user to input their hours. The screenshot I posted is purely for you to look at the functionality, I believe clicking and dragging out time blocks would be easier than inputting times via typing, or clicking each half hour block until the entire shift is filled. –  Rich Jan 27 '13 at 10:03

I heard about the problem whilst reading Sacha Greif's newsletter. As I read through Sacha's comments about possible problems and solutions, I began to visualise my own solution. I created a quick wireframe of it.

Wireframe Example

I think the solution is complex enough to elegantly cover everything it needs to, but simple enough to be intuitive to new users. By default, the form has one day, and one shift (the minimum requirement). Users can enter a shift by selecting hours and minutes for 'from' and 'to'; this is quick but still retains full flexibility. Users can add additional shifts by clicking '+ Add a Shift', which inserts another set of 'from' and 'to' dropdowns. Users can specify the day(s) this shift-set applies to, and add more day blocks as required, repeating the process for each different day shift.

You'd also want to include '- Remove this Shift' and '- Remove this Day' buttons, in case users made errors.

share|improve this answer
    
While pretty straightforward it doesn't take into account the other fringe options needed. How do you specify a day is closed? How do you add specific days (i.e. Christmas Day) to this? –  JonW Jan 29 '13 at 9:05
    
At the time my answer was added the additional functionality of specifying "Days/dates when restaurant is closed" was not part of the question. My existing solution could be altered so that day blocks have no "shifts" by default, indicating the restaurant is closed on the specified day(s) of the week unless one or more shifts was added. Additionally, another tick box could be added as an alternative to the days of the week, to let users specify shifts (or the absence of) for a specific date, or even a specific date range. –  Edward Jan 29 '13 at 12:45

I'm picturing a clock widget separated into wedges, where they can just click the times they'll be open. Times selected would be highlighted in light-blue on the widget, and the open/closed times would appear in text beneath (maybe even in a textarea, so that they could click-to-copy the times once they were done?). Alternatively, you could have them only highlight (in a very light red, perhaps) the times they'll be closed, since it seems like this would require less clicking.

Here's a (very) rough Balsamiq mockup of the widget with no times selected:

http://puu.sh/1Tmf3

Image examples would be provided in a sticky sidebar so that they could continually reference them. Also, click + drag would highlight multiple time wedges.

share|improve this answer
    
Won't it need two clock faces to account for a day? –  Oskar Duveborn Jan 28 '13 at 10:11
    
It's a nice idea, but I think you'd still need a fallback to a form of some type. Click and drag isn't very accessible, and especially if you're dealing in 1/4 hours or so it can be quite awkward to set the time to, say, 7:15. This option might be useful as visual feedback after someone has entered the details elsewhere, because it's probably easy to read at-a-glance than a load of forms, but as the primary input route I think it'll be too fiddly. –  JonW Jan 28 '13 at 15:45
    
Yeah, retrospectively this would be an interesting way to visualize the time data, but terrible for interacting with it. I think the system Connor proposed (separated content areas containing Shifts that represent open times) would be the best route. The UI might work better with tabs instead of an accordion, and with an "am" or "pm" appended to the times instead of a 24-hour system, but the shift UI is pretty sweet. –  Duncan Smith Jan 29 '13 at 2:20
    
A restaurant opens at 11 AM and closes at 11 PM. How do you input/display this? Ambiguity between AM and PM is also a problem (does a restaurant open at 8 AM and close at 10 PM or open at 10 AM and close at 8 PM? Or are they only open from 8 PM to 10 PM... 8 AM to 10 AM??) –  Leftium Jan 30 '13 at 1:43
    
How would the clock design be more effective compared to just a horizontal bar? It is also more difficult to interact with, but this might work better as a display for the customers. –  Michael Lai Mar 6 '13 at 1:31

I think the best way for users to input data is through a form - Everyone knows how to use them, and you can easily split lots of data into small, manageable chunks. Here's my solution:

enter image description here

This gives them enough control that they can input anything they need, but doesn't overwhelm them with a barrage of questions.

Clicking on "This schedule only applies to a public holiday" would reveal a dropdown menu with a list of public holidays, alongside a date picker for the more obscure holidays.

Clicking on "This schedule only applies to a certain time in the year" would reveal two date pickers, i.e. From [datepicker] to [datepicker]

EDIT: Just saw the bit about identifying days when you're closed. In my solution, I'd put a little tooltip to the left of the Save button, saying "Hint: Remove all shifts if you're closed for this schedule."

share|improve this answer

I think Alex Ovtcharenko's extended option is very clear in terms of visual display. It would only need some tweaking to make it extra usable. I'd do this by displaying half hour intervals, and to display a block of opening hours as one area instead of separate columns (like in the mac-calendar only sideways), and also by allowing both clicking input and dragging input. This means:

  • mark an input block on single click. If it is adacent to an already marked period, join this block to it. If not, start a new period. If the period is already marked, unmark it, and split the area if necessary (you can enter the whole day, than just unmark the lunch break for example).
  • allow the borders of an area / period to be dragged (provide the appropriate mouse cursor)
  • allow click-drag to select an area at once.
share|improve this answer

Thought about this a while back for a restaurant related website and Sacha's newsletter problem resurfaced this for me. There are many many different types of opening hours that restaurants can have, so the solution has to be flexible enough to encompass the different variants, yet simple enough that it's not intimidating for restauranteurs (who may not be tech savvy).

enter image description here

I went with an intuitive and compact twitter bootstrap like checkbox button group to choose days of the week (http://twitter.github.com/bootstrap/javascript.html#buttons). The image is for a desktop browser/client, but I can imagine it easily translated into a mobile interface.

This interface is scales nicely. For most of the restaurants with straightforward opening hours, it's pretty simple to input. Just click the days that you are open for, and select the times you are open. Have a separate lunch and dinner service each day? No problem, just add more hour rows with different timeslots. A useful bit of information for restaurant goers is the last order timing, so I threw that in as well. Once the restauranteurs are done inputting the hours, all the information they entered is nicely presented on one page, so they can easily see what they entered.

With this input format, everything is captured in a standardized machine friendly format, so the output can be parsed and presented in a readable way (eg Mon-Thurs 8am to 8pm, closed on Fridays).

share|improve this answer
    
What do the PH and Eve PH mean? –  André Jan 28 '13 at 13:05
    
@André - thanks for bringing this up, didn't realize this but this term might be slightly country specific. In my country we refer to nation-wide holidays as a public holiday (PH). Eve PH refers to eve of the public holiday. –  Zach Jan 28 '13 at 13:47

I think this question has unlimited potential to proliferate complexity. For example, what happens if a restaurant opens at reduced hours in winter? I think you're going to have a hard time catching every scenario.

That said, a lot can be captured in a fairly simple way using a wizard-like form with progressive disclosure to reduce clutter until it is asked for by the user.

Step One:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Step Two: (including progressive disclosure below)

mockup

download bmml source

Step Three:

mockup

download bmml source

share|improve this answer

The simplicity is key, here. To make it worth while for restaurant owners, I see this product as needing to be very quick, manageable, and intuitive above all else.

The sign up flow has two steps, each presented on a different screen. enter image description here (http://i.stack.imgur.com/QCK8Y.png 1)

This first part is the registration. All they are asked for is the name, an email, and a password. Then once this information is submitted, they will be presented with the following screen: enter image description here (http://i.stack.imgur.com/cgcEv.png 1)

They enter all of the rules they can think of, making each its own sentence. There is nothing to figure out; they can simply explain their hours in paragraph form, as they would to any human. Natural language processing would then parse all of the sentences, looking for days of the week and "open" or "closed" – among other trigger words – and display the data in a calendar. enter image description here (http://i.stack.imgur.com/RINGq.png 2)

On the top they can add new rules to be added to the calendar, and each rule on the calendar is a text box that can be clicked on and edited. At the bottom of the calendar are notes for the future. They contain upcoming notices to apply to the restaurant's schedule in the future such as holidays or planned hour changes.

But the calendar simply shows the current week. It highlights the current day of the week and shows all of the restaurant's hour information by day horizontally, like a timeline.

1 Sorry I have to link to the images rather than imbed them; I just created an account and do not have enough reputation.

2 And sorry again, but I am also unable to post more than two hyperlinks.

share|improve this answer
    
I've taken the liberty of inserting the images from your links into your posting - you'll soon have enough reputation to add them yourself, I am sure. Welcome to UX.SE :) –  kontur Jan 29 '13 at 7:35
3  
The programming work required to make such natural language processing would be tremendous! This is not realistic at all. If such processing were easy, the very interaction designers that come to this board would mostly be out of jobs. –  Graham Jan 29 '13 at 19:23
    
@kontur thank you so much for your help and the warm introduction. –  zch Jan 29 '13 at 21:20
    
@Graham thank you for your thoughts – indeed it would be hard to get right, but I do not see a minimum viable product as incredibly out of reach given all of the language processing that can be done now a days. Even a simple parser that looked for an array of keywords could suffice for a first draft. –  zch Jan 29 '13 at 21:23

WWYD (What would Yelp do?)

I briefly surveyed popular sites that depend on similar input forms to grow and succeed. I think Yelp has the simplest, most intuitive solution (try it yourself):

  • Three combo boxes (day, start time, end time) plus an "Add Hours" button
  • Clicking "Add hours" adds to the list of hours above the input widget.
  • There is a remove link next to each list item.
  • The day combo box default value starts on Mon and automatically increments each time new hours are added.
  • Sensible defaults are given for the other time combo boxes.

enter image description here


The Google+ Places solution is a good runner up; this design is likely driven by tons of real-world usage data (try it yourself):

enter image description here


P.S.

When registering a restaurant, I would make the hours optional (like the examples above). You can always gently prod the restaurant owners to add their hours later, or perhaps other users of your service will be willing to add that information.

share|improve this answer

I think restauranteurs/shop owners in general view their opening hours as (e.g.) 9am - 10pm with a break of a few hours. Maybe the break/siesta is just a local thing (I'm from Cyprus) but I think adding a 'break' instead of two separate opening hours for each day would simplify things from restauranteurs point of view.

The other thing I thought of is a tabbed interface for adding Schedules. As I understand it the majority of restaurants have two main operating hours schedules (winter/summer) and a couple of holiday schedules on top of those.

Restauranteurs would be able to create their schedules via a tabbed interface. They can name the schedule, add the date range of schedule and input their opening hours & breaks for each weekday (which is applied to that date range).

Now, a problem I can think of with this, is the one of overlapping dates. For example, if a range 1/8/2013 - 30/8/2013 exists in two (or more) schedules which one does the system choose?

This could be resolved with some sort of 'override' setting (e.g. "These dates exist in Schedule2! Override?") but I'm not sure if that would add to the ease-of-use of this. It would also create further complications (e.g. what happens when the overriding schedule gets deleted etc.)

share|improve this answer

enter image description here

I think it's best to avoid repeating the same task for a number of days. In most cases, restaurants would pick a range of days to apply their opening hours to (usually two ranges: weekdays and weekends).

The interface I propose resembles the opening hours displayed on a restaurant window, and offers the flexibility to add a single or a range of days.

Extra shifts can also be added under the range of days. The first shift cannot be deleted (because at least one shift has to be included), but additional rows will have a delete button next to them.

The interaction would be either horizontal scrolling with the mouse or with the left and right arrows on the keyboard (both will be enabled). The minute increments can be in 15 minutes or either 00 or 30, depending on the flexibility required.

If all the days are selected within the first range (e.g. Mon - Sun), then the additional day range will not appear (and you can display "Every Day" in the opening hours).

I'm not entirely sure what the required flexibility for the public holidays is, but I added a feature to select the public holidays the restaurant will be closed in.

If something about the interface or the interaction is unclear, please feel free to ask. :)

share|improve this answer
    
Added that image from your link to the post. Welcome to UX.SE :) –  kontur Feb 3 '13 at 18:50
    
@kontur Thank you very much for posting the image and your thoughtful welcome. :) –  Haider Al-Mosawi Feb 3 '13 at 23:27

Here's a mockup of how I think it should be: http://cl.ly/MfHD

  • User selects one of 2 options first
  • Assume that the trash is visible on hover to avoid the noise
  • By default, user gets 1 slot titled (Open) (From) (To)
  • The (From) and (To) dropdowns can also function as text fiels (Google Calendar)
  • A slider can be used for each slot instead of the dropdowns
share|improve this answer
1  
In the sake of simplicity, why should the user even have to define when the restaurant is on a "break"? I think it would be better to assume its always closed and only require the user to define the hours a business is open. –  Sahas Katta Feb 6 '13 at 23:54
    
Makes sense and the store closing time would be determined by the "To" dropdown in the last Open slot. –  Ali Salem Feb 15 '13 at 18:49

I found a nice example (see full size image) on this site. It's for managing sports venue availability in a sports tournament but the design could easily be applied to opening hours for a restaurant. You wouldn't need the last two columns.

enter image description here

What I like:

  • Easy to drag sliders and clear visual availability across a week
  • Faster and easier to set time ranges than multiple drop down lists with time information
  • Shows the specific start and end times next to each day
  • Shows the total time the restaurant would be open each day
  • Granular control by clicking on a slider handle then using the arrow keys on the keyboard which moves the slider handle along by 5 minutes at a time
  • Big button to clear the schedule and start again in one click
  • Can be easily accomplished with jQueryUI slider.

Cons:

  • Doesn't allow for split opening hours over a weekday. You would probably need to dynamically add another row if they wanted split opening hours for that weekday.
share|improve this answer
    
I like the slider control for time range input, and have been pushing for this to be used more in websites these days. This is the only way we will get developers to come up with more flexible and feature rich sliders. As for managing the split hours, I suggest that a secondary slider to mark the closed hours (within the defined area of the opening hours) would be an interesting way to solve the problem... I wonder if there are any developers up for the challenge? –  Michael Lai Mar 6 '13 at 1:30

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.