Why beauty matters to IxD

From the concluding paragraph of my graduate thesis written in 2001 at Carnegie Mellon (advised by Dick Buchanan):

Interaction designers must be concerned with beauty as our environment of human experience becomes rapidly shaped by digital, networked, multifunctional artifacts that influence our attitudes and behaviors. Designers have a profound responsibility to ensure that designed interactions contribute positively to our personal and collective sense of being human. People are fundamentally analog, adaptive, sensual, emotionally conscious beings who possess values, ideals, beliefs, perceptions, and emotions that impact their behavior. It is time for designers to invent products which enable experiences that respect humans for who they are and recognize their potential. Humanizing technological expression is a critical goal and duty of interaction designers, as part of an overall effort to make life satisfying, fulfilling, and meaningful in everyday situations. To combat the ugliness of disruptive, alienating encounters that deprive humans of their ideational, cultural, and personal aspirations is the driving motive for those who strive to create beauty in interaction design.

To elaborate on this from current perspective of having practiced interaction design for the last 7 years in silicon valley…

Aesthetics and beauty matter because if they didn’t, we would be creating something that’s incomplete, not quite fully formed in terms of a truly engaging experience that is delightful, exciting, and memorable. As John Dewey, experience design theorist (from the 1930’s!) phrased it, “an inchoate experience”. It lacks emotion and vitality, reducing the encounter to a meaningless episodic encounter…

In more tangible terms, refined visuals and animations (transitions, motions, dynamic states) communicate a strong sense of interaction and shape the encounter to make it that much more attractive, inviting, and rewarding (or if done poorly, dissatisfying and miserable…and forgettable). This is true for the hardware, software, and netware.

Just as important, the movement of the mouse, the rhythms of clicking and double-clicking (or you prefer, tapping and gliding and waving), how pixels are engaged to result in feedback and action–all that must be thought out to achieve a smooth, graceful, satisfying interaction.

Finally, every artifact that is part of the workflow (designed touchpoints, if you will) should embody a consistent, clear, unifying and reinforcing theme (or brand, voice, style) to amplify the overall quality of engagement. Think of the Apple “purchase to pay to unboxing to usage” flow for an iPod or iMac–seamless, fluid, brilliant. Every aspect fits into an integrative whole, complete and connected.

To read more about my thoughts on beauty/aesthetics for IxD, please see the following related posts:

Part 1: General thoughts on design aesthetics

Part 2: Interpretations of beauty as a value of user experience

Part 3: Towards an integrative aesthetic experience

Part 1: General thoughts on aesthetics

[First in a series of postings about aesthetics and beauty as they pertain to interaction design, and beyond…]

Recently the question was raised on the IxDA discussion list, “does aesthetics matter to interaction design(ers)?” I wholeheartedly say yes as described here. But it’s important to first understand what is meant by the concept of “aesthetics”, as it relates to the design profession at-large.

Commonplace notions of aesthetics tend to focus on purely the surface visual qualities (color, style, shape, effects, etc.) as a matter of sensory stimulation and ornamental differentiation. It’s meant to excite and enthrall and, quite simply, jazz up some fuddy-duddy engineering contraption. This notion is applicable to a web 2.0 website look-and-feel, or the housing for a portable vacuum, or a business stationary logo.

Of course, as designers we often vehemently protest and cringe when someone says all we do is make something “pretty” with surface delights. We know there’s much more to a highly refined aesthetic than mere style and decoration of an engineered contraption, slapped on to appease marketing, etc. At the same time as designers we know that visual (and sensual) beauty matters and can have a defining role in determining a product’s acceptance/usage and shaping the overall quality of engagement.

Gianfranco Zaccai, president/CEO of Design Continuum in Boston, explains aesthetics this way:

Aesthetics in regard to any object, therefore, it not an absolute and separate value. Rather, it is totally related to our ability to see congruence among our intellectual expectations of an object’s functional characteristics, our emotional need to feel that ethical and social values are met, and our physical need for sensory stimulation

Interesting how he identifies three core elements that constitute a sense of aesthetic wholeness. In the original article he paired them with the three psychological elements of self: id, ego, and super ego. In parallel, Don Norman identified three levels of cognitive processing that are shaped by an emotionally powerful design: the visceral, behavioral, and reflective. Ahh, the power of threes!

Zaccai continues further, about designing for our senses and kinesthetics:

To a great extent, many designers have focused their attention on the sense of sight and, to a much lesser extent, the sense of touch. However, human sensory perception includes other organs besides the eyes and the nerve endings at the tips or our fingers. Olfactory and auditory considerations and manipulations should also be a part of the design process. Frank Lloyd Wright’s Falling Water and the Alhambra are two examples where the sounds of water and the scents of natural components within the human-made environment are intrinsic to the experience of the architecture.

It seems reasonable that the design of many mass-produced products could benefit from a similar sensitivity. A slide projector, for example, would be immeasurably improved by the elimination of the fan noise. In contrast, the addition of appropriately restful sounds to an alarm clock would potentially help the user in falling asleep, and be less offensive when the time comes to awaken.

The interrelations among all of the sensory perceptions need to be considered in a dynamic way. Concerns for the kinesthetics associated with the actual use of an object add a new dimension to the design process.

So what can we make of this? A few major points:

** Aesthetics has to do with the entirety of human senses and intellect, in a cumulative, integral fashion. Design aesthetics must respect the value of our basic human desire for pleasure and satisfaction and fulfillment.
>> See Patrick Jordan, Designing Pleasurable Products

** Aesthetics is a multi-sensory concept, encompassing visual, audio, smell, taste, and tactility. True “experience design” should embody all these together, in the staging of a dramatic, experiential performance crafted to address each sense in a cooperative fashion, where each sense feeds off the other, and reinforces the overall impact. Best example of this: Disney Imagineering. Also, “dinner theater” events, Cirque Du Soleil, branded environments (Rainforest Cafe, NikeTown, Virgin Atlantic, Cunard Cruises), W Hotels, Apple Store.
>> See Diane Ackerman’s A Natural History of the Senses
>> Also Brenda Laurel’s Computers as Theatre

** Aesthetics involves multiple insights on human psychology (cognition), emotional response (affect), sensual stimulation (biology, kinesthetics, physics, chemistry), and rational logical thought (engineering, logic). These three map to (surprise!) the core elements that constitute a well-formed, balanced rhetorical argument: pathos, ethos, logos.

As Zaccai himself says, the great designers are those that believe in the totality of aesthetics and cultivate that sense in their process by whatever means and tools. In the end, aesthetics has to do with respecting core human senses and values. Thus, aesthetics has absolutely everything to do with designing interactions and user experiences.

Gianfranco Zaccai, “Art and Technology”, from Discovering Design: Explorations in Design Studies

Part 1: General thoughts on design aesthetics

Part 2: Interpretations of beauty as a value of user experience

Part 3: Towards an integrative aesthetic experience

Designing for “appropriateness”

Just saw this information graphic posted on the NYTimes.com site, about the state of the Iraq war.

I don’t subscribe to the print edition, but I’m betting this graphic was originally created for the physical newspaper (printed at higher resolution, etc.) and then unfortunately mis-appropriated for the web by simply “sticking it online”, given the pragmatic nature of tight deadlines, limited people resources, and the fact that the creator of this information graphic is referred to as a “graphic designer” in the byline.

However, I am viewing this graphic on the web, an inherently interactive digital medium that lends itself to certain abilities, so this design becomes rather problematic for a variety of reasons, as noted below:

– Pops up in a separate window floating above the main browser window (as opposed to say a Lightbox JS, or similar “in place” method)
– Image is larger than the pop-up window, thus forcing (painful) horizontal and vertical scrolling
– The visual presentation is an awkward, forced attempt at a very literal translation of a “war chart” clipboard metaphor, complete with the photograph of clipboard clip at the top and border, which is gratuitous (eats up valuable real estate in the constrained pop-up) and adds no additional value to the reading/interpretation of the chart data
– The designer completes the ill-used metaphor with “blotchy” type, mimicking a classic typewriter, again interfering with legibility, and clear efficient scanning and glancing
– The gray shades are not quite distinct enough to convey at a scanning glance the differences across rows
– The literal translation of the chart vertical gridlines interferes with the reading of the gray shades (thus the gray shades and lines counter-act each other, sabotage overall reading)
– Just to say again, the horizontal scrolling makes it harder to read, interpret, compare data points, and map them to the row label, which runs off the screen as user scrolls rightward, user loses context for the data in a row

And the biggest error, is a complete and total disregard for the digital medium’s potential: a compelling presentation that would have made use of digital affordances, like transitions, animated data, hovers/tooltips, to result in something that could be clever, simple, elegant, and playful yet informative.

(Again, this critique is from the POV of the web viewing, not the print edition)

Ultimately this serves as a nice object lesson in designing for fit, or “appropriateness”, given the context and medium that the user will be viewing and engaging with the designed artifact. If done well, there’s a valuable transparency that permits the user to simply have a compelling satisfying experience. If done poorly, as here, it becomes awkward and painfully present in the user’s consciousness, inhibiting a fluid engagement, resulting in “distraction and dispersion” as Dewey notes as a factor in “inchoate experiences” that are unaesthetic.

Eames diagram

Found this while surfing around this morning, the classic Eames venn diagram illustrating the areas of intersecting concerns when solving a design problem: the client, the design office, and society as a whole. Of course this can be broken down even further into sub-compartments or nested “venns”. But at even this high level it’s quite compelling.

eamesdiagramofdesign.png

Of particular note are the two “notes” saying “these areas are not static–they grow and develop as each one influences the others”, and that “adding more clients add to the relationship in a positive and constructive way”. A very hopeful statement of the ecological nature of design situations and the elements therein, not as distracting adversaries but as cooperative engagements.