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