In Defense of Beautiful Web Design

Designing for “beauty” has come under fire by many bloggers (including yours truly.)

The claim is that design is not making things “pretty,” it’s creating something to fulfill a defined objective. A beautiful spoon’s purpose is to hold liquid and is a failure if it can’t. Yet if you reverse the situation the design is successful, i.e. an ugly spoon that does hold liquid.

Obviously I have contributed my fair share to the “anti-beauty” rhetoric, but I’d like to revisit this concept. Is beauty really irrelevant? Are you a bad designer if you make decisions based on aesthetic appeal?

I’d say there is value in beauty for beauty’s sake,  even value in “decorating.” But before I go into the reasons why, let’s look at why so many are outspoken against designing for beauty.

Why Wouldn’t You Design for Beauty?

The first fifteen years of web design had an over-emphasis on beauty. Designers were figuring out the medium and a good deal of the industry transitioned from traditional graphic design (i.e. print design.)

If we examine print materials through our definitions of design, we can extrapolate that the purpose of graphic design is communicating information. This has many parallels to web design but it deviates in a key way: information is typically communicated in small amounts and sequentially. Meaning that with a brochure for example, you are likely to read each page in order of presentation. Other print collateral tends to be even simpler; you typically read the content top to bottom, left to right, and that’s the extent of its functionality. The functionality of print materials is very simple, well-known, and consistent. Most of the time, layout combined with convention makes it self-evident — just looking at the printed object is enough to understand how it works.

Thus there is significantly less consideration for how a print design “works” and more focus on conveying a message in an attractive way. This general sentiment was carried to early web design, a quick look through some early websites on demonstrates a disproportionate focus on aesthetics over function and use. By the late 90’s many designers began speaking to the importance of usability, web standards and accessibility — all aspects of design that live much deeper than the visual layer of a website.

While web designers began to broaden their focus, aesthetics were still at the forefront of many designers minds. It wasn’t until the late 2000’s that designers began speaking out against designing for aesthetic value. As an example, I’ll even quote myself:

Any decision you make that doesn’t speak to the solution is either decoration or feature creep, adding to user confusion, maintenance costs, and page load times.

Essentially adding elements solely for beauty creates distractions. Shadows, gradients and color bursts interfere with busy users who are looking up an address, making lunch selections or booking travel plans.

This practice is often referred to as “decoration” implying wasted effort at the expense of effectiveness. But is this really the case? Do users really want websites that have as little visual interest as possible? Not in my opinion, I believe there is value in beauty for beauty’s sake.

The Value in Beauty

As highly visual beings, what we see is constantly being processed and analyzed by our brains. We are so visual that people can have unconscious mental and physical reactions as a result of something they see. Some colors have been known to actually increase cognitive capabilities by those viewing them (Mehta and Zhu, 2009). Humans are naturally drawn to objects that are visually appealing to them. Demonstrating the psychological hold that aesthetics have on us, users naturally perceive a beautiful website to be easier to use than a drab one even if this isn’t the case (as dictated by the aesthetic-usability effect). Site usability can be improved simply by having beautiful visuals.

In most cases, all things equal, a great looking site will outperform a drab one. The key point to note here is that while visuals might contribute to a website’s success, they are rarely the cause of this success. Being visually pleasing may assist the goals of a website, but it rarely completes them. A website is almost never created with the sole purpose of looking good.

Just because aesthetics are not the most important part of a design doesn’t mean they are not important. Provided you address the other aspects of design, compelling aesthetics can amplify the success of a site. Many companies have completely changed the marketplace by focusing on the aesthetic form of their products. Apple intentionally designed the headphones of the iPod to be minimal yet identifiable. This was so successful that it actually became trendy to be seen wearing those headphones. Looking to cash in on this trend companies even began manufacturing replicas.

A visually pleasing design is memorable, emotionally engages the viewer, and increases credibility. It reassures users that time, effort, and care was put into how the organization or company is represented on the web. Aesthetics need to be respected and used to enhance the website. Even though it isn’t the primary focus of the site, it still needs to support the experience and objectives.

There are three key psychological principles that speak to the importance of pleasing visuals, emotional bonding, the aesthetic-usability effect and the familiarity principle. Let’s look at them one by one.

Emotional Bonding

Human behavior is heavily influenced by subconscious emotions that originate in the central nervous system. Also called the “reptilian complex,” this system is the core of our fight or flight instincts. Modern day life is much safer than our cave dwelling ancestors experienced, but our bodies don’t know that. Our subconscious assesses every situation as if danger is around the corner.

As a result our first reaction to stimuli originates in the central nervous system. The reptilian complex responds with a “gut-level” feeling about the situation, is it dangerous or are there opportunities? These reactions are not limited to high intensity events, even exposure to basic visual stimuli (like a website) generates gut-level reactions. If the website is aesthetically pleasing you receive safe response, if it’s displeasing the response is cautionary.

These signals influence your behavior and because they’re subconscious you don’t realize you’re receiving them. Designing for beauty increases the likelihood of a safe signal instead of a cautionary one. Therefor beauty for beauty’s sake can make the website more effective.

Aesthetic-Usability Effect

There is a famous study where scientists tested the usability of ATM machines. In this study they compared an attractive and ugly version of the exact same interface. What they found is that despite the interface being exactly the same, the attractive one was considered easy to use.

This was not a fluke and there is scientific theory to back it up. When we experience stress our focus narrows. This is a “fight or flight” reflex that allows us to escape danger in high intensity situations. While the reflex is beneficial for escaping a lion in the African safari it’s detrimental for modern-day problem solving. When encountering a problem a narrow focus limits your creative problem solving. You become so focused on the action you took and the resulting failure that you can’t think of other ways to accomplish the same objective.

An attractive interface puts the user more at ease. When a problem is encountered there’s less stress and more creativity. Calm users solve problems faster, typically forgetting they had an issue all together.

Adding elements to the page simply to make it more attractive can put users in a calm state of mind and improve their problem solving, making the site easier to use.

Familiarity Principle

We’re hardwired to seek out and respond to things that feel familiar. If you’ve been exposed to a similar situation and escaped harm it’s reasonable to expect the same outcome in the future. Thus the more familiar something is, the safer it feels. Take a minute and think about how much of your life is dictated by familiarity. The route you take to work, the food that you eat, the people who you spend time with… familiar feels good.

When a website is aesthetically pleasing to a user, it feels familiar. The visual style of the site resonates with their aesthetic preferences. Those are the same preferences used when picking out what color to paint their house, what clothes to purchase and what objects to buy. The website feels familiar because it matches everything they like and own. Furthermore the site not only feels familiar, it feels like a personal match.

Aesthetically pleasing design feels familiar, which feels safe and in turn improves the effectiveness of the website.

I’ve given you three examples of how designing for beauty can make a site more effective, but earlier I stated that a design is not successful on visuals alone. So which is it?

When is it OK to be Beautiful?

Like all things in design the appropriate amount of “beauty” is dictated by context and balance. The appropriate amount of visual interest varies based on the situation. Some websites will perform better with a visually rich interface. Others need little more than clear visual hierarchy and emphasis on key elements.

You can find out the appropriate amount of beauty for a design by research and testing. Researching the target user will give you insight into their expectations, mindset and aesthetic preferences. Testing will validate your design decisions and allow you to experiment with different levels of visual interest.

Lastly, remember that while a visually pleasing website can be more effective it’s rarely the primary factor in success. It simply enhances an already effective design. You need to prioritize all other aspects of design first and then you can focus on aesthetics. Just make sure that you don’t sacrifice more important aspects of design in favor of making something more attractive.