Design Psychology: Principles you should know and use

Psychological principles that will help your design
Download Design Strategy e-book
Join Email newsletter

Design is many things, and one of them is an act of communication. Understanding the person with whom you are communicating will help you to create a more intuitive and clear design. No, this time I’m not talking about user research (although it will get mentioned!). I’m talking about design psychology and the principles of human behaviour!

Taking into account some basic psychological principles can greatly improve your design foundations and ensure that your design is as universal as possible. That’s why it impacts graphic design, UX design, product design, and all other kinds of design.

Sound useful? Keep on reading. 😉

Table of contents

Human-centered design

Psychological principles that will help your design

Hick’s Law – Don’t give them too many options

Miller’s law – Chunk rather than confuse

Jakob’s law – Know the rules if you want to break them

Gestalt Principles

Similarity

Continuity

Closure Proximity

Common region

Focal point

Figure/Ground

Psychology of Colors

Dark patterns – Abusing design psychology

Disguised ads

Misdirection

Human-centered design

First of all, let’s take a look at user-centered design and human-centered design. While they are similar, there is an important distinction to make. While user-centered design focuses only on a certain group of people, i.e. your target users, human-centered design utilizes the general knowledge of psychology.

Yes, a solution can be both user- and human-centered, and that’s great. However, while chasing the needs and wants of their users, designers often forget to take advantage of psychological principles that could have a big impact on their solutions and how intuitive they seem.

Daniel Kahneman, the author of Thinking, Fast and Slow differentiates between two models of thought: System 1 is fast, instinctive, and emotional, while System 2 is slower, more deliberate, and more logical.

DanielKahneman-ThinkingFastAndSlow

Products become truly intuitive when they fit System 1, as it connects some traits that all humans share regardless of age, culture or language. If you consider System 1, you can create universally understandable solutions – and that’s what human-centered design is all about. That’s why user-centered design backed by human-centered design can be so powerful.

A good test of human-centered design is the squint test, in which the participant looks at a design through squinted eyes. This reveals macrostructures as they appear in our peripheral vision. Peripheral vision taps into System 1, whereas focal vision taps into System 2. Peripheral vision doesn’t notice fine details of text, icons and symbols; it only picks out relatively coarse design elements.

While navigating through our world, we use our peripheral vision much more than our focal vision. In design, however, content and meaning are often conveyed only through the use of fine, high-resolution details.

Psychology offers us a ‘blueprint’ for how people perceive and process the world and different shapes around them. As designers, we should leverage this knowledge to create more intuitive, human-centered products.

By using some key principles, we can design for people first and then focus on our target users. Let’s take a look at some principles that will help you to speak the universal language of great design.

The test of learning psychology is whether your understanding of situations you encounter has changed, not whether you have learned new fact.

Daniel Kahneman

Psychological principles that will help your design

 

Hick’s Law – Don’t give them too many options

Design should always strive for clarity. You never want to overwhelm your users. This directly relates to Hick’s Law, which states that:

“The time it takes to make a decision increases with the number and complexity of choices available.”

Just think about a restaurant that offers 50+ items and a bistro offering 5 seasonal dishes. It takes much more time and energy to decide what you want to order from the big menu. Not just that, you might second-guess your choice or be more likely to think that you’ve made a mistake if your dish is not exceptional. That’s not a great feeling.

In the worst-case scenario, too many choices can make an undecided user leave your product or service. They might feel so overwhelmed that they decide it’s not worth the effort of deciding what they want.

That’s why designers are recommended to keep any options, including buttons, pictures and pages, to a minimum. The usability of the product is much better once you’ve removed unnecessary choices and therefore lessened the cognitive load.

Cognitive load is something that you should consider in your design. It refers to the mental processing power being used by our working memories. Our brains are similar to computer processors in that we have limited processing power and when we exceed it, our performance suffers and we don’t feel great. People use your product with a specific goal. Don’t confuse them by providing too many choices.

You can see practical applications of Hick’s law when you look at products designed for seniors who aren’t tech-savvy. Check out this mobile phone and remote control:

In both cases, pretty much anything that could confuse the user has been removed.

Slack also does a great job of using Hick’s law when onboarding new users:

They hide all of the features and reveal them one by one as they take you through their interface. This is a great way of introducing a workflow to your users without them feeling overwhelmed.

If you have to decide between a clear but less flashy design, or something seemingly more impressive but busier overall, always go for the clearer option. That’s what users want. A survey by Hubspot shows that visitors value easy to find information more than they do beautiful designs or fancy UX.

Miller’s law – Chunk rather than confuse

Miller's Law

Another interesting psychological principle that’s somewhat related to Hick’s law is Miller’s law. Miller’s law contends that:

“The average person can only keep 7 (± 2) items in their working memory.”

It originates from a paper published in 1956 which discussed the limits of short-term memory and memory span, and it partially explains why having too many options makes us feel uncomfortable.

However, we won’t hang on to the magic number 7. As designers, the most important concept that we can glean from Miller’s law is chunking, which can be an incredibly useful tool – especially when it comes to web design.

Basically, chunking refers to visually grouping related information into small, distinct units. In doing this, related elements and content are easier to process and understand, and it helps users to gain a better understanding of relationships and hierarchy. It also enables people to scan your design and identify what they are interested in, which is aligned with how we consume digital content.

One of the simplest and most effective examples of chunking is the way in which we format phone numbers:

2034589967

VS

203-458-9967

Instead of a string of 10 numbers, we see 3 chunks that are easier to convey and remember.

Chunking is also on display on most news sites (like the BBC). Articles are grouped by category and the most important information from each article gets ‘chunked’ into a short thumbnail.

The familiarity of this particular layout brings us to the next principle of design psychology…

Jakob’s law – Know the rules if you want to break them

Put forth in 2000 by usability expert Jakob Nielsen, Jakob’s law says that:

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.”

Jakobs Law

Okay, that doesn’t sound inspiring at all. But bear with me!

People tend to develop an expectation of design patterns based on their experience of using similar products or services. This principle encourages designers to follow common design patterns in order to avoid confusing users, which can result in a higher cognitive load.

People naturally form mental models about things that they encounter throughout their lives. A mental model is their knowledge of how something works, and it tells them what they can expect from a similar product or service. They’ll use their knowledge from past experiences when interacting with something new.

Great user experiences happen when the mental models of both the designer and the user are aligned. For this reason, user research should always try to understand a user’s pre-existing mental models and how these apply to the product that you are designing.

An example that we’re all familiar with is e-commerce store filters. People are accustomed to them and it would probably feel weird and clunky if you dramatically changed them.

Do the pattern recognition principle and the importance of mental models mean that you can’t change anything and be innovative? On the contrary! As weird as it may sound, understanding what people expect and the psychology behind it is crucial for successful innovation!

As Kaaren Hanson, the former head of design innovation at Intuit and Facebook’s current Product Design Director, explains: “Anytime you’re trying to change people’s behavior, you need to start them off with a lot of structure, so they don’t have to think. A lot of what we do is habit, and it’s hard to change those habits, but having very clear guardrails can help us.”

It’s key that people feel familiarity even when you change something. You have to guide them, and our next principles are exactly what you need to do that.

Gestalt Principles

Gestalt Theory Gestalt theory Gestalt theory

Gestalt principles are almost 100 years old, but they are still as relevant as ever. The word “gestalt” in this context means ‘unified whole’, and the theory explores people’s visual perception of elements in relation to each other.

Gestalt principles show how humans naturally unify and connect elements into groups. It’s useful knowledge for designers, as it guides the eye, helps users to understand the hierarchy of the elements, and clearly conveys your design’s intention.

Similarity

The principle of similarity asserts that when things appear similar to each other, people group them together. They also tend to think that similar elements have the same function.

Similar objects or elements are usually defined by shape, color, size, texture or value – any of these can be used to show that certain elements are related (similar) or not related (different).

Let’s take color as an example. It can connect or clearly divide elements.

Here, it connects the abstract logo of the panda with the name, as well as giving meaning to the abstract shape above the text.

Below, color clearly divides the two sections of the website and distinguishes their purpose. At the same time, it also connects parts of the text with the same function – hyperlinks – as they are all blue.

Continuity

According to continuity, the human eye moves naturally from one object to another. Whenever our eyes begin to follow something, they will continue to travel in that direction until they encounter another object.

This can serve as a valuable tool when you want to guide someone’s eye in a particular direction. You know the eyes want to follow the simplest route, so make it easy for them to do this by putting all of the most important elements along this path.

Amazon (and many others) take advantage of this principle when showing you related product listings. They know that your eyes will naturally follow a line, so they use horizontal sliders in order to leverage that knowledge.

They even use the principle of continuity in their logo by adding an arrow that points you from A to Z, which conveys the message that they offer everything (from A to Z)

Closure

Closure is a principle based on the human eye’s tendency to see closed shapes. Closure works when the human mind fills in the missing parts of an incomplete object. It also demonstrates just how much our brain dislikes incomplete shapes.

Take a look at this GIF. Do you see a bunch of dots or a moving dalmatian dog?

The principle of closure is often used in logo design.

Proximity

The principle of proximity is quite simple: when things are close together, they appear to be more related than things that are farther apart. Our eyes perceive them as a group rather than individually, even if they aren’t similar.

Proximity overrides similar colors, shapes and other elements.

You can see proximity at work when filling out forms. The text closest to the empty field tells you what information you need to provide. If the text was immediately below each field instead, the form could quickly get confusing.

Common region

This one is highly related to the proximity principle. It states that people perceive objects as a group when they are located in the same region. That’s why you should use borders and visible barriers when you want to create separation, even if the elements are similar or the same.

Focal point

If something stands out visually, it will capture the viewer’s eye – it’s as simple as that. If your goal is to ensure that your user notices something, you should make it impossible to miss.

That’s why annoying and aggressive pop-ups work better than subtle sign-up forms at the end of the page.

Figure/Ground

People instinctively perceive objects as being either in the foreground or the background. They do it quickly and subconsciously.

This is a classic example:

However, you don’t want your design to be ambiguous. You want users to be able to immediately distinguish the background from the element that they should be focusing on.

As you can see, our brain tends to create structure following some interesting rules. It’s good to know these and use them to your advantage in order to create clear and intuitive designs.

Psychology of Colors

Psychology of colors studies the influence of colors on the human mind, behavior, and reactions. The field is too complex to fully explore here, but as colors do impact user’s perception, we’ll quickly go over a few things.

As a designer, you should know what feelings are evoked by certain colors if you want them to enhance your design and convey the right message and tune. If you’re aiming for a mellow, relaxing page, you certainly don’t want to use a red background.

Here’s a list of a few basic colors and the things that they’re associated with:

Red – passion, strong feelings, love, confidence, anger, intensity.

Orange – energetic, warm, exciting. Interestingly the most disliked color by both sexes.

Yellow – happiness, sunlight, joy, warmth.

Green – harmony, balance, nature, reliability, growth. May also mean inexperience.

Blue – calm, trust, security, wisdom, sadness. The most liked color by both sexes.

Purple royalty, wealth, mystery, magic, spirituality.

Black – authority, discipline, power, control, tragedy, death. It depends on how it is used and which color accompanies it.

White – purity, innocence, wholeness, clarity.

However, the same colour can have different meanings across different cultures. As a designer, you should look into these variations if you’re designing for a foreign market, or you may trigger an unexpected response.

Let’s take a look at yellow, a colour that is generally associated with optimism, good energy, and cheerfulness. Yet in Germany, yellow is also the colour of jealousy, and many German people don’t necessarily like to give yellow flowers. In Japan, yellow is for the brave and courageous. It stands for people who are not afraid of anything. In Russia, people refer to mental hospitals as “yellow houses”, so it’s not always seen as an optimistic color.

These are some basic principles that you can use to enhance your design. Unfortunately, some designers use design psychology for shadier purposes…

Dark patterns – Abusing design psychology

Design psychology also has a darker side, where certain human tendencies are exploited. Such design is called dark patterns.

A dark pattern is a misleading or otherwise deceptive design decision that tries to exploit human psychology to get users to do things that they don’t really want to do.

I’m sure that you know the classic “YOU WON” pop-up.

It might seem silly now, but back when it all began it sure fooled a lot of people.

We know that people don’t read every word on every page of the web. They scan and make assumptions. If someone wants to trick you into doing something, they’ll do it by purposefully leading you to make wrong assumptions.

There are many dark patterns but we’ll focus on two – just enough to see design psychology at work. If you want to see the whole list, visit the site dedicated to exposing Dark Patterns.

Disguised ads

This pattern disguises ads and gets the user to click on them because they think that the ad is something else. It’s often used on free download sites, such as the one below (DaFont). You can see the actual download button in the top right corner. It’s much smaller and less visible compared to the big download ad, which has nothing to do with the font. Yet it looks like a part of the page. It uses similarity and proximity to make it seem like it belongs there.

If you do click on it, it starts downloading who knows what or takes you to another spammy webpage.

Misdirection

Misdirection takes advantage of scanning instead of reading. It often guides your attention to a specific place so that you won’t notice something else that’s happening.

A great example is the installation process of Skype or other software. We don’t really read every popup window; we just want to click “Next” or “Continue” until it’s done.

So if Skype decides to pre-tick the boxes to make Bing our primary search engine and MSN our homepage, there’s a good chance that you’ll miss it. Did you want that? No, but Skype pretty much tricked you into doing it by knowing how users usually go through the installation process.

There are also much more subtle dark patterns at work. You’ll probably agree that social networks put a lot of effort into how they can keep us glued to the screen. They’re fully aware that it’s not great for people, but it’s good for business. They still implement features like infinite scroll and ensure people get notifications that give them a tiny dopamine boost, which makes users addicted to their product.

As designers, our responsibility is to create products and experiences that support and align with the goals and well-being of our users. We should question what we should and shouldn’t design. Just because we can create something and it’s good for business, doesn’t mean that we necessarily should. Always question whether your user would want the end result of your design.

You don’t have to be a design psychologist to leverage the power of psychology of design. Being aware of these basic design principles will help you to consider how people actually act and draw connections between things.

Nothing should replace actual user research and data analysis in your design process, but you can use this knowledge to serve as a guide for designing more intuitive, human-centered products and experiences.

Design principles

LEARN MORE

Download Design Strategy e-book
Join Email newsletter
Romina Kavcic profile image

👋 Oh hey,
I’m Romina.

Design strategy consultant. Founder of DesignStrategy.guide and NUEVA / design studio. Wife. Mother.

I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across both tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, Singularity.NET, etc. I currently advise, coach and consult with companies on design strategy & management, visual design and user experience. My work has been published on Forbes, Hackernoon, Blockgeeks, Newsbtc, Bizjournals, and featured on Apple iTunes Store.

More about me Let’s connect on Linkedin  *  Twitter

Comments

comments