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'm using FullCalendar on a project where users primarily have a single event that lasts multiple days or weeks, with multiple other events scattered throughout. I've had a handfull of users say that they're confused by which day the events are being shown in, quote:

the [event] line being dark across the board causes your eyes to associate the date number with the wrong date box

and

They are associating the space above the line as the day. So for example they want to set something for the 16th so they click on the space above the 16th which in this example selects the 9th.

I can't "make myself see it" - the dates are in boxes with events that span date boxes. Also, how we have it lain out seems like a pretty standard user interface. Here's a screenshot, explaining, with other interfaces linked below for comparison:

our calendar

Does anyone have any recommendation on how I can reduce the confusion for my users? Some of them suggest moving the event above the date number, which seems very wrong and much more confusing.

share|improve this question

3 Answers 3

up vote 3 down vote accepted

You could fix the issues by changing visual design of the calendar:
enter image description here

  1. Separate event block from the cell border to clear distinguish event block and calendar border lines.
  2. Use lighter color for long events to reduce color distraction.
  3. Use shadow in the top righ corner, under the number. The shadow is dissapearing to the center of the cell. It helps to perceive number and appropriate cell correctly.
share|improve this answer
    
I think you addressed the biggest problem with #2. The dark purple color is very prominent in the visual hierarchy and can be mistaken for a header. –  Paul Jan 10 at 8:11
    
I really like 2 and 3. As for 1., there's a UI difference between an event separated from the cell border and one that isn't - it indicates that the event extends beyond that day. –  xdumaine Jan 10 at 12:32

Well, I think I would have made the same error (it is really confusing).

For me the problem comes from the purple line (which does not look like an event since it is everywhere and we can't see where it starts and where it ends).

You can try to add some margins to the bottom of the numbers, maybe making them bigger would help too. You can also try to align the events to the bottom of the boxes so the blank space is more easily associated.

At least I think you have to make each box clearly identifiable (borders, backgrounds could also be a solution).

share|improve this answer

You can have a look at mobile and tablet implementations of calendars to draw some ideas. I have seen so far the following:

  • Having all continuous events on top of everything, e.g., in your example a purple line would be below December, or
  • Breaking continuous events in multiple daily events, so that each day in your example would have a separate event.

It's interesting you mentioned Google Calendar, as between platforms they actually use all 3 designs (desktop, mobile, tablet respectively).

Depending on your setting/application, you might also want to change the default view into week in order to help the users get used to having the date on top of its visual container.

share|improve this answer

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.