The neuroscience of UX

Neuroscience has significant practical applications in the field of digital product design. The findings of neuroscience research have important implications for our understanding of the human experience, including how we think, learn, and remember, as well as how we perceive and respond to the world around us.

Miklos Philips
UX Collective

--

Illustration of neurons supoerimposed over a person’s silhouette

Neuroscience is the scientific study of the brain and the nervous system. Neuroscience can help designers understand why people react the way they do to certain things and how they make decisions. This knowledge can be used to design products that are more effective and user-friendly.

The human brain is a powerful parallel-processing quantum computer with a processing power of 11 million bits of information per second, processed simultaneously! It has 86 billion neurons, with information traveling between them at 200 miles per hour. There is nothing like it in the known universe.

All user experiences pass through the brain. It would behoove designers to study what goes on in our heads when we use digital products — the neuroscience of UX.

Brain and the neural network activated
Andrus Ciprian/Shutterstock

We constantly perceive the world around us with our senses —processing, analyzing, and interpreting sensory information. Visual information makes up a large part of this experience but we use auditory (sound), olfactory (smell), and tactile (touch) inputs as well.

Vision involves light striking the retina of the eye, smell is mediated by odor molecules, and hearing involves pressure waves. Some of what we experience is conscious—a lot of it is subconscious. But how much?

Some scientists believe that conscious awareness may only account for 5–10% of our overall awareness. That means things are going on around us that pass through the brain, 90% of which we are completely unaware of!

Everything that is UX is neuroscience—pain points, frustrations, and cognitive load as well as frictionless experiences, bursts of delight, satisfaction, and pleasure. By understanding how the brain processes information and makes decisions, we can design more user-friendly products that are visually appealing and enjoyable to use. In other words, neuroscience is a powerful tool for improving digital user experiences.

Neuron illustration with two emojis. One angry the other smiley.

Function Meets Beauty

The aesthetic-usability effect.

Steve Jobs believed that the entirety of the customer experience is to be holistically evaluated. Design is not just what it looks like and feels like. Design is how it works. In other words, all of it matters — neuroscientifically speaking — because it’s about how people perceive a product’s quality from its design, its material, color, shape, size, touch, look and feel, and how its software works… down to the tiniest detail.

Image of MacBook Pro with Steve Jobs quote

Most UX people are familiar with the aesthetic-usability effect, a study of 26 variations of ATM interfaces in Japan. Its result showed that visually-appealing products have greater usability!

The study suggested there is a tendency for individuals to sense that aesthetically pleasing designs will also work better. In other words, when we find an interface visually appealing, we may become more forgiving of minor usability problems.

Over a century, studies have consistently shown that people tend to prefer curved lines over straight lines. This preference is thought to be because we have an innate attraction to rounded or soft-edged shapes, while sharp lines and angles are often associated with dangerous objects and may be perceived as threatening.

Is this why we see more rounded corners in UI design? A study found that curves require less cognitive processing to perceive and understand, and another theory says that curves are simply easier on the eyes. Could it also be about the brain’s preference for visual processing efficiency to save energy?

Mobile app UI designs showing designs with curved lines.

When neuroscientists are asked, “Just how much energy does the brain use?” we’re told that the brain uses 25% of the body’s overall energy needs. A massive amount! The human brain has evolved over millennia to run as efficiently as possible — to save energy. People crave consistency and ease of use because our brains prefer the least amount of friction—to save energy! Neuroscientists call it “the lazy brain.” What this means is that noise-free, efficient, and frictionless designs with great UX will be more successful.

The eye is an optical instrument that sends signals to the brain for processing. The eye does not see. The brain does. What happens in the brain as we look at something? The unconscious processes behind the scenes make up a large part of what we perceive—what we choose to see, what we focus on, what we interpret, and how we interpret what we see. With all the visual information coming in we look for patterns, we associate, interpret, and categorize to make sense of it all.

Distractions fill our lives, making cognitive load critical. Neuroscience shows that designs that are simple, clear, and cut through noise tend to be more successful. To achieve this, design principles such as aesthetic integrity, visual hierarchy, symmetry, and balance, along with great usability, and frictionless design play a vital role. Overloading people, however, leads to more processing in the brain, adding friction and causing frustration.

Thinking Fast and Slow

In his seminal book “Thinking, Fast and Slow,” Daniel Kahneman, one of the world’s most influential psychologists, breaks human thought and decision-making into two systems.

System 1 is fast, subconscious, automatic, frequent, emotional, and stereotypic. System 1 thinking is reactive — responsible for complex but instinctive cognition like determining the distance between objects or determining emotional responses.

Remember the lazy brain? The least amount of friction? It generally defaults to System 1 thinking. This is where we live most of the time. This is where we are when pulling up a website or launching an app and reacting to it in milliseconds.

Brain with system one and system two thinking.

System 2 is slow, conscious, effortful, infrequent, calculating, and logical.

System 2 thinking is analytical, inquisitive, and methodical and is applied to more complex scenarios, like determining appropriate social behavior or comparing two products with different prices and characteristics.

This is where we are when we’ve had our initial visceral reaction to a design and now we’re moving into a flow that’s much slower, purposeful, and orderly. This is where we can experience pain points, frustrations, and computer rage because we can’t get something done easily.

For a digital product to “just work” — as in the Steve Jobs definition — both of these systems have to be satisfied.

System 1 is activated in the first milliseconds. We have our visceral reaction after which System 2 kicks in and we move into our analytical/evaluative, often skeptical mode. Can we get something done with the least amount of friction? Remember, our brain is still looking for that… “Is this going to be a satisfying interaction?” Does the product pleasantly surprise us where we feel a certain sense of delight?

Cognitive Ease and Flow

Cognitive ease happens when there is no cognitive strain. When a design works, its usability score is high and people experience cognitive ease. When it doesn’t, we experience an interruption to our state of flow that throws us into cognitive strain, and the design has failed.

When a design works, we “feel it in our bones” — neuroscientifically speaking. Its impact is immediate. The design is striking in its simplicity and elegance. The thinking fast and slow systems, System 1 and System 2, are working together in perfect harmony and we are in a state of effortless flow.

Website for Capsulin Pro coffee pods.

Aesthetic Integrity

As we saw earlier with the aesthetic-usability effect, aesthetics contribute to the perception of better usability. Apple defines aesthetic integrity, loosely quoted, as “when a design’s appearance and behavior perfectly integrate with its function.”

The principle of aesthetic integrity is not only about how nice-looking a design is. It refers to a design that has obvious coherence — is effectively structured and laid out — what makes it work. It displays expert use of visual hierarchy, color, alignment, spacing, balance, symmetry, contrast, unity, consistency, typography, and whitespace — to mention just a few.

The website for Slack redlined to show alignment and spacing.
Slack’s website: demonstrating visual hierarchy, alignment, spacing, balance, typography, and whitespace.

Why does it matter? As we saw with the aesthetic-usability effect, aesthetic integrity gets us closer to better usability. It’s about order versus chaos. Symmetry and a sense of order are achieved by aligning elements and careful spacing. It’s about neuroaesthetically pleasing designs.

The human brain finds balance and symmetry more pleasing because it mirrors nature. Our brain has evolved to prefer the least amount of friction so we favor designs that offer the least amount of cognitive processing.

Visual Perception

According to Gestalt psychology, people need to organize what they see to make sense of the world. Because people’s brains are constantly taking perceptual shortcuts due to the lazy brain—designers can use Gestalt principles to design effective user interfaces and improve the UX. We won’t go into all of the principles in depth here — there are plenty of articles out there covering this topic — but for a couple of quick examples let’s look at proximity and similarity.

Gestalt psychology and principles of design.

Our brain is looking for patterns and tries to organize information. The Gestalt principle of proximity says that we perceive objects that are close to each other as being part of a group. In other words, Proximity arises when objects are closer to each other than to any other object.

This principle can be used in design as a powerful way to help create visual order. The example below illustrates a layout with images and captions. We quickly recognize which text block belongs to which image because we perceive them as a group—according to the principle of proximity.

Wireframe demonstrating the Gestalt principle of proximity
The Gestalt principle of proximity can be used to visually group elements

Visual elements that share similar characteristics establish a relationship between them. The principle of similarity uses shape, size, color, and orientation to indicate these relationships. Conversely, if we want an element to stand out, we can make it dissimilar, creating an anomaly that adds contrast or visual weight to the design. This technique is often used to emphasize calls-to-action, where buttons are typically a different shape, size, and color than other elements on the page.

Example UIs demonstrating the Gestalt principle of similarity.
The Gestalt principle of similarity. In the design on the left similar elements indicate a relationship, i.e. they’re part of a group. With the design on the right, a dissimilar element creates a visual anomaly and stands out.

Color Psychology

Color psychology is the study of how colors affect perceptions and behaviors. The strategic use of color in design can evoke emotions and prompt desired behaviors, resulting in an enhanced user experience.

A seemingly small alteration such as modifying the color of a button can generate a significant increase in desired user behavior, often resulting in double or triple-digit percentage boosts. Google reportedly increased advertising revenue by $200 million by conducting A/B tests on 41 shades of blue for their search result page’s ad links, highlighting the potential impact of color selection in design.

In terms of neuroscience, color plays a vital role in visual perception and has a significant impact on our psychology. Incorporating color psychology into our designs can result in improved user experiences. However, it’s important to keep in mind that color psychology is specific to each culture. For instance, in Western minds, blue is associated with credibility, loyalty, honesty, and reliability, which is why it’s commonly used in bank and finance products.

The website for Tide, a bank for businesses, using a blue aesthetic.
Tide, a business financial platform offering digital business banking services in the UK uses a blue aesthetic.

Emotional Design

The emotional impact of using digital products is a big part of neuroscience and UX. It’s a moment-by-moment effect and operates on three levels in the brain: visceral, behavioral, and reflective. (A huge nod here to Don Norman’s seminal book on Emotional Design.)

There is a slight delay between these levels: first, it’s visceral, second, it’s behavioral and lastly, it’s reflective. What’s more, we tend to bounce up and down these levels and switch rapidly between them. The “experience” moves from the limbic system (the visceral) to the neocortex (analytical) and to the midbrain (the emotional center).

James Bond’s black Aston Martin car.
007’s Aston Martin. Power and elegance, a sense of luxury, mystery, and social status = emotional design.

Emotions actually change the way the human brain operates. Negative experiences focus the brain on what’s wrong; they narrow the thought process and make people anxious and tense. We feel restricted and frustrated. If a website or an app is badly designed and doesn’t perform to expectations, the feeling can grow into computer rage. Our pulse rate goes up and we close the site or delete the app in frustration.

Good emotional design on the other hand elicits feelings of pleasure, a sense of order, and safety. We “feel good” using certain products.

To create a successful product, a design needs to operate really well on the three levels described earlier: visceral, behavioral, and reflective.

First: the visceral level: “I want it. It looks amazing, and so will I.” As demonstrated above with James Bond’s black Aston Martin, this is an instant gut reaction. If at this stage the product’s design induces a positive reaction we’re well on our way. Visceral design also affects the perception of your product’s credibility, trustworthiness, quality, appeal, and even perceived ease of use.

Ralph Lauren website.
The Ralph Lauren site’s design counts on an instant visceral reaction to the brand in the first milliseconds.

Second: the behavioral level: “I can master it. It makes me feel smart.” It has to feel good, look good, and perform well. It’s about our satisfaction and pleasure with a product’s effectiveness. Behavioral design is a concept that focuses on how a structure or system—as viewed by the users—meets their needs and requirements. Good behavioral design is like a lock and key. Users and their behavior are the lock, the product is the key. Great UX is achieved when the two work harmoniously.

And third: the reflective level: “It completes me. I can tell stories about it and me.” It’s about self-image, personal satisfaction, memories, and reflecting on the experience. Using a particular digital product not only helps to entertain us, complete a certain task, or achieve a certain goal, but using it also creates a sense of status in society—it’s about our socio-economic status. Your users will ask in reflective mode: “Was it a pleasure to use? Did it make my life easier?

Emotional design that effectively addresses all three levels is critical in providing an optimal user experience. The emotions we associate with a digital product can significantly impact how we use it. A positive emotional connection can increase engagement and promote recommendations to others.

A woman using a website and mobile app for a bottled water.
The reflective level of emotional design is about self-image, satisfaction, and reflecting on the experience.

Persuasive Design

Thoughtfully applied persuasive design techniques are valuable tools in a designer’s arsenal, much like other psychology-based UX design methodologies. However, it’s important to acknowledge the ethical issues associated with the dark side of persuasive design, which can involve manipulative tactics such as dark patterns that may encourage undesirable actions.

While many companies utilize persuasive design techniques unethically, some approaches can benefit users. Neuroscience can assist product designers in creating persuasive designs that tap into users’ subconscious minds and encourage them to take action. It also provides insights into how users think, feel, and respond to different elements of a product or service. Armed with this knowledge, UX/product designers can create experiences that cater to users’ specific needs and preferences.

Summary

Astute and sophisticated product designers have a powerful weapon in their arsenal that can help them create better products and experiences: neuroscience.

It’s not a magic trick, it’s designing digital products with a deep understanding of human psychology, the power of motivating principles, and behavior influencers. By understanding how our brains work, designers can use the science of neuroscience to design products that are more effective, engaging, and a pleasure to use.

Neuroscience can be used in many aspects of product design, from aesthetics to emotional design to persuasive design. It helps us understand how people make decisions, what motivates them, and how our brains respond to different stimuli. By leveraging neuroscience principles, product designers can create experiences that are more intuitive, aesthetically pleasing, and emotionally resonant.

AI free content — created by humans

👋🏻 Hello! Thanks for reading and getting to the end of the article. 🙂

I’m now available for starting people on their UX designer careers through my UX Course or for ongoing mentorship on MentorCruise.

Learn UX with me at half the cost of questionable bootcamps. Get certified & build a portfolio for a high-paying job. 7-day free trial http://uxwithmiklos.com

You can also follow me on Twitter.

--

--