What is the best UI for an out of office application?

Question

I am building a tool to track out of office for my team. The main view is a month calendar view. Right now you get a certain amount of vacation (lets say 10 days). People can take full-day or half-day vacations.

Right now our request UI just shows 2 text boxes (with calendar dropdowns) for start date and end date.

This is obviously not good enough to support half-day vacations. Given that I have to make a choice of either:

1) Just adding a "half day checkbox" and after you click on it, a "AM/PM" radio button comes up

or

2) Adding time to start date and end date textboxes so a person can say that "I am out from Monday at 9AM to 2PM."

Option 2 seems more flexible, but might over-complicate things because I now need to translate hours into days off and that will allow people to take 0.675 days off. Also it's a global team so Option 2 would now need to start dealing with time zones and all of the other complications associated with time across regions. But Option 1 seems like it might be too constricting and less future-proof.

Also note, this tool might allow other events beyond vacation at some point so i want to avoid painting into a corner.

Answer 1

Go with Option 2.
You say that Option 2 is problematic because it means you'll have to deal with time zones, but even if you deal only with full days you'll still need to deal with time zones. For example, a worker who is out for the full day on January 1st in Alaska will need to be shown to workers in Japan as being out for the day of January 2nd.

Also, depending on culture, it could be quite common for users to want to take only part of the day off. A parent picking a child up from pre-school two days a week may need to register as taking off an hour or two early on both those days; they can only do this if you allow entry of time by hour.

Answer 2

Beyond a doubt, to keep it simple and intuitive, I'd definitely go with a variant of version 1, but I'd do away with text inputs, options, checkboxes and such, and replace them with a couple of calendar interactions to cover the different input possibilities, clearly explained beneath the calendar:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I will start with an assumption that an employee is allowed to take consecutive full days off work.

Have a switch for "Full day" and "Hours".

When "Full day" is selected, present a horizontal list of days with an option to scroll to the right (future) for the next 6 months. Have draggable handles on the left and right so the user is able to select multiple days and visually understand what has been selected. Here's the interaction I'm describing http://www.google.com/finance?q=NASDAQ%3AGOOG&ei=Kk7FUND0CMOvkAWi0wE look at the bottom of the chart to see the ability to select a period of time by dragging.

When "Hours" selected, allow user to select a day and then present a horizontal list of hours and have the functionality described above but for selecting hours as oppose to days.

Answer 4

Seeing as you have a calendar UI already built. Give the user two small icons. Just two small circles. One filled half way the other all the way. Each represent how much time is going to be taken off. When a circle is selected. Bring up a small modal window near the circle. The user then selects the time in either am or pm or even split. Once saved the modal disappears with the opposite circle almost transparent. It's still selectable thus allowing the user the ability to change their mind and/or make edits.

Later on you could write in a filter at the top of the page that would allow you to select all half-days or full-days of people being out. It would also be an easy visual indicator to other employees who's doing what.

Answer 5

Adding the option of picking the time you are out for a specific day is much more straightforward than checking a box.

The option would allow the employer to identify the time that the employee will be out. If you just have a general check box that says they are taking a half day, how do you identify whether it was the first have, or second half of the day? I'm sure HR would have an input on this.

Hope this helps! :)