Microinteractions for overlapping events in calendars
The problem
When various events happen simultaneously, the usual presentation of them is one of the following:
- The space is divided in as many columns as number of events
- The text is truncated to fit in whatever width there is available from the operation mentioned before
- As a result, when people share calendars it is difficult to see overlapping events between different users
- Some events look more important than others just because they don’t overlap with others and, therefore, they occupy more space in the calendar grid
In professional calendar applications the situation does not seem to be much better. According to our observations, the best representation is similar to a stack of cards but this hide the content underneath.
We have observed that the usual presentation of different events that happen simultaneously can be improved if we concentrate in the “micro interactions” of their representation.
Solution prototype I
The simultaneous events are presented animated sequentially leaving space on the left and right of the current event to let users now that there are other events.
This doesn’t happen with the first and last events because they don’t have events to their left and right respectively. To give a visual information of the number of overlapping events we include the same number of indicators on the top left.
These indicators are small rectangle thumbnails with the same color as the background of the events. This animated view could be presented as a default view or only when users click or swipe on a time slot with simultaneous events.
Solution prototype II
There are more possibilities of exploring alternatives to the previous proposal but deeper analysis of the problem made us conclude that the main issue lies on the representation of time. It is a convention coming from the old paper calendars to present hours in the vertical axis and days, weeks and longer periods of time on the horizontal. This is not a faithful representation of time since we experience it in one linear dimension.
Our second proposal presents a zoomable timeline on the horizontal axis and the different calendars in the vertical axis. This way the simultaneity is clear and the representation of time too.
About me
Contact
Hi, I am an intreaction designer with a background in Computer Science and Visual Communication. Research through design, ethnography design and participatory design are my main methods of working.
I have a passion for designing learning experiences <nd making visible the invisible.
hi@marianovelamazan.com