Make calendar icon obviously clickable

Question

On a webpage there is a calendar that shows just the current day of the month. When that calendar is clicked, a current month's calendar pops up. How can I make it obvious that the calendar is clickable?

Here is what the daily calendar looks like:

Answer 1

Some of the standard cues:

• Hover state: Make the calendar icon transform when the user hovers it, maybe having the calendar show a grid representing a month on hover.
• Contextual text: Write Show month or similar as a link adjacent to the calendar.
• Mimic button: Add borders to the icon which makes it appear as a button.

Answer 2

You're not showing the whole context so we can't see how the icon you show fits in to the context of the page.

However, it will help if you make the 'thing' a self contained actionable item - most usually in the form of a button (whatever style suits your theme) and also add a call to action (eg show calendar) or a label (Calendar).

For more information on the topic of affordance, see Michaels discussion on the term here on ux.se where as he correctly states, what we perceive as a clickable item such as a button is based on our previous experience with buttons. Positional cues such as centred icon, centred text, rounded corners, gradients etc all help to provide affordance in a situation because we become used to expecting them - we build an expectation of what a button looks like in our minds and create and look for patterns that trigger the recognition as such.

JonW suggested adding a splash of colour which is a nice idea:

Answer 3

Another option to consider is adjusting some of the visual elements to reinforce the "I'm clickable" nature of the graphic. I would suggest making the "Today" label the same color as the primary link color you are using on the site (or perhaps use that color in the background gradient). The current white on gray gradient has contrast and readability problems as it is, so you might kill two birds there.

Additionally, a common and effective addition that we have used before is adding a triangle to the bottom right of the calendar day page, indicating that the calendar is changeable (either perceived as "flippable" or as a way to get a pop-out menu).

Answer 4

For the user to perceive something as a trigger for an action (and hence clickable) it has to be labeled with a verb.
Instead of calendar you can try show calendar, or relay on the image and label it like open.

Additionally, and this is my opinion, the icon (as displayed for this question) is too realistic. This is distracting. The users might exhaust the cognitive load allotted to this particular element before realizing that it's a button.
IMO it would be easier for the harried user it it wouldn't have the metallic rings and the black base. Just the calendar page, maybe with today's date.

As of the hover effect, it's also very helpful to ensure that the pointer changes from the default arrow to the customary hand.
If you labeled it with only open then the word should react to hover too.
For the user who are afraid, add a tooltip stating what would happen if they clicked the button, in plain .

Answer 5

Hover state would work only if you are creating this app/website for desktop use only. The best thing to do is to change the colour of the calendar or underline the number. Underlining the text would make users think that they can interact with it.

Answer 6

Affordance for clickability is usually indicated to desktop users by a change of state when the mouse pointer hovers over something.

If you've got a good artist, you could make the calendar image animate when hovered over (have the pages flip).

If the image itself isn't going to change on hover, you should change the cursor to a pointer, instead of the default arrow.

_{In CSS:}

.calendar-button {
    cursor: pointer;
}

Additional emphasis may be necessary for mobile users, as there is no cursor to change. Instead, buttons often share a unifying style, such as a common shape or background-color to indicate to users which items on a webpage are tappable.

If your website is complex enough (webapp really), you may want to consider a quick modal* tutorial for new users to highlight different features that they may have missed. This can also be used when new features are added to alert users of the change.

_{* I don't mean a lightbox, it doesn't need to hide the rest of the page, it could be a simple arrow with some text as a quick callout}