Profile picture of Carrie Cousins

8 min read

Psychological research applied to interface design

A better understanding of user psychology results in better product design. Here are key principles and how they apply to design.

A graphic illustration of a featureless face facing three different directions, and text reading: Psychological research applied to interface design

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

While most people might think of design as a creative field, there’s a lot of science behind website design that is effective and draws people in.

A lot of design science is rooted in psychological concepts, theories, and even “tricks” that turn an aesthetic idea into something truly functional. These psychological design principles help convert everyday website visitors into loyal brand followers and online shoppers, who engage with the website.

Psychological knowledge can include elements such as color and typography, but also extend to the way you present information, including messaging and user interface functionality. Here are some key psychological findings, and how they can be applied to website or app design:

The Von Restorff effect and focal points

The distinct visual element will be the ones that website visitors remember the most and interact with first. The Von Restorff effect, or the isolation effect, is the basis for creating a focal point in every scroll or screen in a design.

Uniquely different elements – due to their contrast, color, size, shape, or spacing – will stand out in the design, making an impact that's both immediate and long-lasting.

Key actions or information should be visually distinctive so that people will remember them more.

The original experiment behind the theory was conducted by a German psychiatrist and pediatrician, Hedwig von Restorff. It has since been replicated in various other studies to evaluate the effectiveness of everything from marketing pieces to design. The innovative 1933 study found that when participants were presented with many similar items and one distinctive, isolated item, memory for the singular item was improved.

This paradigm can have broad application in website and app design. Consider elements such as pop-ups or notifications; by making their design stand in contrast to the rest of the website, you can potentially draw more attention to your message. Furthermore, this sort of interference will be better remembered and could help keep users on your design longer, resulting in an increase in click-through or conversion rates.

Another familiar application of the Von Restorff effect is going with a color that's different from the overall color scheme for your call-to-action buttons. By use of differentiation, the design can direct a spotlight on the button and its functionality.

The Von Restorff effect: When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Hick’s law and limited choice

Most clients love to have a plethora of choices available on their websites – mega menus, multiple places to click, buttons everywhere, and some added notifications.

While it’s a commonly held view that one of these elements will result in a conversion, the reality is that an overwhelming design can actually have a negative impact on website visitors.

Instead of laying out all options at once, consider a this-or-that strategy so that users only have to make a single choice at a time. Breaking actions into smaller steps or processes can make for a much friendlier user journey.

Hick’s law, also known as the Hick-Hyman law, was developed by William Edmund Hick and Ray Hyman in the 1950s. It's explained by a mathematical formula:

RT = a + b log2(n)

Where RT is reaction time, n is the number of choices, and a and b are other measurable constraints. This proves that the more choices you have, the longer it takes to act, which can potentially lead to inaction.

Fun fact: The K.I.S.S. (keep it simple, stupid) theory that we all know evolved from Hick’s law, even it if did originate with the U.S. Navy.

Hick’s law applies to many of the usability standards associated with modern design such as offering a this-or-that option in a split-screen aesthetic, or asking for only an email address in a sign-up form.

Hick’s law: The time it takes to make a decision increases with the number and complexity of choices.

Gestalt principles and visual weight

There are five main principles of shape, space, and perception that drive how designers work with layers, contrast, and the positioning of elements.

Even if you aren’t consciously applying the rules of Gestalt psychology developed by Max Wertheimer, Wolfgang Köhler and Kurt Koffka in the 1930s and 40s, they’re probably evident in your work.

  1. Proximity: The juxtaposition of objects results in groups that seem to go together, whereas whitespace separates and differentiates between groupings or elements.

  2. Similarity: Objects that resemble one another seem to belong together, appearing as one large grouping instead of individual objects.

  3. Figure-ground: By separating the background from the foreground, a three-dimensional sense of space and depth can be achieved.

  4. Symmetry: Perceptually, almost everything perceptually can be divided in half. Symmetry creates balance from a focal point and outwards, whether symmetrical balance with perfectly harmonious parts,or asymmetrical balance of weighted elements and space.

  5. Closure: Objects that are incomplete, obscured or cut off are usually perceived as whole and complete. This principle accounts for our ability to mentally complete objects in negative spaces, as well as fill in shapes, letters or parts that are missing.

All these principles come together to prove that the sum of anything is greater than its parts.

Apply that broadly to design as you think about the big picture for projects, and whittle it down to individual parts of the design to ensure that every design element serves a purposeful role.

Gestalt principles impact the visual weight of elements in the overall design to provide a focal point, create visual flow, and help website visitors understand how to interact with the interface, such as directing them to scroll interactions, buttons, or key content.

Gestalt principles: The human eye tends to perceive similar or proximal elements in a design as a complete group, even if those elements are separated.

Dual-coding theory and clear communication

As a designer, you understand the power of visual information. But did you know that the brain can process visuals 60,000 times faster than text?

The dual-coding theory explains that for a message to be easily communicated in a design, it’s important to combine both visual and textual information.

Here’s how Allan Paivio, who is attributed with the theory, defines it: “Human cognition is unique in that it has become specialized for dealing simultaneously with language and with nonverbal objects and events. Moreover, the language system is peculiar in that it deals directly with linguistic input and output (in the form of speech or writing) while at the same time serving a symbolic function with respect to nonverbal objects, events, and behaviors. Any representational theory must accommodate this dual functionality.”

The challenge is in finding the right balance for information. For most projects that means using a combination of visual and text elements that “say” the same thing. This enhances recognition and understanding of what the design is about.

A common example of practical application that’s widely popular – and successful – is the use of infographics to simultaneously illustrate and explain a concept.

Dual-coding theory: People are able to recall information faster and learn quicker when images are paired with words.

Fitts’ law and tap targets

Some psychological design concepts are truly functional. That’s the case with Fitts’ law: The time required to move to a target area is a function of the distance to, and the size of, the target.

Applied to mobile website or app design, this law means that for buttons to be easy to understand and operate, they need to be within the thumb’s reach on a smartphone screen, and large enough to click.

Buttons and other tap targets need to be spaced and sized so that they do what is expected when the action is complete. If a button is too small or too close to other objects, for example, it can cause a user to inadvertently activate the wrong thing.

Whenever a user taps a button, the appropriate link should open right away.

Fitts’ law was developed by psychologist Paul Fitts in the 1950s. While it was originally associated with motor skills and ergonomics, it has wide application in UX design.

User perception of objects is vital here. Even an element that looks difficult to use properly is likely to be ignored. If a button doesn’t look like a button, it is unlikely to be clicked.

Fitts’ law is sometimes intentionally ignored in web design, in order to achieve inverse usability results. Think of the tiny, nearly hidden “x” meant to close an ad. The moment you see it pop up, you know you’ll inadvertently click into the ad because of how small the target “x” is. This example shows how frustrating it can be for users when the Fitts’ law is violated.

Fogg’s behavior model and user behavior

Fogg’s Behavior Model, developed by Stanford's B.J. Fogg, notes that it takes three things to get someone to act the way you want them to:

  • Motivation: You have to motivate someone to act, by telling them what they should do and why. Motivators include positive or negative associations such as pleasure and pain, hope and fear, or acceptance and rejection.

  • Ability: The simpler an action is, the more likely users are to engage and accomplish the task.

  • Trigger: Provide a trigger to prompt the action.

Now let’s apply this model to something as simple as designing a button: