The Xplanation

(Notes from the SXSW Interactive Conference, March 12-16, 2010. All quotes are paraphrases based on this author’s understanding of the speaker’s comments.)

Session: Beauty in Web Design

Presenter: Cennydd Bowles, Clearleft

Introduction

I think we’re underachieving with regards to Web design. There are no landmark Web sites. We have plenty of classic, iconic designs from film posters, for example, but we don’t have the equivalent of those on the Web.

The Web is shaping future generations, but there is no one site that serves as a landmark for the rest, that can stand the test of time. It has changed the way we view data and information but we have yet to see Web design with staying power.

This seems a bit odd, actually, because we do see such staying power and classic presence in in other design areas — logo and brand designs, architecture, information design, and graphic design.

The Point of Beauty

Beauty matters because it affects us in profound ways. It generates positive emotions. We’re kinder to attractive people. We judge people’s content and their message according to the beauty of their design. This isn’t a learned response. It is a hardwired reaction. We cannot help but have positive, emotional responses to beauty.

Beauty also makes things easier to use. This is called the aesthetic usability effect. Our brains respond more positively and we are more open when we encounter beauty. We actually perform better on beautiful things. Apple certainly understands the power of the aesthetic usability effects.

Beauty also makes us want to tell others to share. This is a cornerstone of loyalty and advocacy is product design. Tapping into positive emotions is very good for business.

Finally, beauty can change our perspective of the world.

Beauty Evolves

The obvious question is this: Can the Web really be beautiful? Let me present my arguments for beauty via art through a brief Art History lesson.

1. Early civilizations – In the Greco-Roman era, art and beauty are mimetic. This is in line with Plato’s theory of forms, and the belief that there was an ideal form for everything. Humans were removed from or incapable of seeing the beauty of this ideal form so art becomes our attempt to get as close as possible. Art, therefore, mimics real life and tries to present real life forms in their most perfect manner.
2. Renaissance – During this period artists added the concept of human perspective to beauty. Beauty becomes inherent in the things that mankind can create
3. Romantic era – In this period, representation starts to make its mark. No longer does every brush stroke have to be literal. Art can be beautiful without being mimetic or literal. Technology — printing press, daguerreotype — exists for literal representation. Art can focus on feelings and the subjective.
4. Expressionism – In this period, artists invite viewers to complete the definition of beauty, to fill in the gaps with their interpretive and subjective understanding of art.
5. Modernism, Dadaism and Surrealism – These movements bring along the message that anything in our world can be beautiful in the right context. Subjectivism is everything. It’s beautiful if you think it is. A prime example is Marcel Duchamp and his urinal (Fountain)
6. Contemporary art – At this stage, the idea itself is now beautiful and the artifact is less important. Artists even project manage art as opposed to creating every component themselves.
7. Installation art – This is art designed for a particular space and for a specific duration. Beauty is not only subjective, it is often very interactive.

What this historical summary traces is the trajectory of art/beauty from mimetic to representational and subjective. And this is exactly what the Web is.

Web sites evolve constantly. They are replicated by users with different browsers and other variables. Every user sees them with a different perception.

Three Types of Beauty

There are essentially three types of beauty.

1. Universal – This type of beauty is based on globally accepted principles such as symmetry, harmony, rule of thirds, etc.
2. Sociocultural – This beauty is based on social attitudes about beauty — fashion, music trends, philosophical thoughts about world. This type of beauty can overwrite universal beauty (push universal principles out of fashion)
3. Subjective – This type of beauty overrules sociocultural beauty

Three Models of Design

1. Visceral design — Visceral design is aimed at our gut and meant to elicit a pre-cognitive response, to get to us before our brain gets involved. Such visceral responses are found in the sweetness of an apple or a harmonious chord. This is an entirely sensory reaction – something we feel as opposed to something we think. To design for a visceral response, we need to focus on shape, color, and form. We need to hit users instantly with something visceral. The impact has to be very, very quick. The impact is as little as 50 milliseconds in length. On the Web, many responses are visceral. It is easy to belittle this approach, but it really is more than a beauty contest. Without such visceral appeal it is hard to achieve success. However, visceral design tends to ignore UX and usability. It is more about visual punch than what you can really do.
2. Behavioral design – This type of design is about use and ease of use. It answers the questions: “Does it work? Does it sustain the workflow? Does it make it easy for users to perform tasks? Good behavioral Design means using UX principles and staff. This movement (UX) has been very successful (Jacob Nielsen and others). It has been successful, but not successful enough. Unfortunately, behavioral design does not always trump visceral design. Done badly, it is actually bad for a site and can lead to mediocrity. Behavioral design often leads to design by committee and can equate to tedium. Behavioral design can be useful and profitable but is rarely beautiful.
3. Reflective design – This type of design builds on the other two and looks at message and meaning more than user interaction and usability. It asks: “Does it improve my life? and What does it say about me?” Reflective design is extremely complex and subjective but brings with it strong benefits. This kind of design makes us feel good. It makes us change the way we feel about things. Successful reflective design and beautiful design are the same things.

The Web is only now starting to understand the power of subjective design. A general lack of focus has hindered us to date. It is also important to understand that these three models of design move at different paces. Visceral happens quickly and fades quickly too. There is some innovation at the behavior level but it is slower and more regular than visceral. And, naturally, reflective design is the slowest but most lasting approach.

Make the Web Beautiful

How can we make beautiful sites? The Web is only 7000 days old, so it’s still in its infancy stage.

Here is what we need to do in order to start thinking at reflective level.

1. Understand the power of emotion and appeal to it – understand people and address their wants and needs. Experience isn’t just about usability. Make design easy to use. Ease of use should be a given quality of design, like food being edible. Also, use stories. Recognize the power of good stories. Content is critical. This means text but also other content (The Big Picture for Boston Globe)
2. Think Bigger – What’s good for society and the surrounding Web? Are we trying to make things better? Really? Or are we just churning out more wireframes for a client?
3. Lead – Similar to the auteur concept in film. Take sovereignty and own vision. Without clear vision that is well executed, we have no hope of creating beautiful things
4. Think long term (long-term seduction after initial lust has worn off) – Just like we do in relationships, we need to spice things up occasionally in our design. Keep things fresh with random delight and rewards. This helps introduced loyalty.
5. Broaden horizons – There is life outside the co-chamber. Beauty is everywhere. Look outside your own container and element.
6. Be brave – Reflective design is about meaning and message so we need to make statements. We need to stand for something. We have design communities today but they are technique driven. We have to strive for more.

Caveats

• Real business will get in the way
• Is beauty even appropriate in the first place? Not always. Sometimes getting the job done is just more important (reflective design should only be used when appropriate)
• Designers should not be heroes but rather need to serve our industry. We need to tame our egos. There is no beauty in hero design, only narcissism.