Design Psychology

A curated collection of psychology principles, cognitive biases and behavioral patterns used in product design.

Scan

Users just scan a small amount of information and block redundant and unnecessary information out. These principles help structure information for minimal cognitive effort.

Anchoring Users rely on the first piece of information they are given

Definition

Anchoring is a cognitive bias that causes users to rely too heavily on the first piece of information they are given about a topic. Users interpret new information from the reference point of their anchor instead of seeing it objectively.

Example

Set a user friendly and easy to understand anchor that underlines the personal benefits for your user. Buying premium for 9.99€ to save 50€ of order fees can feel more valuable than only saving 5€.

Anchoring example

Real Life Example

When comparing iPhone models, Apple is always using their most expensive item as an achor first. Every model after that seems like the cheaper option. Anchoring was one of the main reasons Apple introduced Pro and Pro Max versions of their products a few years ago. This was a psychological model to justify the price points of the regular models.

Anchoring real life example

Tips

  • 🚫 Do no fake high priced items to justify your discounts price.
  • ✅ Show expensive items first, so every item after that seem like a good deal.
  • ✅ You can show numbers unrelated to the initial product to influence the perception.
Banner Blindness Users intuitively block out banners and ads

Definition

Banner Blindness describes users tendency to ignore page elements that they perceive as ads. Brains sort information and block irrelevant information.

Example

Banners that are obviously designed and placed as advertising are often blocked out of perception.

Banner Blindness example

Real Life Example

Google noted early on the negative effect of banner blindness. Therefore they designed their ads similar to search results and placed them as the top results with a little "Ad" badge.

Banner Blindness real life example

Tips

  • ✅ Don’t place information close to ads
  • ✅ Don’t make information look like an ad
  • ✅ Use methods like „Anchoring, Priming & Personalization“ to avoid Banner Blindness
Cognitive Load The amount of mental effort required to understand information

Definition

Cognitive load relates to the amount of information your working memory can hold at one time. Working memory has limited capacity, so avoid overloading it with activities that don’t directly contribute to learning.

Example

Reduce unnecessary items and visual noise. If a user wants to select a free seat, unavailable seats can stay neutral while available ones are highlighted.

Cognitive Load example

Real Life Example

Zettle takes the long process of creating an account, and breaks it into steps. Then, between each step, they have feedback pages, which gives the user a chance to pause, relax and reset.

Cognitive Load real life example

Tips

  • ✅ Keep it short and simple – Split steps when needed.
  • ✅ The more information the heavier the cognitive load.
  • ✅ Reduce visual noise using fewer and less saturated colors.
Confirmation Bias Users look for information consistent with their existing beliefs

Definition

Confirmation bias is the tendency to process information by looking primarily for information that is consistent with existing beliefs. This often results in ignoring inconsistent information.

Example

Fake news spreads easily when it confirms what people already believe, especially in closed or radicalized communities.

Real Life Example

Fake News are very popular on Telegram because our brain loves information that conforms what we already believe. This bias is often abused by radical groups trying to spread fear with fake news based on what people might think they believe regardless of the facts.

Confirmation Bias real life example

Tips

  • 🚫 Do not create fake news.
  • ✅ Stick to facts and statistics.
  • ✅ Provide source for your information.
  • ✅ Double check the authenticity of your source.
Hick's Law More choices take longer to make a decision

Definition

Hick's Law states that the more stimuli or choices users face, the longer it will take them to make a decision.

Example

Minimize unnecessary options, hide secondary actions, and provide useful defaults to reduce decision complexity.

Hick's Law example

Real Life Example

Amazons remote is a great example. While old remote controls were overloaded with buttons the Amazon Fire TV remote scrapped all unnecessary Buttons and reduced the amount to a minimum of 7 to make it easier for the user to make a decision.

Hick's Law real life example

Tips

  • ✅ Reduce the amount and complexity of choices.
  • ✅ Categorize & hide choices behind menus if possible
  • ✅ If you can’t categorize them, make sure you put them into an order easy to quickly scan through
Progressive Disclosure Users are less overwhelmed when complex features are revealed later

Definition

Progressive Disclosure sequences complex features across several screens. The focus is to provide the bare minimum first and reveal advanced features later.

Example

Encourage users to complete simple actions before moving forward to more complex ones.

Progressive Disclosure example

Real Life Example

The dating app Tinder is a great example of how to use this method. In order to not overwhelm new users, Tinder start with simple with the minimum functionality of "Like" and "Dislike" . After a while tinder is introducing new features one by one. This way the user gets time to get used to the features for a while before being introduced to new & complex ones.

Progressive Disclosure real life example

Tips

  • ✅ Reduce the amount of actions to reduce the chance a user will feel overwhelmed
  • ✅ Show only a few features
  • ✅ Reveal new and advanced features later
Tesler’s Law Simplifying too much transfers complexity back to the user

Definition

Tesler’s Law, also known as the Law of Conservation of Complexity, states that every digital product has a certain amount of complexity that cannot be reduced.

Example

Highlight only one card or task at a time to reduce overload while keeping the necessary complexity of the product.

Tesler’s Law example

Tips

  • ✅ Increase the usability instead of minifying the process.
  • ✅ Ensure to reduce the amount of complexity a user has to deal will.
  • ✅ Don’t simplify to the point of abstraction.
Von Restorff Effect Elements that stand out are more likely to be noticed

Definition

The Von Restorff effect, also known as the Isolation Effect, predicts that when similar objects are present, the one that stands out is most likely to be noticed and remembered.

Example

In pricing tables, the middle plan often stands out and is combined with Anchoring or Social Proof.

Von Restorff Effect example

Real Life Example

This effect is commonly used on almost every e-commerce site that offers various plans. You can notice it that usually the plan in the middle is standing out. This effect is often combined with the biases Anchoring and Social Proof.

Von Restorff Effect real life example

Tips

  • ✅ Make important elements stand out visually
  • ✅ Don’t rely one color only. Use size, form and value to create contrast.
  • ✅ Avoid repeating patterns (Law of Similarity).
Priming Previous stimulus that influences a user’s decision Coming soon
Selective Attention Users focus on particular input while blocking out other information Coming soon

Interpret

Users interpret what they scan and fill gaps with assumptions based on personal experience.

Decoy Effect Adding a middle priced item between cheap and expensive options

Definition

The decoy effect describes how adding a third, less attractive option can influence perception of the original two choices.

Example

A middle option can become a reference point and make the larger option feel like a better deal.

Decoy Effect example

Real Life Example

When comparing Apple products they usually show up to 3 products and use a selected middle product as reference. For example: The middle product costs 200$ more than the cheaper option. But the expensive product costs only 100$. Therefore the it seems like a good deal to choose the expensive product.

Decoy Effect real life example

Tips

  • 🚫 Do not provide false information.
  • 🚫 Do not try to frame by adding irrelevant options/prices.
  • ✅ Make it easy to compare.
  • ✅ Show items that are related.
  • ✅ Be transparent and let your user decide whats the best deal „for the user.
Familiarity Effect Users prefer familiar experiences

Definition

The Familiarity effect describes how repeated exposure and previous experience increase preference for familiar things.

Example

A 3D battery model can make a concept obvious because it connects to real-world experience.

Familiarity Effect example

Real Life Example

Digital product like Spotify , Apple Music and many more create similar interfaces to provide their users a familiar experience.

Familiarity Effect real life example

Tips

  • ✅ Adapt to your users previous experiences
  • ✅ Use objects from the real world
  • ✅ Use similarities
Framing Wording affects decisions more than the information itself

Definition

Framing is a cognitive bias where choice is influenced by how information is presented and worded rather than by the information itself.

Example

Paying 80% and saving 20% can describe the same information, but “save 20%” is often perceived as more beneficial.

Framing example

Real Life Example

Framing is a common bias used in the food industry to frame benefits of new products. You have the exact same information, yet you perceive it different.

Framing real life example

Tips

  • ✅ Focus on the benefit
  • ✅ Use positive and emotional wording
  • ✅ Keep it simple
Law of Prägnanz Users remember complex images in their most simple form

Definition

Users tend to interpret and remember complex images as the simplest form possible because it requires the least cognitive effort.

Example

Product icons are simplified because detailed realistic imagery requires too much cognitive effort to store and recall.

Law of Prägnanz example

Real Life Example

Most digital products like Instagram and Tiktok completely rely on simplified icons as navigation elements. Those icons are learned symbols that imply certain functionality – "Mental Model" –. Some of them don't even use labels which I personally wouldn't recommend due to less accessibility.

Law of Prägnanz real life example

Tips

  • ✅ Do not overwhelm Users with information and complex imagery
  • ✅ Use simplified icons and forms rather than complex images
  • ✅ User will automatically simplifie complex shapes into single unified shape
Law of Similarity Users assume similar looking items are a unified group

Definition

The Law of Similarity states that elements similar to each other tend to be perceived as a unified group. Similarity can refer to color, orientation, size, or motion.

Example

Consistent layout patterns help users identify related elements and understand functionality.

Law of Similarity example

Tips

  • ✅ Use the same layout patterns for elements that are similar
  • ✅ Make sure interactive elements are visually different from non-interactive elements
  • ✅ Be consistent with your design decision throughout the project
Mental Model Users already have an idea of how something works

Definition

A mental model is an explanation of a user’s thought process about how something works. Users draw conclusions from real-world experience and expectations.

Example

Comparing a new music product to Netflix can help users understand the concept faster.

Mental Model example

Tips

  • ✅ Persuade users by comparing your product/service. (Spotify - Just like Netflix but for music)
  • ✅ Use objects & behaviors of the real world and adapt them into your product
  • ✅ Be aware of what users tend to expect before using your product
Miller’s Law Users only keep 7 (+/-2) items in working memory

Definition

Miller’s Law states that the average person can hold about 5–7 items in working memory. Break information into chunks when users need to choose.

Example

Overloaded menus are harder to remember; reducing and categorizing options makes navigation easier.

Miller’s Law example

Real Life Example

Fast Food restaurants are using this method to prime centain items on the menu. They using 7 focal points on their displays so their user can hold those items in their working memory and not get overwhelmed with options.

Miller’s Law real life example Miller’s Law real life example

Tips

  • ✅ Design for users short term memory – Don’t make me think
  • ✅ Reduce information and organizing it into smaller chunks
  • ✅ Reduce the amount of choices to a maximum of 5-7. (Don’t need to be exactly 7)
Pseudo-Set Framing Incomplete sets or groups are more likely to get completed

Definition

Pseudo-Set Framing motivates users to complete a task because complete, cohesive units feel meaningful.

Example

A simple 80% of 100% progress indicator feels easier to complete than a complex distance-based goal.

Pseudo-Set Framing example

Tips

  • ✅ Set a specific goal a user can reach
  • ✅ Group tasks in chronological order
  • ✅ Use Numbers & Progress Bars to visualize progress
Scarcity Users value things that are limited

Definition

Scarcity refers to limited availability compared to demand. Limits can be amount-based, access-based, or time-based.

Example

Airbnb can show that a property is normally booked to encourage quick booking and imply social proof.

Scarcity example

Real Life Example

On some listings, Airbnb will display a message that this property is normally booked. This encourages quick bookings, and implies social proof .

Scarcity real life example

Tips

  • 🚫 Do not use this method to pressure your users
  • ✅ Label limited or popular products.
  • ✅ Products can be Amount-Limited, Access-Limited or Time-Limited
  • ✅ Offer special and limited discounts or gifts as a reward for users using your product/service
Singularity Effect Users show more empathy toward one person than a group

Definition

The Singularity effect describes how people care disproportionately about an individual compared to a large group. Compassion can fade as more people are involved.

Example

Brands often benefit from recognizable individuals, because people empathize with individuals more easily than companies.

Singularity Effect example

Real Life Example

Who’s the first person that comes into your mind when I ask about the company Apple? And who’s the person that comes into your mind when I ask about Tesla Motors? If you though about Steve Jobs and Elon Musk you’re right. Because these companies use the singularity effect in benefit for their brand. People are able to emphatize with individuals rather than large companies.

Singularity Effect real life example

Tips

  • ✅ Tell a story
  • ✅ Use a protagonist users can relate to
  • ✅ Use specific user or user feedback as a testimonial
Skeuomorphism Humans are familiar with elements based on real objects

Definition

Skeuomorphism uses visual elements that mimic real-world objects or materials. It is rooted in familiarity with the physical world.

Example

Early iOS apps used notepad, calendar, and contacts metaphors to bridge digital and physical experiences.

Real Life Example

Apple’s were known for the use of skeuomorphism in their iOS versions as a way to make their digital products more familiar to users who were used to physical objects in the real world. For example, the Notes app looked like a yellow notepad, the Calendar app looked like a physical calendar, and the Contacts app looked like a rolodex. This approach helped to bridge the gap between the digital and physical worlds, making it easier for users to understand and interact with their devices.

Skeuomorphism real life example

Tips

  • ✅ Use it only when it serves a purpose or functionality.
  • ✅ Use it consistently to create a cohesive and seamless user experience.
  • ✅ Avoid going overboard with skeuomorphic design.
Social Proof Users adapt what others do

Definition

Social proof describes how users copy the actions of others to emulate behavior and outcomes in certain situations.

Example

Ratings, reviews, and “Most Popular” badges can increase trust when based on valid data.

Social Proof example

Real Life Example

Be aware that you dont have control about your users feelings and that a bad review can have negative impact. In the example of the Facebook App, ratings dropped from a 4.7 down to a 2.2. due to user frustration with the service. Spotify on the other hand, doesn't provide any metrics about the popularity of shows or episodes.

Social Proof real life example

Tips

  • ✅ Use authentic user generated content like ratings, comments & feedback
  • ✅ If a decision has to be made, show which decision/product is the „most popular“ by users
  • ✅ Motivate users to take action by showing them the number of users who already did it.
The Cheerleader Effect Items look more attractive in a group

Definition

The Cheerleader effect causes people to perceive individuals or items as more attractive when they are presented in a group.

Example

Restaurants and brands often place related items around a hero product to make it more interesting.

Cheerleader Effect example

Real Life Example

This effects also works on products. Did you notice – Fast Food Restaurants carefully placing other products around their specials Burgers to make them more interesting. Sometimes even priming Burgers in menus rather than showing the individual Burger.

The Cheerleader Effect real life example

Another Example: Apple is know for minimalistic presentation of their products. Yet if you pay attention you notice Apple taking use of the Cheerleader Effect. They often place another similar products around their focused product.

The Cheerleader Effect real life example

Tips

  • ✅ Group items carefully around your subject
  • ✅ Create a scene for your subject
  • ✅ Use similar items to avoid comparison
Zero-Risk Bias Users want to feel safe and secured

Definition

Humans have a natural desire to feel safe and secure. Zero-risk bias reduces doubts by eliminating perceived risk.

Example

Netflix reduces perceived risk by reassuring users that they can cancel their subscription every month.

Zero-Risk Bias example

Real Life Example

Netflix is providing security by ensuring their users they can cancel their subscription every month.

Zero-Risk Bias real life example

Tips

  • ✅ Understand your users fears.
  • ✅ Communicate your service standards and reduce risk.
  • ✅ Communicate why you need critical data like Credit Card or Phone Numbers.

Act

Users jump to conclusions based on presented information, which influences their actions.

Default Effect Users prefer to keep the default option since it requires less effort

Definition

Without a compelling incentive to change, people tend to stick to the default suggestion, option, or product.

Example

Amazon uses “subscribe and save” as a default option for repeat goods.

Default Effect example

Real Life Example

When browsing for 'repeat goods' (for example: Shampoo), Amazon will have their default option as 'subscribe and save'.

Default Effect real life example

Tips

  • ✅ Add default options to your process.
  • ✅ Defaults help your users get fast and easy to their goal – Anticipate their behavior with Default.
  • 🚫 Don’t use this method to manipulate your users.
Fitt’s Law Close and large interface elements are easier to use

Definition

Fitts's Law describes how long it takes a user to hit a target. Size and distance are important for quick action.

Example

Small or hard-to-reach mobile controls decrease usability because users need extra effort to hit the target.

Fitt’s Law example

Tips

  • ✅ Design interactive elements to be large and easy to act with
  • ✅ Place interactive elements where they are easy to reach
  • ✅ Place interactive elements where they expected. For example a menu is expected to be on top
Gamification Using game elements to encourage engagement

Definition

Gamification uses elements of game playing such as points, competition, and rules to encourage engagement.

Example

Duolingo uses XP and streaks to make learning feel more rewarding and fun.

Gamification example

Real Life Example

Duolingo is a learning app with a concept build around gamification in order to make learning „fun“. They will use 'XP' (experience points) and 'streaks' to incentivise people to use their app more.

Gamification real life example

Tips

  • ✅ Focus on a delightful and playful experience.
  • ✅ Reward users for reaching milestones or completing tasks.
  • ✅ Add playful animations and interactions.
Hyperbolic Discounting Users prefer smaller immediate rewards over larger later rewards

Definition

Hyperbolic discounting is a cognitive bias where timing matters more than the reward itself.

Example

Immediate small rewards after task completion can be more effective than larger rewards promised later.

Hyperbolic Discounting example

Real Life Example

Amazon gained popularity by granting free shipping for orders of 25$ and more. In addition every time you buy something offer you to upgrade to amazon prime by giving you instant benefits to it like e. g. Same day delivery.

Hyperbolic Discounting real life example

Tips

  • ✅ Offer small rewards.
  • ✅ The immediate accessibility of the reward is more important than the value of itself.
  • ✅ Rewards motivate users to accomplish their tasks.
Loss Aversion The fear of losing is higher than the value of gaining

Definition

Users prefer not to lose something more than they value gaining something. The value of losing can feel higher than the value of getting.

Example

Amazon Prime cancellation screens focus on the benefits users would lose by cancelling.

Loss Aversion example

Real Life Example

Amazon Prime provides a lot of benefits for their prime customer. On the cancelation screen they focus on the potential loss of your personal benefits you gained throughout your subscription.

Loss Aversion real life example

Tips

  • ✅ Focus on the users benefits.
  • ✅ Express potential loss rather than potential gain.
  • ✅ Use scarcity.
Nudge Hints that affect users decisions

Definition

A nudge guides users without forcing them. Small clues or context changes can encourage decisions and should be easy to avoid.

Example

Default reply buttons or placeholder text can encourage users to respond with less effort.

Nudge example

Real Life Example

Linked In makes a good job nudging users into reaction to posts by giving default messages as options.

Nudge real life example

Tips

  • ✅ Use default options
  • ✅ Communicate clues
  • ✅ Users need to understand the benefits quickly to have an internal motivation to act
Dark Pattern Interactions crafted to trick users into doing things Coming soon
Operant Conditioning Behavior followed by pleasant consequences is likely repeated Coming soon

Remember

Users are more likely to remember a delightful experience.

Delighters Users remember new, unexpected and playful pleasures

Definition

Users remember and respond favorably to small, unexpected, playful pleasures when they match expectations and appear at the right moment.

Example

Mailchimp uses illustrations to add emotion during the journey of sending emails.

Delighters example

Real Life Example

Mailchimp has great deligthers throughout their user journey by using illustrations to add emotion to the process of sending mails.

Delighters real life example

Tips

  • ✅ Reward your users after or during a task.
  • ✅ Delighter users AFTER basic expectations of the product/service are met.
  • ✅ Delight with playful interactions, illustrations or hints.
  • 🚫 Can have a negative impact when basic expectations are not met.
Endowment Effect People overvalue things that they own

Definition

The endowment effect describes how people value items they own more highly than items they do not own.

Example

Free trials can work because people invest time into personalization and do not want to lose access.

Endowment Effect example

Real Life Example

This cognitive bias is one of the reasons why free trials are often so effective. People invest time into their account (e.g., profile pictures, setting themes and colours), and then they don't want to lose access to the benefits that they have gained.

Endowment Effect real life example

Tips

  • ✅ Offer trials.
  • ✅ Reduce barriers and friction.
  • ✅ Personalisation/Customization increase the feel of owning.
IKEA Effect People value things higher when they created them

Definition

The IKEA effect describes how we overvalue things we are involved in making or completing.

Example

Spotify encourages new users to create playlists, which can make the product feel more personal and sticky.

IKEA Effect example

Real Life Example

Spotify encouraging new users to create their own playlist. This is sticky, because once users have curated their favourite songs, they won't want to lose those playlists forever. This can decrease churn when transitioning into a subscription.

IKEA Effect real life example

Tips

  • ✅ Encourage users to create something.
  • ✅ Allow customization of your products.
  • ✅ Give users creative freedom.
Labor Illusion Users tolerate waiting when they can see work being done

Definition

Labor Illusion says users tolerate longer waiting times when they can see effort being made toward a result.

Example

Showing matchmaking progress in an online game can make waiting feel more acceptable.

Labor Illusion example

Real Life Example

Most online games have a waiting time before players are found for your match. Overwatch for example shows you only how long you are waiting. But the user is left without any process or visual information about the status. A better solution would be to display the status about the players that were already found. With this information users tend to tolerate longer waiting time if they see how many players were actually found.

Labor Illusion real life example

Tips

  • ✅ Add visual Indicators.
  • ✅ Show that work is being done.
  • ✅ Display information about the process.
  • 🚫 Caution: Can expose a flawed process and have a negative impact.
Negativity Bias Users give more weight to negative experiences than good ones

Definition

Users often remember negative moments more strongly than positive ones. Negative experiences can affect memory disproportionately.

Example

Frame your product around solving a bad experience or reducing a pain point.

Negativity Bias example

Tips

  • ✅ 1 negative emotion = 3 positive emotions.
  • ✅ Show how your product/service solves negative experiences.
  • ✅ Start with a question.
Social Comparison Bias The feeling of competitiveness with others

Definition

Social comparison bias creates feelings of competitiveness with people perceived as better, which can motivate improvement.

Example

Nike scoreboards and Duolingo leagues motivate users by letting them compare progress.

Social Comparison Bias example

Real Life Example

Nike for example uses scoreboards to motivate users challenge each other to run more. This has a positive impact not only on the mental strength, running is also a healthy workout. Duolingo is a learn app which split their scoreboard into leagues to add a factor of competitiveness.

Social Comparison Bias real life example

Tips

  • ✅ Add Leaderboards.
  • ✅ Let users compare their performance/progress with others.
  • 🚫 Bad implemented social comparison can have a negative impact and cause frustration.
Frustrators Unexpected moments that cause user frustration Coming soon
Peak-End-Rule Users judge an experience based on its peak and end Coming soon
Reward Effect Users feel more engaged when being rewarded Coming soon
Zeigarnik Effect People remember unfinished or interrupted tasks better than completed tasks Coming soon