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?

4 Answers 4


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

  • So, you suggest to keep the mode and just change its representation? That sounds interesting, and it looks way better than I imagined :) Will try, thanks!
    – awendt
    Commented Oct 30, 2013 at 10:42
  • I think the idea was to avoid the modal approach, and simply modify the appearance of the orange days by adding a gradient when the half-day button is clicked. Commented Nov 1, 2013 at 3:53
  • @AlanGilbertson No, my idea was to modify the appearance of all days except the orange ones to make it more clear that only the orange days can be clicked.
    – awendt
    Commented Nov 1, 2013 at 9:48

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.

  • I'm not sure I can follow. Are you saying "Drop the modes, 1st click: full day, 2nd click: half day, 3rd click: off"? I like that idea. But I don't understand why you speak of "a button to toggle between [modes]" and "in either mode" because modes wouldn't be necessary anymore...
    – awendt
    Commented Nov 1, 2013 at 9:41
  • 1
    The 1/2/3 click approach is even simpler, making the whole thing very easy to learn and use. -- Simple is good. Easy is good. My suggestion didn't go quite that far: make your existing "half-day" button a toggle that could switch the calendar click response between half day and full day. I'd decide which approach to use by counting how many clicks it took my test users to make a typical entry. Commented Nov 1, 2013 at 19:32

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.


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!


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.