interaction design - Form for inputting operating hours of a business

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

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.