Aesthetics User Experience (UX) topic overview/definition

What is Aesthetics?

Aesthetics is the philosophical study of beauty and taste. The term stems from the Greek word “aisthetikos,” meaning “of sense perception,” and is related to the study of sensory values. In design, aesthetics refers to the visual attractiveness of a product. Studies have proven that creating good aesthetics in a product leads to better usability and user experience.

In the field of user experience (UX) design and interaction design, aesthetics is important because it impacts the UX of a product in several ways. Firstly, it creates an attractiveness bias, which is down to the fact that we’re drawn to beautiful things. When users visit a website, or try a new app, they make quick decisions on whether or not to continue using it. Much of that decision hinges on the aesthetic appeal of the design. Secondly, good aesthetics helps to make users more tolerant of usability issues. Studies have found that visually appealing websites are rated as more usable than they actually are, because their attractiveness elicits pleasant emotions in users. Don Norman, pioneer of UX design, has written extensively about this phenomenon in his book Emotional Design: Why We Love (or Hate) Everyday Things.

In designing with the purpose of increasing aesthetic value, one consideration in particular is essential—namely, the notion that beauty is not only objective and universal (as German philosopher of the Enlightenment period Immanuel Kant argued), but that it has a subjective side to it as well. A user’s cultural background, education, or class may influence his or her judgments of aesthetic value. Designers need to understand these aspects in order to match them with the appropriate design. Thus, as aesthetics involves multiple dimensions of a target audience’s makeup, it demands research into diverse areas relevant to a product’s distribution, including foreign market considerations.

Literature on Aesthetics

Here’s the entire UX literature on Aesthetics by the Interaction Design Foundation, collated in one place:

Featured article

Aesthetics and form need to hold hands

Aesthetics and form need to hold hands

This article examines two closely related ideas that are both about looks. Our design world revolves around nice images/form, but did you wonder why we’re allured to beauty? Let’s quickly ponder another question: why is a pretty post office different from a gorgeous art gallery?

We’ll look at these two “sides” of this “coin”, namely Attractiveness Bias and Form Follows Function. With a grasp of both, you’ll be able to plan better designs.

The Attractiveness Bias or the power of beauty

We are biased towards aesthetic forms. That is a fact; we love looking at beautiful things and are drawn to prettiness, both in the bricks-and-mortar world and in the digital one. In the digital arena, a more attractive website is just one click away. When users visit a website or even try a new app, they make quick decisions on whether to stay on that site/app or keep looking for another one. Much of that decision hinges on the aesthetic appeal of the web page’s design. Cramped, ugly sites have a much harder time keeping a user engaged than well laid out sites. This is why, as designers, we can harness the principle of attractiveness bias to build relationships with users quickly. That might sound extremely obvious, but it’s crucial to understand and not take for granted. We can plan out a pretty picture.

It’s easy to get caught up in delivering an aesthetically pleasing website or app rather than one which delivers a great user experience. If you keep the rule of thumb that “form follows function” (which we will examine soon) in mind, you may be better placed to strike a balance between aesthetics and user experience.


The Call of Beauty

People have always been attracted to beauty or“attractiveness”. We see people who dress appealingly, and we respond favorably. We see a Ferrari or a Porsche, and our attention is captured by such “headturners”. Standards of beauty do differ from culture to culture and person to person. Have you heard the old expression, “there’s no accounting for taste”? There are, nonetheless, items, people, websites, etc. that the majority of folks find aesthetically pleasing. Eyes “understand” beauty, no translation required.

For centuries, architecture has harnessed the understanding that beauty matters. Buildings are permanent landmarks, so it’s important to enjoy them. Architects tend to design structures that appeal to those who live and work in them. Yes, there are always exceptions, but at least the monstrosities will remind us why getting it right is vital!

Attractiveness bias is simply the understanding that we’re drawn to beautiful things. When we see a group of people, we tend to see those we find the most attractive before noticing the rest of the group. People with confident smiles and moviestar looks may as well have a spotlight on them. Good clothes make them stand out more. Speaking of clothes...the same is true when you select jewelry or a garment from a display; the most beautiful piece will almost “leap out” from the other, less attractive pieces. Yes, most often it’s the most expensive one!

We designers can use this principle of attractiveness bias to help grab and hold the attention of users. We can use it in marketing to drive visits to a website. We can also use it to promote one product among many. Apple has done this incredibly successfully, enabling their products to shine in the consumer mind over many similar products from competitors.

The Short-term Effect of Attractiveness

It’s important to know that attractiveness bias is a short-lived effect. The most beautiful website cannot keep visitors without providing an equally attractive user experience. Once that “wow factor” has died down, it’s the utility of a site that holds the attention. Imagine a very good-looking actor turning up for an audition. The casting director will be impressed; however, our poor actor hasn’t mentioned that he’s only started acting school. Worse, he’s not good at acting and stammers when nervous. Alas, our casting director starts feeling disappointed very quickly.

In essence, while an ugly website may never grab the user’s attention, a beautiful website without any real use will not hold the user’s attention for more than a few seconds. Beauty may be in the eye of the beholder, but the eye gets tired very quickly, almost as quickly as it gets turned off by ugliness.

This also explains why an incredibly beautiful person who lacks intellect or personality may find it very easy to get a first date but very challenging indeed to get a second.

How Attractiveness Bias can help a website

Attractiveness bias can contribute to the success of a website in a variety of ways including:

Increased traffic to the website - An attractive site may draw more users via aesthetic appeal.

Emotional design - As people build an emotional connection with attractive people (even those they don’t know, such as actors and actresses), so do they form emotional connections with designs that move them or particularly appeal to them.

Lower bounce rateBounce rate is the time it takes a user to leave a website. An attractive website will likely hold the attention for longer than an ugly one. However, the main factor in deciding bounce rate will be the user experience. Pretty pictures can’t hold users for long: get the best of both worlds and enhance your beautiful design with one that gets users reading and clicking happily.

Increases in time on site and page views - If the website is pleasant-looking and the user experience is positive, it’s likely that users will spend more time on it.

While attractiveness bias is important to consider while designing your website, never forget the other half of the formula. Meeting the users’ needs and desires is in the long term more important to the success of your design.

Test your designs to see if they have the desired aesthetic appeal with your audience. A warm, sunny feel may be very appealing to the users of a website concerned with children’s toys. What about an adult using a horror movie website, though? The graveyard images, blood, gore and haunted nightscapes that they expect to find would scare off toy customers (unless Halloween is coming up and the pictures aren’t too shocking!).

Above all, stay mindful of how quickly the user’s eye will judge your design. You never get a second chance to make a first impression, so appeal to your users’ senses while you factor in everything else to keep them on your page.

Let’s now look at that ”everything else” and how they relate back to the look of what we choose to put in our designs. Let’s turn our ”coin” over and see, shall we?

Form Follows Function

The Guggenheim Museum and Google.com website exemplify how form follows function in design.Form follows function” is an expression you’ll likely have heard, but what does it really mean? How can it help us when designing a website?

The phrase “form follows function” indicates that form, or the aesthetic design, should be derived from the function that it carries out. In his 1896 article, “The Tall Office Building Artistically Considered”, American architect Louis Sullivan wrote:

It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.

Sullivan’s assistant, Frank Lloyd Wright, went on to champion this idea ferociously. One of his buildings, the Guggenheim Museum, is a good example of form following function, with its spiral shape designed so that visitors can easily view the artwork within the museum.

From the world of design, we have this quote by Charles Eames that matches the ideas above: “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”

[Did you miss our “Meet the Eames” article? Check it out to learn more about him and his wife Ray and their amazing contribution to design!]

Form Follows Function: Descriptive vs. Prescriptive Interpretation


Author/Copyright holder: Rose Business Technologies. Copyright terms and licence: All rights reserved

Is it true that forms follow function? If that’s the case, then there are a couple of ways to look at the idea:

The descriptive interpretation – Any beauty in a design must result from the “purity” of the function.

The prescriptive interpretation – Any aesthetic consideration when designing something must always take second place to the functional requirements of the design.

The descriptive interpretation is easy to dismiss. If we look at nature, mutations in the genome (those which cause evolution) are random. There’s no recipe to be followed. A species gets handed a form and then has to derive its function from that form. (Giraffes might prefer to eat food that grows under the ground, for example, but their long-necked form makes that impossible; thus, their function is to eat leaves from high branches.)

If we were to use this concept in design, we’d need to understand that function is more objective than aesthetics (we may both find something usable and useful, but you might consider it ugly, and I might think it beautiful, or vice-versa). Remember, there is no accounting for taste.

The prescriptive interpretation also leads to problems. It assumes that functionality is the only imperative for design. Usability, aesthetic appeal, and simple ergonomics are all secondary to the functionality.

If that were true, then all websites carrying out a similar task should be identical. After all, if we are to shop online, for example, the process of shopping should be the same each and every time. The functionality is all identical, and the prescriptive interpretation asks the designer to consider, “what should be left out of my design because it fails to serve the function?” There should only be one optimal form based on function.

“Form Follows Function” in Web and App Design

If you’re going to apply form follows function in your web or app design, you’ll have to reach a compromise. Begin by determining what aspects of the design (from a functional perspective) are most critical to your design’s success. For instance, a shop where you cannot place an order or a search engine with no “search box” is going to be somewhat useless!

Once you’ve decided on your design’s functionality, you can start to design. This doesn’t mean eliminating all design elements that distract from the functionality. Remember, aesthetic appeal matters to users. However, it can guide us to using designs that highlight the most critical functionality and which, to some extent, disguise less critical functions.

It can also help, when you’re time- or resource-poor, to understand where you can make trade-offs in the design process, both in terms of functionality and aesthetic design. You may make compromises: not to the critical functionality, but to all other functions and to aesthetic appeal. You want an attractive design that draws the user to use it for its chief purpose.

A great example of such compromise is Google.com, which deftly applies the “form follows function” rule. When you access Google's website, all you see is the search field, which is the primary function of the website. Google have put all other services at the top right-hand corner of the site. Google prioritizes the critical function of search over all other functions.

The Take Away

People are attracted to beauty. Attractiveness bias accounts for this systematic pattern of deviation. Although standards of prettiness differ from culture to culture and according to personal taste, the majority of folks will enjoy looking at a beautiful item, be it a website, a car, or another person. As designers, we can use this bias to our advantage.

However, attractiveness bias is a short-term effect. The aesthetic appeal of a design will ebb quickly, even if it has helped to latch with the user, showing in the following:

  • Increased traffic to the website
  • Emotional design
  • Lower bounce rate
  • Increases in time on site and page views

Remembering that we have a scant amount of time in which to hold our user’s interest, we must focus on the user experience. This means that we have to think about who our users are and how we can show our product, service, or message in the most adapted to their needs and desires.

This is when the idea of Form Follows Function comes into play. If we start with the “function” of the product or service, it is more likely that our users will stay with us after the pretty effect wanes. Keep the essential function of your product, service or message firmly in focus, tailoring the aesthetics around it and putting all non-essential aspects on the side, in smaller buttons or bars.

All in all, keep both concepts in mind as you work. Your users don’t want a disordered, ugly page. Still, after raising their eyebrows in a moment’s admiration at the “Mona Lisa” you’ve shown them, they’ll want to navigate quickly to find what they’re looking for. Balance is key.

Where To Learn More

Resources

Hero Image: Author/Copyright holder: Unknown. Copyright terms and licence: Unknown.

Show full article Show collapsed article

Learn more about Aesthetics

Take a deep dive into Aesthetics with our course Emotional Design: How to Make Products People Will Love.

What separates great products from good ones? Attractive designs? User testing? Genius designers? Well, these might be contributory factors, but the true distinction lies in how they make users feel. Every experience has an emotional component, and using products is no different. Incorporating emotion should therefore be a key consideration when designing products or websites. This course will provide you with an understanding of emotional responses and how to create designs that encourage them.

An understanding of emotional design—how users feel and what affects these feelings—is essential if you want to provide great user experiences. There are probably things near you right now that are not necessarily the best, and they might not even be particularly attractive, but you are nonetheless still using them. Take a seashell from your favorite beach, or your very first tennis racket, for example; they are meaningful to you, and you consequently feel a connection to them. These connections are powerful; they subconsciously affect you and have the capacity to turn inanimate objects into evocative extensions of you as an individual.

In this course, we will provide you with the information necessary to elicit such positive emotional experiences through your designs. Human-computer interaction (HCI) specialist Alan Dix provides video content for each of the lessons, helping to crystallize the information covered throughout the course. By the end of it, you will have a better understanding of the relationship between people and the things they use in their everyday lives and, more importantly, how to design new products and websites which elicit certain emotional responses.

All literature

User Experience and Experience Design

Ch 3: User Experience and Experience Design

I open my eyes. Lush light floods the room, birds chatter. It is only 6:30 o'clock in the morning, but I feel well-rested and alive; time to get up, to brew some coffee. Are you jealous of my morning routine? Were you startled out of your sleep by a merciless alarm clock? Was it dark outside, no birds around, and did you feel groggy and bleary-e...

Book chapter
Interaction Design - brief intro

Ch 1: Interaction Design - brief intro

The aim of the following chapter is to provide an introductory overview of the concept and the field of interaction design, loosely grounded in historical developments. This encyclopedia covers the full gamut of human-computer interaction (HCI), and it should be noted that interaction design covers only a part of the HCI field. My intention here...

Book chapter
Visual Aesthetics

Ch 19: Visual Aesthetics

Visual aesthetics, as discussed in this chapter, refers to the beauty or the pleasing appearance of things. We discuss the importance of visual aesthetics in the context of interactive systems and products, present how it has been studied in the field of Human-Computer Interaction (HCI), and suggest directions for future work in this field. 19...

Book chapter
Industrial Design

Ch 6: Industrial Design

In loving memory of Prof. Dr. Kees OverbeekeJuly 18th, 1952 - October 8th, 2011 Kees left us unexpectedly on October 8th 2011, after a lifetime of dedication and warmth towards all the people who surrounded him. He was a passionate man. Kees was inspired, inspiring, engaging, dedicated, provocative and direct. He did not like easy and he was...

Book chapter
Affective Computing

Ch 12: Affective Computing

As Human-Computer Interaction (HCI) and Interaction Design moved from designing and evaluating work-oriented applications towards dealing with leisure-oriented applications, such as games, social computing, art, and tools for creativity, we have had to consider e.g. what constitutes an experience, how to deal with users’ emotions, and understand...

Book chapter
Somaesthetics

Ch 21: Somaesthetics

What is somaesthetics and why should it appear as a core article in an encyclopedia devoted to Human-Computer Interaction and Interaction Design? Readers trained in design studies and informational technology should not feel guilty if the term strikes them as unfamiliar and even difficult to decipher or pronounce. As a new interdisciplinary...

Book chapter
Aesthetic Computing

Ch 26: Aesthetic Computing

The phrase "Aesthetic Computing" while taken literally applies the philosophical area of aesthetics to the field of computing, and work in the area is broadly defined as such; however, in my operational definition for the work we do in my research lab and in teaching, aesthetic computing is treated as embodied formal language. The purpose of aes...

Book chapter