How to make clickable areas stand out?

Question

I'm working on a calendar app that lets you toggle your vacation days. There's a feature for choosing which of those days count only half.

Usage: The user toggles some days, those days turn orange. The user can then click a button "choose half days". When clicking, the whole page fades, except for the orange days. You are now in a mode where any click on the orange days adds stripes to indicate they only count half. Any other clicks returns to the previous mode.

If you want to try it, go to the app, toggle a few days, the click the button labelled "½ Tage wählen" beside the lower-right link to 2014.

I've been using jQuery Tools for the exposé effect.

For technical reasons, I cannot continue to use it. And thinking about it, it might not be the ideal solution for turning orange days into half days (the "mode" thing is bothering me).

So, my question is: Are there other/better ways to make clickable areas on a page stand out to indicate which areas should be clicked?

Answer 1

You could add a slight gradient to the unclicked orange days. The gradient could be activated after "½ Tage wählen" has been clicked.

Answer 2

There seems to be no advantage to requiring full days to be selected before the user can enter a "half-day mode" to modify them.

A button that toggles between "full day mode" and "half day mode," so that in "half-day mode" a click will "upgrade" an empty day to half, or "downgrade" a full day to half, would be simpler to use and wouldn't require extra visual cues. You can build the behavior of consecutive clicks on the same item any way you prefer. Users will quickly understand how it works. They should be able to click on an empty day or a selected one in either mode and have something consistent happen.

Answer 3

From that app it already is clear that all white boxes are clickable however what is not clear is what bluish/gray color represent and if they can be interacted with. Maybe give them some effect like:

• carved in
• gray inside border
• diagonal lines
• darker color

But to answer the question main thing to set something apart from other elements is to use Contrast.

Contrast can be achieved by:-

• relative color's hue/saturation/brightness
• shape
• proportion
• spacing/repetition
• change in theme

basically anything odd.

Answer 4

If you want, a simple solution would be that you could just have a thicker stroke around the boxes that are clickable, rather than only showing those days. Another option would be to bevel and emboss the clickable areas though that might be a little old-school dor something that has such a clean, contemporary feel.

Anyway, good luck with it!

-J