106 Cognitive Biases & Principles That Affect Your UX Design

Muhammad Yasir
10 min readSep 18, 2023

--

Cover

Every time users interact with your product, they:

  1. Filter the information
  2. Seek the meaning of it
  3. Act within a given time
  4. Store bits of the interaction in their memories

So to improve your user experience, we need to understand the biases & heuristics affecting those four decision-cycle steps.

This is the first of four blogs on cognitive biases & principles. Today we focus on ‘filtering the information’ and how it affects business decisions.

Filter the information

Today we discuss 11 cognitive biases,

  1. Hicks Law
  2. Conformation bias
  3. Priming effect
  4. Cognitive load
  5. Anchoring Bias
  6. Nudge
  7. Progressive disclosure
  8. Fitts’s law
  9. Banner Blindness
  10. Decoy effect
  11. Framing

Let me share a story. 💡

My friend Aamir started a start-up a few years ago. He had a fantastic product, but for some reason, people were leaving his website in a matter of seconds. He couldn’t understand it. Why didn’t they make an effort?

We spent a lot of time discussing user experience when Aamir approached me. We found some surprising trends, including cognitive biases and rules that quietly affect our behaviour without our knowledge.

Imagine walking into a store and finding two identical shirts. One has a price tag of $50, and right next to it, the same shirt is marked down from $100 to $50. Which one would you be more inclined to buy? Most would choose the latter, thinking they’re getting a great deal. But why? It’s the same shirt, same price. This, my dear readers, is the magic of the “Anchoring Bias.”

Anchoring Bias

1. Hicks Law:

More option leads to harder decisions

Pricing

Hick’s Law (or the Hick-Hyman Law) is named after a British and an American psychologist team of William Edmund Hick and Ray Hyman.

Hick’s Law predicts that the time and the effort it takes to make a decision, increases with the number of options. The more choices, the more time users take to make their decisions.

Examples:

Subscription models function on the same psychological principles. They work because the user has to go through more steps to cancel the subscription than to make another monthly purchase.

Subscription models
Example 2
Example from Aryan Indraksh

2. Confirmation Bias:

People look for evidence that confirms what they think

Confirmation bias

Confirmation bias, a phrase coined by English psychologist Peter Watson.

Confirmation bias is a cognitive error that occurs when people pursue or analyses information in a way that directly conforms with their existing beliefs or preconceptions. Confirmation bias will lead people to discard information that contradicts their existing beliefs, even if the information is factual.

Example:

For an investor or a business executive, it is important to strike the right balance between their belief system and the actual availability of data. The database gives a detailed idea of the reality of the concept and its implications. Moreover, the hierarchy in a business organization is framed to eliminate individuals’ biases at different levels.

Example of confirmation bias

Example 2:

Stick with familiar UI concepts, behavior, terms, signs, and icons. Be consistent across your marketing materials, website, and product to optimize the funnel.

UI Concepts

3. Priming Effect:

Previous stimuli influence users’ decision

Priming Effect

Subtle visual or verbal suggestions help users recall specific information, influencing how they respond. Priming works by activating an association or representation in users short-term memory just before another stimulus or task is introduced.

Example:

The aesthetics and look-and-feel of a page also create first impressions about a website and a business. Below, you can see the websites for two different Chinese-restaurants. You can probably easily identify which of the two restaurants is a chain just by looking at the homepage

Reference by N/N g Nielsen Norman Group

4. Cognitive Load

Total amount of mental effort that is required to complete a task

Cognitive load

Cognitive load is the total amount of mental effort that is required to complete a task. You can think of it as the processing power needed by the user to interact with a product. If the information that needs to be processed exceeds the user’s ability to handle it, the cognitive load is too high.

There are 2 types of cognitive load

Intrinsic load:

The effort required to keep track of goals and absorb new information.

Extraneous Load:

Processing that takes up mental resources, but doesn’t help users.

Example:

Removing unnecessary elements from a design can also help reduce cognitive load. This includes anything that doesn’t directly support the user’s goals. For example, if a user is trying to purchase a product from an eCommerce site, the checkout process should be as streamlined as possible. Any extraneous elements, such as links to other pages or sections, can just add to the user’s cognitive load and make it more difficult to complete the task at hand.

UI Concepts

5. Anchoring Bias:

Users relay heavily on the first piece of information they see

The anchoring effect is a cognitive bias whereby an individual’s decisions are influenced by a particular reference point or “anchor”. Both numeric and non-numeric anchoring have been reported in research.

Example:

You are considering buying a used car, and you visit a car dealership. The dealer walks you around, showing you all the higher-priced cars, and you start worrying that you can’t afford a car after all.

Example by Scribbr

Next, the car dealer walks you toward the back of the lot, where you see more affordable cars. Having seen all the expensive options, you think these cars seem like a good bargain. In reality, all the cars are overpriced. By showing you all the expensive cars first, the dealer has set an anchor, influencing your perception of the value of a used car.

Example by Scribbr

6. Nudges:

Subtle hints can effect user’s decisions

People tend to make decisions unconsciously. Small cues or context changes can encourage users to make a certain decision without forcing them. This is typically done through priming, default option, salience and perceived variety.

Example:

Nudges gives alerts: Reply reminders to follow up after a certain time to a message you sent or received.

Nudges: Mobile notification

Example 2:

If you’ve ever worn a smartwatch, you’ve likely experienced a nudge. Smartwatches nudge people to move by deploying notifications when a person has been inactive for a set amount of time. Oven timers, stoplights, and the gas light on your car are all examples of nudges that remind you to take action in your best interest.

Nudges: smart watch

7. Progressive disclosure

Users are less overwhelmed if they’re exposed to complex feature

Progressive Disclosure

An interface is easier to use when complex features are gradually revealed later. During the onboarding, show only the core features of your product, and as users get familiar, unveil new options. It keeps the interface simple for new users and progressively brings power to advanced users

Benefits

Example:

Mega menus are drop-down menus that usually appear on large web sites such as Amazon. By hiding the options by default, websites save more space for other essential elements, such as the search bar.

Example: Amazon

Example 2:

Lazy loading is an extremely useful technique when you have a lot of information to display and want to reduce . Scrolling provides a more comfortable experience than clicking — all the user needs to do to get new content is simply scroll down.

Example: Pinterest

8. Fitts’s Law

Large and close elements are easier to interact with

Example from Toptal

In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size.

The distance of the target is how far away that target is from wherever someone start out. Large target that have close by the lowest interaction cost while small targets that are far way have the highest interaction cost.

Fitts used a paradigm in which the participant tapped alternately between two target plates as quickly as possible. The separation between the targets (termed A, for movement amplitude) and the width of the targets (termed W, for target width) could be varied in different combinations

Fitts’s Law

Example:

Command buttons and any other interactive element in the graphical user interface must be distinguished from other non-interactive elements by size. Whilst it may seem obvious, user interface design often ignores that the larger a button is the easier it is to click with a pointing device. As interactive objects decrease in size there is a smaller surface area, requiring a level of precision that increases selection times.

Reference by N/N g Nielsen Norman Group

Example 2:

The outer edges and corners of the graphical user interface can be acquired with greater speed than anywhere else in the display, due to the pinning action of the screen.

Example from Google

Example 3:

Fitt’s Law states that the time required to acquire a target is a function of the distance to and size of the target. The longer the distance and the smaller the target’s size, the longer it takes to acquire the target.

Example from Shopify

9. Banner Blindness

Users tune out the stuff they get repeatedly exposed to

Example from Pitchfork

Users have learned to ignore content that resembles ads, is close to ads, or appears in locations traditionally dedicated to ads.

Our peripheral vision is picking up structures in the sense and helping to direct our central vision there where so we can focus on these details too.

Example:

Users learn quite quickly how a webpage is structured and where the ads are located in order to avoid them. Here eye-tracking shows that webpages are most commonly read as an F (Wojdynski & Evans, 2016) and banners are, on many websites, located on the right-rail, vertically on the right side of the page.

10. Decoy Effect: ✔

Behavioral Science to influence user decisions

Decoy effect

Adding a third pricing option makes the consumer change their preference towards an option the seller is trying to promote.

Option1:

Doesn’t meet our requirements and is not visually appealing, but it has an attractive price.

Option:1

Option 2:

Meets our requirements and generally suits our needs, but the price seems a bit steep.

Option: 2

Option 3:

Not only meets all of our requirements but exceeds them, and the price difference is too attractive to miss out on this opportunity.

Option: 3

Result:

The user purchases the most expensive option even though it exceeds their needs. The offer was too lucrative to resist.

User choice

11. Framing effect: 📖

The way information is presented affects how users make decisions

Example from The Design Lab

People are influenced by how information (or options) are presented.

This is true both individually (i.e., how this specific option is worded), and collectively (i.e., the range of available options).

The same facts (or options) presented in two different ways, will often lead to different outcomes.

Example from Built for Mars

Now, this is framed positively, which shows what the users can gain by doing this action. In this case, users get a 20% discount if they sign up.

Example:

Now let’s change to UI design, where we have a registration button with the following text:

“Sign Up”

Let’s frame the UX copy to:

“Sign Up and get 20% off”.

Framing effect

⭐ Conclusion

User experience (UX) is significantly influenced by cognitive biases and principles. One can create a digital interface that is more intuitive, user-friendly, and engaging by being aware of and addressing these design biases. Designers can forecast user behavior and enhance user interactions by using this knowledge.

👋Hey there, If you are interested in more UI/UX-related design topics do follow me on LinkedIn and check my Website

🌟 Thank you so much for your time and energy to read! 🤗✨📚

--

--

Muhammad Yasir
Muhammad Yasir

Responses (1)