User's availability calendar - what is the most intuitive way to allow them to complete this?

Question

I need to allow users to complete an availability calendar. Very basically, they'll either be available or unavailable on a given day. I don't need to go any deeper than days. However, I'd like them to be able to set their availability as far into the future (5+ years) as they would like.

Given that my users are of an older generation, I really need to consider how to implement this in a way that is very easy and common-sensical. It is a core part of this project, so I need to ensure that people are filling it out properly.

Do you guys have any ideas or good examples of how this has been implemented?

I really appreciate it!

Answer 1

Not an easy question.

1. You can't let people click 5 years' worth of days. That will take ages.

2. Off the top of my head, a nice way to lower the amount of clicking:

Perface the date picker with some thing like this

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

This will at least ensure the user doesn't have to click every single day, but will know for sure what will happen with unclicked days.

3. You can try and experiment with fancy drag-box selections and the like. I'm not sure how successfully not-so-computer-savvy people interact with them. Can someone reference some knowledge about this?

4. If the user knows his availability 5 years in the future, I'm guessing it will be pretty regular. Something like Available on weekends, some weekdays, never on Tuesday. Consider this backup scheduler from Symantec and its advanced calender manipulations:

(This is of course geared towards more experienced users, but it might be something to think about)

5. Lastly, when you let users make selection across multiple screens (meaning, not all selected entities are always visible) I like having a list totaling the selection.

Imagine your really setting up availability for 5 years. If you mis-clicked some day in 2016, by the time you get to 2020 it's 10 minutes later and it's completely out of view. You have no way of knowing you made that mistake and no chance to correct it. An informative list like this will help.

This can be as informative as needed. Anywhere between just summing the number of available\unavailable days (may be too plain for this application) to redundantly listing every selection made. (6.12.15 - Available, 7.12.15, Available...). Something in the middle is probably best here.

Answer 2

You should experiment with various options and try which is the most intuitive to your users - you will likely need a Settings menu anyway so users will be able to choose 1^st day of the week and so on...

1. default status for the dates could be undecided, default action of 1 click could be to make the day available, 2^nd click would toggle it to unavailable and so on... a drag would apply this action to multiple days at once... and right click (=long touch on mobile) would open context menu with more options like add a comment:
   

2. it should be possible to disable this single-click action and dates would get only selected by click or by drag or by keyboard shift+arrows. In this case, action buttons next or above the calendar would have to be available. You could also calculate and display the statistics for the current selection - so it will be easy to count available days per year, ...
   

3. and it should be possible to mark all days as available/unavailable by default or perhaps even to mark workdays available + weekends and holidays as unavailable (or vice versa). The default value could then be overwritten by the above methods...
   

4. regarding multiple years, you could use an infinite scroll technique to load 1 more year than is currently visible:

5. scrolling on wide enough screens might be vertical for 3 months in a row, but for narrow screens, horizontal scrolling might make more sense

6. the year might be displayed in a Fixed position so it's always visible

---

If you wish to play with the Excel mockup, it's available on Google Drive.

Answer 3

Start off with a calender, and keep it clean, using very minimal colors (white reccomended), and when the user wants to set availability, just let them click on the date, and bring up a split menu, with the right half showing a green button saying 'available', and the left being red and saying 'unavailable'. Good luck!