thoughts on design, writing, and everything in between

Google’s Mini Calendar

In roughly three square centimeters of space, Google’s Mini Calendar is simply designed, yet detailed enough to be useful. It speaks quietly, yet contains multiple levels of information, all signaled through design choices. It’s not what we primarily seek when we open Google Calendar, but it does what we intuitively expect from it when we seek it.

The Mini Calendar serves as an index, or referencing point for the full calendar. It provides an at-a-glance view of a month. It lets us to look at other months quickly.

Several design decisions make the Mini Calendar an excellent compass in this context. For someone with many events and calendars, the grayscale of the Mini Calendar helps it to recede into the background until sought. (I overpopulated this example to make a point.)

The Mini Calendar includes dates not in the focal month (August, in this case), which helps to maintain continuity when you’re scrolling through the months. The trade-off, however, is that this makes it harder to see which dates belong in the focal month (the Mini Calendar for August holds two days of July and nine days of September). To mitigate this problem, the dates in other months are deemphasized by being set in gray, while the dates in August are in black. A pale gray (7%) rectangle further helps by highlighting the timeframe of interest (day, week, or month) for the focal month.

Dates with events are bolded, a subtle distinction that is clear enough to notice if you’re looking for it, but not so bold that they distract from the purpose of the Mini Calendar.

For those who prefer not to use the scrolling feature, clickable gray navigational arrows are available. They are placed adjacent to each other, enabling more efficient back-and-forth switching, rather than requiring a larger, slower mouse movement.

While the full calendar abbreviates the days of the week each to three letters, the Mini Calendar abbreviates to the first letter, streamlining the tiny interface considerably. Yet, because of its compact size, this isn’t vague; we are trained to know the sequence of days and when we see a group of the letters, we know which refers to Sunday, not Saturday, and which refers to Tuesday, not Thursday.

The current date is indicated by a thin rectangle surrounding it. It’s airier and lighter than a solid dot with reversed type, which also is harder to read, especially because it is so small.

This box is also friendlier for color-blind viewers because it is in black. It’s very hard to find a bright color that pops on pale gray for colorblind viewers.

In the images above, red and blue look great…if you aren’t colorblind. But they don’t pop on a gray background if you are colorblind, as shown in the bottom row.

An alternative is to underline the date, but this is still hard to spot at a glance.

The Mini Calendar is designed to go unnoticed until it is needed, but it then concisely communicates multiple levels of information through design hierarchy. What might you change, if anything, about the design or function of this tiny calendar?