Sweating the Small Stuff

“The details are not the details. They make the design.”
- Charles Eames

There was something about the tail light of the Mini Cooper S in front of me that caught my eye. It took a moment, but as soon as the driver tapped the brakes again I saw it: the illuminated brake light did not fit inside its housing. I thought: that must be intentional. There is no obvious reason why the ring of of the light could not be made smaller or of a different shape, so why design the rear light in this way? I glanced around the rest of the car looking for clues (while paying close attention to the road, um, for the most part).

As I’d suspected, the evidence was there. Scanning the exterior details, particularly the curves of the side panels and the subtle tuck of various seams, it all made sense. The entire skin of the Mini appeared ready to burst from within, as if the envelope of the car were being distorted by the power of the machine underneath. That impression was being reinforced by the design gesture of the tail light: the housing appears to be too small to enclose the lamp.

None of these interpretations is true: the housing could be designed to contain the brake light easily and the panels are shaped on the assembly line, not by some barely contained force of the underlying machine. These construction details are designed to create the illusion that the Mini is brawnier than its size would imply. Whether the performance of the car lives up to the aesthetic is not relevant, I’ve already made this association.

What next came to mind was something I learned in one of my architecture courses back in school. Greek builders employed something called entasis when designing columns for temples and civic buildings. Entasis is a subtle bulging of the column in the middle to lower third of its length. Anthropomorphically, the column becomes a strained muscle, supporting the weight of the roof and pediment. But why would the architects bother? One theory holds that when perfectly straight, columns appear attenuated as if they *cannot* bear the load, so entasis is used to correct the visual illusion. Regardless of its intended purpose, entasis is a design detail of the column which affects how we relate to the building as a whole. We feel safer entering a building that appears well supported, whether that impression reflects reality or not.

The effect on the viewer is different, but the technique is similar with regard to the Mini. Even the small detail of the brake light sends us a message about how we should feel towards and ultimately interact with the car. These nuances transcend the purpose of the object to which they are applied and add a layer of interpretation beyond mere function. For the Mini, the implication is power, for the Greek forum, stability. In designing interfaces for the web and other digital media, we have the opportunity to affect user perception in similar ways. We should pay particular attention to what are called affordances, those visual cues that tell the user how to interact with the interface we have designed.

The earliest affordance in web design was the hyperlink. From the start, it communicated two things to the user: that the word is clickable and will bring you to another spot on the web and, after being clicked, that you have visited that target destination previously. Soon after came forms and buttons…true web interaction. Rather than just navigating existing web pages, the user could provide input and get feedback. Fast-forward to today, and not that much has changed. Of course, web site interactions are much more sophisticated…but the fundamental method of interaction — mouse and keyboard — remains largely unchanged (let’s leave aside the iPhone for now).

Despite the advances in web technologies over the last decade or more, the essential problem the user experience designer must tackle is still this: how to communicate what is clickable and what the user should expect when it is clicked. This is the domain of affordances…and this is where we as designers have the unique opportunity to illicit a response from the user beyond the successful completion of the task at hand. The attention to detail, or lack thereof, is what can make the difference between an interface that is merely usable and one that is enjoyable.

The examples of the Mini and the Greek column can be applied further. Earlier I claimed that the actual performance of the Mini has no bearing on the impression created by the designers. That assertion is only true before I drive the car for the first time. If the car’s capabilities do not match my expectations (or exceed them), my perception of the car is likely to be worse. The promise of underlying power would be broken. The same is true for the elegantly designed column which buckles under the weight of the temple roof: the building and my expectations are left in ruins.

By focusing on the detailed appearance of the affordances, I do not mean to suggest that we can leave behind well-considered and intuitive design. Once the interaction design is complete and tested, our goal should be to have the user not just click…but touch, and not just to interact, but to engage. It is the attention to detail which will make the experiences not just inviting…but irresistible.