: How to make clickable areas stand out? 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
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?
More posts by @Heady304
4 Comments
Sorted by latest first Latest Oldest Best
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
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.
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.
You could add a slight gradient to the unclicked orange days. The gradient could be activated after "½ Tage wählen" has been clicked.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.