Design

The Halo Effect in UI design

  • Jakub Staroń

  • May 29, 2024

  • 18 min read

  • May 29, 2024

  • 18 min read

The halo effect is a psychological bias that sneakily influences our perception of a product's usability based on its visual attractiveness. Trust us, it's a real game-changer in digital design, and we will discuss it more in this article.

Ever heard the debate about whether usability (UX) or visual design (UI) reign supreme in the world of digital product creation? It's a topic that has sparked countless discussions, but fear not, we are not here to reignite that age-old argument. In fact, if you've read any of our previous articles, you will know that we have championed the importance of UX design time and time again. But here is the kicker: UX and UI are like two peas in a pod, inseparable and equally essential to crafting a stellar user experience.

Now, let's talk about the elephant in the room: the halo effect. We already established that it is a psychological bias, but let's focus on more details. For example, when a product looks good, we are more likely to think it works well, too – it's like our brains are wired to make that connection.

And there is more. Enter the aesthetic-usability effect, a close cousin of the halo effect. This phenomenon highlights the tight bond between visual appeal and usability, showing how a product's design can significantly impact its easy or difficult use.

Now, here is where things get interesting. We set out to explore how aesthetics influence usability. Still, the deeper we delved into my research, the more we realized how intertwined these two concepts are. It turns out it's not a one-way street. Aesthetics don't just affect usability – usability can also shape our perception of aesthetics. It's a fascinating dance of influence and interaction that's far from straightforward.

So, where do we begin in unravelling this complex relationship? Well, let's start with the basics.

What is the Halo Effect?

Have you ever wondered if attractive people have an easier life? The Halo Effect suggests that they might.

The halo effect (or halo error) is responsible for the first impression we form when encountering a person, company, brand, or product. Then, that initial impression influences our overall impression – even the aspects that are unfamiliar to us.

Salomon Asch, a Polish-born psychologist, has conducted a well-known experiment to study the halo effect and its implications on our daily lives. The results have shown that first impressions are the most important when you form an overall impression of someone.

In his experiment, participants were asked their opinions about two (fictional) individuals:

  • Alan: intelligent-industrious-impulsive-critical-stubborn-envious
  • Ben: envious-stubborn-critical-impulsive-industrious-intelligent

Did you form a better opinion about Alan rather than Ben? Most people did. Even though Alan and Ben have the same personality traits, just presented in a different order. Still, the halo effect makes us assign greater weight to traits appearing first on the list, which can influence the interpretation of subsequent traits. For example, stubbornness in an intelligent person may be justified and even respected, but in an envious person, it makes them seem more dangerous.

Now, one question remains: how does the halo effect work in the context of human-computer interaction (HCI)?

Halo Effect in Web Interface Design

The first impression we form about a person can influence our overall opinion about all their traits. Think about the last time you met someone new. That initial impression you formed – positive or negative – likely coloured your perception of that person as a whole, right? Well, it turns out that the same principle applies to the digital world.

When we interact with a website or app for the first time, our first impression sets the tone for how we perceive the entire product or company. It is like the digital equivalent of judging a book by its cover. However, one question remains: does the quality of a product's design actually impact our overall opinion of it?

Kathie Sherwin, Senior UX Specialist at Nielsen Norman Group, gives an eye-opening example of how the interface's appearance influences our product's evaluation. She tells the story of one of the usability tests they conducted for a client who runs a moving company. During one test, a participant stumbled upon a typo on the website and quipped, "Hmm. If they are this careless on their website, how can I trust them to move my furniture?". This shows the halo effect perfectly. And there it is the halo effect in action. It took one seemingly small detail that influenced the opinion about an entire company's services, even though they are clearly unrelated.

Halo Effect vs Aesthetic-Usability Effect

They say looks can be deceiving, but our brains are wired to think the opposite when it comes to digital products. The aesthetic-usability effect (which works similarly to the halo effect) refers to users' tendency to believe that attractive products are inherently more usable. People tend to believe that if something looks better, it will work better, even if that’s not true.

The aesthetic usability and halo effects may seem similar, but they are actually quite different. The aesthetic-usability effect zooms in on the visual aspect, focusing solely on how aesthetics influence our perception of usability.

The halo effect casts a wider net, considering a range of factors that shape our product assessments. We're talking age, previous experiences, brand perception – you name it. It is like the Swiss Army knife of cognitive biases, encompassing many influences beyond just aesthetics.

First impressions

Let's talk about first impressions. Almost two decades ago, a well-known study emphasised the importance of the first impression in Human-Computer Interaction. A study from 2006 indicates that users needed only 50 milliseconds to assess a website's visual appeal. Another study conducted a decade later suggests that you only need 5 seconds to gather an interface's user experience and the quality of its design elements.

Of course, 50 milliseconds or 5 seconds is not enough to examine a website’s usability. But even without clicking or scrolling, users could make snap judgments about the perceived usability of the interfaces.

In other words, whether 50 milliseconds or 5 seconds, designers bear the responsibility for the user's first impression of a website. And this impression can make or break a user's perception of the entire product.

The Halo Effect in Human-Computer interaction

Research on the relationship between the aesthetics of digital products and their usability dates back to the early 2000s.

In one of the first studies exploring the connection between those two factors, "What is Beautiful is Usable", from 2000, the researchers noticed a strong correlation between a system's perceived aesthetics and perceived usability.

Two years later, in 2002, another study, titled "User Satisfaction, Aesthetics and Usability”, explored users' opinions on the visual appeal of websites and how it affects them when exposed to serious usability problems. It turned out that users consider an aesthetically pleasing site with a low usability score just as satisfying as a site that is both visually appealing and usable.

Results from some of the latest studies, such as „Smartphone app aesthetics influence users' experience and performance” from 2023, also showed a positive effect of aesthetics on perceived usability and aesthetics.

It makes one thing clear: first impressions matter, and UI designers must focus on both visual appeal and usability when working on a new digital product. And we need to pay attention to the smallest visual details, as many users form opinions about our company or product based on them.

Diving deeper into the relationship between aesthetics and perceived usability

The relationship between aesthetics and perceived usability is like a labyrinth filled with twists that researchers are still trying to untangle. Despite years of study, the issue remains far from resolved, thanks to the myriad variables at play.

Some studies, such as "Exploring the Boundary Conditions of the Effect of Aesthetics on Perceived Usability" from 2019, attempted to shed light on the matter. Yet, the results provided only limited support, hinting that aesthetics may not play as significant a role in users' perceptions of usability as once thought. This is possibly because the initial effect of aesthetics on participants' judgments of usability is weak, and it diminishes very quickly as the user gains experience with the system.

Tractinsky said, "What is beautiful is usable." Yet the study "Toward Understanding the Relation Between Usability, Aesthetics, and Affect in HCI" shows that this can be reversed to "what is usable is beautiful." This study was mostly experimental. It highlights the complexity of the relationship between aesthetics and usability but calls for further research.

The bottom line? Interpret with caution. Experimental studies on the causal links between aesthetics and usability yield diverse results, highlighting the intricate nature of this relationship and the need for further investigation.

It is also important to remember the cultural aspect of design. Beauty is subjective, and what resonates with one user may fall flat with another, depending on cultural background and demographics. It's a reminder that designers must tread carefully, taking into account the diverse perspectives and meanings attached to UI elements across different user groups. As the authors of the article "What is Aesthetic-Usability Effect?” said:

Designers must also consider that beauty is subjective across cultures and demographics. Color schemes, typography, words, symbols, and other UI elements carry different meanings to various user groups. For example, a Korean user might perceive a UI as less appealing than someone in the United States.

Exploring the Halo Effect’s influence on Web Interface Design Assessments

Our perception of aesthetics is crucial in shaping our interactions with websites and applications. But what factors truly influence our judgments of digital interfaces?

Enter a groundbreaking study titled "Halo Effect Contamination in Assessments of Web Interface Design", conducted in 2018 by Daniel S. Soper and Farnaz Piepkorn. This study, encompassing over 1,200 research subjects, delves into the halo effect phenomenon within the interface design context, shedding light on its implications for human-computer interaction (HCI).

In their study, they split people into two groups. One group looked at websites with regular stuff, while the other group saw websites with topics that might make them feel something, like abortion or gun rights. They found how people felt about these topics affected how they judged the websites. It also mattered when they asked people about their feelings – before or after they looked at the websites.

The researchers unveiled intriguing insights into the role of gender, age, and digital experience in susceptibility to the halo effect. Older people and men seemed more affected by the halo effect than younger people and women. They noticed another thing, too: Kahneman’s substitution heuristic. Sometimes, people judge a website based on simpler questions, such as: "What do I think of this website?" instead of thinking about specific parts.

This study has some important lessons. If you are in charge of a website, you should know about the halo effect. This means you should ensure your website looks good because people might judge your whole business based on how it looks. And if you're a researcher, you should be careful when doing website design studies. Make sure you take the halo effect into account, or your results might not be accurate.

Summary

It is safe to say that we dived deep into the intricate dance between aesthetics and usability, uncovering the factors that shape our perception of digital interfaces. The studies we've explored underscore the pivotal role that visual design plays in the product creation journey – a role that, at times, may be overshadowed in the ever-evolving realm of UX Design.

We have discovered that even the smallest visual hiccups can leave a lasting impression on users, forever altering their perception of our product. But it's not just about aesthetics – usability also holds sway over our opinions on interface aesthetics, serving as a potent reminder of the symbiotic relationship between UI and UX design.

Needless to say, User Interface and User Experience designers are indispensable players in the design process. Rather than pitting them against each other in a battle for supremacy, their collaboration is key to crafting digital experiences that resonate with users on a deeper level. After all, it is the harmonious interplay between aesthetics and usability that ultimately determines the success of a product.

So, let's embrace this synergy and recognise the power of both disciplines as we strive to create digital experiences that captivate and delight users.

Jakub Staroń

Jakub Staroń

UI Designer

Unleash Your
Digital Potential

- Today.

Join our list of clients. You’ll be in good company.

  • AMG logo.
  • KFC logo.
  • Booksy logo.
  • Ikea logo.
  • Bank Pekao logo.
One last step to join
our newsletter!
Thank you!

We’ve sent you a confirmation email.