Best way to represent "add to waitlist"

Question

I could use your advice on a UX issue. I'm working on the UX of a system for scheduling appointments. Showing something is either available or not available is easy, but I want to give people the ability to add themselves to a wait list, should the appointment they want come available. My problem is I'm not sure the best way to indicate something isn't available. Before the add to wait list functionality was needed, I just left the grid blank where an appointment was booked. Now I need to add in a booked, but can be wait listed. Any ideas?

Answer 1

Some quick observations:

• I try to avoid using legends, because they force the user's eye to dart around the page just to understand what boxes mean.
• The "radio button/circle inside a box" is visually distracting. As a user it isn't clear whether the circle is an indicator or a radio button. Visually, it's a distracting layout because it uses the same lines as the surrounding grid, which breaks up the grid flow for users and makes it hard to read.

Here's a layout which uses color, in-cell indicators, and hover states to show clearly what each cell means and how the user should interact with it. The labels are also friendly for the color-blind.

The "unavailable" cells are fairly clearly marked, and the use of different cursors on hover provides further indication that the cell is inactive/not clickable.

The color palette is crappy but you get the point.

Hope that helps.