A List Apart

Menu
The Elegance of Imperfection Issue № 280

The Elegance of Imperfection

by Published in Layout & Grids, Interaction Design · 45 Comments

Everything I know about the elegance of imperfection, I learned from the white porcelain plate I bought in Kyoto.

What’s so special about this plate? Before it was fired, it was perfectly round, but the artist intentionally roughed up the edges. It’s elegant, enhanced by anything that touches its surface: a bright green pear, roughly chopped chocolate, a pile of toasted almonds. Today, this plate sits on the desk in my home office. It symbolizes a crucial lesson about craft: utility is not contingent on perfection of form. In fact, the lessons I’ve learned about crafting elegant experiences—from the creative brief to user interface design—involve abandoning the desire for perfection entirely.

There is an anecdote, told and retold through translated Japanese literature, of a Zen master who is staying with a priest at a temple close to Kyoto. The priest is having guests over that evening, and he has spent much of the day in the garden—shaping the moss, plucking weeds, and gathering up the leaves in tidy arrangements, all in order to achieve the state of perfection the temple builders had originally designed.

“Isn’t it beautiful,” the priest asked the master…

The master nodded. “Yes…your garden is beautiful; but there is something missing…”

The old gentleman walked slowly to a tree growing in the center of a harmonious rock and moss combination. It was autumn and the leaves were dying. All the master had to do was shake the tree a little and the garden was full of leaves again, spread out in haphazard patterns.

“That’s what it needed,” the master said.

Janwillem van de Wetering, The Empty Mirror

Wabi-sabi and making websites

When I try to think of a paradigm for pursuing elegance through imperfection, the Japanese concept of wabi-sabi comes to mind.

Leonard Koren, in his book Wabi-Sabi for Artists, Designers, Poets & Philosophers, describes the following material qualities of wabi-sabi: asymmetry, asperity, simplicity, modesty, intimacy, and the suggestion of a natural process.

These attributes may seem only to describe the aesthetics of a design. However, the most successful designs infuse these considerations at every stage, from idea to finished product. As Koren has written:

The simplicity of wabi-sabi is best described as the state of grace arrived at by a sober, modest, heartfelt intelligence. The main strategy of this intelligence is economy of means. Pare down to the essence, but don’t remove the poetry. Keep things clean and unencumbered, but don’t sterilize. (Things that are wabi-sabi are emotionally warm, never cold.) Usually this implies a limited palette of materials. It also means keeping conspicuous features to a minimum. But it doesn’t mean removing the invisible connective tissue that somehow binds the elements into a meaningful whole.

Bringing heart to web experiences can be difficult, since websites and applications are fundamentally a construct of logic (via code). While you can’t create a website that functions as a pure expression of wabi-sabi, finding ways to infuse our creations with a hint of wabi-sabi adds a new dimension to our work. It forces us to consider how the natural order of our physical world should inform the virtual worlds of information that we create. One way this natural order finds expression in the web design world is through the notion of elegance.

A taxonomy of elegance

Jeremy Alexis, of the Illinois Institute of Technology’s Institute of Design, asks us to consider three types of elegance when we face a design problem: logical elegance, systemic elegance, and aesthetic elegance.

Logical elegance stems from a clearly expressed reason for a website’s existence. Crafting an elegant, logical idea for a website brings clarity to a complex set of user needs and business requirements.

I recently saw Luke Wroblewski speak on the beta redesign of Yahoo’s home page. Luke described the redesign’s core idea: Yahoo would be “[t]he dashboard for what you love on the web.” The whole redesign team embraced both this statement and the complexity of their design task, and created a more meaningful experience for their users.

Systemic elegance arises from the scaffolding that supports a site’s core idea. In a website or web application, this scaffolding includes information architecture, user experience, and interaction design as well as content strategy and the flow of information through the system.

Netflix provides an excellent example of both logical and systemic elegance. The company’s undiluted focus on providing affordable access to movies, combined with an ever-evolving user experience rooted in an elegant site architecture, allows visitors to easily use social networking features and view movies online—while, simultaneously, their choices enhance the site’s referral engine.

Formal or aesthetic elegance involves a website’s visual form. This includes user interface design and the brand qualities that suffuse the site’s visual language, content, and user interactions.

Any site design that focuses on clarity can be considered formally elegant—even if the site is also goofy, such as National Geographic Kids. A more obvious example might be the Luigi Bormoli website, which uses AJAX to produce an elegant presentation of glassware. Like a print catalog, the site encourages users to sift and explore products, while eliminating needless page refreshes. Take out the AJAX-enabled aesthetic elements, however, and it isn’t quite as elegant.

I’d like to add one more variety of elegance to Alexis’ list. Natural elegance deals with the “feel” a website or application expresses through its behavior over time, and which is rooted in the rules of order that govern nature.

I’m not just talking about grid systems and earthy screen designs. Natural elegance refers to the ways websites and applications can function more powerfully by weaving natural imperfection into their design at every level. This sensitivity to feel should suffuse the whole endeavor, from the foundational user experience work to the final UI.

It’s possible to create perfectly pleasing websites by focusing only on formal, structural, and logical elegance. But those sites that embrace this fourth type of elegance feel to users like living beings who speak meaningful words; they are the marriage of form, function, pleasing content, and personal feeling.

Where wabi-sabi meets user interface design

Recall the attributes of wabi-sabi: asymmetry, asperity, simplicity, modesty, intimacy, and the suggestion of a natural process. You can probably imagine where these characteristics can be expressed through the visual design of your website. Consider the following possibilities:

Website as book—the page model:

  • Visual exceptions create variety, forcing the eye to focus on priority content (asymmetry),
  • Enlivened by surface texture to create an illusion of dimensionality, (asperity),
  • Design tension born of a grid system on a 2D plane (simplicity) or an organic arrangement that can’t be readily made into a system (suggestion of a natural process),
  • Typography is styled in a controlled manner (modesty), and
  • The design, from its governing idea through to the finer details, conveys emotion (intimacy).

Craigslist is a prominent, though somewhat rudimentary example of a website that exhibits this design model in a naturally elegant way. While the result may not be visually stunning, the site directly reflects the ways in which we view and share information as a community. Craigslist has evolved in its own organic way over time while staying true to a kind of human expression that mimics a real-world community bulletin board.

The rules change, however, when you’re talking about websites that move beyond the page model to mimic our physical world in its organization and behavior. There is a fine balance between order and chaos when designing the following types of websites:

Website as garden—the physical world model:

  • Design tension born of figure/ground relationships on a 2D plane (asymmetry) with an illusion of a third dimension on a z-axis,
  • Surface textures are mapped onto objects, simulating reality, and
  • Visual exceptions, if they don’t conform to the simulation, break the illusion.

The Eco Zoo takes natural elegance and makes it physical. On this site, you can “climb” a tree and read stories in a pop-up book about creatures such as Yagi-Chan, a goat that wears sheep’s clothing.

Website as petri dish—the molecular model:

  • Design tension born of the gravitational pull between page elements,
  • Objects can’t express a high level of detail, otherwise the UI is all noise, and
  • The site is the visual exception, tending from disorganization (exploratory) to organization (sorted) with a click.

WeFeelFine.org—a site that harvests and visualizes data about human feeling from blogs around the world—demonstrates the ease, flexibility, and fluidity characteristic of natural elegance.

A koan for the web designer

Nothing we see or hear is perfect. But right there in the imperfection is perfect reality.

–Shunryu Suzuki

We’ve explored a number of threads that, when properly woven into a well-thought-out website, can infuse it with heartfelt intelligence beyond mere aesthetics. In small doses, wabi-sabi thinking can provide a counterpoint to our modernist tendency to refine things within an inch of their life, bringing a measure of grace to what would otherwise be a conglomeration of rigidly spaced pixels on a screen.

Beware that the pursuit of website perfection is always a denial of the perfection that exists within ourselves in the physical world. Perceiving even a whisper of our own “perfect reality” is the very experience that our users and clients have hired us to capture, mindfully, through our work.

45 Reader Comments

Load Comments