1

I'm designing a desktop form where users have to select 1 day from a calendar. It's a reservation process for restaurants.

I've been suggested to use an existing calendar component that shows 2 months at the same time, one next to another. The potential benefit of this is that users looking for more distant dates have easier access to those dates.

But I feel that this is a pattern used only for situations when the user has to select a range (start date and end date, like in travel).

Do you think this may be confusing for the user? I'm concerned that showing 2 months may negatively affect the user's expectation of how the calendar works, or even make some users think they have to select a range.

enter image description here

4
  • "...confusing...". I don't think so, not with today selected. Mar 1, 2023 at 15:06
  • "2 months may [...] make some users think they have to select a range" – What makes you think that users might not think to select a range within one month if just one is presented? Mar 1, 2023 at 19:57
  • What if just one month is presented, it's the last day of the month, 1) it's a weekend hence it's likely that there's nothing to select at all since they are "sold out", 2) it's 11:59p.m. so a reservation for that very day is pointless? Mar 1, 2023 at 20:02
  • 1
    "2 months may [...] make some users think they have to select a range" #2 – Isn't it very unlikely to expect to be able to place a restaurant reservation with a range (of days)? Its' not a hotel. I never stayed in a restaurant overnight...erm...OK, I confess, I did. But they threw me out finally. Mar 1, 2023 at 20:40

6 Answers 6

1

It depends. They way you've designed it does not appear confusing at all; it is very clear which date is selected, and because of the visual continuity between the two months, it looks clear that this involves the selection of one date, not two. That said, it's worth doing usability testing on it within its context in a flow to find out for sure. (I am not the user, so just because I am not confused by it does not mean others won't be!)

In terms of having one month versus two, here are some important questions to ask:

  1. Are a significant number of users selecting a date in a future month (versus the current month)? (Scenarios I'm thinking of where someone would pick a future month: very popular restaurants, travel, and those annoying people who have their lives together so much that they don't procrastinate.)

  2. Would having a wider selection window block any important content that the user needs in order to select a date (always assume your user has a diminished working memory and can't remember what they saw on a previous view)?

  3. Will users be doing this date selection task on mobile devices?

1

Calendars with the option to select a range of days usually have the days free of frames to emphasize the user can define a linear sequence (click and drag). By breaking down this very clean layout, and isolating each day as a button, the user will mostly interpret a click instead of a click and drag.

Calendar

3
  • Phew, looks a bit overloaded to me. More like a picture of an unusual arrangement of keyboard keys. ;) Probably even more on the first day of a month. Mar 1, 2023 at 21:03
  • 1
    In the answers with images I usually use strident colors to show an exaggeration of what I am trying to answer, in no case is it a final graphic result
    – Danielillo
    Mar 1, 2023 at 21:17
  • 1
    Thank you for clarifying. Hopefully none of the future readers here takes this for real (comments are not that prominent and not read that often). Anyway +1 for the good idea then. Mar 1, 2023 at 21:48
1

My first instinct is that it wouldn't be confusing to users, however there must be a reason OpenTable and Yelp, arguably the two most popular restaurant reservation platforms, both have single-month datepickers, and it might very well be that showing two months is confusing.

The downside of that is if it's near the end of the month, it's likely I'd need to click to view the next month in order to make reservations for the upcoming weekend.

1

Actually it is a good user experience, it will show 30 to 60 days on one screen, if it was a one month calendar, 60% of time users would have to navigate to next month to choose the date. In case of restaurant bookings, users don't book it more than a month in advance, so most of your users will not have to click to go to next month if you show 60 days on one screen.

Users will not get confused as they already know it is NOT a date range, and the calendar can pick only one date.

DO NOT PRESELECT A DATE

Calendar mock-up

2
  • 1
    "so most of your users will not [sic] have to click to go to next month if you show 30 days on one screen." – shouldn't that be "... 60 days ..."? And, beware of R. M. coming by insisting on evidence for the 60 %. :) Anyway, +1. Mar 4, 2023 at 18:52
  • 1
    Yes! Corrected. Thank you. P.S. 60% = "most of the time"
    – Garik
    Mar 4, 2023 at 20:22
0

A couple things to help clarify:

  • Label Select a day, and
  • Dim next month, and

calendar dim

This is showing a hover state over date October 19th. When the someone clicks, the previously selected date is unselected and the clicked date is selected.

 

When the cursor is moved over next month, make it active:

calendar hover

 

OR, use a continuous calendar:

calendar continuous

1
  • \@Pic 1 & 2: Why just activating next month's days on hover? They are going to come definitely (apart from if the Gauls were right and the sky falls on our heads before :), reservations can be placed there from the moment on the calendar widget opens. \@Pic 3: There's no indication which of the two months we're in – apart from the last available day, which one has to remember for the two displayed months, or worse: look somewhere else...on the knuckles–bloody or not–of the closed fist, perhaps. :D Mar 1, 2023 at 20:24
0

You can use a huge number of calendar options, but in order not to confuse the user, I would do the following:

- Add selection label. Show additionally to the user what choice he made. Add an input or a selector, or just a text that the user understood that he chose exactly the date he wanted (most likely you choose this calendar from somewhere).

- Add apply button. Your flow may be different, but if possible I would add an apply button. This will make it easier for the user to see their changes, and not just marks on the calendar.

In addition, you can look at the following sites for good examples of calendars:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.