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.

I have a calendar interface that indexes a bunch of gym classes for a user to pick among. These classes are represented as small boxes on the calendar, in a similar manner to how hipmunk.com does their calendar interface.

Once the user hovers over this box they see more information and the cursor turns to a pointer indicating the area is clickable. My problem is that in user testing the users rarely realized that they could hover over the boxes, and therefore never realized they were clickable!

What's a good way to indicate these boxes contain more information then visible by default?

Edit: Here's a screen shot of what the calendar will look like. Still playing with colors and these are placeholder icons (from theNounProject) but I think it gives an idea of how the calendar will look. This appears well above the fold on the page. The calendar screenshort

Upon hovering over one of these events we get (and cursor goes to pointer): enter image description here

share|improve this question
1  
"in user testing the users rarely realized that they could hover over the boxes". Very well that you organized user testing. Most would assume the cursor change would be enough. Would it be possible to upload a screenshot? Maybe it's a design issue. –  Bart Gijssens Apr 20 '12 at 13:57
    
@Bart Gijssens I'm on the go at the moment but can upload later. Once the cursor changes it becomes apparent the element is clickable, however the problem is getting them to hover! –  cmwright Apr 20 '12 at 13:59
    
If it does not look like hoverable content, users will not hover. –  Bart Gijssens Apr 20 '12 at 14:09
2  
Well, that's his entire question @BartGijssens. How to make it look hoverable. –  Myrddin Emrys Apr 20 '12 at 15:13
add comment

5 Answers 5

up vote 2 down vote accepted

Without seeing a screenshot I could be off, so take these ideas with a grain of salt.

  • You could make the entire calendar, including the empty dates, reactive. If the entire calendar is a two dimensional dynamic zoom (similar to the OSX button bar), the date users point at is bubble-zoomed. This will encourage exploration of the control and thus discovery of the hover interaction.

  • If the highlighted dates are large enough, you could buttonize them (add edge highlights), which is the standard method of affording clickability. This would require the rest of the calendar be very flat, and possibly desaturated/faded to ensure the 'buttons' stand out. Even though the actual interaction is 'hover', by encouraging clicking you attract the mouse to the box so they can learn the actual interaction.

  • Your calendar may resemble advertising, and thus be the victim of banner blindness.

share|improve this answer
    
Interesting idea with buttonizing the elements. I can see if I do it well enough it would be a much more intuitive layout. –  cmwright Apr 20 '12 at 18:57
add comment

It depends on the application and where it is located on your web page. Does the user have to scroll down to see it? Is it at the top of the page? Location is key here because there are several things you can do, but you will be limited by where the calendar is on the page.

Looking forward to seeing a screenshot

share|improve this answer
add comment

You say they are represented as small boxes on a calendar, but that's not really what hipmunk does: they just have a calendar below the input fields:

Hipmunk date selector

"These classes are represented as small boxes on the calendar", to me, sounds like this:

Tasks integration into Google Calendar with checkboxes

The checkbox element is related to tasks, but could also work for you. Most salient to your question, as it's also a form element, it invites interaction. You can then use the checked items to populate whatever the rest of your workflow is, dynamically disable other check-boxes if they select too many, etc.

share|improve this answer
    
sorry should have been clearer. It's the part of hipmunk where they should the flights, not where you enter the dates (what you get when you click "Search!"). –  cmwright Apr 20 '12 at 18:16
    
@cmwright Aha! Well, I'll leave this answer up for posterity anyway. :) –  msanford Apr 20 '12 at 18:18
add comment
  • The best method would be to call a animated .gif as a background in the date box which has an event for that day, similarly where any newly arrived information is shown as "New" which blinks.
  • You can show the dates with a underline tag , this is commonly understood that this is a link and user can click on the same (old idea though)
share|improve this answer
2  
Are you serious on the blinking .gif thing??? Imo that would seem the best choice in order to completely ruin the UX. –  Bart Gijssens Apr 20 '12 at 14:10
    
i know, only reason i mentioned it is because , calendar box will have very less area to make any visible UI change, so only think which grabs attention of user is something that is changing. am curious to know a better UI then this for sure!! :) –  sree Apr 20 '12 at 14:13
2  
I believe a plain blinking animation would actually drive attention away from the control, due to advertising blindness. useit.com/alertbox/banner-blindness.html –  Myrddin Emrys Apr 20 '12 at 15:30
    
i did not say plain blinking animation nor did i suggest any animation type. I have given up the idea, it up to the user to have a creative way to put it across so that users are attracted (plz refer to my e.g) :) –  sree Apr 20 '12 at 17:05
    
"blinking" has a very specific meaning. I would edit your question to use the word animated if you intend for a different effect. I personally cannot think of an animation that affords clicking however. Attracts attention... but not encouraging the user to point at the button. –  Myrddin Emrys Apr 20 '12 at 21:02
show 1 more comment

As a suggestion I would use something similar to Microsoft Excel. When you right-click on a cell and select "insert comment" it creates a small triangle in the right upper corner of the cell. Screenshot

share|improve this answer
add comment

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.