Calendars and schedules
An alternative display for visualizing and managing group schedules
Microsoft Outlook is one of the most widely used applications in the
world but its calendar has frustrated many users who want to view
several schedules at once. With Outlook you can view multiple
calendars side by side but after you add a few calendars the
information disappears into a forest of heavy gridlines and
background colors.
Here are some alternatives to the cluttered calendars offered
by Outlook and other off-the-shelf solutions. The alternative designs
incorporates many ideas from Dr. Tufte’s books and this discussion
forum.
The following thumbnail images are linked to the original images,
which were all recorded at 1024×768 resolution on a 19″ monitor.
Week view
Each display above represents a five day view of 10 calendars. Each
display arranges appointments in columns with a day for each column
and hour divisions running vertically. However, Outlook 2003 and 2007
render the individual calendars as columns, which tends to stretch
each appointment vertically while the alternative display organizes
the calendars as rows, which tends to stretch the appointments
horizontally.
Outlook 2003 and 2007 are both characterized by heavy grids and
background shading and the calendar names, dates and appointments are
truncated and camouflaged. The alternative display has a cleaner
look, a much more subtle grid (which can be turned off by the user)
and calendar names, dates and appointment boundaries are not
obscured. In most cases there is space for a text label on the
appointment but tooltips are available in lieu. The appointments can
be colored using Outlook’s default colors (representing free/busy,
out of office and tentative) or, as show here, with category colors
(see legend to the right). Hour labels are only drawn for the first
calendar to avoid unnecessary repetition.
Month view
When the time scale extends to a month the differences between the
Outlook versions and the alternative display become more pronounced.
In Outlook 2003 the appointments have disappeared altogether while in
Outlook 2007 the appointments are visible but only just. To be fair
Outlook 2007’s month view appears to display seven day weeks rather
than five day weeks so space is taken up somewhat unnecessarily by
weekend days, which in most organizations is beyond normal working
hours. The week range is also repeated in a redundant fashion for
each calendar. Another problematic issue is that the layout of
appointments has changed from the week view show in the first
triptych. Each week of the month is now laid out on a different row
so the user has to contend with three different time axes.
In contrast, the alternative display is able to clearly render a
month of appointments (even in the thumbnail). The layout is
consistent with the week view in that the calendars are still
rendered in rows and each column of data represents a day. The time
scale labels are dynamically adjusted for the displayed time period
and to fit within the available space.
The display is also consistent in hiding weekend days although the
user can add these as required. The alternative display can also be
rendered as working hours (eg 0900-1700) or a full 24 hour day.
A feature of the alternative display is a reference calendar that
provides context if the user chooses to zoom in and pan across an
area of the main display to view part of the calendar in more detail.
The blue shaded rectangle in the reference calendar changes size and
location to help orientate the user. A check box allows the user to
constrain the zoom so that the horizontal axis is scaled but not the
vertical axis.
Alternative display modes
The alternative display is implemented using Scalable Vector
Graphics, which is the web
standard for describing two-dimensional vector graphics. The use
of SVG facilitates coordinate transformation and thus it is possible
to translate and scale objects like appointment rectangles. In the
screen shots above the appointments have been transformed into two
other modes: a timeline view and a bar chart view.
In the timeline view the hour labels have been removed as the
horizontal time axis now represents a continuum of time, which can be
useful when viewing activities that extend over several days like
project tasks.
In the bar chart view the appointments have been collapsed into a
stack rising from the bottom of each calendar row. The hour labels
have been replaced by a percentage scale that represents the
utilitization of the resource. The percentage utilization is
calculated based on either the number of working hours in a day or
the full 24 hours depending on the option chosen by the user.
Choropleth Overlays and Aggregate Bar Charts
Using SVG transformations the display can be viewed as separate
side-by-side rows of calendars or combined in a single row that
covers the plot area.
When the calendars are combined they are superimposed on each other
in a series of overlays that fill the display. By giving each
appointment a monochrome color and an opacity that is proportional to
the number of calendars (in this case ten) the display becomes a
choropleth. White areas indicate that all the resources are available
while progressively darker areas indicate times when more resources
are busy. This can be useful for analysing resource availability and
booking meetings. Moreover, as the user moves the cursor across the
display the resource names listed on the left side change color to
represent the category of activity they are participating in.
Individual layers can be turned off. Meeting rooms that have
insufficient capacity for the number of people in the group are
flagged and their calendars are automatically hidden.
When the calendars are combined in bar chart mode, the appointments
of each resource are stacked together to produce an aggregate view of
the group. The display can be changed to sort appointments by
category or resource. In the latter case the appointments of each
resource are assigned a common color.
Longer term calendar views
Sometimes it is useful to look at calendars over a much longer period
of time. In the above examples the period is twelve months or twenty
to fifty times the maximum range that Outlook can display legible
appointments.
In the alternative display, individual appointments are discernable at 1024×768
giving each calendar a sparkline appearance.
Again the
display is consistent with the week and month views of the same data.
The timeline view is less helpful given the appointments are mostly
less than a day’s duration but even the thinnest appointment
rectangles will produce a tooltip when moused over. All the same
functionality is available in the year view (zoom and pan, choropleth
overlays and aggregated bar charts).
Detail within context
This last screen shot illustrates how a single calendar can be
displayed at two time scales simultaneously. This enables the user to
see both the big picture context while looking a smaller periods of
time in more detail. The user can change the time span in the lower
calendar display by clicking on the arrows (to move one day at a
time), the scroll bar (to move one week at a time) or by dragging the
slider on the scroll bar. The two time scales are linked by a
translucent polygon object that changes shape as the user navigates
the lower calendar.
Conclusion
The alternative displays demonstrate a number of different ways of
visualizing calendar data. Although the alternative displays are
compared with Microsoft Outlook they are not tied to a particular
implementation and can be used in conjunction with other calendar
data sources. SVG documents are not only derived from a World Wide
Web standard but they can be viewed in multiple browsers and by many
mobile devices.
Nice redesign in many ways. However, I have a few gripes about your article.
First, the nitty gritty:
–It’s not relevant what size your monitor was–not that I can tell… maybe you can expand on this if is relevant.
–The link (http://calendar.schemax.com/et/http://www.w3.org/Graphics/SVG) is not valid. Looks like two links in one.
Second, the subjective:
–saying SVG is “a standard” is probably fair, but “the standard” changes the meaning entirely. I’d argue no one can view SVG and it’s far from adopted as a standard in any way. Also, for the record, I see PNGs when I click the thumbnails. Again, if this is relevant or actually accurate, please correct me.
Finally, to be fair, you might try including the same information that the Outlook screens have–namely, buttons that access other parts of the product. These can be toggled on/off but still.
More questions:
Also, I think the thingy you have in the top right corner might be really interesting, but from these images I’m not sure what it does. Can you zoom in and what portion of the entire set of data you’re viewing?
How do you propose handling even more information–like say there are more people in the team?
And, any thoughts on ditching the whole legend?
Despite my negative points I think it looks like great work. Thanks!
Philip,
Thank you for your comments.
You raised the issue of monitor size and resolution. I wasn’t sure how
relevant monitor size is, at least compared with resolution. I just
thought I’d be clear what environment I used to capture the screen
shots. Thanks for the pointing out the broken link to the W3C SVG home page. It was my
oversight and I have alerted Graphics Press.
The article was not intended as a catalyst for a discussion about
standards; however, I can see how I might be perceived as being
provocative with my use of “the” rather than “a”. I would be happy to
defer to a more diplomatic description such as “SVG is a language for
describing two-dimensional graphics and graphical applications in XML.
It is an open standard created by the W3C, the main international
standards organization for the Web”.
Your statement that no one can view SVG isn’t correct – Firefox, Opera
and Safari all have excellent native support for SVG and Internet Explorer
can render SVG with Adobe’s free plug-in. Yes, my
thumbnails do link to PNGs but if you would like to see SVG, take a
look at the demonstrations
at my site. You can also download
an add-in for Outlook to try out on your own data. I deliberately
refrained from mentioning the add-in the original article because I
wanted the discussion here to be about the design rather than the
actual implementation.
You also raised the issue of parity in the screen shots. I contemplated
simplifying the Outlook interface for the screen shots by hiding the
various panels and toolbars as much as possible but a) it didn’t make
much difference and b) it’s not the default behaviour in Outlook. One
of the differences in my design is the deliberate attempt to give the
data maximum screen real estate by default.
The “thingy in the top right hand corner” is a reference calendar. I
mentioned it in the article but didn’t provide any images of it’s
function when zooming in on the calendar.
Zoom and Pan
Notice how the blue rectangle in the reference calendar changes when the user zooms in on the main display.
The third image illustrates the option to constrain the zoom so that the horizontal (time) axis is scaled but not the vertical axis.
In this third case you keep all the calendars in view but the time period of the main display has been reduced.
Note also how the time axis labels are dynamically adjusted as the user zooms in.
You asked how the proposed display might handle even more information. Right now the SVG is embedded inside an HTML page
and when the number of calendars exceeds the window height the page can be scrolled – another advantage over Outlook. It is also possible to reduce the
minimum height of each calendar row to accomodate more calendars.
Finally, I guess the legend and reference calendar could be removed or hidden but I haven’t added that functionality yet.
Thanks Simon,
The link to the product helps a lot because I didn’t even realize it was available… the mention of “other off the shelf solutions” I guess referenced it–but I don’t think mentioning this fact more clearly would have hurt. Some people might think it was a pitch–but whatever.
I’m not trying to kill SVG–but note Adobe has sunset-ed that plugin. It’s just sort of hard to get behind SVG when its performance is so lacking. Flash, while not nearly as open (though, for the record, is open in many ways) is a lot more appealing to my customers. The examples in that link (http://calendar.schemax.com/demonstration/default.aspx) are nice–they very effectively show so much of what you had to describe in words. However, I sure hope the actual product isn’t in SVG! The performance makes it unusable. For example, upon clicking one of those demos my computer becomes unresponsive for a good 10-20 seconds while the page renders. I realize SVG vs. Flash isn’t your point either, but I was just trying to touch the examples and this came out.
Thanks!
I really like your idea, I’ve come up against these problems often. I hope this makes its way to iCal and Google Calendar as well. Like any early effort, there’s plenty of room for improvement, but overall a great idea. That you have a web demo up in addition to the application is impressive.
Just a couple of opinions, the first being that a more maplike color palette would be nice. Personally, as someone who deals with several operating systems a day, I like the SVG idea over Flash. No need to introduce that heavy proprietary tool kit if you already solved the problem without it, and I have a sneaking suspicion there’s some room to optimize this code still, eh?
That, and I might put some sort of ‘about’ section on the site. It’s nice to know who’s behind the curtain.
Keep charging,
Niels
Outlook’s handling of multiple calendars definitely needs improvement, and I applaud how much better you’ve done it than Microsoft’s version. I especially like the cloropleth design; it’s dead-tree compatible, and accessible to the color-blind! Both are absolutely essential in my view.
However, I experienced one difficulty reading your new version of the calendar (weekly view) — I find it very hard to cope with the fact that time is displayed on both axes, hours vertically and days horizontally. I expect that when a manager looks at several calendars simultaneously, his objective is to find times when schedules conflict or when all employees are available (say, for a meeting). If I want to find time for a meeting on your weekly view, however, I strain to try and overlap all of the “Monday” calendars in my mind at once, then try the “Tuesdays”, and so on.
As a refinement, I would suggest putting people in the columns, and continuous time on the vertical axis. Use minor tick marks for hours and more prominent tickmarks or gridlines to separate days. That way, if a manager is looking for a good time to hold a meeting, she simply scans for a horizontal whitespace gap. If she wants to know who will be in the office at 3pm on Wednesday, she simply finds that hour on the vertical axis and looks to the right.
Question: Could you perhaps post screenshots of how the same data looks in Google Calendar?
Maybe a better focus is to ask WHY one needs to look at Outlook calendars from multiple people.
At my place of work, it is usually it is to find an open spot for a group meeting. Note-We do not use Outlook to schedule project work. That is the function for MS Project or a similar application.
Having the calendar show the “open” times for the group would be a better display, rather than forcing the user to manually find the possible slots. At least one competitor to Microsoft Products does this very well. Meeting Maker adds a separate column to show the possible open “group” meeting times, much like the week-view alternative display proposed by the original thread. One may also make a list of names and ask for the next open time. (This often returns humourous results) Then the meeting coordinator can look at the individuals for any obvious conflicts (locations, vacations, etc). We also place meeting locations (conference rooms) with a schedule in the system and one adds this to the list of required attendees.
Of course, heavily scheduled folks are often not available for the next ten years. And if an important executive wants everyone in at 6am (before scheduled work time), then that *will* show up on everyone’s schedule. Computer applications have yet to solve those scenarios and instead we rely on actual human verbal communication for ‘special’ requirements.
AAS