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.
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.
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.
Proximity: The juxtaposition of objects results in groups that seem to go together, whereas whitespace separates and differentiates between groupings or elements.
Similarity: Objects that resemble one another seem to belong together, appearing as one large grouping instead of individual objects.
Figure-ground: By separating the background from the foreground, a three-dimensional sense of space and depth can be achieved.
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.
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.
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.
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:
Motivation: Offer an enticing incentive, such as a coupon code with a “click here” button.
Ability: Design a button that’s easy to see and interact with.
Trigger: The button has to work properly and perform the expected action.
Mimetic desire theory and user needs
You’ve probably heard or experienced social proof lately. You might have based a purchase on something you saw on social media, or recommended a product or service to a friend.
The mimetic desire theory plays off of this concept. The theory claims that we want something more if we see someone else enjoying it. In design, this is the primary reason we use photos of people interacting with the products in eCommerce stores, and include testimonials and social media feeds as part of website design.
This theory is attributed to René Girard, and offers a complex look at why people are so apt at imitation. It paints imitation in a positive light, stating that reproducing others’ behavior can help us learn, unlike mimicry which often leads to conflict. As designers, we can utilize this basic human need in our work.
Chameleon effect and user emotion
The chameleon effect is closely related to the mimetic desire theory, in that it also deals with how people act in response to others. Here, people will imitate the facial expression, body language, or behavior of others close to them.
This concept is key to establishing an emotional connection with users through imagery. Photos of smiling people will evoke feelings of warmth and happiness for viewers, while an image of an upset or crying person could make a user sad.
As researchers John Bargh and Tanya Chartrand wrote in the Journal of Personality and Social Psychology (1999), the chameleon effect can cause nonconscious mimicry, “such that one’s behavior passively and unintentionally changes to match that of others in one’s current social environment.”
As social environments move increasingly online, this imitation can impact website engagement. If a user feels connected to the action and people on screen, they will be more likely to engage with the content or make a purchase. This physiological insight is at the root of different design techniques, such as the development of user personas for website design.
Aesthetic-usability effect and good design
People of all backgrounds are more likely to engage with and enjoy a design if it’s visually pleasing. While this might seem common sense to a designer, this phenomenon is also scientifically proven, known as the aesthetic-usability effect.
The research dates to 1995, when Masaaki Kurosu and Kaori Kashimura discovered that ATM users thought machines worked better when they looked better. They concluded that people are strongly influenced by an interface’s aesthetics, even when evaluating its functionality alone. The study was further extended by Don Norman of the Nielsen Norman Group to other objects, reaching the same results.
One interesting case study in aesthetics and usability is Apple’s success. The brand’s sleek-looking phones, tablets, and computers are a hot commodity among tech users.
Even the most popular design styles, trends, and concepts are rooted in classical design theory, applying principles such as the golden ratio, balance, hierarchy, and the color wheel.
No one likes to judge a website by its design alone, but this theory proves that it is widespread and even, to an extent, inevitable, making the visual qualities of the design just as important as its function. When they work together, you have hit the jackpot.
Conclusion
When it comes to applying psychological findings in design, you’ll likely find that many of these techniques and theories overlap in some way. You aren’t going to design a website using just one of the ideas above; these theories shape the way we design on a broader, deeper level.
Understanding the psychology behind design can, however, help you explain your work better to clients. You know what a button should look like and where it should be placed in an app, but can you break down your reasoning when a client questions your choices?
Familiarizing yourself with the research can make you a better designer because you will be able to better communicate the why of your designs.
