All 4 books by Edward Tufte now in
paperback editions, $100 for all 4
Visual Display of Quantitative Information
Beautiful EvidencePaper/printing = original clothbound books.
Only available through ET's Graphics Press:
catalog + shopping cart
All 4 clothbound books, autographed by the author $180
catalog + shopping cart
Edward Tufte e-books
Immediate download to any computer:
Visual and Statistical Thinking $5
The Cognitive Style of Powerpoint $5
Seeing Around + Feynman Diagrams $5
Data Analysis for Politics and Policy $9catalog + shopping cart
Edward Tufte one-day course,
Presenting Data and Information
Chicago, September 23
Chicago IL, September 24
Minneapolis MN, September 26
Brooklyn, October 31
Brooklyn, November 1, 4, 5
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 1024x768 resolution on a 19" monitor.
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.
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 1024x768 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.
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.
-- Simon Shutter (email)
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!
-- Phillip Kerman (email)
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.
-- Simon Shutter (email)
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.
-- Phillip Kerman (email)
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.
-- Niels Olson (email)
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?
-- Joseph Clark (email)
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.
-- Alice Skehan (email)