Designing the Well-Tempered Web

Update 2/5/12: Check out an expanded version of this article that I wrote for Smashing Magazine

In 1722, JS Bach put together a book of solo keyboard works intended as a collection of educational pieces for young musicians. The book contained 48 pieces — a prelude and fugue in every major and minor key. Now a staple of the Western canon, it’s regarded as one of the most important works in the history of Western music. He named the book the Well-Tempered Clavier.

To appreciate the historical significance of the work, you have to understand that in Bach’s day the notion that one could or should play keyboard music in all keys was unorthodox. It was not a matter of philosophy, but of physics — a fixed pitch keyboard instrument could only be in tune with a selection of keys at a time. In the tuning systems of the time it was simply not possible to play in tune in all 12 major keys.

While the laws of physics can be tough to bend, human perception moves fairly easily. The solution was to redefine what it meant to be “in tune”. By adjusting certain intervals so that they deviated just slightly from perfect intonation, a tuning system was produced that allowed one to play reasonably in tune in all keys. This business of compromising granular qualities for the greater good of the system is called temperament.

The name of the alternative tuning system made famous by Bach and the Well-Tempered Clavier is, unsurprisingly, “well temperament”. Today, most intonation in Western Music is based on “equal temperament”. The methods are different but the goal is the same: to make each of the keys slightly imperfect so that all of the keys can be used. It’s like utilitarianism for acoustics.

What this has to do with UI design

Probably the most exciting development in web design in the last 5 years has been the shift to designing for multiple devices. It’s no longer just about how a web site functions in two different browsers but about how it functions on various devices with completely different characteristics — different screen sizes, different use contexts, different interfaces.

Although responsive design and device-specific sites allow us to tailor designs for diverse experiences, there will be times when we have to make universal decisions, and when we do, I think the idea of well temperament can be a useful metaphor.

The application of the concept to UI design is simple. In order to serve a good experience to a range of devices we have to allow for occasional imperfections in individual interfaces.

A common example of well temperament in action is the effect that touch interfaces have had on recent desktop site designs. As a pointing device, a finger, being much larger than a mouse, requires larger touch targets. Interactive elements need to be bigger. Then other things need to be bigger to balance the interactive elements. Eventually touch design becomes associated with an aesthetic that starts to leak into standard desktop design.

(The iPad, bridging the gap between touch interfaces and desktop screen sizes, has accelerated the touch influence on desktop design. Things on the web are starting to appear chunkier… more padding, more whitespace [new Gmail, hello?].)

What we end up with is a design that might afford too much space for a mouse, but an appropriate amount of space for a finger. We allow for a slight deviation from the norm in one experience in order to better support all possible experiences.

Beware of Wolves

In the natural tuning systems that predated the popularity of well/equal temperament, the notes of the out-of-tune intervals played simultaneously produced a harsh, howling sound. Musicians had a great name for this. They called it a wolf.

Applying this idea to interface design, we can think of a wolf as a visual or interactive element designed for one experience that fails to some degree when transposed to another experience. Think of the times you’ve struggled to finger tap a small link that was made for a mouse cursor, or had to read tiny text on a mobile screen, or, using a touch device, used an interface that relied on hover states. Wolves in the UI.

Yeah, but

Again, it’s true that responsive design and device-specific experiences offer us a way around most of these problems. If we can tune the size of a button to a specific context we don’t have to accept a blunt, across-the-board treatment. But the number of devices we have to support will only increase and customizing for every possible scenario may quickly become unreasonable.

Even if we are able to provide perfect tailored design at the execution level, I still believe there’s value in thinking about tempered, universally accessible design at the conceptual level.

Also, just because we can designate design for particular experiences doesn’t mean that users will not carry expectations over from one experience to another. The boundaries may get blurred whether we like it or not.

In the end…

Bach thought that people should be able to write and play in any key they liked. He argued for it by writing beautiful music that compelled the world to agree. He designed for the system he wanted.

We want our users to have great experiences with our sites and applications on any device they choose. We want our work to be as accessible as possible.

What are you going to design?