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

1 Answer 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 objectively better than one with 4 colors, the meanings of which have to be interpreted and learned.

  • Introducing colors also opens the door to issues with accessibility for colorblind users.

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 rationale, 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 date picker out of your portfolio.

  • I was able to convince my client with your approach, instead of click to show tooltip we decided on a 1-second hover delay before showing the tooltip! Thank you for your input! Jan 18, 2018 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.