Ambient Close Button

Figure 1 The default close button for windows in OS X is simple and matches the others.

Ambient indicators seem to be growing in popularity, and rightfully so. They serve to enhance interfaces in subtle but practical ways without detracting from the overall experience. While there are numerous examples, I particularly like the execution for OS X’s close button.

In it’s basic state, the close button looks just like its yellow and green neighbors, but when an open file hasn’t been saved in its current state, the button receives a slightly different treatment. (Figure 1) A small, darker red circle appears just inside of the close button. (Figure 2) Here, it doesn’t solve a major problem, but it effectively helps set my expectations. When I see the extra red dot, I know that I will be prompted with a dialogue confirming that I would like to close without saving. At the same time, it also serves as a way that I can tell at a glance whether I’ve saved a file or not.

Figure 2 OS X makes a subtle change to the close icon to indicate an open file has not been saved in its current state.

As it relates to web development, it’s important not to get carried away with only visual ambient indicators. Changing the color, typographic characteristics, or similar visual options does not reliably convey that information to all users. For example, some color-blind visitors may not be able to distinguish between certain color variations while others using a screen-reader would not receive any benefits of a merely visual indicator. In fact, one of the web accessibility guidelines specifically states that we should not rely on color alone.

In some cases, this can be solved through the use of semantic markup or the addition of appropriate inline text. Regardless, we shouldn’t deny these benefits to some simply because they won’t be available to all. Instead, we need to be aware of the limitations and do our best to accommodate everyone with progressive enhancement as a guiding principle.