6

I am designing a web application that includes functionality for indicating an employee's availability to work. This is an easy concept for two people to communicate to each other verbally: "I am available Monday's Tuesdays all day and Wednesday's after 12:00pm." But difficult for me to figure out how to translate this into a web form. The options that I think I need to have are:

  • Indicating which days a person is available on a weekly basis (Mondays and Tuesdays all day, Wednesday's from 12:00pm-5:00pm)
  • Indicating specific days that a person is available or not available that deviates from the norm (This Wednesday I'm available all day, but next Tuesday I'm only available until 12:00pm)
  • And lastly, this might be overkill, but sometimes people are available on a monthly basis ("I'm not available the second Friday of every month" or "I'm not available on the 15th of every month")

Does anyone know of any good examples of this, or have any general suggestions for implementing this type of feature?

Thanks!

Improve this question

4 Answers 4

Reset to default
1

I'd suggest having two separate areas - one where the user makes entries describing their availability, and one where the system displays the aggregate result.

Essentially this replicates the conversation that two people might have, providing one area for the user to "speak" and another for the system to "reflect back" their understanding.

Entry

Provide an area where users describe their availability.

One way to do this would be to allow them to make a series of statements that are highly structured, but English in form.

  • I am available every Tuesday and Wednesday
  • I am available every Thursday after 2pm
  • I am not available on the last Thursday of the month

You might allow users to type these in directly, or provide some kind of simple builder.

Display

Next to the data entry, provide a calendar showing how the users statements define their availability. Make this navigable, so people can look into the future (or, perhaps, the past). If the user pauses over a particular timeslot, show a tooltip that describes why they are (or are not) available at this time.

  • User points at a Monday timeslot.
    System: You are not available at any time on Mondays
  • User points at a Thursday morning timeslot.
    System: You are not available on Thursdays before 2pm
  • User points at Thursday afternoon near the end of the month.
    System: You are not available on this Thursday because it is the last Thursday of the month.

If the user clicks on a timeslot, you may want to highlight the rules that contribute to availability at that time.

Improve this answer
3

Any sharable calendar has features like this (Outlook, Gmail, etc.)... copy one.

Improve this answer
2

you could use a simple color-coded calendar.

- green: available
- yellow: partially available
- blue: unavailable; (red would be too harsh i believe).
- blank/transparent: no info.

Edit: Using Occam's razor, after peterchen's thoughtful points below:

  • green: available
  • dark green: partially available.
  • blank: unavailable.

the thinking here is that using only one color and varying the intensity of it would give us the most information with the least amount of elements. This would be easier to scan than using a traditional 'traffic-light' scheme.

Improve this answer
2
  • red would be too harsh i believe - why? When I say I'm unavailable I am unavailable, not "unavailable unless you need my help telling the left andd right mouse button apart." Also, using non-red you devalue the "green / yellow" choice. Second problem: "blank" will usually be interpreted as "available", as a dead tree based calendar works that way.
    – peterchen
    Nov 23, 2010 at 10:46
  • @peterchen: Good points. I was imagining a use case where a manager was looking at this chart or calendar. I imagined that when someone is available is all that is really important. It is a given that if someone is not available, they are unavailable. Having only one color stand out above the rest would make for easier reading and decoding. Come to think of it, only two colors should be use, available (green) and partially available (darker green).
    – Sebastian Patane Masuelli
    Nov 23, 2010 at 22:43
1

To specify available hours you could use sliders that have two indicators, one for starting time and one for ending time.

The form to specify standard working hours could show a week of dates and a slider for each date. There could be a check box to indicate if this is recurring (i.e. usual standard week).

Based on the the scenarios you mentioned you could have a form for exception events. This would allow you to specify one off events (or recurring events) in addition to the standard week. For instance need to have next Wednesday afternoon off, or in the case where someone is available on the second Monday each month.

Exception events would need to indicate available or unavailable time. This could be indicated by a radio button at the top of the form and color coding of the time interval on the slider.

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.