What is the least ambiguous way to select a date range?

Question

We are building an internal tool to apply for and track leave. We have discovered that choosing what days to take off can be ambiguous. We've thought of two different ways to ask for a set number of days off (wire-framed below). Which of these would be easier for you to use?

Note: any holidays or weekends that fall in the time period are not to be counted as leave days.

Answer 1

I would go with this kind of UI, reasoning:

• Users only select the dates that he/she is applying leave for without having to think about first day of leave and first day of work.
• Leave balance is not displayed on the same screen as it might get too cluttered and might confuse the users. For "leave balance" checking, I would suggest to make it accessible from the main menu on a separate screen. (Since this might include, leaves pending for approval, days left, days already taken etc)

Answer 2

I’ve considered the question recently due to travelling and booking hostels. The same problem appears there, since whether you book the night or the day can be confusing indeed.

For usability reasons, the left one is a better choice since the user doesn’t have to do the maths. In this case, the best way to help the user is to be clear in the definition of the date: write “check-in” and “check-out” for an hostel or, as you did, “first day back in the office”.

In a more visual way, displaying the calendar — as in Google’s or Apple’s calendars — and colouring the day away from the office allows the person to clearly picture weeks and week-ends when booking.

Answer 3

The way Airbnb does it is great. When picking you would have the "First day of leave, First day of work" option. And when tapped, the calendar shows in an infinite scroll starting today and onward, in your case you could even color differently the days that don't count as leave days. They mark the leave days in the calendar nicely, even if they start one month and end the next one, and what airbnb does is that after they have selected both dates it waits a second and then closes the calendar, just leaving the two headers with the correct dates showing. And you could add the how many leave days are counted.

This way is clear:

1. When their leave starts.
2. Which day is their first day back to work.
3. How many leaves day they are taking, both in by the number after they selected it (i.e. "Leave day: 5 days") and by the color in the calendar.

And is not even taking much space, look how clean Airbn looks!