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

    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, yes the data needs to be acted upon, so textarea is not an option.

    The form should also allow inputs where opening hours span across days. (E.g. M-F 11am to 2am, SaSu 9am to 2am.)

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

    Can you include the text from the images in the actual copy of your answer? It's not searchable when its in an image.

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used