Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

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.

share|improve this answer
    
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 Oct 30 '13 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. –  Alan Gilbertson Nov 1 '13 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 Nov 1 '13 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.

share|improve this answer
    
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 Nov 1 '13 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. –  Alan Gilbertson Nov 1 '13 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.

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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