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

Improve this question
4
  • "...confusing...". I don't think so, not with today selected.
    – bloodyKnuckles
    Mar 1 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?
    – Gerold Broser
    Mar 1 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?
    – Gerold Broser
    Mar 1 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.
    – Gerold Broser
    Mar 1 at 20:40

6 Answers 6

Reset to default
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?

Improve this answer
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

Improve this answer
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.
    – Gerold Broser
    Mar 1 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 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.
    – Gerold Broser
    Mar 1 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.

Improve this answer
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

Improve this answer
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.
    – Gerold Broser
    Mar 4 at 18:52
  • 1
    Yes! Corrected. Thank you. P.S. 60% = "most of the time"
    – Garik
    Mar 4 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

Improve this answer
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
    – Gerold Broser
    Mar 1 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:

Improve this answer

Your Answer

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

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