Design Psychology: 10 Essential Experimental Principles
By understanding the workings of the human brain, designers can learn to leverage human perception to trigger behavioural change.
We can use the basic principles of design psychology to make more informed design decisions, ensuring our designs are not only appealing but effective.
Today, we’ll review the ten most critical psychological principles to keep in mind during every step of the design process.
1. Von Restorff effect
Also known as the isolation effect, the von Restorff effect predicts that when presented with multiple objects, we are likely to remember the one that is different.
The opposite is also true: objects that stand out less are less likely to be remembered.
The takeaway?
We should make critical elements and essential information visually distinct by varying size, colour, position, and shape.
The pricing page from Dropbox Business is a prime example of how the von Restorff effect can be used to influence consumer behaviour.
They’ve made their Advanced plan (the one they want us to buy, for whatever reason) visually distinct from their Standard and Enterprise plans.
Without this visual contrast, the viewer would be faced with a screen full of text, with no clear direction on where to look first.
With this visual contrast, they are more likely to look at and remember the Advanced plan.
2. Dual-coding theory
The dual-coding theory, created by Allan Paivio in 1971, suggests that presenting information both verbally and non-verbally makes it easier to remember.
The idea behind this theory is that verbal information is processed by a different cognitive system than non-verbal information, and presenting information to both systems helps viewers create accurate mental models of that information.
What we, as designers, can learn from this theory is simple: supplement the text with relevant imagery when comprehension and memorability matters.
The keyword here is relevant; abstract design elements won’t do.
It’s only meaningful visuals graphs or diagrams that will impact comprehension.
Infographics apply the dual-coding principle brilliantly; they mix and match text with visuals to maximise understanding.
3. Serial position effect
The serial position effect suggests that items at the beginning and end of a list are more memorable than objects in the middle of a list.
Items at the beginning of a list are likely to be stored in long-term memory (the primacy effect), while items at the end of a list are fresh in the short-term memory (the recency effect).
This is particularly relevant when designing presentations, reports, or other collateral aimed to support learning.
It’s the reason we often end presentations with a summary slide, and why conclusions are so crucial to lengthy blog articles.
It’s also relevant to web design psychology.
Vital navigational elements should be placed at the far left or far right of the navigation bar, where they’re more likely to be remembered and more easily found.
4. Centre-stage effect
The centre-stage effect states that when presented with an array of similar objects, we tend to prefer the one in the centre.
It’s thought that consumers assume that retailers place the most popular products in the centre of product arrays, which leads to this centre-stage effect.
Regardless of the cause, it’s something that should be taken into consideration whenever you’re designing to promote the sale of a product.
Product shots that feature multiple products, for example, should be organised around a single central product.
E-commerce platforms can also be designed and curated with the centre-stage effect in mind.
You can potentially boost the sales of a particular item by placing it in the centre of your array of products.
5. Law of Pragnanz
The law of Prägnanz is the fundamental principle of Gestalt psychology, a school of thought that attempts to describe the rules behind human visual perception.
This law suggests that we make sense of the world by finding patterns in visual stimuli, perceiving objects as belonging to organised groups and finding simplicity in complex forms.
Some Gestalt laws follow the law of Prägnanz.
The principles of closure, figure-ground, similarity, proximity, and common region all predict, theoretically, how visual stimuli are interpreted.
We can use these laws to inform our designs to help us create meaning from abstract visual elements.
These laws should guide our design choices wherever clear communication is necessary: in web design, logo design, and graphic design.
Let’s take a look at each law and how it applies to design psychology.
6. Principle of closure
The principle of closure states that we tend to fill in gaps between elements to perceive incomplete objects as being whole.
If you’re unfamiliar with this principle of design psychology, take a look at the image below.
Does it look like three black Pac-Man characters, or does it look like a white triangle overlayed on three complete black circles?
The principle of closure suggests that the latter is more likely.
This principle is particularly useful in logo design when we often want to eliminate as much unnecessary ink as possible.
We can rely on our viewers to fill in the gaps to make sense of even the most minimalist logos.
The NBC logo, for example, relies on closure to create meaning in the negative space in the centre of the design.
Our brains fill in the gaps to “see” the body of a peacock surrounded by feathers.
Similarly, the World Wildlife Fund logo leaves gaps on the panda’s head and body.
I’m willing to bet that you have no trouble recognising this as a panda.
If you want to apply the principle of closure in your designs, keep in mind that it is most useful for recognisable objects (like pandas and peacocks) and simple objects (like geometric shapes).
Make sure you provide enough information for your audience to interpret the object.
Remove too much context, and the mind struggles to close the gaps.
7. Figure-ground principle
The figure-ground principle states that we distinguish objects from their backgrounds based on the size of the object and the contrast between the object and the background.
Figure-ground relationships may be stable, when there is a clear foreground element, or unstable when foreground and background elements are reversible or ambiguous.
This principle is often applied in combination with the principle of closure to create clever illusions that weave “figure” objects with “ground” objects.
This logo by John Randall, for example, uses an unstable figure-ground relationship to depict both of the titular animals of The Swan & Mallard restaurant.
The bright white of the swan contrasts with the dark background, distinguishing the swan as the “figure”.
The duck emerges from “ground”, created in the negative space of the swan with the help of the law of closure.
A stable figure-ground effect, however, is more useful in web design psychology, where it’s often necessary to create a clear CTA that stands out from the background.
Neil Patel’s website, for example, clearly establishes a stable figure-ground relationship that draws attention to Neil and his “Yes, I want to work with Neil” CTA.
This thoughtful use of visual contrast is critical for any small business marketing campaign.
The single most crucial graphical treatment for controlling figure-ground relationships is colour.
By making thoughtful colour choices, we can use visual salience and contrast to create both stable and unstable figure-ground relationships.
8. Principle of proximity
The principle of proximity states objects placed close together are perceived as belonging together.
As shown in the example below, the circles that are placed closer together seem to be more related than the circles set further apart.
Proximity is the most powerful of all the Gestalt principles – it has the most influence over the way we group visual objects.
We should apply the principle of proximity whenever we wish to organise information in our designs, to indicate relationships among elements like text, icons, and images.
Proximity couldn’t be more straightforward to apply in your designs.
Merely place related elements close together and add ample white space between separate components.
Besides decluttering your designs, you’ll make them more precise and easier to read.
9. Principle of similarity
The principle of similarity goes hand-in-hand with the law of proximity.
It states that objects with shared visual properties are perceived as belonging together.
We judge similarity based on many attributes, including:
When using similarity in your designs, keep in mind that colour is by far the most potent attribute for grouping, while shape and size are the weakest.
Any similarity effects based on shape or shape will be overruled by similarity effects based on colour.
Most of us apply the principle of similarity intuitively, repeating graphical attributes like size, font, and colour across a design to create a sense of cohesion.
10. The principle of common region
The principle of common region states that objects placed in the same area (usually enclosed by a box or other shape) are perceived as grouped.
This enclosure effect is powerful enough to overcome the effects of similarity and proximity, as you can see in the example below.
This principle is particularly useful in web design psychology for pulling together elements that are otherwise visually dissimilar.
A simple example is the card motif that has invaded the UI design world of late, as seen in this mockup by Andrei Manolache:
Final thoughts on Design Psychology
One of the best things you can do as a designer is to study human psychology and perception.
Understanding how viewers perceive and interpret visuals will give you more control over the impact of your visuals, helping you to communicate more effectively in your designs.
These principles in graphic design psychology, however, shouldn’t be taken as hard and fast rules.
Instead, they should be used as tools and guidelines to help you create visuals that are clearer, more engaging, and that convert more effectively than would otherwise be possible.
