Sketching out a better web calendar

The problems I have with 30 Boxes are a direct result of their decision to go with a single Monthly view. This keeps things simple, but eliminates the common Weekly and Daily views. Traditionally these views are used to display more information than will fit in a Monthly setup. Without them that information is pushed into hover pop-ups.

Which begs the question: Can you have a simple, feature-rich single view while maintaining an appropriate level of information for a casual user?

There are two major concerns:

1. Having enough physical space to place the information in.
2. Maintaining the relative postion of events to each other and key points (the weekend).

In a web browser, traditional scrolling extends space vertically. This completely rules out the heavily horizontal Month View. It needs something more like a Day View, for multiple days.

These are generally segmented into hours. That work great for Today. It’s handy to have a detailed idea of when an event is happening in relation to now or to other events on that day. However, that’s not needed as much beyond Today; we can compress all of those empty hours down.

Following the same thinking, extra meta information (such as location and duration) for events outside of a week also lose relevancy. That meta data can be hidden behind a time-delayed tooltip.

Which gives us something like this:

In the sidebar area there is an analog clock. It’s more specific than the “Now” bar and is easy to process at a glance. Events are created in the excellent 30 Boxes fuzzy logic style, there are controls to filter the view as needed, and finally there are small Month views for the next few months. While the Month View lacks space, it greatly aids relation. At a glance we can tell how many days/weeks till something and what day it’s on without reading the name. Adding these views with color highlights for the days brings some of that functionality back. Mousing over a colored day would expose a time-delayed tooltip with the event information. Clicking on it would jump to that day.

While far from perfect (there are many interaction issues to work out), I like it. I can quickly see and comprehend the important stuff at a glance while getting a broader view with an easy flick of the mouse wheel.

Update: I received a comment via AIM about how the calendar was nice and all, but didn’t seem very accessible to a casual user. I agree. It’s partially due to the unfamiliarity and it’s mostly a result of the wireframe. There is no graphic design. Visually it needs to be softer and more welcoming. Which is relatively easy to accomplish. I think I’ll work something up for a later post.