Redesigning the Calendar
We’ve been looking at the calendar element of Engage for a while and considering how we could improve both its utility and its visual design. Currently, when you start getting multiple events on a given day the display starts to break. We wanted a clearer way to display busy calendars, but also to look at the fundamentals a bit more, could we refocus the page to make it more useful?
With this in mind we’ve taken a look at a number of options for improving the default styling for the calendar. None of these have been implemented, they’re just mockups at the moment, but they’ll give you an idea of the various approaches we could take. We’ve used some real data, as that gives an authentic example of how a calendar might appear. Actual look and feel for whichever option we decides to implement will be theme-able to your particular instance.
We’d love to have some feedback from you on these options.
Option 1 – Better columns.
This is by far the simplest option for the calendar, rather than scroll the individual boxes, allow them to expand for full viewing of a busy day. Combine this with a more solid vertical rhythm of the calendar text and it should be clearer to scan. This does mean the page will need to scroll if you have lots of events in a month and this makes the calendar lose its ability to give an instant overview as some items will be “below the fold”. It does result in a clearer listing and avoids wrapped text being hidden, as it is currently.
Option 2 – Detail on hover
This option truncates the basic display to the first three events and provides a hoverstate that shows more detail. This allows for a more compact summary, that still gives a hint at event density. The disadvantage is that the full detail requires an extra interaction, and items appearing further don’t the list are not instantly visible and need to be browsed to.
Although this example requires javascript for the hover state, the page is fully usable without.
Option 3 – Diary View
This option takes a broader view of the function of the calendar. Rather than trying to display every event, it breaks things down so that we have two panels. One panel for a smaller indicative calendar that acts as navigation and persists through pages. The other panel that shows a summary of the current days events, with both title and summary. This is more a diary view than a calendar view.
This a big shift from the calendar with all events linked from the first page, but it has a number of distinct advantages. The first is a focus on the current day when you enter the calendar, allowing a clearer view of event summaries and current activities, especially useful when an events title is not self-describing. The mini-calendar also provides a stronger navigational element that gives a clear indication of the current day/month/year that you are browsing. The mini-calendar also gives you an indication of event density in a particular month, though not that of a particular day.
Assuming the default view of the diary is the current day, you would sometimes have no events to display. However, an empty day could be used as an opportunity to highlight other upcoming events.
Option 4 – Calendar Widget
This final option is a more dramatic shift from the previous calendar than the other options. It treats the calendar area as a widget that pans around the data. If you click the link for the next week, it slides in from the right rather than loading a new page. This reduces the initial information dump, and allows for a more desktop-like experience of browsing between weeks and months. The default view in this setup is also week-based, which offers a good compromise on showing lots of data without the page being overloaded.
We can also make the process of paging nice and smooth by pre-loading the next and previous pages in the background. Again, this option requires Javascript, but in the event it isn’t present the system falls back to a more traditional link-based, page refreshing approach.
Where to go from here?
Each of these options provides for a different approach to making the data of the event calendar more digestible and cleaner visually, each with their own advantages and disadvantages. We’d love feedback on which you think would suit your users and the data you have on your systems best.
