What's Good UX vs. Bad UX? Part 2: The Role of Aesthetics

This is the second part of a three-part series exploring the difference between good and bad UX, measuring usability, aesthetics, and value. In this article, we'll examine the role of aesthetics in UX. You can find Part 1 on Usability here.

Aesthetics in UX: The Visual Appeal

Let’s discuss aesthetics, the element people tend to associate with design. Visual design includes color, typography, layout, iconography, and branding. It plays a dual role in user experience, affecting usability and desirability.

A well-designed layout guides and clarifies the actions users should take and enhances usability. Branding elements assist with desirability and personality. You can make a usable app, but it will feel unpolished or unprofessional if it lacks visual design. In addition, experiences may lack personality if branding is not applied well.

In consumer-grade apps, visual design plays a more prominent role in desirability. Consumers have a choice in the apps they use. People tend to select experiences that they find enjoyable, and aesthetics plays a crucial role in this decision-making process.

Icons, layout, and visual design improve usability in enterprise and B2B contexts with task-heavy experiences. Visual design helps organize the layout for experiences with complex task flow or much information.

Designing interfaces requires leveraging some Graphic Design and Psychology principles to create usable and desirable experiences.

 Let’s walk through the most common principles applied to user interface design. 

The Gestalt Principles

Visual perception is rooted in Psychology. Gestalt principles are used in branding, design, and data visualization. Using Gestalt principles in design work can speed up information processing as they align with our brain's processing abilities.

About eleven Gestalt principles exist, but three are most relevant to user interface design, especially layout design. Layout and Information Architecture (IA) form the structure of the experience. The structure helps people find the necessary information by organizing it into logical groupings.  

These Gestalt principles are, in my opinion, the most important for layout and interface design.

Proximity (Grouping)

The Proximity principle is used heavily when designing layouts. This principle states that we perceive objects near each other as being related. In this example, the three dots on the far right appear to be separate from the group of six dots because of the space between them.

When information is grouped that doesn’t seem related, it contributes to a confusing experience. Or, sometimes, information is overly grouped, and it becomes harder to read because your eye is interrupted too often.

Similarity

When objects are similar, we perceive them as being related. In this example, the similar objects are in shape and color.

This principle can be used with shapes and colors. Icons, for example, can be used to show people which information is similar by using color.

Enclosure

Perception of objects in an enclosed area as being grouped. You may have noticed that some areas are shaded in a different color or use borders on some websites. That's the enclosure principle at work.

Gestalt principles help organize the user interface, making actions clear while creating a logical structure for the information. When a layout or design misuses one of these principles, it feels ‘off’ or confusing. There won’t be a logical flow for why the layout is organized the way it is.

❇️ Good UX has a strong layout that leverages these principles to organize the information on the page.

Hierarchy

Hierarchy establishes a place on the page and directs the user to essential information. Visual hierarchy can be indicated by size, color, and information proximity. In the most straightforward application, bigger things get more focus, and minor things get less focus.

Headings, titles, and typography contribute to establishing a hierarchy. Our eyes are drawn to more significant elements first. As a result, our layouts should dictate the actions we want users to take and the information they should pay attention to.

Color can also establish hierarchy. If dark headings are paired with light-colored headings, the dark headings will draw focus. In addition, color can be used to organize important information by bringing it more attention.

It's difficult to understand the information hierarchy in a poorly organized layout. This can lead to confusion or a lack of purpose in the design.

Take the GSA eLibrary, for example. From an aesthetic perspective, it isn’t visually pleasing. It uses principles of grouping, enclosure, and some hierarchy. However, most people wouldn’t call this a desirable experience. From a usability perspective, the information is quite dense, making it difficult to determine which actions should be taken. In addition, the text is hard to read.

It’s unclear what the page's intention is because the information doesn’t lend itself to a clear set of actions. Instead, we’re given many links. The most significant elements on the page are the “Search text” and the “Unique Identity ID (SAM)” text.

From a design standpoint, this experience needs a more explicit hierarchy and overall intention. This page is a self-help information portal but needs more clarity and focus. One of the obvious things it’s missing is white space. The text is pretty overwhelming.

White Space

In most cases, when something feels unpolished, the culprit is likely either a lack of white space or inconsistent use of white space, also referred to as padding. White space can help make the interface more organized and aesthetically pleasing. In our GSA eLibrary example above, the lack of white space contributes to feeling overwhelmed.

In some areas, there’s too much white space, which impacts the readability. White space helps with legibility and scannability. When apps have too little or too much white space, it can be hard to read or know which action to take.

Take this example from Shine. Some of these screens have too much white space, which makes them feel sparse and hard to read. Based on some negative feedback it received upon launch, the company is working on a new design.

❇️ Good UX uses appropriate white space and a clear hierarchy that drives the intention of the experience.

Brand and color

Great consumer experiences typically have a strong brand presence. For example, the aesthetics and brand are infused through Apple’s apps and websites when using Apple products.  

Brand elements in user interfaces can include illustrations, color, photography, and typography. Branding elements are intended to reinforce the brand but shouldn’t overshadow or overwhelm the design. Referring to the Shine example above, the broad use of brand colors (Purple) inhibits and overwhelms the experience.

Infusing brand colors in the interface reinforces the brand and creates a visual hierarchy. Consider this example from Fidelity’s mobile app.

Fidelity uses green as a brand color, and it’s used in icons, the selected state in the mobile app tab bar, and calls to action. With color, sometimes less is more, and subtly using color can be just as impactful. 

Photography and Illustration

In addition to color, photography, and illustration reinforce the brand and communicate information visually. In an earlier newsletter article, I highlighted a project where I used illustrations in A/B tests. The illustrations helped reinforce messaging on linking accounts. In the version with an illustration, people saved their information at significantly higher rates, which is what we wanted.  

Our hypothesis on why the illustration performed better was that it was much easier to show the process and created more trust with our users. Describing the process would have resulted in a confusing wall of text.

Illustrations are used for various states in the experience to communicate an empty state or if a problem or error has occurred. They bring more personality and warmth to an otherwise stark interface or message.

❇️ Good UX uses a combination of color, illustrations, and other brand elements to reinforce the brand and help communicate complex concepts and hierarchy.

Desirability

I once sat through user research of two different designs. The original design had an intensive 7-step flow. The redesign minimized the steps to 4 but had a cluttered layout.

Users preferred the longer 7-step flow over the redesigned 4-step experience. One user’s feedback on the 4-step flow: “This one is simpler but overwhelming. I prefer the other flow.”

The takeaway is that users didn’t like the visual design of the shorter experience, even though they admitted it was a simpler version. Visual design impacts desirability, and aesthetics must be conducive to usability.

The impact of aesthetics is well known. A recent Journal of Management study[1]concluded that sites with good visual design contribute to a positive website evaluation. There’s a term for this: the Aesthetic-Usability effect[2]. In addition to preferring attractive experiences, users are more forgiving of minor usability flaws when using attractive products. 

Not all products and services have or need visual design. Chatbots and voice-activated experiences use minimal visual design but can still be great experiences. However, for interface experiences, aesthetics plays a significant role in whether users think an experience is good or bad.

Conclusion

In conclusion, visual design and aesthetics are crucial in the overall user experience of digital products and interfaces. While usability is paramount, a well-designed and aesthetically pleasing interface can enhance desirability, engagement, and user satisfaction.

The Gestalt principles of proximity, similarity, and enclosure help organize information and create a logical flow, guiding users through the interface. A clear visual hierarchy using size, color, and typography directs the user's attention to the most critical actions and information.

Appropriate use of white space is also essential, as too little, or too much can impact readability and scannability. Integrating brand elements thoughtfully can reinforce the product's identity without overwhelming the design.

Ultimately, an interface's aesthetic appeal can make or break a user's perception of the overall experience, even if the underlying functionality is sound. Bridging the gap between usability and desirability through visual design is vital to crafting exceptional user experiences.

Noah Kulwin. (2021, August 12). Marissa Mayer's Sunshine, Shine app design cofounder quits. Platformer. https://www.platformer.news/marissa-mayer-sunshine-shine-app-design-cofounder-quits

Jongmans, E., Jeannot, F., Liang, L., & Dampérat, M. (2022). Impact of website visual design on user experience and website evaluation: the sequential mediating roles of usability and pleasure. Journal of Marketing Management, 38(17-18), 2078-2113.

Moran, K., & Nielsen Norman Group. (2014). The Aesthetic-Usability Effect. https://www.nngroup.com/articles/aesthetic-usability-effect/