Showing (binary) availability on date picker

by Quasar   Last Updated January 15, 2018 19:16 PM

I'm working on a system which uses a date picker to reserve a date in the system. The specs are:

  • Dates have two states: Available for booking, or not available.
  • You can only book one date at a time.

My proposal to my client is to grey out all the dates which are not available, while the available ones are in solid colors. If a user was to try to click one of the unavailable dates, a tooltip would show up and let the user known.

But, the client says he/she wants to fill the date picker with colors, green and red, to signify which dates are available to pick from.

From my perspective, this will only clutter the interface and make it generally more mentally straining. However, I'm here since I would like to hear your opinions to broaden up my view.

I've attached a generic date picker (found on google image) to give you an example of what I mean.

Date picker

Answers 1

Explain that the simplest, clearest UI is always best.

and adding more complexity (via colors) is taking this design in the wrong direction.

Graying out is a well-established way of communicating "this option is not available. Adding more colors to achieve this is like trying to reinvent the wheel, and yes, your feeling that the result will be a visually and cognitively strained one is correct.

A calendar that works with one color (and grayed version of that color) is better than one with 4 colors, the meanings of which have to be interpreted and learned.

You should explain that "one good test is worth a thousand expert opinions" and that the version to test first is the one with the lowest visual, cognitive, and technical overhead.

Put your version in front of some test users, and when they have no issues using what is an essentially sound and simple UI, your client will have to be a complete monster to suggest that despite your arguments, and despite the test results, they still want colors. In that case, just do what they ask, let their users suffer on their behalf, and keep that rainbow mess of a datepicker out of your portfolio.

January 15, 2018 19:14 PM

Related Questions

How should I format my Date field Helper Text?

Updated November 03, 2017 14:16 PM

Reminder/Alarm time picker - default time?

Updated April 07, 2016 08:06 AM