Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

enter image description here

share|improve this question

6 Answers 6

up vote 19 down vote accepted

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.
share|improve this answer
3  
You forgot the most standard cue of all, cursor: pointer –  Andreas Bonini Nov 6 '12 at 21:47
3  
While this is true, it's necessary to remember that webpages are for mobile devices also. –  Roger Attrill Nov 6 '12 at 22:04
    
@AndreasBonini well, you could say I actively forgot to mention it. Since the button will have link properties the browser will automatically switch to the interactive pointer so I didn't think it was worth mentioning. But nonetheless still good you mentioned it. –  AndroidHustle Nov 6 '12 at 22:51
    
@RogerAttrill Yea, I definitely see the point in that. However that is a problem for most desktop aimed websites. I know that's a lame excuse but it's the only one I have. –  AndroidHustle Nov 6 '12 at 22:56
    
@AndreasBonini I already made sure the cursor is a pointer. –  dmr Nov 7 '12 at 0:15

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

share|improve this answer

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 .

share|improve this answer
    
+1 for the tooltip –  Anna Rouben Nov 6 '12 at 22:25
    
tooltip wouldn't work on mobile or pad's –  Igor-G Nov 7 '12 at 12:56

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).

enter image description here

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:

enter image description here

share|improve this answer
    
Don't forget a drop-shadow, or something to make it look like a button. –  tajmo Nov 6 '12 at 21:22

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).

share|improve this answer
4  
Not only does the white on grey have contrast issues it also gives the appearance of being 'inactive'. Adding a splash of colour here may work wonders. –  JonW Nov 6 '12 at 15:55
    
@JonW - added your suggestion to my answer - and credited you :-) –  Roger Attrill Nov 6 '12 at 16:06

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.

share|improve this answer
1  
Underlining a number is usually to differentiate a 6 from a 9... –  AndroidHustle Nov 6 '12 at 15:06
    
@AndroidHustle not quite sure, I know its applicable to physical objects, not sure if it applies to digital media... –  Igor-G Nov 6 '12 at 15:13
    
@Igor-G: I tried underlining the number but it wasn't obvious enough that it was clickable. –  dmr Nov 6 '12 at 15:14
    
@Igor-G well, if you who are in the business isn't sure, you can at least be sure that the common user won't be sure either. =) –  AndroidHustle Nov 6 '12 at 15:15
1  
@Igor-G I do however see where you're coming from, and I don't think that downvote you got was justified so I'll vote you up. –  AndroidHustle Nov 6 '12 at 15:24

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.