Design Psychology: 10 Essential Experimental Principles

Design Psychology: 10 Essential Experimental Principles

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 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.

 

psychology pricing tables

 

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 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.

 

abstract adidas design

 

Infographics apply the dual-coding principle brilliantly; they mix and match text with visuals to maximise understanding.

 

infographic design psychology

 

 

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.

 

serial position effect

 

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.

 

centre stage effect

 

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, by perceiving objects as belonging to organised groups and by finding simplicity in complex forms.

Some Gestalt laws follow from 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, take a look at the image below.

 

principle of closure

 

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 the closure to create meaning in the negative space in the centre of the design.

 

NBC Logo 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.

 

charity branding wwf logo design

 

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.

 

figure ground principle

 

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.

 

swan mallard restaurant logo design

 

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.

 

neil patel website

 

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.

 

principle of proximity

 

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.

 

psychological design tips

 

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:

 

principle similarity

 

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.

 

designing psychology

 

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.

 

principle common region

 

This principle is particularly useful in web design 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:

 

dribbble design theory

 

 

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, 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.

 

Author Bio: Midori Nediger spreads visual communication tips and tricks as an Information Designer at Venngage, a web-based infographic design tool. With a background in biomedical visualisation, she’s particularly interested in helping people communicate complex information. Connect with her on LinkedIn or follow her on Twitter.

 


If you wish to discuss how we can develop your brand or provide graphic design for your product or business, email us: [email protected]

Inkbot Design is a Creative Branding Agency that is passionate about effective Graphic Design, Brand Identity, Logos and Web Design.

T: @inkbotdesign F: /inkbotdesign


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.