3

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

Improve this question
4
  • 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, 2012 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, 2012 at 13:59
  • If it does not look like hoverable content, users will not hover.
    – Bart Gijssens
    Apr 20, 2012 at 14:09
  • 3
    Well, that's his entire question @BartGijssens. How to make it look hoverable.
    – Myrddin Emrys
    Apr 20, 2012 at 15:13

5 Answers 5

Reset to default
2

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.

Improve this answer
1
  • 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, 2012 at 18:57
0

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

Improve this answer
0

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.

Improve this answer
2
  • 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, 2012 at 18:16
  • @cmwright Aha! Well, I'll leave this answer up for posterity anyway. :)
    – msanford
    Apr 20, 2012 at 18:18
0
  • 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)
Improve this answer
6
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 21:02
0

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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