Form for inputting operating hours of a business

Question

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:

• 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.

Answer 1

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)

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.

Answer 2

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:

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.

Answer 3

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:

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."

Answer 4

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.

---

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

---

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.

Answer 5

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

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

Answer 6

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:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Step Two: (including progressive disclosure below)

^{download bmml source}

Step Three:

^{download bmml source}

Answer 7

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

Answer 8

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.

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.

Answer 9

Why not something similar to mac's calendar?

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

Answer 10

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

Answer 11

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.

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:

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.

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.

Answer 12

Here's a mockup of how I think it should be:

• 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

Answer 13

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.

^{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.

Answer 14

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 http://inkreaser.com/ext/stack-exchange/restaurant-hours.png

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.

Answer 15

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

Answer 16

You can set different slots of time for each day, remove them with "X" or add new slot while clickin' "Add hours"

Answer 17

A lot of great UIs in here. Just adding another option.

Answer 18

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:

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

Answer 19

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.