What are the 4 types of cognitive bias?

According to Buster Benson's cognitive bias codex, every time a user interacts with a product, they :

  1. 🙈 Filter information
  2. 👀 Search for meaning
  3. ⏰ Act within a given timeframe
  4. 💾 Store elements of the interaction in their memory


So, in order to offer your users a memorable experience, you need to understand the biases that affect these 4 stages of the decision cycle.

Here's a list of 109 cognitive biases (with examples and tips for each) that strongly influence your users' thinking and behavior.‍

PS: No time to explore the whole list? Then all you have to do is download the cheat sheet at the bottom of the page.

PS 2: The idea and structure of the page are inspired by Growth Design and Buster Benson's codex.

What is a cognitive bais?

Although people like to believe that they are rational and logical, the fact is that they are continually under the influence of cognitive biases.

The human brain is powerful, but subject to limitations. Cognitive biases are often the result of your brain's attempt to simplify information processing.

Prejudices generally function as practical rules that help you make sense of the world and make decisions relatively quickly.

Why is it important to know about the different types of cognitive bias?

As a consumer or marketer, this will help you better understand how your brain works. The more you know about cognitive biases, the better you'll be able to understand how a product/customer works.

For a consumer: it's easier to see if a company is using these principles in an unethical way.

For a marketer: it's possible to leverage these cognitive biases for your website to increase your conversion rates by enabling :

  • Make your site navigation more intuitive and fluid for your visitors.
  • Reduce the bounce rate (the number of visitors who leave your site before finalizing their purchases or simply before finding the information they were looking for).

It's what we call design psychology. And it's what helps you make the right design decisions for your users.

🙈 Filter information.

Users filter out much of the information they receive,
even if it is important.

🎨

Visual hierarchy.

It's a logical structure of elements, arranged in order of importance.

Coming

Definition Visual hierarchy.

Visual hierarchy is the principle of structuring and organizing elements in order of importance.

The role of UI designers is to structure user interfaces, to make content easier and more fluid to understand.

By arranging elements logically and strategically, visual hierarchy influences users' perception and guides them towards the targeted action.

Examples Visual hierarchy.

1

In art and web design, any area of a composition devoid of visual elements is called white space.

This white space allows the visual elements of a web page to breathe, thus contributing to visual hierarchy.

In design, the composition of an illustration or any other element on a page allows you to play with visual hierarchy.

2

Bringing elements together creates groups. This is known as the law of proximity.

Without these groups, it would be more difficult to understand and differentiate elements such as navigation, content or advertising.

This would make it more difficult to know where to focus attention and which elements can be ignored or not.

On the Spotify app, you can see 3 different groups.

Increasing the space between groups makes each set distinct and individual. This hierarchy enables users to identify more quickly the element with which they want to interact.

3

Tips Visual hierarchy.

  • People read from top to bottom and left to right. Organize the content of your pages in an "F" shape (blog posts) or in a "Z" shape (site pages) to make reading easier and more fluid.
  • Size matters. People read what's biggest first. Make sure you make the most important elements bigger.
  • Let important elements breathe. Isolated elements attract attention. Large spaces around a button make it easier for readers to see.
🤳

Selective attention.

People tend to filter out things from your environment, ignoring the rest.

Coming

Definition Selective attention.

Selective attention is the psychological process where a person focuses on specific stimuli while ignoring others.

In UX design, this concept is crucial as it influences how users interact with a website or application.

Designers must understand what elements will likely capture users' attention and design interfaces accordingly to guide user focus effectively.

Examples Selective attention.

1

Google's search engine homepage is a classic example of selective attention in action.

The minimalistic design, with a prominent search bar at the center, naturally draws the user's focus to the main functionality - searching.

All other elements are secondary and less noticeable, ensuring that the user's attention is not diverted.

An example of selective attention with Google homepage
2

Apple's website, particularly its product pages, uses selective attention by highlighting key features of products through bold images and succinct text.

The design leads users to focus on the most important aspects of the product with a lot of whitespaces.

Apple's website as an example of selective attention
3

During the checkout process, Amazon strategically simplifies the page layout, focusing the user's attention on completing the purchase.

Distractions like advertisements or product recommendations are minimized, directing the user's attention solely to filling in payment and shipping details.

Amazon check-out process as an example of selective attention

Tips Selective attention.

  1. Highlight Key Elements. Use visual cues like size, color, and contrast to draw attention to the most important elements of your site or app.
  2. Minimize Distractions. Reduce the presence of non-essential elements, especially in areas where focused attention is required, like forms or checkout pages. This helps in keeping the user's attention where it's most needed.
  3. Use Whitespace Effectively. Whitespace isn’t just empty space; it’s a powerful tool to help focus attention. Proper use of whitespace can make important elements stand out and reduce cognitive load, making it easier for users to process information.
🙈

Banner Blindness.

Users often ignore flashy ads that interrupt their browsing.

Coming

Definition Banner Blindness.

Banner Blindness is the tendency of users to consciously or subconsciously ignore banner-like information on websites, even when relevant.

This occurs due to information overload and the habitual avoidance of advertising.

To improve user experience, try elegant designs that blend with site content and use effective CTAs instead of flashy banners.

Note that Banner Blindness is related to selective attention and how users read a webpage with the Gutenberg diagram (or "Z-pattern").

Examples Banner Blindness.

1

Many news websites are cluttered with banner ads and these are almost all the time at the top of the page.

Because users have already scrolled hundreds of pages with similar banner ads, they have just learned how to skip it. Instead, they look for actual news content.

Not only does this lead to low ad engagement, but it can also negatively impact user experience due to the excessive presence of ignored banners.

An example of banner blindness with the news website of CNN
2

Have you ever tried to look for a crêpes recipe online? On many cooking blogs, the recipe is lost in a sea of banners and advertisements.

Users have developed a blind spot for these sidebars. They only focus on the recipe itself.

This habit can significantly diminish the impact of those sidebar ads.

Cooking blog example of banner blindness
3

YouTube is an excellent example of a platform that counters banner blindness effectively.

Advertisements are integrated within videos in a way that aligns with user viewing habits.

Ads are more engaging, less likely to be ignored and users feel less overwhelmed.

YouTube as a good example to overcome banner blindness bias

Tips Banner Blindness.

  1. Break the mold. Try non-traditional banner shapes or designs. Users are conditioned to ignore rectangular ads. Catch their attention with unique formats.
  2. Integrate subtly. Blend ads naturally into your site design. Avoid contrasting colors or designs that scream "Advertisement". Make it relevant and appealing.
  3. Limit the Number of Ads. Reducing the number of ads on a page can make the remaining ones stand out more. A cluttered page often leads to everything being ignored, whereas a cleaner layout with fewer ads can lead to higher engagement.
🪃

Retroaction.

Feedback makes us fine-tune our actions to get better results.

Coming

Definition Retroaction.

Retroaction, also known as feedback in UX design, refers to the responses or information a user receives after interacting with a digital interface.

The idea is simple: make it easy for users to navigate through your website. (cf. signifiers)Users need to be guided.

Their actions need to be confirmed so that uncertainty is reduced and their sense of control is fostered.

This is very important because it ultimately results in users staying or leaving your website.

Examples Retroaction.

1

On Amazon, when you add an item to your cart, an immediate visual confirmation at the top of the screen appears, which confirms your action was successful.

Better yet, a mini breakdown of the total items and the total cost in the cart is also displayed.

Amazon as an example of retroaction
2

In apps like Instagram, when a user likes a post, the heart icon immediately changes color.

This instant feedback confirms the user's action and encourages further interaction.

An example of retroaction with Instagram
3

When filling out an online form, if you enter incorrect or incomplete information, red boxes often appear around the problematic fields.

This immediate feedback alerts you to errors, such as an improperly formatted email address or a missing required field.

An example of retroaction with an online form

Tips Retroaction.

  1. Define feedback loops. Add small, transparent pop-ups or color changes to confirm users' actions, cutting uncertainty and boosting confidence. Also ensure that the feedback is clear and directly related to the user's action.
  2. Consistency. Maintain consistency in the type and style of feedback across the entire application or website. This helps in setting the right expectations for the users.
  3. Real-time tracking and corrections. Implement systems that can promptly identify user errors, offering clear, immediate solutions to keep the user journey smooth.
👀

Hick's Law.

The time needed to make a decision increases with the number and complexity of choices.

Coming

Definition Hick's Law.

Hick's Law (or Hick-Hyman's Law) states that the more choices a user is presented with, the more time and effort it will take to make a decision. Named and theorized by psychologists William Edmund Hick and Ray Hyman.

Examples Hick's Law.

1

We all know the pain of scrolling through the endless list of Netflix content, only to find that an hour has passed.

It's not easy to make choices when you know the breadth of what's on offer in the Netflix catalog.

To help users reach quicker conclusions, Netflix recently created a new section called "Top 10 in your country", which lists content according to popularity and percentage of viewing in your region.

Exemple de la Loi de Hick pour offrir à ses utilisateur une expérience mémorable

In this way, Netflix makes it easier to decide on the abundance of choices offered by its platform, while at the same time highlighting content approved by a large number of its users (social proof)

2
3

Tips Hick's Law.

  • Try reducing the number of options or finding ways to hide certain elements. Do they all need to be displayed at once (Progressive Disclosure)?
  • If you can't reduce the number of options, try to present them in an easy-to-navigate order, and make sure the elements are familiar to the user.
🦴

Decoy effect.

Lesser desirable option makes other options more appealing.

Coming

Definition Decoy effect.

The Decoy Effect is a strategic design technique that involves presenting a third, less desirable option to make the preferred option seem more appealing, driving users towards it.

It's like setting a "decoy" to highlight the value of the "target."

Examples Decoy effect.

1

The Economist now offers three subscription options:

  • Espresso for €12.90/month after a free first month,
  • Digital for €29.90/month after a free first month,
  • Print + Digital for €39.90/month after the first month at €20.

Notice how the Print + Digital option is positioned as a value-packed choice at just €10 more monthly compared to the Digital-only plan.

This pricing strategy subtly nudges readers towards the combined subscription, making it appear as a superior deal, effectively employing the decoy effect to enhance the perceived value of the Print + Digital option.

The Economist example of the decoy effect
2

Here are the Amazon Prime offerings:

  • A monthly Prime membership priced at $14.99
  • A yearly Prime membership priced at $139

At first glance, it might look odd. Why buy a yearly membership when you can pay monthly?

When you do the math, you find that paying 12 months at $14.99 ($179.88) is significantly more expensive than the one-time annual charge of $139.

In this case, the monthly subscription serves as the decoy.

It exists to highlight the better value of the annual plan, nudging customers to opt for the "smarter choice".

Amazon Prime example of the decoy effect
3

Apple's iPhone pricing can illustrate the decoy effect:

  • iPhone 14: $799
  • iPhone 14 Pro: $999

It's a $200 difference, and yes, it's a lot for a phone. So, the idea here is to justify this price difference. But how?

Apple strategically made minimal upgrades to the iPhone 14 from the iPhone 13, subtly employing the decoy effect.

This limited enhancement in the iPhone 14 intentionally highlights the superior value of the Pro models, making the latter seem more worthwhile.

Because the real upgrade from your iPhone 13 is to get the iPhone 14 Pro.

Tips Decoy effect.

  1. Start with three. Offer 3 pricing tiers to make the middle offer a clear value-for-money. It's a decoy that justifies the price leap, guiding them to the desired tier.
  2. Smart add-on display. Present a product's pricey add-on alongside its less expensive counterpart. This strategic placement enhances the appeal of the cheaper option, making it appear as a bargain.
  3. Wise comparisons matter. Utilize feature comparisons where one option is slightly inferior but significantly cheaper. This approach gently nudges consumers towards choosing the more affordable product willingly.
🔎

Confirmation bias.

People are more likely to accept or pay attention to information if it seems to confirm what they think.

Coming

Definition Confirmation bias.

The fact that people are more likely to accept or perceive information if it seems to confirm what they already believe or assume. This is especially true when the situation is important or personal.

Examples Confirmation bias.

1

An example of confirmation bias that is both fascinating and terrifying is Google. Yes, Google...

The results of numerous studies show that search engines can reinforce confirmation bias by generating results that consist solely of evidence confirming what we assumed before our search.

"We're all vulnerable to bias. Internet search engines are the epitome of confirmation bias, and you want to use them as evidence to prove you're right?" - Neil deGrasse Tyson

Neil deGrasse Tyson, born October 5, 1958, is an American astrophysicist, planetary scientist, author and science communicator. Educated at Harvard University, Tyson is one of the world's most popular American scientists.

2
3

Tips Confirmation bias.

  • Remember to rephrase. Think carefully about what constitutes an authoritative source before doing your research.
  • Cross-check your sources, don't stop at the first piece of information you find.
  • Avoid asking questions that already imply a certain answer.
🎪

Centre-Stage Effect.

When faced with a set of products, we prefer the one in the middle.

Coming

Definition Centre-Stage Effect.

The Centre-Stage Effect is a cognitive bias where items placed in the center of a display are perceived as more important or significant.

In UX design, this means that users are more likely to focus on and remember items or information positioned in the middle of a webpage or interface.

Examples Centre-Stage Effect.

1

Amazon uses this principle effectively on its website.

When you browse the homepage, the 'Deal of the Day' is prominently displayed in the center.

This central placement draws user attention and increases the likelihood of the sale item being purchased.

Amazon example of the centre-stage effect
2

When you open Spotify, the first thing you see isn't a random playlist — the first item that pops up in the middle of the screen is usually something the algorithm knows you'll love.

Maybe it's your "Daily Mix" of your favorite genres, or maybe it's that new album from a band you listen to a lot.

By placing these suggestions front and center, Spotify encourages users to start listening.

An example of the centre-stage effect with Spotify
3

Apple frequently places its latest products or features in the center of its homepage.

This central positioning immediately draws users' attention to the newest offerings.

Apple's new iPhone as an example of the centre-stage effect

Tips Centre-Stage Effect.

  1. Highlight the Hero. Draw attention to your key product, offer, or call-to-action by placing it sequentially in the center on your webpage. This prime screen real estate grabs viewer's attention first.
  2. Design Harmony. Surround your central element with complementary, lesser-focused items. This creates a harmony that subtly emphasizes the importance of your central item, directing user interaction.
  3. Use Contrast. Amplify your central element with color contrast, different shapes, or sizes. This helps it to 'pop', catching users' eyes instantly and helping them focus on your core offering.
🔥

External trigger.

When the information on what to do next is in the message itself.

Coming

Definition External trigger.

External Triggers are cues in the user's environment prompting them to perform a behavior, often designed to bring users back to a product or service.

These triggers, like notifications, emails, or ads, work effectively when the user has a clear understanding of the action they need to take upon seeing the trigger.

These capitalize on users' attention and immediate response to visual or auditory cues.

They act as reminders or prompts that guide users toward specific actions, playing a crucial role in habit formation and user engagement.

Examples External trigger.

1

Facebook sends notifications celebrating memories with your friends, prompting you to share a personalized video or collage.

This trigger not only brings users back to the platform but also encourages them to engage by sharing the celebration post.

Facebook memories as an example of external triggers
2

Duolingo sends daily reminders to users to complete their language lessons.

These notifications act as cues to engage with the app, fostering consistent usage and aiding in the formation of a daily learning habit.

Duolingo's example of external trigger
3

Zara sends reminders about items left in your cart and notifies you if stock is low, creating urgency.

This personalized approach not only improves the shopping experience but also converts hesitant shoppers into buyers.

Tips External trigger.

✈️

Survivorship bias.

Only noticing successes can make you blind to the failures.

Coming

Definition Survivorship bias.

Survivorship Bias occurs when we focus on successful outcomes, overlooking the failures.

Picture this: You're scrolling through social media and see a post about a college dropout who became a billionaire.

You think, "Wow, maybe formal education isn't that important after all." But hold on a second.

What about the countless others who dropped out and didn't strike it rich? They're not in the headlines, but they're part of the story.

That's the Survivorship Bias - the mental shortcut where we focus only on successful outcomes.

In web design, it can mean emphasizing elements that successful users interact with, neglecting potential roadblocks for others.

Examples Survivorship bias.

1

Airlines observe Survivorship Bias when they only pay attention to successful planes, neglecting those that suffer accidents.

During WWII, the U.S military wanted to add armor to their aircraft.

They studied planes that returned from missions and noted where they took the most bullets. They planned to add armor to these areas.

However, a statistician named Abraham Wald pointed out their Survivorship Bias.

They were only studying planes which had survived their missions despite their damage. The damage on these planes wasn't fatal.

The planes that didn't return, that they weren't studying, held the key to fatal areas to up-armor.

By overcoming Survivorship Bias, they effectively armored their planes, saving countless lives and altering the course of war.

Survivorship bias example with planes
2

Imagine if Netflix were to base its recommendation algorithms solely on the viewing habits of its most engaged users.

In such a scenario, the platform would only be considering the 'successful survivors,' or the most active viewers, potentially leading to skewed recommendations.

This would mean ignoring less active users and their diverse viewing preferences — these are the unseen "planes" that didn't make it back in our analogy.

In this case, a smarter approach would be to consider the viewing habits of a broader audience, including less active users, or a personalized recommendation.

This would aim to deliver more diverse and accessible content suggestions, providing a more balanced user experience.

Netflix' recommendation example for the survivorship bias
3

Imagine if Amazon's product review algorithm initially favored items with lots of positive reviews.

In this case, the platform would be promoting the 'successful survivors,' or top-rated items, while sidelining lesser-known or newer products with fewer reviews.

This would mean overlooking products that, despite having fewer reviews, still had high average ratings and satisfied customers — akin to the "planes that didn't return" in the Survivorship Bias analogy.

A smart move could be to introduce something like a "Verified Purchase" tag for reviews (which is what Amazon does by the way).

This would give more weight to genuine, high-quality feedback over sheer volume, aiming to offer a more balanced showcase of products that caters to diverse consumer needs and preferences.

Amazon's "verified purchase" as an example of the survivorship bias

Tips Survivorship bias.

  1. Listen to the 'Quiet Ones'. Don’t solely rely on successful examples when designing your website. Also consider customers who left the site or abandoned carts and try to understand why.
  2. Learn from bad experiences. Conduct regular user testing and study unsuccessful interactions. Use this data to tweak your design and improve user experience.
  3. Don't Ditch the 'Underdogs'. Regularly re-evaluate your choices while designing. Ensure not to overlook designs or features that didn't survive in the past but could prove beneficial now.

🎯

Fitts's law.

It can be used to estimate the time needed for a user to reach a given area.

Coming

Definition Fitts's law.

Fitts' law is a predictive model of human movement used mainly in the fields of human-computer interaction and UX.

This bias is used to predict the time required to move quickly to a target area.

Fitts' law is used to model the act of pointing, either by physically touching an object with the hand or finger, or virtually, by pointing at an object on a computer screen using a mouse.

Examples Fitts's law.

1

The image below illustrates the areas where it's natural for the user to interact with the screen and those where it's much more difficult. Try it out, you'll see.

2

On the mobile version of a website, it's important to position your CTA at the bottom of the page, and to ensure that it takes up the full width of the page so that it's easily accessible by the user.

3

Tips Fitts's law.

  • Clickable elements must be large enough for users to select them accurately.
  • Clickable elements must be placed in areas of the interface where they can be easily reached.
👀

Attentional Bias.

We naturally focus more on things that emotionally stand out.

Coming

Definition Attentional Bias.

Attentional Bias refers to how a user's perceptions are influenced by their recurring thoughts at the time.

People have limited focus and they filter information.

In other words, it causes them to not consider all possible outcomes when analyzing a situation.

Examples Attentional Bias.

1

Let's start with a simple example. Suppose you have a persistent headache.

Due to concern, you might focus your attention on online articles suggesting it could be a sign of a serious condition like a brain tumor.

Meanwhile, you might overlook information indicating that it could simply be due to common factors like dehydration, stress, or lack of sleep.

This selective attention to more alarming possibilities, influenced by your worry, exemplifies attentional bias.

2

A user shopping for a camera on Amazon might only focus on the products labeled as "Best Seller" or highly rated, ignoring other potentially suitable options that don't have these labels.

When shopping, our recurring thoughts often focus on finding quality and value, and these tags catch our eye, subtly suggesting these items are trusted and popular choices.

This perception aligns with our desire for reliable products causing us to not consider all of the other options.

After all, if hundreds of people love it, it must be good, right? (cf. Social proof)

Amazon example of the attentional bias
3

Tips Attentional Bias.

  1. Highlight Key Information. Use design elements like color, contrast, and size to highlight important information or calls to action.
  2. Understand User Goals. Tailor the design to align with user goals and interests and implement visual cues like icons, badges, and animations to draw attention to specific areas or features.
  3. Minimize Distractions. Design a clean, focused interface that minimizes distractions, ensuring that users' attention is not diverted from key elements.
🧠

Cognitive Load.

The total amount of mental effort required to accomplish a given task.

Coming

Definition Cognitive Load.

Cognitive load refers to the mental effort required to use a website.

The lower the cognitive load, the easier the site is to navigate, understand, and interact with.

For superior user experience and higher conversion rates, optimize your website to lower cognitive load — eliminate unnecessary actions, convey information clearly, and simplify decision-making processes.

Why is it important? Our brains have a limited capacity for processing information.

By reducing unnecessary elements and simplifying tasks, you make it easier for users to focus, understand, and take action.

Examples Cognitive Load.

1

In everyday life, the notifications we receive on our phones are a major distraction that can cause a high cognitive load, making it almost impossible to process work-related information.

Just like computers, the human brain has a limited processing capacity, when too many stimuli demand attention at the same time, it saturates.‍

The same goes for websites, if your website overloads their brain with information, the only way for them to get rid of it is to leave your site.‍

People aren't going to use a website, let alone buy a product from an e-commerce site that exhausts and confuses them.

Every website requires a certain cognitive load, but the more you minimize it, the better the user experience will be.

2

Google's search homepage is a masterclass in reducing cognitive load.

A simple search bar in the center, with minimal distractions.

It's clear, concise, and lets users get straight to searching.

Google homepage as an example for cognitive load bias
3

Organizing a holiday and booking a house isn't a simple task.

There are dates to consider, amenities to look for, and budgets to stick to.

Yet, Airbnb manages to make this process feel effortless.

They guide users step-by-step, from selecting dates to making the final payment.

Each stage is presented clearly, minimizing the cognitive effort and making what could be a complex task feel straightforward and manageable.

First, you specify the destination, then check-in and check-out dates, and finally the number of guests.

Airbnb's booking process as an example of reduced cognitive load

Next, as you browse, the integrated map feature simplifies your search, allowing you to pinpoint your dream house in your desired location seamlessly.

Note Airbnb keeps your selected dates, location, and number of guests visible, offering the flexibility to adjust them on the fly without needing to return to the homepage each time.

Airbnb's booking process as an example of reduced cognitive load

Lastly, the checkout process is streamlined with your trip details prominently displayed, a clear breakdown of costs on the side, and straightforward payment options.

Airbnb's booking process as an example of reduced cognitive load

Tips Cognitive Load.

  1. Leverage common web practices. Build on existing mental models. People already have mental representations of how websites work, based on their past experiences of visiting other sites. Reuse them.
  2. Prioritize simplicity. Beware of over-stimulation and strip down your design to essentials only. A screen cluttered with information is nothing but chaos for the user.
  3. Reduce user actions. More actions = more effort for the user. Streamline processes to decrease user effort but don't compromise on clarity and comprehensibility. Aim for ease of use, not just simplicity.


⚓️

Anchoring Bias.

Users rely heavily on the first information they see before making a decision.

Coming

Definition Anchoring Bias.

Anchoring bias is the cognitive bias that leads us to rely heavily on the first piece of information we are given about a subject.

When we make predictions or estimates about something, we interpret new information from our anchoring reference point, rather than seeing it objectively.

This can distort our judgment and prevent us from updating our plans or predictions as much as we should.

Examples Anchoring Bias.

1

A common SaaS anchoring technique is to make the most expensive subscription package (the anchor) more visible than the others (so that it is seen in first position), so that the other packages appear less expensive in comparison.

2

Another example from everyday life: supermarkets display their most expensive items at eye level with visible price tags, so that the item you end up looking for seems cheaper.

3

Tips Anchoring Bias.

  • Why are prices ending in 99 so popular? The explanation lies in the fact that customers cling to the number before the decimal point as an anchor.
  • By offering promotions, stores can encourage their customers to compare the sale price with the original price (the anchor point) to give the impression that they're getting a good deal.
  • By displaying your top-of-the-range services first, you encourage your customers to accept the prices of your other (cheaper) services.
👍

Nudge theory.

Subtle clues can influence users' decisions, depending on how the choices are presented to them.

Coming

Definition Nudge theory.

Nudge Theory involves subtly guiding users toward desirable actions while maintaining their freedom of choice.

It's about making the desired action easy and appealing, encouraging users to make decisions that benefit them.

Nudge Theory works because it simplifies decision-making.

Examples Nudge theory.

1

One-click ordering on Amazon makes the purchasing process straightforward.

It reduces friction in the user journey, making the desired action (purchase) the path of least resistance.

Example of the Nudge theory with Amazon
2

Websites often use subtle animations to draw attention to specific actions, like the color and placement of a call-to-action.

The visual cue nudges users to take a specific action, like scrolling down a page or clicking on a button.

An example of the nudge theory with the design of Riseverse's website
3

Imagine filling out a details form, which includes fields like your full name, phone number, and email address.

  • As you enter your details, green checkmarks appear next to correctly filled fields, and red X marks appear next to incorrect or incomplete fields.
  • Hovering over a red X mark displays a helpful tooltip, explaining what needs to be corrected.

Seeing green checkmarks as fields are correctly filled gives users a sense of accomplishment and encourages them to complete the remaining fields.

Feedback example for the nudge theory

Tips Nudge theory.

  1. Make desired actions easier. Lazy, busy, or distracted, we favor options that require minimal effort. Make the preferred action on your website the easiest choice.
  2. Provide immediate feedback. Users love instant gratification. Highlighting immediate benefits after an action can act as a powerful nudge.
  3. Use social proof. Featuring testimonials, user statistics, or reviews nudges visitors by showing them others have benefited from taking the action you're suggesting.
⚪⚫

Contrast.

Users' attention is drawn to elements that stand out.

Coming

Definition Contrast.

The Contrast Effect is a cognitive bias that distorts our perception of one thing when we compare it to another, accentuating the differences between the two.

It's a principle where distinct elements — be it color, shape, or size — stand out against each other.

This difference can guide users to key content, making your site intuitive and navigable, thereby increasing satisfaction, retention, and conversions.

Why does it work? Our brains are wired to notice differences.

When something stands out, it immediately captures our attention, making the Contrast Effect a powerful tool for directing user focus and actions on a website.

Examples Contrast.

1

Low-contrast text may look better, but it's also unreadable, difficult to read and inaccessible. Instead, consider solutions that are easier for your users to read.

2

A few years ago, Joshua Porter conducted a famous study entitled "The Button Color A/B Test".

He compared the conversion of two variants of the same landing page.

The only difference between versions A and B was the color of the call-to-action button.

Version A had a green call-to-action button, while version B had a red button.

Although Joshua predicted that the green button would perform better, the red button outperformed it, resulting in 21% more clicks.

Does this mean that red is the best-converting color?

No. It's likely that the red button attracted more attention because it was the only object to stand out on the page.

3

Nike's online store uses contrast effectively to drive conversion.

Their minimalist white background is starkly contrasted by their richly colored product photos.

This visual contrast grabs attention and guides user’s eyes directly to their products.

Their "Add to Bag" button is black, standing out from the white background.

Example of a contrasted website with Nike

Tips Contrast.

  1. Think Big, Think Bold. So the rule is simple: if you want users to interact with something, make it stand out! Amp up the size and weight of your key text to make it instantly noticeable.
  2. Clear Contrast, Clear Content. If you place text on an image, make sure it's legible by providing adequate contrast. Subtle adjustments can increase contrast without affecting the overall aesthetics of the site.
  3. Play with Space. Isolate important elements on big fields of white or dark space. Detaching them from other elements skyrockets their prominence and command attention promptly.


🖥️

Aesthetic-Usability Effect.

Pretty designs feel easier to use, whether they are or not.

Coming

Definition Aesthetic-Usability Effect.

Users are more tolerant of minor user experience (UX) problems when they find an interface visually appealing.

The effect of aesthetics on usability can mask certain user interface (UI) issues and prevent problems from being discovered during usability testing.

In addition to generating positive feelings about a product, attractive aesthetics also evoke feelings of sympathy, loyalty and tolerance, all of which are important factors in the ease of use and long-term success of a product and a company.

Examples Aesthetic-Usability Effect.

1

Apple's success is an excellent example of the competitive advantage of attention to aesthetics.

They invest in the visual design of their physical products, as well as in their software, which helps mask UX issues.

2

Think of Netflix's sleek interface, with its animated, warm-colored tiles and eye-catching cover art, is both functional and visually pleasing.

Features like personalized "Top Picks" and organized genre rows invite continuous scrolling and exploration.

Netflix example of the aesthetic usability effect
3

Airbnb's success is partly due to its clean, intuitive design, featuring high-quality visuals of listings and straightforward filters.

This aesthetic appeal encourages users to explore and overlook minor issues, increasing the likelihood of bookings.

An example of the aesthetic usability effect with Airbnb

Tips Aesthetic-Usability Effect.

  1. First impressions matter. Make your website aesthetically pleasing from the get-go with an intuitive layout, soothing colors, and high-quality images. Pleasing visuals make repeated use more likely and make people are more tolerant of minor UX issues
  2. Simplicity sells. Users want to navigate easily, so keep the design simple. Avoid clutter, ensure essential items stand out, and always have clear, actionable buttons.
  3. Consistency is key. Maintain a consistent design across all site. This makes it easier to navigate, improving usability and aesthetics. Consistency makes your site predictable and user-friendly.
🤯

Progressive disclosure.

Revealing complex information later keeps tasks manageable and users engaged.

Coming

Definition Progressive disclosure.

Progressive disclosure is a design strategy where information and options are revealed as users engage and delve deeper.

In other words, it postpones advanced or rarely-used functions until later in the user experience.

The aim is to reduce the risk of users feeling overwhelmed by what they discover. By progressively revealing information, designers reveal only the essentials, enabling users to manage the complexity of a website or application.

Examples Progressive disclosure.

1

Let's take Google again (an example we're all familiar with - familiarity bias), with a search for the keyword "best isekai". An article (written by me) appears in position 0.

This extract provides the user with just enough information to determine whether they want to go a step further and find out more, or whether the information provided already meets their needs.
Progressive disclosure is therefore one of the best ways of satisfying two contradictory requirements:

  • Users want an answer to all their needs.
  • Users want simplicity.
2

Amazon exemplifies Progressive Disclosure in its shopping experience.

Initial product listings provide just enough information, like the name, image, price, and star ratings to help you make an initial assessment.

When you click on a product, you then see a wealth of detail – more product specifics, customer reviews, Q&As, and comparatives.

This "on-demand" information keeps the website uncluttered, giving users control over their experience.

Example of progressive disclosure with Amazon
3

Airbnb's platform exemplifies Progressive Disclosure to simplify booking.

Users initially see properties with a photo, price, type, and rating. Clicking a listing reveals more details like photos, amenities, rules, and reviews.

For deeper insight, users can access host profiles, neighborhood info, and Q&As.

This staged information approach prevents user overwhelm, facilitating a smooth, user-friendly booking experience.

Airbnb booking process as en example of progressive disclosure

Tips Progressive disclosure.

  1. Prioritize essential info. Don't directly overload the user with all the information available about your product or service.
  2. Design for user engagement. Incorporate elements of suspense, progression and surprise by providing access to the right information at the right time.
  3. Test and Iterate. Don't assume you know what the user wants or appreciates most. Instead, discuss it directly with them.
💔

Empathy gap.

People struggle to understand emotions they haven't faced themselves.

Coming

Definition Empathy gap.

The Empathy Gap is a cognitive bias where people struggle to understand mental states that are different from their current state.

This also result in the underestimation of the influence of emotional states on their preferences and behaviors.

But, in reality, emotions significantly influence our decision-making process.

When designing, acknowledging this gap helps in creating experiences that resonate with users in various emotional states.

Examples Empathy gap.

1

The "hot-cold empathy gap" refers to the difficulty in understanding and predicting our behavior when our emotional state changes.

In a calm state (cold), a man plans to eat healthily but fails to empathize with this decision when hungry (hot), opting for immediate satisfaction with junk food.

This gap highlights the disconnect in decision-making between different emotional states.

2

Ever rushed and late? Uber gets it.

Traditional cab-hailing could leave you anxious, not knowing when your ride would arrive.

Uber bridges this empathy gap with live tracking, instantly showing your driver's location and arrival time upon booking.

This feature alleviates the stress of waiting, enhancing user experience and boosting ride bookings.

Uber live tracking map as an example of empathy gap
3

Netflix understands binge-watchers' mindset with its 'Skip Intro' button.

While opening credits are enjoyable initially, they become tedious during binge-watching.

The 'Skip Intro' feature allows viewers to dive right into the action, reducing annoyance and enhancing the viewing experience.

An example of the empathy gap with Netflix

Tips Empathy gap.

  1. User testing is critical. Experience your site like a visitor. Notice any discomfort and fix it. You'll understand their journey and emotions firsthand.
  2. Use language familiar to your audience. By speaking their lingo, your users will feel more understood.
  3. Regularly solicit feedback. Be responsive to suggestions and complaints. Make users feel heard and valued. They'll be more likely to stick around and convert.
🎊

Von Restorff effect.

Users are more likely to remember elements that stand out.

Coming

Definition Von Restorff effect.

The Von Restorff effect, also known as the isolation effect, predicts that when several similar objects are present, the one that stands out from the others is the most likely to be remembered.

Examples Von Restorff effect.

1

On Hugo Décrypte's YouTube channel, the "ACTUS DU JOUR" tag is highlighted by a white tag. This is one of the only differentiating elements from other formats.

The tag makes it easier for Hugo Décrypte subscribers to identify this format, especially as Hugo has 3 channels and his videos are regularly pushed up the YouTube recommendations.

2

Another example, with Notion's pricing page. The use of orange for the button and the words "Invite your team for free" make the Team plan stand out from the other two.

3

Another, perhaps more familiar, example is the addition of a “new” badge to a product or service. Or simply the icon of an application and its unread notifications.

Tips Von Restorff effect.

  • Make important information or key actions stand out visually.
  • Be careful when emphasizing visual elements to avoid competition.
  • Pay particular attention to your important elements, including their contrast ratio, so that they are perfectly visible.

Spark Effect.

Users are more likely to act when little effort is required.

Coming

Definition Spark Effect.

The Spark Effect in UX design refers to the use of animations, transitions, or micro-interactions that capture user attention, creating a delightful and engaging user experience.

It’s the "spark" that adds life to the user interface, making it dynamic and responsive.

Examples Spark Effect.

1

Rive.app utilizes the Spark Effect by incorporating vibrant and dynamic animations into its interface, turning ordinary interactions into surprising experiences.

An example of the spark effect with Rive website
2

Linear.app employs the Spark Effect by seamlessly integrating sleek design transitions and interactive elements.

An example of the Spark effect with Linear website
3

Apple’s website utilizes the Spark Effect by incorporating dynamic animations and visually appealing transitions between product displays.

This encourages the exploration of their products and technologies.

Apple website as an example of the spark effect

Tips Spark Effect.

  1. Use Startling Images. Get attention quickly with visuals that spark interest and create immediate emotional engagement.
  2. Ask Unusual Questions. Invoke curiosity right from your headline. If it promises something unique or challenges existing beliefs, your audience will want answers.
  3. Offer Interactive Content. Keep visitors hooked through polls, quizzes, or interactive infographics. This dynamic content not only delivers value but also compels users to interact.
🖼️

Framing effect.

Word choice can change how an audience perceives and responds to information.

Coming

Definition Framing effect.

Framing effect is the influence on your users' decisions depending on how the same piece of information is presented.

For instance, labelling a glass as "half empty" vs. "half full".

It highlights that user perception and actions can be swayed by tweaking word choice, visuals or context.

Examples Framing effect.

1

Amazon cleverly frames its Prime membership as 'Only $14.99 per month', instead of the annual cost of $179.88.

This monthly framing makes the price seem more manageable, highlighting immediate benefits like fast shipping and streaming services.

Amazon Prime as an example of the framing effect
2

Allstate's "Mayhem" campaign brilliantly utilizes negative framing by personifying the chaos and destruction that can occur without proper insurance.

Through humorous and dramatic scenarios, "Mayhem" illustrates the severe losses one might face.

This pushes viewers to consider purchasing Allstate insurance to protect themselves from financial turmoil.

3

Apple effectively uses framing by highlighting benefits over features in their iPhone marketing.

Instead of listing technical specs, they focus on user experiences to sell their product.

For example, instead of detailing camera specs, Apple says, "Capture your best low-light photos with Night mode".

Tips Framing effect.

🚦

Signifiers.

Visual cues are elements guiding you where to click, swipe or tap.

Coming

Definition Signifiers.

Signifiers are visual cues that guide users to understand how to interact with a website or application.

They add clarity to site navigation, decrease user confusion, and boost user engagement.

When used right, they click with users' intuition and reduce the cognitive load on users by providing clear visual instructions

Examples Signifiers.

1

Amazon uses a magnifying glass icon in their search bar, a universal signifier indicating that users can search for products here.

The shopping cart icon signifies where users can view the items they’ve added to their cart.

An example of signifiers with Amazon
2

In online forms, the specific field a user interacts with might be highlighted or outlined, signifying where the user’s input is currently being placed.

Let's look at RiseVerse website for instance.

An example of signifiers with RiseVerse
3

On Spotify’s website, buttons such as ‘Play’ subtly show a green play button when hovered over.

The vibrant green color is used as a signifier to indicate clickable buttons, guiding users to interact with these elements.

Note also that some buttons slightly enlarge or shift when hovered over.

An example of signifiers with Spotify

Tips Signifiers.

  1. Use buttons and links that look clickable. If a user can't instantly distinguish a button or link from static content, they may miss key navigation options.
  2. Leverage color and size to highlight key features. Big, bold, and bright elements are more likely to catch a user's eye, guiding them on the path you want them to take.
  3. Use consistent iconography. Icons are visual cues that your viewers can instantly recognize. Consistency helps users anticipate how to interact with your site.
💊

Expectations Bias.

People tend to be influenced by their own expectations.

Coming

Definition Expectations Bias.

Examples Expectations Bias.

1
2
3

Tips Expectations Bias.

🍒

Juxtaposition.

Elements that are close and similar are perceived as one and the same.

Coming

Definition Juxtaposition.

Examples Juxtaposition.

1
2
3

Tips Juxtaposition.

💘

Tesler's Law.

If you over-simplify a system, you transfer some of the complexity to the users.

Coming

Definition Tesler's Law.

Examples Tesler's Law.

1
2
3

Tips Tesler's Law.

⛵️

Visual anchors.

The visual elements used to guide users' eyes afterwards.

Coming

Definition Visual anchors.

Examples Visual anchors.

1
2
3

Tips Visual anchors.

Priming effect.

Previous stimuli can influence users' final decisions.

Coming

Definition Priming effect.

Examples Priming effect.

1
2
3

Tips Priming effect.

🍃

Law of Proximity.

Elements that are close to each other tend to be associated with each other.

Coming

Definition Law of Proximity.

Examples Law of Proximity.

1
2
3

Tips Law of Proximity.

👀 Search the meaning.

When users try to make sense of information, they create stories
and hypotheses to fill in the gaps.

🥳

Aha! moment.

The moment when users first experience the added value of your product and the benefits it brings to their lives.

Coming

Definition Aha! moment.

The "Aha! Moment" is a crucial point in user experience where users gain a sudden insight or realization that makes them understand the value of a product or service.

It’s the moment when the product "clicks" for the user, making them more likely to continue using the product and become a long-term, engaged user.

Examples Aha! moment.

1

Duolingo provides users with basic language exercises immediately upon signing up.

Users quickly realize they can learn a new language by dedicating just a few minutes a day, as they instantly start practicing and receiving feedback.

This immediate immersion helps users see the app’s value from the get-go, encouraging continued use.

An example of the Aha Moment with Duolingo
2

Canva allows users to choose a design type and immediately start creating.

Users instantly see how easy it is to create professional-quality designs with no prior experience.

The immediate ability to create and design enhances user confidence and realization of the tool’s value.

An example of the Aha moment with Canva
3

Airbnb immediately shows users beautiful properties available for rent in various locations.

Users quickly realize they can find unique, affordable places to stay instead of traditional hotels.

Seeing available properties right away makes users understand the value and uniqueness of the service, encouraging them to explore further.

An example of the Aha moment with Airbnb

Tips Aha! moment.

  1. Give immediate value. Ensure that users can quickly see the value of your product or service. Make the onboarding process simple and immediately rewarding.
  2. Guide users. Guide users through the initial stages of using the product, helping them discover its value and how it solves their problems.
  3. Provide feedback. Provide immediate feedback or rewards as users interact with the product, reinforcing the value and benefits they’re gaining.

📱

Skeuomorphism.

Digital designs mimic real-world, familiar objects for intuitive use.

Coming

Definition Skeuomorphism.

Skeuomorphism is a design principle where objects retain ornamental elements of past, derivative iterations — elements that are no longer necessary to the current objects' functions.

In website design, it helps users understand new functionalities by using familiar, real-world metaphors, like a trash can for delete.

Examples Skeuomorphism.

1

Remember Apple's iOS 6?

Back then, the Notes app looked like an actual notepad, complete with lines and a leather header.

And, the recycle bin looked like a real waste basket. Why? The icons were designed to imitate their real-life counterparts.

Apple used it extensively on their early apps to make the interface relatable, intuitive, and user-friendly.

An example of Skeuomorphism with Apple's IOS6 note App
2

Instagram’s old icons resembled a retro camera, complete with a rainbow stripe, embodying skeuomorphism.

This design, along with features like a shutter sound and a flash screen when taking photos, made the app’s purpose as a photo-sharing platform instantly clear and intuitive.

Such user-friendly, real-world imitations within the app contributed to Instagram’s rapid growth and popularity.

An example of Skeuomorphism with Instagram's first logos
3

Amazon’s Kindle e-reader uses skeuomorphism to mimic a real book-reading experience.

Users flip through pages with animations, and the screen has a matte finish to resemble paper, reducing glare.

The library interface displays books on a virtual bookshelf, making navigation familiar and intuitive, contributing to the Kindle's user-friendly appeal and success.

Amazon kindle as an example of skeuomorphism

Tips Skeuomorphism.

  1. Make User Interfaces Intuitive. Use real-world metaphors, like a folder icon for file storage or a trash can for the delete function. This brings familiarity and simplifies navigation for users.
  2. Enhance User Experience With Detail. Incorporate skeuomorphic details like textures, shadows, and gradients. This can create a "realistic" look and a more immersive experience.
  3. Gradually Introduce Innovations. Keep some skeuomorphic elements while integrating new design concepts. This ensures a balance between familiarity and innovation, reducing user resistance to change.
🧠

Mental Model.

Users have preconceived opinions about how many things work.

Coming

Definition Mental Model.

How users think about a user interface has a strong impact on how they use it. Inappropriate mental models are commonplace, especially in the case of innovative designs.

It's all about how your users perceive your product, which influences how they use and appreciate it.

Examples Mental Model.

1

A useful example of adapting mental models is Apple.

For the release of the very first iPhone, they used a design process called skeuomorphism.

Skeuomorphism was popularized by Apple to encourage people to convert to the digital world. To do this, they created iconography that closely imitates real-world elements.

A typical example of Skeuomorphism is the trash can used to delete files.

However, as the world's population became progressively more technically literate, Skeuomorphism was no longer necessary.

2
3

Tips Mental Model.

  • Be aware that your users already have certain mental models in your industry, so it's important to be aware of this in order to offer them an intuitive user experience.
🏠

Familiarity bias.

People prefer what they know over what's new or different.

Coming

Definition Familiarity bias.

Users hate radical change. They much more prefer things they're accustomed to.

Why does this work? We humans are creatures of habit. We trust what we know.

When a website mirrors familiar elements, interfaces, or designs , it reduces our complexity, making navigation intuitive and boosting our confidence.

The aim is to reassure visitors they're on the 'right path', enticing them to stay longer and interact more.

Examples Familiarity bias.

1

Ever had that moment of calm when Google's clean homepage loads up?

Amidst the chaos of the digital world, there it is, unchanged: a logo, a search bar, and those two trusty buttons.

It's like that favorite coffee mug you reach for every morning. Simple, familiar, just right.

Even as Google introduces new features like featured snippets, "People also ask," and local business listings, the core structure of search result pages has remained consistent over decades.

An example of the familiarity with Google's homepage


2

McDonald's maintains consistent branding, store design, and even menu layouts across the globe.

Whether you're in Tokyo, Paris, or New York, the sight of those iconic golden arches signals a familiar experience.

This familiarity ensures that customers, even in a foreign country, feel at home when they walk into a McDonald's.

Example of the familiarity bias with Mcdonald's restaurants all over the world.
3

The groggy stretch as the alarm buzzes, the familiar aroma of coffee brewing or burned bread - does it sound familiar to you?

That's the sensation when you power on an iMac.

The Apple chime and the iconic start up sound - legend has it this sound is a remastered snippet from The Beatles' "A Day in the Life."

Anyway, it's not just a computer booting up, it's a familiar, choreographed welcome so that every time you power on your iMac, you know what to expect.

The Apple example of the familiarity bias when an iMac is powered on

Tips Familiarity bias.

  1. Borrow Design Elements. Incorporate well-known icons and symbols in your site's navigation which users are already familiar with, like home, search, or user profile.
  2. Use Common Fonts. Always opt for easy-to-read fonts that users encounter frequently, enhancing readability and thus, their comfort level.
  3. Consistent Layout. Maintain a consistent layout across your website. Users become familiar with your design quickly and navigate more intuitively.
👑

Authority bias.

People tend to agree more with what experts or people in power say.

Coming

Definition Authority bias.

Authority bias refers to the tendency of people to attribute greater accuracy to the opinion of an authority figure (unrelated to its content) and to be more influenced by that opinion.

In UX design, leveraging authority bias can significantly impact user decisions and their perception of your platform or your credibility.

Examples Authority bias.

1

By featuring endorsements from sports legends like Serena Williams, LeBron James, and Cristiano Ronaldo, Nike imbues its products with a sense of elite performance and quality.

These athletes' appearances in advertising campaigns lend credibility.

You might already be convinced that Nike running shoes are the best, but when you see Eliud Kipchoge or Shalane Flanagan featured in a Nike commercial, it hits differently.

2

Having experts test your product or service and featuring their reviews on your website can significantly boost your credibility with your target audience.

GoPro frequently partners with extreme sports athletes and adventurers to showcase the durability and quality of its action cameras.

For instance, they've worked with professional surfer Kelly Slater to capture breathtaking surfing footage, demonstrating the camera's ability to withstand harsh ocean conditions and deliver high-quality video.

3

Featuring experts or renowned personalities in your field is great, but not everyone has the budget for a Nike-level campaign.

Now, is there another option? Fortunately, yes. You can enhance your own authority and expertise within your professional domain. How?

Provide people with added value, teach them what you know as an expert, and make sure to write/communicate about it.

Take HubSpot for example. By sharing extensive resources, such as blogs, e-books, courses, and webinars, HubSpot has established itself as a thought leader in digital marketing.

HubSpot ressources as an example of building authority

Tips Authority bias.

  1. Showcase Expert Opinions. Incorporate expert reviews, ratings, or curated lists in your design to guide user choices with authoritative recommendations. Feature endorsements or testimonials from recognized industry leaders or influencers to enhance the perceived value and reliability of your offerings.
  2. Display Certifications and Badges. Use relevant certifications, awards, or security badges prominently to build trust and credibility in your service or product.
  3. Become the Expert. Educate through authority content and provide content created or endorsed by experts, such as blog posts, guides, or videos, to educate users and reinforce the authority of your platform or product.

📝

Survey Bias.

When you ask leading questions to the same type of people or when people give socially acceptable answers.

Coming

Definition Survey Bias.

Survey Bias refers to the presence of factors that influence the outcome of a survey by introducing errors or affecting the survey responses.

People might respond based on what they think the surveyor wants to hear (social desirability bias), or the way questions are framed might lead to certain types of answers (question-wording bias).

Examples Survey Bias.

1

People may unconsciously alter their responses and provide socially acceptable answers if they believe they're being watched or judged.

Anonymizing responses is a way to manage this problem.

Google Forms, for instance, ensures no respondent feels like their opinions are monitored, leading to more authentic responses.

Google forms example for the Survey bias
2

When creating an account on a fitness app, you might have been asked questions about your physical activity.

People might over-report the frequency of their exercise routines to align with societal expectations and norms around fitness and health.

An example of survey bias with typical fitness app question
3

Let's take another example of a survey for a News Website.

The question is loaded with the positive notion of upholding freedom of speech, which might lead respondents toward agreeing.

An example of the survey bias with question wording

Tips Survey Bias.

  1. Avoid asking leading questions on your site. This can skew results in a certain direction, leading to survey bias. Balance is key, and neutrally phrased questions help ensure honest feedback.
  2. Randomize question and response order in surveys. This can help mitigate order bias, as respondents may be influenced by the order of choices given.
  3. Ensure anonymity. Users are more likely to provide accurate responses if they are confident their answers won't be traced back to them.
🎊

Cheerleader effect.

People think that individuals or products are more attractive when presented as a group.

Coming

Definition Cheerleader effect.

The Cheerleader Effect is the cognitive bias where individuals appear more attractive in a group than in isolation.

It's been observed in social psychology and has implications in design and marketing in terms of product presentation, user engagement, or even brand perception.

Examples Cheerleader effect.

1

Skincare brand Caia often presents its products in a set enhancing the overall appeal of each individual item through this curated aesthetic grouping.

The skincare brand Caia as an example of  the cheerleader effect
2

LinkedIn showcases user profiles alongside endorsements and mutual connections, which can make individual accomplishments and skills appear more credible and engaging due to collective validation.

In other words, the collective presence of social proof enhances individual appeal.

An example of the cheerleader effect with linkedin
3

Tesla, mostly known for its innovation in electric vehicles, also promotes its solar panels and clean energy solutions.

The collective perception of cutting-edge, eco-friendly technology enhances the desirability of each individual product line.

Tesla as an example of the cheerleader effect

Tips Cheerleader effect.

  1. Group Similar Items. When designing a layout, group similar items together. This not only utilizes the Cheerleader Effect but also helps with organization and aesthetics.
  2. Use Group Photos. In social features of apps or websites, encourage users to upload group photos, which can make profiles appear more attractive and engaging.
  3. Balance Individual and Group Displays. While leveraging the Cheerleader Effect, also provides opportunities for individual items or features to shine on their own, catering to users who prefer a more focused view.

🔮

Hindsight bias.

People tend to overestimate their ability to predict the outcome of an unpredictable event as if it were easily foreseeable.

Coming

Definition Hindsight bias.

You know that feeling when you watch a sports game and think, "I knew they would win!" even though you were biting your nails the whole time?

That's Hindsight Bias in action.

Why does it work? It's rooted in our need to find order in the world and believe in our own predictive powers.

It's that "I knew it would happen" feeling we get after the fact, making us believe we predicted or expected an outcome that was actually uncertain.

Websites and brands can use this bias to their advantage, especially when it comes to user engagement and decision-making.

When users feel like they "knew" they were making the right choices all along, it boosts their confidence and trust in your platform, encouraging further interaction.

Examples Hindsight bias.

1

Ever start typing and Google instantly suggests the exact thing you were looking for?

It's not just helpful; it makes you feel like a genius.

You think, "I was just about to type that!".

This boosts your confidence and makes you feel smarter, reinforcing your trust in Google's platform.

Google's automatic suggestions as an example of the hindsight bias
2

You make a purchase, and Amazon immediately suggests items that perfectly complement what you just bought.

You can't help but think, "Wow, I was going to search for that next!".

It's like Amazon read your mind, making you feel smarter and more inclined to make another purchase.

The example of Amazon's related items suggestions
3

Grammarly uses predictive pop-ups to guide user actions.

Imagine you're typing an email and suddenly a pop-up appears suggesting a more effective way to phrase your sentence.

You think, "Ah, I was just about to rephrase that!".

Grammarly isn't just correcting your grammar; it's making you feel like a linguistic genius.

You were "about to make that change anyway," and Grammarly just confirmed your brilliance.

This predictive guidance makes users feel smarter and more in tune with the tool, increasing the likelihood that they'll continue using it for all their writing needs.

The Grammarly example of the hindsight bias

Tips Hindsight bias.

  1. Run A/B Test. Running A/B Tests can mitigate hindsight bias. By comparing different versions of your pages, you can make accurate updates based on quantifiable data, not post-event intuition.
  2. Personalize User Experience. Users feel smarter when they see "handpicked" product recommendations. Cater to the hindsight bias by creating a personalized experience that resonates with their prior knowledge.
  3. Leverage Predictive Pop-ups. Use predictive pop-up messages to guide users’ actions. It will make the users believe they were anticipating the step, making the experience feel intuitive and personal.
🔦

Spotlight effect.

People think they're noticed more than they actually are.

Coming

Definition Spotlight effect.

The Spotlight Effect refers to the psychological phenomenon where people believe they are being noticed more than they really are.

Why does it matter in UX design? Because designers might believe that every minute detail of their design will be critically observed and evaluated by users.

This can lead to overemphasis on cosmetics and minor details, overshadowing the functionality and overall user goals.

Examples Spotlight effect.

1

You might want to spend hours perfecting the shadows and gradients of icons on your website but don't.

Why? Because if you try to seek for ‘pixel-perfection’ you will forget the main goal of your website: prioritize user experience.

I am not saying the aesthetic of your website isn't part of that experience, but rather that it's way less important than you think.

Instead, put more effort into improving the website’s navigation or loading time.

2
3

Tips Spotlight effect.

  1. Don't focus too much on aesthetic details. You will never reach ‘pixel-perfection’. So, don't spend time over-fixating on minor details that might not significantly impact the user experience, and focus instead on what actually does.
  2. Reflect on your work. Sometimes it's great to take a step back and make sure your design strategy is still relevant in terms of user experience.
  3. Never stop learning. Look at what others are doing out there. Don't stay in your design bubble, ask when you need help and stay open-minded.

💎

Singularity Effect.

When one object stands out, it becomes the main focus.

Coming

Definition Singularity Effect.

The Singularity Effect refers to the phenomenon where a single, unique element or feature captures and holds users' attention, making it stand out among other elements.

In web design, this could be a distinctive visual, a piece of content, or a unique functionality that becomes the focal point, drawing users’ attention and engagement.

Examples Singularity Effect.

1

Netflix strategically places large, captivating images of featured shows or movies at the top of the homepage, which auto-play automatically as users land on the page.

This singular, dynamic focus immediately captures users’ attention, drawing them into the viewing experience and encouraging further exploration of the highlighted content.

Netflix homepage as an example of the singularity effect
2

Google often replaces its homepage logo with a unique "Google Doodle", celebrating various events or anniversaries.

Google's homepage as an example of the singularity effect
3

When launching a new product, Apple often dedicates the prime real estate of their homepage to that single product.

A large, high-quality image or video of the product, paired with minimal text, dominates the viewer’s screen.

The design intentionally focuses the visitor’s attention on the new release, utilizing the Singularity Effect to make the product seem exceptionally important and enticing.

An example of the singularity effect with Apple's new iPhone 15 Proi

Tips Singularity Effect.

  1. Make your star product stand out. Use bold, contrasting colors for your key offerings. The visual difference on the webpage will force reader attention to it.
  2. Focus on one call-to-action per page. Too many options can overwhelm. Guide users to one response you desire. Less distraction, higher conversion rates.
  3. Leverage white space. A pitch surrounded by emptiness commands more attention. Don't rush to fill every space. Let your principle message breathe, get noticed.
👼

Halo effect.

Refers to the tendency to let our overall impression of a person, company or product positively influence our judgment of its other traits.

Coming

Definition Halo effect.

The halo effect is a cognitive bias in which our general impression of a person influences the way we feel and think about their personality.

Examples Halo effect.

1

Our general impression of celebrities is an excellent example of the halo effect in action.

Indeed, since people perceive them as attractive, talented and often likeable, they also tend to regard them as intelligent, caring and funny.

These considerations can spill over into a product or service that a celebrity presents by association.

An excellent example is James Bond and how Aston Martin quickly became the secret agent's iconic car (agent 107).

2
3

Tips Halo effect.

  • Make sure you dress well. Numerous studies have shown that dressing well has a considerable impact on a person's perceived attractiveness.
  • Pay attention to your body language and what you're wearing.
💎

Scarcity.

People value things more when they are rare, in limited quantities.

Coming

Definition Scarcity.

The scarcity effect is the cognitive bias that causes people to place a higher value on a rare object and a lower value on one that is abundantly available.

Scarcity is associated in our brains with something positive, luxurious and exclusive, because we automatically assume that an object is rare because everyone wants it or has already bought it, and that it is therefore a good product.

In other words, rare objects arouse our interest and therefore become immediately more desirable than a readily available product.

Examples Scarcity.

1

Booking.com is a master of scarcity marketing. Watch how they imply that this hotel offer won't be available for much longer.

Be warned, scarcity should be used in moderation and, with real data, can encourage users to take action more quickly on your site.

However, this technique has been adopted (and abused) by so many sites that its impact can vary.

Therefore, it's best to test which type of scarcity works best with your business and when.

2
3

Tips Scarcity.

  • By displaying the number of items remaining in stock, you can encourage people to make their purchase more quickly out of fear that the item may no longer be available.
  • By displaying the words “Only available online”, visitors are encouraged to make purchases, as the products seem rarer, being only available online.
  • Indicate whether certain variants of your product are out of stock to increase rarity.
🐘

Streisand Effect.

When you try to hide something, it only makes people more curious about it.

Coming

Definition Streisand Effect.

The Streisand Effect is a social phenomenon that occurs when an attempt to hide, remove, or censor information has the unintended consequence of further publicizing that information.

...and yes, if you are wondering, this does have to do with Barbara Streisand.

She tried to suppress photographs of her residence, but this move inadvertently drew even more public attention to it.

Examples Streisand Effect.

1

In 2003, Barbra Streisand sued a photographer for displaying a photo of her mansion online.

The lawsuit drew attention, causing the image to go viral.

Now, the irony is, a simple Google search with her name brings up the once-obscure photo for everyone to see.

The example of Barbara Streisand's mansion
2

Take the case of Victor Hugo’s "Les Misérables" in the 19th century.

When British courts decided to ban the first full English translation of the book, it ignited curiosity so that it became extremely popular.

The Streisand effect with Victor Hugo's best sellers "Les Misérables"
3

In 2018, H&M faced backlash for a racially insensitive ad, featuring a black child in a controversial sweatshirt.

Despite their efforts to apologize and remove the ad, the Streisand Effect took hold.

Attempts to erase the ad amplified its visibility, causing it to spread virally, intensifying the company's reputational damage.

This illustrates how trying to hide something can inadvertently magnify its presence online.

An example of the Streisand effect with H&M

Tips Streisand Effect.

  1. Go bold: Embrace honest, clear, and sometimes bold services or products, knowing that anything controversial can grab attention and trend quickly.
  2. Don't be too bold. Always prioritize your company’s ethics to avoid backlash. Ensure your actions resonate with your brand values and maintain customer trust.
  3. Welcome feedback. Encourage users to share and comment on your platform. User participation often magnifies Streisand Effect, increasing your content's exposure. If your content sparks an unexpected interest, capitalize on it.
💡

Eureka effect.

When new users become aware of the benefits of using your product for the first time.

Coming

Definition Eureka effect.

The Eureka Effect, also known as the Aha! Moment, is a common human experience where an individual suddenly has a clear insight or realization that solves a problem or clarifies a complex situation.

This moment of sudden understanding can be quite satisfying and is often memorable because it engages the brain's reward system.

Examples Eureka effect.

1

Have you tried Notion? If not you should. Its design is so intuitive that it consistently delivers those satisfying "Eureka!" moments as you effortlessly grasp its functionality.

Notion's flexible interface allows users to discover new ways of organizing information that can lead to sudden insights about productivity and data management.

When a user realizes they can link databases to create a relational database system within Notion, which is very easily done, it often results in a Eureka moment.

An example of the Eureka effect with Notion
2

Users who take a series of courses in a LinkedIn learning path have Eureka moments when they see how different skills interconnect and build on one another.

LinkedIn offers learning paths where the completion of one course reveals how it ties into the next, helping users see the bigger picture of their professional development.

An example of the Eureka effect with LinkedIn's learning path
3

Canva uses tooltips and mini-tutorials that pop up when a user is trying to perform a task, leading to moments of insight that simplify the design process.

Also the number of tutorials and help online significantly contributes to the user's experience.

Canva's example for the Eureka effect

Tips Eureka effect.

  1. Scaffold Information. Gradually introduce users to complex features, allowing them to build on previous knowledge.
  2. Encourage Exploration. Design interfaces that encourage users to explore and discover features on their own.
  3. Provide Feedback. Use clear and immediate feedback to guide users toward those Eureka moments without giving away the solution outright.

🥂

Reciprocity.

People tend to return favors given to them.

Coming

Definition Reciprocity.

Reciprocity is that innate human urge to give back when we've received.

In web design, offering users something valuable–like a free guide, can prompt reciprocation – users may provide contact information or make a purchase.

Why does this work? Because we're wired to balance the scales. When someone does us a favor, we instinctively want to return it. It's a dance as old as time, and it's deeply ingrained in our psyche.

Examples Reciprocity.

1

Picture this: You're walking past a bustling coffee shop. The aroma is inviting, but you're in two minds about stopping.

Just then, an employee offers you a small cup - a sample of their new seasonal blend. You take a sip, and it's delightful.

Now, you're considering a purchase, and not only because you think it tastes good.

Why then? Because they gave you something for free, and now you want to reciprocate.

It's not just about giving away a sample; it's about creating a sense of indebtedness, a desire to give back.

An example of the reciprocity bias when a free sample of coffee is given to you
2

HubSpot offers a plethora of free educational resources, from detailed blog posts to comprehensive webinars and even certifications.

Users can access a wealth of knowledge without spending a dime.

In return, many users feel inclined to explore HubSpot's paid offerings, having already benefited from the company's free content.

It's a digital give-and-take, with HubSpot providing value upfront.

Huspot's free resources as an example for the reciprocity bias
3

Dropbox has this "Share and Earn" approach where they reward both the existing user and the new user invited through their referral program.

When you invite a friend to join Dropbox, and they install and log into the Dropbox desktop app, both you and your friend earn extra storage space.

This is a powerful form of reciprocity.

By offering tangible value (extra storage), Dropbox encourages users not only to engage more with their service but also to become active promoters of their brand.

Dropbox's "Share and Earn" approach as an example of reciprocity

Tips Reciprocity.

  1. Give your users gifts. Offer visitors a free e-book, guide, or sample. This provides immediate value and may encourage them to return the favor (by subscribing or buying).
  2. Share valuable content. Blog posts that deliver in-depth insights, industry news, or how-tos are free gifts. The higher their quality, the more likely your visitors will repay with loyalty.
  3. Provide an exceptional customer service. Going the extra mile in providing assistance can lead to positive feedback and recommendations. It’s a sign of respect that invites reciprocation.
🎓

Curse of knowledge.

People unknowingly assume that the other person has the same level of knowledge.

Coming

Definition Curse of knowledge.

The Curse of Knowledge is a cognitive bias that occurs when an individual, possessing a certain level of knowledge, incorrectly assumes that others have the background to understand.

This can lead to miscommunication and a disconnect between what's being shared and what's being comprehended.

By assuming users know more than they do, you can create a confusing experience.

Examples Curse of knowledge.

1

In a Stanford University experiment by Elizabeth Newton in 1990, people were asked to tap out famous songs with their fingers, and others had to guess the songs.

The tappers always overestimated how many of their tapped tunes would be easily recognized.

This is a classic example of the curse of knowledge: when you know something inside out, it's easy to forget not everyone else does.

Example of the curse of knowledge
2

Apple dodges the curse of knowledge by simplifying tech speak.

Instead of boasting about a 5GB hard drive, they said the iPod could "carry 1000 songs in your pocket."

This approach makes their gadgets feel accessible, not just techy.

An example of the curse of knowledge with the original iPod
3

Dropbox keeps it simple. Instead of tech talk about syncing or encryption, it says, "Save files here, access them anywhere" and "Share with a click."

Easy, right? This way, everyone gets the hang of cloud storage without the headache.

Add to this that their built-in "get started" functionality for first-time users guides you through the basic features, making sure you're never lost.

Dropbox example of the curse of knowledge

Tips Curse of knowledge.

  1. Simplify Language. Use clear, simple language that can be understood by someone with no background in your field. Avoid jargon and technical terms, or clearly define them when they must be used.
  2. User Testing. Conduct user testing with people outside of your industry to ensure your content is accessible. This can highlight areas where the curse of knowledge is affecting comprehension.
  3. Layered Information. Offer information in layers, starting with the most basic concepts and allowing users to delve deeper into more complex information if they choose. This approach caters to both beginners and experts.

✍️

Self-Initiated Triggers.

Users are more likely to interact with messages they have created themselves.

Coming

Definition Self-Initiated Triggers.

Self-initiated triggers are user-prompted actions on a website that initiate a specific response.

That means users spark the sequence rather than being passively led.

Because users feel in control it improves their experience.

Examples Self-Initiated Triggers.

1

Duolingo effectively utilizes Self-Initiated Triggers by allowing users to set daily goals and reminders upon sign-up.

Duolingo as an example of self initiated triggers
2

Amazon’s "Add to list" feature is a prime example of Self-Initiated Triggers.

Users can move items to a wish list, triggering notifications for sales or low stock in the future.

Amazon example of the Self initiated triggers

3

On YouTube, the description section is hidden unless a user clicks to expand it.

This self-initiated action allows users to access more information and links if they wish, keeping the interface cleaner and more focused on the video content for those who prefer not to engage with additional details.

Tips Self-Initiated Triggers.

  1. Create CTAs that empower. Design CTAs that make users feel they’re in control, resulting in ‘self-initiated’ actions. "Choose your plan" is more effective than "Buy now".
  2. Cultivate curiosity. Design interfaces that evoke curiosity, prompting users to explore on their own. Interactive elements or hidden menus can work wonders.
  3. Leverage user inputs. When users personalize settings or save preferences, use these as triggers to prompt self-initiated actions, enhancing their engagement and usability.
👥

Social proof.

Users adapt their behavior according to what others are doing, in order to be liked, resemble or be accepted by society.

Coming

Definition Social proof.

Social proof, theorized by psychologist Robert Cialdini, holds that a person who doesn't know what the appropriate behavior is in a certain situation will look to other people to imitate what they're doing, and thus guide his or her actions. The greater the number of people involved, the more appropriate the action will seem.

So, in situations where we don't know what to do, we assume that the people around us (experts, celebrities, friends, etc.) have better knowledge of what's going on and what to do.

Examples Social proof.

1

What's more, we often make judgments based on the general impression we have of someone: this is the halo effect (named by psychologist Edward Thorndike). For example:

  • We think everything the experts use is great because they're probably more knowledgeable than we are in their field of expertise.
  • We buy products endorsed by celebrities because we want to be like them (or just have their freedom).
  • We trust customer reviews because they've experienced the product or service, unlike us.
2

One of the best examples of social proof, in real life, is the long queue outside an Apple Store on the day a new iPhone is released.

The fact that a group of people find the new phone so desirable that they spend a considerable amount of time queuing has an impact on our perception of the phone's perceived value (and drives us to covet one too).

Example of social proof with the launch of the new iPhone

A similar example is the queue outside a restaurant.

Indeed, it's important for businesses to show that they're busy, which is why restaurants and bars often make sure there's a queue outside the entrance. Websites do the same, but with different strategies.

3

Amazon highlights best-selling products, assuming that users will be influenced by what others are buying, creating a sense of popularity and trust around those products.

An example of social proof with Amazon Best Sellers

Tips Social proof.

  • Getting experts in your sector to speak out on your social networks can be an excellent way of exploiting their influence and the positive association they have in your industry (also: halo effect and authority bias).
  • From time to time, you may receive a nice mention from the press, a major brand or an influencer in your sector. This is an exceptional form of social proof to share.
  • User-generated content is a critically important strategy for generating social proof and building community.
📏

Unit bias.

Tendency to finish a whole 'unit’ simply because it's presented as a whole.

Coming

Definition Unit bias.

Ever find yourself eating just one more chip because the bag's almost empty? That's Unit Bias.

You want to finish what you started.

In other words, it's the tendency for humans to want to complete a single unit of a task or item.

On websites, a visual indicator of progress can enhance user experience, helping users feel accomplished.

Now, let's see how brands use this to keep you clicking.

Examples Unit bias.

1

Amazon’s "Customers Also Bought" and "Frequently Bought Together" sections are perfect examples of unit bias in action.

When purchasing a book, you might see a recommendation to buy the whole trilogy, or a book and its movie adaptation all at once.

We're biased to perceive the recommended set of items as a single unit, making us more likely to purchase the whole bundle – even if we initially intended to buy just one item.

Amazon as an example of the unit bias
2

Netflix cleverly uses the principle of unit bias to increase viewership.

When you finish watching an episode of a series, Netflix automatically queues up the next episode.

This positions each TV show as a unit, subtly encouraging viewers to watch more.

The countdown timer before the next episode starts playing is relatively short, about a few seconds, making it more likely for people to continue watching the next episode even if they had only intended to watch one.

Example of the unit bias with Netflix
3

"You're 90% Complete"

LinkedIn nudges you to complete your profile by showing a “Profile Strength” meter.

You've already added your experience and skills. Why not add that recommendation to hit “All-Star” status?

Completing your profile is presented to you as one single unit, so that you are more likely to complete it.

Note that this feature also leverages Commitment and Consistency Bias.

Once you've started building your profile, you feel an internal pressure to be consistent with the decision to have a LinkedIn profile.

Linkedin "profile strength" meter as an example of the unit bias.

Tips Unit bias.

  1. Limit Options. Present users with smaller choice counts. Offering less can boost engagement, as users may become overwhelmed by too many options.
  2. Tier Your Offerings. Use unit bias to promote higher-priced items. Bundle products or services into packages and distinguish each by emphasizing the value added.
  3. Use a Default. Set a favorable option as default. Users are more likely to stick with the initial choice, improving chances for desired user behavior.
💭

Curiosity Gap.

Users have a strong desire to find missing information.

Coming

Definition Curiosity Gap.

The Curiosity Gap is a psychological phenomenon that capitalizes on humans’ intrinsic desire to resolve questions and close open loops.

It's a compelling force that drives users to seek out missing information, thereby engaging more deeply with content.

This principle is often used in web design and content creation to attract and retain users’ attention, encouraging them to explore further.

It creates a sense of intrigue and anticipation, making users eager to find out more.

But beware, don't over-promise and under-deliver, as it may backfire, damaging user trust.

Examples Curiosity Gap.

1

Picture how an online bank could use the Curiosity Gap to raise users' interest and drive app downloads.

Let's say N26 for the sake of example.

Instead of merely stating, "Download the App", they could spur curiosity with: "Discover what banking should feel like".

The statement inherently makes users curious.

An example of the curiosity gap with N26
2

Apple's 2016 ad for the MacBook Pro cleverly utilized mystery.

It showcased a series of exploding light bulbs, symbolizing groundbreaking ideas and inventions throughout history, without mentioning the MacBook until the very end.

This approach sparked curiosity, as viewers were drawn into the spectacle without knowing the product, creating anticipation and engagement while subtly associating the MacBook Pro with innovation and revolutionary ideas.

3

For product launches, brands craft teasers that spark interest without revealing too much.

For instance, Apple teased the new iPhone 15 with the phrase "From the edge of the universe to the palm of your hand".

The teaser, being intentionally vague and concise, generated anticipation, ensuring a captivated audience.

Tips Curiosity Gap.

  1. Craft Intriguing Headlines. Write headlines that spark interest without revealing all the details, encouraging users to click and read more.
  2. Create Engaging Teasers. Design teaser content for products or services that provides just enough information to generate excitement and leave users wanting more.
  3. Utilize Mystery in Marketing. Incorporate elements of mystery and surprise in marketing campaigns to capture attention and drive user engagement.
🎭

Cognitive dissonance.

Feeling uneasy when actions clash with beliefs.

Coming

Definition Cognitive dissonance.

Cognitive Dissonance refers to the discomfort one feels when holding two conflicting beliefs or attitudes.

Often, individuals are motivated to alleviate this discomfort by changing their attitudes or beliefs to create a more harmonious mental state.

Cognitive dissonance works because it taps into users’ inherent desire for internal consistency.

When users encounter information or make actions that conflict with their existing beliefs or preferences, they are likely to adjust their attitudes or perceptions to resolve the inconsistency.

Examples Cognitive dissonance.

1

Apps like MyFitnessPal show users their exercise and nutrition progress.

If users perceive a gap between their goals and actual performance, the dissonance may drive them to adjust their habits to align with their fitness objectives.

The dissonance between users’ fitness goals and their tracked performance motivates them to change their behavior to achieve consistency between their objectives and actions.

Example of cognitive dissonance with MyFitnessPal
2

Nike highlights features like speed enhancement, grip, and comfort in their sneakers, helping customers justify the high cost.

Detailed product benefits ease the dissonance related to price, making customers comfortable with their high-value purchase.

An example of cognitive dissonance with Nike
3

Amazon offers a free Prime trial, allowing users to experience benefits like fast delivery and exclusive deals.

The dissonance of losing these perks after the trial ends often leads to subscription.

The trial showcases Prime’s value, making the subscription fee seem justified, reducing users’ initial hesitation.

Amazon prime free trial as an example of cognitive dissonance

Tips Cognitive dissonance.

  1. Introduce Positive Dissonance. Create situations where users’ actions conflict with negative self-perceptions, leading them to adopt more positive behaviors or attitudes.
  2. Highlight Inconsistencies. Gently point out discrepancies between users’ stated preferences or goals and their actual behavior to encourage adjustment and alignment.
  3. Provide Resolution Paths. Offer clear and straightforward ways for users to resolve the dissonance they experience, guiding them towards desired actions or decisions.

🧿

Hawthorne Effect.

Tendency of user to alter their usual behavior when they know they're being watched.

Coming

Definition Hawthorne Effect.

The Hawthorne Effect refers to the alteration of people's behavior when they are aware they are being observed.

In general, knowing that one is being observed often encourages individuals to perform better or alter their behavior to meet expectations.

In web design, this could mean that users might interact with a website or application differently if they know their actions are being monitored or analyzed.

Examples Hawthorne Effect.

1

Google's annual doodle contest exemplifies the Hawthorne Effect.

Knowing their creations could be showcased to millions, participants put extra effort into designing innovative doodles.

An example of the Hawthorne effect with Google Doodle contest
2

LinkedIn has a "Profile Strength" meter encouraging users to complete various sections of their profile.

Knowing that a more complete profile will be viewed more favorably by peers and potential employers, users are motivated to enhance and regularly update their profiles.

Linkedin example of the Hawthorne effect
3

Duolingo cleverly uses the Hawthorne Effect with its mascot, the "Duolingo Owl".

No seriously, it feels like this owl is personally watching over your language journey.

Add to this features like streaks and leaderboards fuel competition, motivating users to stay consistent and engaged, knowing others can see their progress.

This strategy subtly encourages continuous use of the app, enhancing language learning and user retention.

An example of Duolingo's use of the Hawthorne effect

Tips Hawthorne Effect.

  1. Make your site interactive. Tweaks like voting on articles, quizzes, or pick-your-own-adventure formats can keep users engaged. A watched user is a participating user.
  2. Publicize updates. Show users you're constantly improving your site, so they feel their usage impacts development, fostering a sense of engagement.
  3. Regularly request user feedback. Make them feel their opinion matters. User surveys or a feedback system helps their voice heard, keeping them active on your site.
💫

Feedforward.

When users know what to expect before taking action.

Coming

Definition Feedforward.

Examples Feedforward.

1
2
3

Tips Feedforward.

🥅

Goal-Gradient Effect.

As users get closer to a goal, their motivation increases to reach it faster.

Coming

Definition Goal-Gradient Effect.

Examples Goal-Gradient Effect.

1
2
3

Tips Goal-Gradient Effect.

🌓

Law of Prägnanz.

Users perceive and interpret ambiguous or complex images in the simplest possible way, as this requires less mental effort.

Coming

Definition Law of Prägnanz.

Examples Law of Prägnanz.

1
2
3

Tips Law of Prägnanz.

🎏

Law of Similarity.

The human eye tends to perceive a relationship between similar elements.

Coming

Definition Law of Similarity.

Examples Law of Similarity.

1
2
3

Tips Law of Similarity.

🗓️

Fresh Start Effect.

Users tend to take initiative to achieve a goal if there's a sense of a new beginning.

Coming

Definition Fresh Start Effect.

Examples Fresh Start Effect.

1
2
3

Tips Fresh Start Effect.

🎗️

Noble Edge Effect.

Users tend to prefer socially responsible companies and perceive them as more authentic.

Coming

Definition Noble Edge Effect.

Examples Noble Edge Effect.

1
2
3

Tips Noble Edge Effect.

☎️

Miller's Law.

On average, a user can only keep 7±2 items in their working memory.

Coming

Definition Miller's Law.

Examples Miller's Law.

1
2
3

Tips Miller's Law.

🎰

Variable reward.

People appreciate rewards much more when there's an element of randomness.

Coming

Definition Variable reward.

Examples Variable reward.

1
2
3

Tips Variable reward.

🗃️

Pseudo-Set Framing.

Tasks that are part of a whole are more exciting to accomplish.

Coming

Definition Pseudo-Set Framing.

Examples Pseudo-Set Framing.

1
2
3

Tips Pseudo-Set Framing.

🌊

Flow state.

Flow is a state of mind in which a person is completely immersed in an activity and their concentration is at its highest.

Coming

Definition Flow state.

Examples Flow state.

1
2
3

Tips Flow state.

🎖️

Occam's razor.

Users consider that simple solutions are often better than more complex ones.

Coming

Definition Occam's razor.

Examples Occam's razor.

1
2
3

Tips Occam's razor.

⏰ Act within a given time.

Users are often called upon, so they look for shortcuts
and quickly draw conclusions.

📈

Dunning-Kruger effect.

People tend to overestimate their skills when they have limited knowledge in a field.

Coming

Definition Dunning-Kruger effect.

Essentially, it's when people think they're smarter or more skilled than they actually are.

The effect was named after psychologists David Dunning and Justin Kruger, who first described the phenomenon.

It happens because individuals lacking knowledge or skill in a particular area also lack the awareness to accurately assess their own competence.

The problem they might tackle things they're not ready for, leading to mistakes and frustration.

To avoid this, keep it simple.

Examples Dunning-Kruger effect.

1

Duolingo is designed to help users progressively build their skills without overwhelming them.

It starts with simple words and phrases, gradually increasing in complexity, which helps prevent users from overestimating their language proficiency and taking on too much, too soon.

The Duolingo example for the Dunning-Kruger effect
2

IKEA's approach to furniture assembly instructions takes into account that users may overestimate their assembly skills.

The instructions are designed to be simple and step-by-step, with clear visuals that guide even the most inexperienced users through the process.

This prevents them from skipping ahead and making mistakes.

Ikea as an example of the Dunning-Kruger effect
3

Apple's iOS interface on the iPhone is crafted to be user-friendly, catering to all skill levels with its intuitive design and clear instructions.

It includes a Tips app for ongoing learning and Siri for easy navigation, ensuring users who overestimate their tech skills can still use their devices effectively.

If, however, you still don't know how to do something, there is a high chance that Apple themselves already answered your question.

An example of Dunning-Kruger effect with Apple

Tips Dunning-Kruger effect.

  1. Use Simplified Content. Crabby jargons may scare beginners off your site. Keep your content straightforward so all visitors, regardless of skill level, find it easy to understand.
  2. Offer Knowledge Tests. Encourage users to gauge their understanding of your platform/content. This will make them aware of areas they might need to improve, using the Dunning-Kruger effect.
  3. Provide Learning Resources. Once users recognize their gaps, offer additional resources to help them learn. This practically supports users, further reducing the Dunning-Kruger effect.
🪙

Sunk Cost Effect.

Spending more because you've already invested time and effort, even if it doesn't make sense.

Coming

Definition Sunk Cost Effect.

Ever found yourself watching a show only because you’ve already invested time in the first few episodes, even if it’s not that great?

That's the Sunk Cost Effect, where individuals continue an endeavor once an investment (time, money, effort) has been made.

You might think it's similar to the Commitment and Consistency Bias and you are right, it's connected.

While both biases result in individuals being hesitant to abandon an initiated action, the roots of this reluctance differ.

The Commitment and Consistency Bias stems from a desire to remain aligned with previous commitments, as discontinuation would result in Cognitive Dissonance.

Whereas the Sunk Cost Effect arises from an unwillingness to forfeit invested resources, making discontinuation feel like a loss.

Examples Sunk Cost Effect.

1

A typical example of this dynamic is in online gaming platforms.

Users initially make small commitments like creating characters, embodying Commitment & Consistency Bias.

These small commitments draw the player into the game world, establishing a basic level of engagement and investment.

As they invest time and money, accumulating assets and achievements, walking away becomes difficult due to the Sunk Cost Effect.

The more they invest, the harder it becomes to simply walk away from the game, as they would lose all the progress and assets they've accumulated.

Game designers in this case leverage both biases to attract and retain players.

The Sims Freeplay as an example of the sunk cost effect
2

Think of the subscription model of Spotify.

Once a user has paid for a premium account, they want to get their money's worth, making them more likely to use the service regularly.

They might even prefer Spotify over free alternatives because they've sunk cost into it.

Moreover, users are less likely to cancel their premium account even when they don’t use Spotify extensively.

It nudges them to keep the subscription to justify the initial cost, benefiting Spotify with recurring revenue.

Spotify example for the sunk cost effect
3

After opting for LinkedIn Premium for a job search, users tend to stay subscribed.

They aim to leverage the advanced features they’ve paid for, even if they might not need them as much after securing a job.

Linkedin premium as an example of the sunk cost effect

Tips Sunk Cost Effect.

  1. Leverage the Commitment and Consistency Bias. Introduce a progress bar for tasks, highlighting sunk costs and boosting users' drive to finish what they started, subtly initiating a commitment.
  2. Create Reward Systems. Implement reward or loyalty programs where users accumulate points or status, making them more likely to stick around to enjoy the benefits of their earned rewards.
  3. Offer free trials. After investing time, users are inclined to purchase to validate their investment. Introduce paid or premium features that offer value, enticing users to invest and continue using your service to maximize their purchase.
🧙

Barnum effect.

When you find general statements unusually accurate for yourself.

Coming

Definition Barnum effect.

The Barnum Effect occurs when individuals believe vague, general statements about personality to be highly accurate for them personally, even though they apply to a wide range of people.

This cognitive bias is often leveraged in horoscopes, fortune-telling, and online quizzes, making users feel understood and connected on a personal level.

It exploits people’s tendency to find personal meaning in general statements, leading them to believe that the information reflects their unique character.

This creates a sense of validation and understanding, enhancing engagement and trust in the source providing the information.

Examples Barnum effect.

1

Daily horoscopes provide general predictions that can apply to anyone, yet readers often find them personally relevant and insightful.

The vague and general nature of horoscopes allows individuals to interpret the information in a way that aligns with their life and experiences.

For instance, the sentence "you know where you are supposed to be" is vague and universally relatable, allowing individuals to ascribe personal meaning to it.

An example of the Barnum effect with a daily horoscope
2

ASOS utilizes the Barnum effect to customize shopping experiences & drive conversions.

With the tagline "Picked just for you", they make it all feel personalized for customers.

The suggestions aren't precisely tailored to the individual but are general enough to apply to large audience segments.

ASOS edit example for the Barnum effect
3

Netflix suggests movies or series with a message like "Because you watched [popular movie]...", giving the illusion of a personalized recommendation.

These suggestions are actually broad categories, such as action, romance or comedies, that could appeal to large groups.

This makes users feel like the Netflix experience is tailor-made just for them, increasing engagement and usage time.

Netflix's feature "Because you have watched" as an example of the Barnum effect

Tips Barnum effect.

  1. Craft Relatable Content. Use general yet compelling language in marketing messages to create a personal connection with a wide audience.
  2. Offer Personalized Insights. Provide users with quizzes or assessments that deliver general insights, creating a sense of personal understanding and relevance.
  3. Engage Users with Predictions. Share forecasts or predictions that are broad but engaging, encouraging users to find personal meaning and connection in the content.
🌦️

Affect heuristics.

People often rely on their emotions, rather than factual information, to make decisions.

Coming

Definition Affect heuristics.

Affect Heuristics is a mental shortcut that helps people make decisions based on their current emotions.

In UX design, it's crucial because users' feelings about a product can significantly influence their decisions and behaviors.

Examples Affect heuristics.

1

Instagram masterfully taps into affect heuristics by crafting an emotionally captivating experience.

With its palette of vibrant colors and visuals set against a minimalist white background (cf. Contrast), the platform is a feast for the senses.

Add to that the dynamic and interactive elements like Stories and Reels and intuitive navigation, and you've got a recipe that stirs up positive feelings, drawing users back time and again for more engaging and enjoyable interactions.

Instagram as an example of affect heuristics
2

Nike's "Just Do It" campaign is a brilliant application of the affect heuristic design principle.

Their commercials often feature motivational stories of athletes conquering hardships to succeed, stoking positive emotions like inspiration and determination.

This emotional connection influences and simplifies users' decision-making process towards purchasing Nike products.

3

Apple's product launches are perfect examples of Affect Heuristics.

The keynotes, hosted by charismatic presenters, introduce sleek, highly functional devices with inspiring presentations.

This approach creates a positive emotional connection, exciting customers about the product even before they handle it.

This excitement then influences customers' subsequent decisions – often to purchase.

Tips Affect heuristics.

  1. Use appealing visuals. Good aesthetics can evoke positive feelings and immediate favorability toward your website, leading to increased user engagement and conversion rates.
  2. Simplify decision-making. Overwhelming users with too many options can hinder conversions. Use fewer choices to make the decision process easier.
  3. Craft compelling narratives. Telling stories that strike emotional cords can sway user judgment and encourage buying decisions, leveraging affect heuristics.

🧗

The Labor Illusion.

People value a product more when they see the work that has gone on behind the scenes.

Coming

Definition The Labor Illusion.

The Labor Illusion means that consumers perceive good products more favorably when they are aware of the effort involved.

Making users wait for a product they've requested while showing them how it's prepared gives the impression of effort. Customers are then more likely to appreciate the results of this effort.

This is also known as the “KAYAK effect” (after the travel booking site that used this tactic).

Examples The Labor Illusion.

1

KAYAK (travel booking site) once delayed the loading time of the search results page to show that it: actively seeks the best results.

Exemple du labor illusion avec le site de vouyage Kayak.com
2

Starbucks now requires baristas to steam milk for each individual drink – a process that increases waiting time, but allows customers to see what's going on.

3

Tips The Labor Illusion.

  • Show that you're working. But time and effort aren't the only factors involved. Transparency is essential: consumers need to know that effort is being made on your part.
  • You can show the work behind your product or service by demonstrating the process it requires, while also showing what goes on behind the scenes.
🛌

Ikea effect.

People tend to appreciate an object more if they make (or assemble) it themselves.

Coming

Definition Ikea effect.

The IKEA effect, named after the Swedish furniture giant, describes how people tend to appreciate an object more if they make (or assemble) it themselves.

More generally, the IKEA effect shows that we tend to appreciate objects more if we've put some effort into creating them.

Examples Ikea effect.

1

Two groups received IKEA boxes, one fully assembled and the other unassembled, which they had to assemble. Members of the second group were willing to pay significantly more for their boxes than those who had received their pre-assembled boxes.

The above experiment was conducted by Michael I. Norton of Harvard Business School, Daniel Mochon of Yale and Dan Ariely of Duke.

2

Companies that sell services that facilitate creativity, benefit the most.

For example, Canva, a graphic design tool, offers its users tons of templates, photos, illustrations and fonts that let them bring their creativity to life.

3

Tips Ikea effect.

  • Please note that the IKEA effect only occurs if the object is successfully assembled. If people fail to build a product according to the instructions provided, the value they attribute to it does not increase - quite the contrary.
🔒

Belief perseverance.

When people's beliefs are challenged by evidence to the contrary, their beliefs are reinforced.

Coming

Definition Belief perseverance.

Belief perseverance refers to people sticking to their initial thoughts or beliefs, even after new info proves them wrong.

No one likes to be wrong because our brain loves coherence.

That's why we tend to favor information that supports our beliefs and disregard information that contradicts them (cf. confirmation bias)

This cognitive bias helps individuals maintain a consistent view of the world but can also prevent them from accepting new truths.

Examples Belief perseverance.

1

Let's start with a simple example.

Individuals may continue to support a political figure or policy even after new facts emerge that challenge the efficacy or morality of that choice.

This is often seen in the realm of political partisanship, where voters stick to their party's line despite evidence of its flaws.

That's also the reason why most Christmas dinners end up with you realizing your uncle will never align with your political views.

2

Consumers often stick with a favorite brand even when faced with evidence that another brand offers a better product or value.

This loyalty is partly due to belief perseverance, as consumers continue to believe in the superiority of their preferred brand despite contradictory evidence.

That might be one of the reasons why you have an iPhone even if competitors offer similar or superior products.

The belief in Apple's superiority, once established, is difficult to shake but not impossible.

3

Picture this: You're playing a game, but you're also picking up Spanish or French along the way.

Their app is colorful, friendly, and full of rewarding challenges that keep you coming back.

By completely changing the way to learn a new language with a game-like approach, yet keeping the app's design intuitive and simple, Duolingo has overcome the belief that language learning is difficult.

Duolingo's app interface as an example to overcome belief perseverance

Tips Belief perseverance.

  1. Simplify Your Design. Make your site as welcoming as a tidy living room. A clean, intuitive layout not only makes a great first impression but also encourages visitors to engage more deeply with your content.
  2. Maintain Design Consistency. Keep things where users expect them to be. Familiarity breeds confidence, and when users know where to find what they need, they're more likely to stick around.
  3. Ensure Predictable User Interactions. Users love knowing what to expect. For instance, a universally recognized "shopping cart" icon that leads to their selections reassures them and builds trust through predictable site navigation.

Fear of missing out.

Fear of Missing Out (FOMO) is the constant fear people have of missing an important news or event.

Coming

Definition Fear of missing out.

Fear of Missing Out (FOMO) is a design principle leveraging users' anxiety of not being part of an interesting, rewarding experience others are having.

Now, how does this work? Our brains are wired to avoid regret.

We don't want to miss opportunities. Brands tap into this by creating limited-time offers, exclusive deals, or showcasing low stock alerts.

By invoking a sense of urgency with fleeting opportunities, users are nudged towards immediate action.

Examples Fear of missing out.

1

Amazon’s annual Prime Day provides a prime example of the Fear of Missing Out (FOMO) design principle.

During this limited-time event, exclusive deals for Prime members are advertised with a countdown timer showing how much time is left to snag the offer.

The knowledge that these deals are fleeting creates a sense of urgency and scarcity, driving shoppers to make impulse buys they might otherwise mull over.

With the added element of competition - the awareness that other shoppers might beat you to checkout - Prime Day effectively utilizes FOMO to boost sales.

An example of the Fear of Missing Out Bias with Amazon Prime Day
2

When you're browsing accommodations on Booking.com, you'll often see a notification stating something like "only 6 left for this price", "10 people are looking at this

property right now", or even the percentages of places to stay unavailable for the dates you have picked.

An example of the Fear of Missing Out bias with Booking.com

The underlying message is clear: if you don't act fast, you might miss out on your preferred accommodation.

This isn't just about the property's popularity; it's about the potential fear and negative experience of not securing your desired stay.

Remember that negative feelings of disappointment are powerful and linger in our memories.

3

Picture this: You're scrolling through your favorite online store - let's say Asos - and you spot a pair of shoes you've been eyeing for weeks.

But just when you pick your size, a tiny notification pops up: "Low in stock"

Your heart races. You don't want to miss out. So, without a second thought, you buy them.

An example of the Fear of Missing Out bias with Asos

In this case, we're more driven to avoid negative experiences. Why?

It's not that we're pessimistic by nature; it's just that potential negative outcomes have a more significant impact on our psyche and decision-making processes.

Tips Fear of missing out.

  1. Use Limited Time Offers. Create promotions that are time-bound to create urgency. Ensure the timer is visibly ticking down on your site so your customers know they have limited time to act.
  2. Create Flash Sales. Use flash sales to keep your users engaged and excited. Alert them prior to the sale and let them know the window of opportunity is brief.  
  3. Show Limited Stock. Indicate items are in high demand and low in stock. This creates a sense of scarcity and propels users to act quickly to avoid missing out.
🚂

Bandwagon effect.

“Everyone's doing it, so I should too" describes our tendency to mirror group behavior.

Coming

Definition Bandwagon effect.

The Bandwagon Effect is a psychological phenomenon where people do something primarily because others are doing it, regardless of their own beliefs.

In UX, it’s used to improve conversion rates. If users see others buying a product, subscribing, or leaving positive reviews, they're more inclined to follow suit.

It's about harnessing the power of group influence to boost your website's popularity and credibility.

Examples Bandwagon effect.

1

McDonald's famously uses the Bandwagon effect in their advertising.

Have you noticed their "Billions and Billions Served" signs?

By showcasing that a vast number of people eat their food, this subtly encourages others to follow the crowd and grab a Big Mac too.

The message is simple: "Everyone else is doing it, why aren't you?"

An example of the bandwagon effect with McDonald's signs
2

When browsing a product on Amazon, potential buyers encounter a section titled "Customers who bought this also bought," promoting related items.

Visitors perceive these products as popular choices, thereby making them more trustworthy and appealing.

The underlying message? "Countless others found these items desirable, so you most likely will too."

An example of the bandwagon effect with Amazon
3

When opening their Creative Cloud suite on Adobe, a "Discover" tab awaits users.

This is filled with stunning design work by other Adobe users.

Without even realizing, you are inspired by the creativity of others - a silent nudge suggesting 'they did it, and so can you.'

This move encourages you to keep using their product suite by showcasing the creative possibilities.

The underlying conjecture? "Countless creatives have achieved brilliance with our tools, and you can too!"

Tips Bandwagon effect.

  1. Boost credibility and allure. Showcase the number of users or customers who've chosen your product, service, or even subscribed to your platform. "Join 5,000+ happy customers!"
  2. Build trust. Display ratings and testimonials from satisfied customers. They reflect positive experiences, effectively pushing others to jump on the bandwagon.
  3. Leverage authority and popularity. Share social proof like press coverage or endorsements from influential figures.
🛣️

Commitment & Consistency.

Once we choose a path, we're likely to stick with it.

Coming

Definition Commitment & Consistency.

Commitment & Consistency is a design principle rooted in people's desire to be consistent with past actions.

In web design, it's easier to ask users to make a small commitment (like signing up), making them more likely to engage in more demanding tasks (like buying a product).

But why does it work? It's tied to our self-image and the human need for coherence.

When we commit to something, even in a small way, it becomes part of how we see ourselves.

Acting in a manner consistent with that commitment reinforces our self-perception and reduces cognitive dissonance.

Examples Commitment & Consistency.

1

Look at LinkedIn's profile completion bar - a brilliant use of commitment and consistency.

When you start creating your profile, LinkedIn gives you a "completeness score" and provides clear, easy steps to achieve 100%.

Users are more likely to stick around, building a complete, professional profile, because they’ve already started the process.

This nudges members to commit to using the platform regularly, increasing user engagement and retention.

Note that this "completeness score" also taps into the Unit Bias.

You're more likely to complete your profile because the partial score nudges you to finish the "unit" you started.

LinkedIn example of commitment and consistency
2

Duolingo uses the commitment and consistency principle in its user experience design.

Once you start using Duolingo, you're asked to set a daily goal for language practice.

Whether it's 5 minutes or 20 minutes a day, the app encourages regular learning behavior.

The user also receives encouraging notifications and streak counts that reward consistency, inherently motivating the user to meet their daily goal.

If you miss a day, the streak resets, creating a sense of loss and motivating the user to keep the streak alive.

Learners made a small commitment by starting the process, making them more likely to continue regular use of the app.

Duolingo example of the consistency and commitment bias
3

Let's imagine you decided to buy the new iPhone 15.

An example of commitment and consistency bias with Apple's checkout process

After committing to buy an iPhone, Apple's checkout process offers Apple Care and accessories.

This is cross-selling, smartly leveraging Commitment and Consistency Bias to encourage adding these extras, consistent with the initial iPhone purchase.

An example of commitment and consistency bias with Apple's checkout process

The Apple Care option only appears after you've added the iPhone, and the lower-priced accessories act as a price anchor.

Because you've already committed to the iPhone, you're psychologically wired to stay consistent with that choice.

An example of commitment and consistency bias with Apple's checkout process

Tips Commitment & Consistency.

  1. Start your user's journey with easy choices. Initial low-stakes commitments foster rapport and confidence, paving the way for more significant actions later.
  2. Regularly solicit user input. Engaging users in polls or surveys promotes continuous engagement, nudging them to stay consistent with their commitments.
  3. Use persistent design elements. Consistent color themes, typography, and layout across your website helps establish familiarity and reliability, aiding solid commitment from the user.
🏦

Investment loops.

When users invest in something, they're more likely to come back.

Coming

Definition Investment loops.

Ever noticed how the more you invest time and effort into something, the more attached you become?

It's like tending to a plant.

The more you water and care for it, the more you want to see it flourish.

This design principle capitalizes on the idea that the more users invest time, effort, or even money into a product or service, the more they value it and the more likely they are to continue using it.

Why does it work?

Because humans inherently value things more when they've put effort into them. It's a cycle: invest, see the value, invest more.

Examples Investment loops.

1

Ever tried learning a language on Duolingo?

The more lessons you complete, the longer your streak becomes.

And the longer your streak, the more you want to keep it going.

You've invested time daily, and now you're not just learning a language; you're maintaining a record.

Duolingo brilliantly leverages this investment loop to keep users coming back every day.

Duolingo's streak as an example of investment loops

Note that this also taps into the Commitment and Consistency Bias.

Once users commit to a daily learning habit, they strive to stay consistent with that commitment, further driving engagement.

2

Consider apps like MyFitnessPal or Fitbit.

The more you log your meals, workouts, or steps, the more data you have on your fitness journey.

This investment of time and effort makes you more committed to the app and your health goals.

You've built a history, and now you're more motivated to continue and see further progress.

MtFitnessPal App as an example of the investment loops bias
3

Ever signed up for a content platform and been prompted to select your interests?

Take Medium for example. It feels like setting up your own personalized magazine.

From that moment, Medium begins to curate a feed tailored just for you.

Every article you read and every topic you select further refines this feed.

The more you engage, the richer your experience becomes.

This initial investment in setting up your preferences ensures you're more committed to returning and diving deeper into the content.

Medium's clap feature as an example of the investment loops bias

Tips Investment loops.

  1. Create game-like progress. Turn tasks on your site into challenges or stages. Users feel they're achieving something, boosting return rates and experiences.
  2. Incentivize involvement. Reward users for frequent visits or referrals. It fuels both their investment and boosts site interaction.
  3. Personalize the journey. Let users customize profiles or set preferences. They'll feel an attachment thus, revisiting to maintain their investment.
🕰️

Chronoception.

People perceive time subjectively.

Coming

Definition Chronoception.

Chronoception refers to how individuals perceive the passage of time, which can be influenced by various factors, including attention, stress, and the environment.

This cognitive bias affects how users interact with products and services, often leading to impatience or a distorted sense of time spent on a task.

A positive, engaging user experience can make time 'fly', reducing drop-offs.

Examples Chronoception.

1

Uber Eats offers real-time order tracking, easing users' uncertainty about delivery times.

This feature allows customers to follow their order’s journey, fostering a sense of control and anticipation.

Waiting feels shorter when you know your order's location, compared to being in the dark about it.

An example of Chronoception with Uber Eats

2

Many software installation processes use progress bars to visually represent the installation time, helping users understand the time required and reducing impatience.

An example of Chronoception with the Apple progress bar
3

Amazon minimizes the time perception between deciding to purchase and completing the transaction with its 1-Click Ordering feature, making the process feel quick and efficient.

Amazon's 1-Click Ordering feature as an example of Chronoception

Tips Chronoception.

  1. Speed is Key. Implement fast load times and responsive design to create a perception of speed and efficiency, reducing user impatience and abandonment.
  2. Engage While They Wait. Incorporate engaging content or useful information during loading or waiting times to make the wait feel shorter and more valuable.
  3. Visualize Progress. Use progress bars or indicators to provide users with a visual representation of time, helping them understand how long a task will take and reducing anxiety.
🔍

Discoverability.

The ease with which users can discover your features.

Coming

Definition Discoverability.

Discoverability Bias refers to the tendency of users to interact more with elements that are easy to find or discover.

In web design, this bias highlights the importance of making key features and content easily accessible and visible to users.

Users typically prefer straightforward and intuitive interfaces where important elements are immediately visible and accessible.

This ease of discovery reduces the cognitive load on users, making their experience smoother and more enjoyable.

Examples Discoverability.

1

Amazon’s prominent and easily accessible search bar at the top of the page.

The search bar is one of the most crucial elements, allowing users to quickly find products.

Its prominent placement and size make it immediately visible and accessible, catering to the Discoverability Bias and facilitating user navigation.

Amazon as an example of discoverability
2

Let's take the example of IKEA and its app - IKEA Place.

The app implements enhanced discoverability with Augmented Reality (AR) technology.

With IKEA Place, you can select any item from their extensive catalog and virtually 'place' it into your living space using the phone’s camera.

It's a cool interactive experience that lets users see how IKEA's furniture would look and fit into their homes.

This drastically improves the typical online purchase process by answering a critical customer question - "Will this look good in my space?".

3

Spotify excels in discoverability with features like "Discover Weekly," offering personalized song suggestions based on user history, making music exploration exciting and personal.

The navigation menu enhances this with sections like "Browse" for exploring top charts, new releases, and genres.

Plus, users get recommended radio stations aligned with their favorite songs and artists, facilitating deeper exploration of preferred music styles.

Spotify "Discover Weekly" as an example of discoverability

Tips Discoverability.

  1. Prioritize Key Elements: Place crucial elements like search bars, call-to-action buttons, and navigation menus in prominent, easily accessible locations.
  2. Use Visual Hierarchies: Design with colors, sizes, and placements that guide the user’s eyes to the most important elements.
  3. Implement Clear Navigation: Ensure that your site’s navigation is intuitive and straightforward, allowing users to easily find what they are looking for without hassle.
😫

Decision Fatigue.

Making a large number of decisions requires a great deal of mental effort, which reduces users' ability to make rational choices.

Coming

Definition Decision Fatigue.

Decision fatigue describes situations where we are making decisions, our remaining mental energy is diminishing, because the more decisions we make, the more mental fatigue we feel, and this affects everyone, including your customers.

Decision fatigue is the reason we feel overwhelmed when we have too many choices to make.

Examples Decision Fatigue.

1

Let's take the example of e-commerce sites, especially those with product sheets featuring numerous variations on the same product.

Instead of increasing conversion rates by offering your users a multitude of choices, you're actually discouraging them from taking action by offering them an abundance of choices.

So avoid adding a dozen variants to a single product.

Less is more. Or simply find a good way of presenting these variants:

2
3

Tips Decision Fatigue.

  • Facilitate your users' experience with a conversion-optimized web design that guides your users directly to your call to action.
  • Don't overwhelm your customers with information, long texts and calls to action galore.
🥽

Observer-expectancy effect.

Refers to the way in which a researcher's expectations can influence those being observed.

Coming

Definition Observer-expectancy effect.

The Observer-Expectancy Effect occurs when a researcher's expectations or biases cause them to unconsciously influence the participants of an experiment.

This effect can skew UX research, leading to designs that reflect the researcher's biases rather than the user's needs.

To mitigate this, UX teams employ strategies like double-blind studies and rigorous methodologies, ensuring that findings are based on genuine user behavior, not researcher influence.

This approach is crucial for creating user-centered designs.

Examples Observer-expectancy effect.

1

Netflix introduced an auto-play feature that automatically starts the next episode of a show when the current one ends.

After the launch, some users complained about it leading Netflix to offer the option to disable this feature.

This is just an example of how initial expectations of designers can lead to decisions that don't fully align with user preferences.

While we don't have the inside scoop on Netflix's testing procedures to know whether this created the problem, it's a clear reminder of the importance of aligning design choices with user preferences.

Note that this is also an example of the second-order effect.

2

Let's say a design team at a recipe app company introduces a feature that reads recipe steps aloud, expecting it to be a hit.

During testing, their enthusiasm inadvertently influences the feedback — users sense the designers' bias and react more positively than they truly feel.

Once the feature launches, genuine user feedback reveals that many find the automatic narration annoying, meaning the initial testing was skewed by their own expectations.

3

Tips Observer-expectancy effect.

  1. User-Centric Testing. Conduct user testing sessions where the designer or researcher's presence is minimal or non-existent. If you think that a certain feature is very helpful but it's not, you might influence the outcome during the test.
  2. Iterative Design with A/B Testing. Use A/B testing to compare different design versions without revealing which one is expected to perform better. Analyze the data to see which design truly works best based on user interaction, not designer expectations.
  3. Feedback Loops and Surveys. Implement anonymous feedback mechanisms on your website, like surveys or feedback forms, that allow users to provide their thoughts without any direct influence from the design team. This can provide insights into what users actually need and want from the website.

💸

Cashless Effect.

We spend skyrockets when we don't use physical cash.

Coming

Definition Cashless Effect.

The Cashless Effect is the hidden force behind seamless transactions.

It's all about making online payments so easy that customers hardly notice the payment step, reducing friction.

The key? Intuitive interfaces, pre-saved payment details, and one-click solutions.

As simplicity prevails, conversion rates soar, leading to a massive boost in a website's financial performance.

Examples Cashless Effect.

1

Uber automatically charges rides to the user’s saved card, making the payment process invisible and painless.

The absence of a visible transaction at the end of the ride minimizes the pain of paying, leading to more frequent use of the service.

Uber example of the cashless effect
2

Amazon’s One-Click ordering allows instant purchases without going through a lengthy checkout process.

The swift and effortless transaction encourages impulsive buying as it doesn't give the user much time to contemplate the expense.

The example of Amazon’s One-Click ordering for the cashless effect
3

Monthly subscriptions for services like Netflix or Spotify automatically deduct fees, making users less aware of the ongoing expense.

Regular, automatic deductions feel less impactful than one-time large payments, leading to prolonged subscription commitments without much thought.

Netflix monthly subscriptions as an example of the cashless effect

Tips Cashless Effect.

  1. Implement Easy Payment Options. Integrate seamless, quick payment methods to facilitate impulse purchases and reduce cart abandonment.
  2. Offer Subscription Models. Subscriptions with automatic renewals capitalize on the Cashless Effect, encouraging long-term commitment to services.
  3. Promote Contactless Payments. Encourage the use of contactless or mobile payments for in-person transactions to make spending feel effortless and convenient.
🍫

Temptation Coupling.

Difficult tasks are less frightening when they're associated with something users want.

Coming

Definition Temptation Coupling.

Temptation Coupling is a design strategy that pairs a desired action (like making a purchase) with an immediate reward (such as a discount).

In UX design, it means combining a pleasurable user experience with actions that are beneficial but might be procrastinated or avoided.

It's like making a healthy smoothie tastier by adding a dash of chocolate. A tempting win-win!

Examples Temptation Coupling.

1

Nike Run Club app couples the challenging action of completing a run with earning exclusive badges and rewards.

As users complete various running milestones, they unlock badges and personal records, making the tough task of running feel more rewarding and tempting.

This coupling of a challenging activity with a pleasurable reward encourages users to keep running and engaging with the app.

Nike Run Club badges as an example of temptation coupling
2

Amazon stores often offer a "Quick Checkout" or "Buy Now" button, allowing users to make a purchase directly from the product page, skipping the cart page.

This couples the desired action of making a purchase with a streamlined, faster checkout process, making the shopping experience more pleasurable and increasing the likelihood of immediate purchase.

Amazon "Buy now" option as an example of temptation coupling
3

When purchasing an item on Amazon, you’re subtly nudged towards additional related items under "Frequently Bought Together," encouraging a larger purchase.

Additionally, the offer of a free Amazon Prime trial for faster delivery tempts users to subscribe, coupling the immediate reward of quick shipping with the initial purchase.

This way, Amazon couples the necessary action (buying a product) with tempting offers and conveniences (other items or free shipping with a free trial of Prime).

Amazon example of the Tempation coupling bias

Tips Temptation Coupling.

  1. Use rewards to complete tasks. Offer users a gift, discount, or exclusive content when they sign up, finish a purchase, or complete a task. This spices up a mundane task with tempting bonuses.
  2. Blend learning with engaging content. Incorporate fun quizzes, interactive infographics, or catchy videos into content to make the learning process feel less of a burden.
  3. Implement gamification. Turn tasks into games with levels, points, and so on. This makes routine actions feel like exciting missions, enhancing user engagement.
🕯️

Loss aversion.

People prefer to avoid the pain of losing, as it is psychologically twice as important as the pleasure of winning equivalent gains.

Coming

Definition Loss aversion.

Loss aversion is a cognitive bias that describes why, for individuals, the pain of losing is psychologically twice as strong as the pleasure of winning.

In other words, losing €1,000 will "hurt" more than the satisfaction of winning €1,000.

Examples Loss aversion.

1

Insurance companies try to attract new customers by showing the many potential and costly losses an individual may suffer in his or her lifetime.

To avoid these losses, an individual would prefer to pay low ongoing costs, which is the case with most insurance companies and their business models.

2
3

Tips Loss aversion.

  • Formulate your offer in terms of loss. Make it risky. Offer a reference point for comparison.
  • Inspire the "fear" of losing a unique offer. Be definitive, setting a deadline. Be precise, stating a clear loss.
🙂

False consensus effect.

People think others agree with them more than they actually do.

Coming

Definition False consensus effect.

The False Consensus Effect is a cognitive bias where individuals overestimate how much others share their values, beliefs, and behaviors.

In other words, people tend to think their own preferences and behaviors are more common than they actually are.

In web design, it’s thinking that users will automatically understand the interface because it makes sense to the designer.

Examples False consensus effect.

1

Many websites use familiar layouts and design patterns, like the top navigation bar and footer.

This format is assumed to align with user expectations and browsing habits rather than with the designer's preferences or aesthetic inclinations.

This ensures a user-centric approach that enhances engagement and satisfaction.

Websites examples false consensus effect
2

Do you remember trying to free up some space in your Apple Music library, only to find you couldn't delete that U2 album, no matter how hard you tried?

Here’s why: In 2014, Apple gifted iTunes users with U2’s new album, Songs of Innocence, thinking everyone would love a free album from the iconic band.

And if you weren’t a U2 fan, this might have rather felt like an intrusive gift.

User's frustration led Apple to eventually offer an option to remove the album, which I was apparently not aware of because I still have this U2 album on my apple music library.

And guess what? Since I was forced to, I actually started enjoying the album years later!

But still, don't assume everyone has the same taste in music as you.

An example of the false consensus effect with Apple music
3

Platforms like Facebook introduced the 'like' button, assuming that users would want a quick and easy way to express approval or enjoyment.

They introduced features that seem intuitive to the majority of users.

This has since become a standard feature across various platforms.

Tips False consensus effect.

  1. Create user personas. Understand different user types. Avoid designing for an “average” user who doesn’t exist - not everyone thinks like you.
  2. Carry out user testing. Your preferences might not represent your target audience's. Test different variations to identify what suits them best. Maintain open channels for user feedback.
  3. Encourage feedback. Maintain open channels for user feedback. It sheds light on actual user preferences instead of you assuming them.
🔄

Status Quo bias.

People tend to stick with what they know and resist change.

Coming

Definition Status Quo bias.

Status Quo Bias in design refers to users' natural resistance to change.

Picture it as that cozy blanket of comfort we wrap ourselves in, preferring to keep things just the way they are.

In the digital realm, it's about understanding that users often lean towards familiar choices, resisting change even if a new option might be beneficial.

But here's the twist: change isn't the enemy. The challenge lies in how it's introduced.

Users can embrace change when it's presented as a clear upgrade to their experience or if it's subtile.

Examples Status Quo bias.

1

Think of Amazon Prime. Users quickly adapt, enjoying the convenience and benefits.

But here's the catch: once the trial ends, they're automatically rolled into a paid subscription.

Why does this work? Why most people do not cancel the subscription?

Because by then, Amazon has made us accustomed to a superior experience, a better status quo.

The thought of reverting to a world without those perks feels like a step backward.

Amazon capitalizes on our natural resistance to change, our tendency to stick with the default, and the effort required to change it.

Note that Amazon show a great understanding of another biases: the Reciprocity Bias.

2

Think about the last time Apple rolled out an iOS update.

Icons, layouts, and core functionalities - they're tweaked but not overhauled.

That's not by accident. Apple isn't just updating; they're carefully maintaining your personal "status quo."

Why? Apple knows the importance of the Status Quo Bias.

Any shift or replacement in functionality isn't just for the sake of change; it's always a trade-up for better.

It's like moving into a renovated house but finding your favorite couch still in the living room, offering that reassuring continuity.

The apple updates as an example for the status quo bias
3

It's Friday night, and you're diving into your Netflix account, ready for a movie marathon.

But with a world of choices, where do you even begin? Here's where Netflix plays it smart.

Instead of pushing the newest or most popular titles on you, they gently steer you with "Because You Watched" lists.

It feels like Netflix is saying, "You enjoyed this before, so why change the rhythm now?"

They're not just catering to your tastes; they're acknowledging your preference to stick with what's familiar.

By doing so, they're tapping into our inherent resistance to change, our comfort in the known.

Note that Netflix's strategy is a masterclass in combining the Status Quo Bias with a deep understanding of the Familiarity Bias, making our viewing choices both comforting and intuitive.

An example of the status quo bias with Netflix

Tips Status Quo bias.

  1. Give them the choice. Give your users the option of sticking with the default settings. They are more likely to leave them untouched, so use that to guide their experience favorably.
  2. Set up auto-renew plans for your offerings. Humans naturally prefer to keep things the same so users are less likely to cancel a recurring plan.
  3. Do minor, justified and valuable changes. When redesigning your web interface, keep core components familiar. Abrupt changes can cause disarray. Ease users into new designs to encourage retention. Show users the tangible benefits of the change.
👎

Dark Pattern.

These are deceptive UX/UI interactions, designed to trick users into doing something they don't want to do.

Coming

Definition Dark Pattern.

Dark Patterns are deceptive design practices on websites and apps that trick users into taking actions they might not intend to, like making a purchase or signing up for a subscription.

These manipulative tactics exploit users' cognitive biases and heuristics, leading them to make decisions quickly without fully understanding the consequences.

They often leverage urgency, ambiguity, and misleading visuals to confuse or rush users into taking specific actions.

Implementing these practices doesn't necessarily hinder business; but it shapes users' perception of your brand.

How you choose to engage with users ultimately depends on your brand's desired image and your genuine concern for delivering value to users.

Examples Dark Pattern.

1

E-commerce sites sometimes display a countdown timer suggesting a sale is about to end.

However, if you visit the site later, you might notice the timer has reset.

This tactic creates a false sense of urgency, pressuring users to make impulsive purchases.

The countdown reset for sales as an example of dark pattern
2

Some email newsletters make it deliberately difficult to unsubscribe.

The 'unsubscribe' link might be hidden in small, light-colored text at the bottom of the email.

This discourages users from opting out and keeping them on the mailing list against their wishes.

An example of dark pattern with hidden unsubscribe button
3

During sign-up processes, websites might use confusing language in their opt-in/opt-out options or pre-select options.

This leads users to inadvertently agree to things like receiving promotional emails or sharing data with third parties.

Pre-selected options as an example of dark pattern

Tips Dark Pattern.

  1. Prioritize Clarity. Clearly communicate information, avoiding misleading elements. Users should easily understand the information presented without confusion.
  2. Promote Transparency. Be open and transparent about your practices, especially regarding data usage. Users should know how their data is used and have options regarding their data privacy.
  3. Reflect on Brand Image: Ethical design practices contribute positively to your brand's image and trustworthiness. While Dark Patterns may offer short-term gains, ethical practices ensure long-term trust and loyalty from users.

🔥

Second-Order Effect.

Each action leads to a consequence, and each consequence follows another.

Coming

Definition Second-Order Effect.

Second-Order Effect refers to the indirect impact, consequence, or result that arises due to a change or decision made initially.

Understanding and anticipating Second-Order Effects helps designers create more sustainable and effective solutions.

By considering the ripple effects of design decisions, designers can prevent unintended consequences and foster positive user engagement and satisfaction in the long run.

Examples Second-Order Effect.

1

Initially, the 'Like' button on Instagram was introduced as a quick way for users to express their appreciation for content.

However, over time, it led to unintended second-order effects, such as users equating 'likes' with self-worth and validation, leading to mental health concerns for some.

Instagram decided to hide public 'Like' counts, unless the users prefer to display them.

An example of second order effect with Instagram's likes
2

Originally, Netflix's autoplay was all about keeping you glued, playing previews or the next episode instantly. But let's be real, it got annoying for many.

After a flood of tweets calling for more user control over this feature, Netflix gave in and added an option to turn it off.

And if you've been pulling your hair out over this, good news! Here's a tutorial on how to disable it.

Trust me, you're not alone in wanting that peace!

3

Spotify introduced "Wrapped" to offer users a recap of their yearly music habits.

Users began sharing these on social media, unexpectedly turning Wrapped into an annual social media event where people enjoy comparing their taste in music.

This ultimately served as organic promotion for Spotify.

This feature, meant as a simple recap, evolved into a significant engagement and marketing tool.

An example of second order effect with Spotify Wrapped

Tips Second-Order Effect.

  1. Test decisions in phases. Apply changes gradually to measure their short-term immediate effects and long-term second-order effects.
  2. Foster feedback loops. These give insights on user behavior changes over time, essential for observing second-order effects.
  3. Embed data tracking. Continually analyze user interaction data, efficiently tracking evolving second-order effects.
📢

Reactance.

Users are less likely to adopt a behavior when they feel forced.

Coming

Definition Reactance.

Examples Reactance.

1
2
3

Tips Reactance.

🤏

Weber's Law.

Users adapt better to small, gradual changes than to a complete overhaul.

Coming

Definition Weber's Law.

Examples Weber's Law.

1
2
3

Tips Weber's Law.

👺

Self-serving bias.

The tendency to attribute positive events to oneself, but to attribute negative results to external factors unrelated to oneself.

Coming

Definition Self-serving bias.

Examples Self-serving bias.

1
2
3

Tips Self-serving bias.

📉

Hyperbolic Discounting.

People tend to choose immediate rewards over future rewards, even if those immediate rewards are less important.

Coming

Definition Hyperbolic Discounting.

Examples Hyperbolic Discounting.

1
2
3

Tips Hyperbolic Discounting.

⏱️

Planning Fallacy.

People underestimate the time needed to complete a task, as well as the associated costs and risks, even if this contradicts their own experiences.

Coming

Definition Planning Fallacy.

Examples Planning Fallacy.

1
2
3

Tips Planning Fallacy.

Parkinson's law.

People will continue to work on a task until their allotted time is reached.

Coming

Definition Parkinson's law.

Examples Parkinson's law.

1
2
3

Tips Parkinson's law.

🔨

Law of the instrument.

When people acquire a new skill, they tend to see opportunities to use it everywhere.

Coming

Definition Law of the instrument.

Examples Law of the instrument.

1
2
3

Tips Law of the instrument.

🦥

Pareto Principle.

80% of the results are the fruit of 20% of the actions implemented.

Coming

Definition Pareto Principle.

Examples Pareto Principle.

1
2
3

Tips Pareto Principle.

💾 Store interaction in memory.

Users try to remember what's most important, but their brain prioritizes
certain elements over others.

🛍️

Chunking.

People retain more information when it's grouped together.

Coming

Definition Chunking.

Chunking is a design principle that involves breaking information into manageable “chunks” or sections, making it easier for users to process and remember.

This technique reduces cognitive load, enhancing user experience by presenting information in a way that aligns with how the human brain works.

Why does it work?

Chunking works because the human working memory can only hold a limited amount of information at once.

By organizing data into smaller units, users can more easily understand, remember, and interact with the information presented.

Examples Chunking.

1

When you first visit YouTube, videos are organized into various categories or “chunks” like "Trending", "Music", or "Gaming".

This chunking of content allows users to easily navigate without feeling overwhelmed by the vast amount of content available.

Users can quickly identify and choose the category that interests them, making the browsing experience more enjoyable and efficient.

Youtube's homepage example for chunking
2

Online stores often use chunking in product categories.

For instance, Amazon organizes millions of products into broader categories like "Electronics", "Books", or "Clothing".

Within each, there are sub-categories, further chunking information to aid user navigation.

This structure simplifies the search process for users, allowing them to find products faster and with less cognitive effort.

Example of chunking with Amazon
3

In real life, when learning a language, we naturally break down information into smaller units, due to our brain's limited capacity.

This step-by-step approach makes the process less overwhelming and aids in better retention and understanding.

Online learning platforms like Duolingo emulate this natural learning process.

Once you start using Duolingo, you're asked to set a daily goal for language practice.

They employ chunking by dividing lessons into bite-sized sections, making the learning process appear more achievable for users.

Note Duolingo also leverages the Commitment and Consistency Bias with its streak system.

An example of chunking with Duolingo

Tips Chunking.

  1. Break Down Information. Translate big, confusing data into "bite-sized" pieces. Short paragraphs, bullet points, and numbered lists make complex concepts more digestible.
  2. Use Headers/Sub Headers. Divide your content with clear, distinct headers. These act as guideposts and help readers find specific information quickly.
  3. Group Related Ideas. Put similar ideas, like product features or team bios, together. This helps readers make connections faster and improves memory recall.
🖼️

Picture superiority effect.

Images are remembered better than words.

Coming

Definition Picture superiority effect.

People are more likely to remember images compared to words. That is as simple as that.

That does not mean it's more important than text or that should exclusively use images on your website.

But sometimes it's more powerful to simply add an image instead of more text.

Remember that every design choice you make should be driven by user experience.

Examples Picture superiority effect.

1

"Smoking Causes Lung Cancer". You must have seen this warning on cigarette packets.

When this message started to be accompanied by a picture, the warning became more impactful.

An example of the picture superiority effect with warnings on cigarette paket
2

Explore Apple's website for the latest iPhone 15 Pro. The best way to sell something is to show it.

And that's what they do, they don't talk about the new iPhone, they just show it.

An example the picture superiority effect with the new iPhone 15 Pro
3

When you land on Nike's website, you're greeted with high-quality, dynamic images of athletes using their products.

These powerful visuals do more than just showcase sneakers; they convey a compelling story of professionalism and high-quality performance.

And this is much more convincing when you see it rather than when you read it.

An example of he picture superiority effect with Nike

Tips Picture superiority effect.

  1. Make it relevant. The idea is not to put images everywhere. Use images related to your content. The pictures should enhance the understanding of your text and make it more memorable.
  2. Quality matters. Use high-quality, clear, and vivid images. Blurry or low-quality visuals can lead to a negative perception of your content.
  3. Balance. Don't overload your page with images. Maintain a healthy balance between text and visuals for an optimal user experience.
📖

Storytelling.

People remember stories, not information.

Coming

Definition Storytelling.

Storytelling in UX involves using narrative techniques to create a more engaging and meaningful user experience.

This helps users connect with the products or services on a more personal level.

It makes the user experience more human, memorable, and emotionally impactful.

Examples Storytelling.

1

A company’s "About Us" page narrates the brand’s journey, values, and mission.

It helps users connect with the brand on a personal level, understanding its ethos and journey.

An example of storytelling with Veja

2

Some brands use storytelling in product descriptions, narrating where and how a product is made.

It adds depth to the product, making it more appealing by providing context and background.

An example of storytelling with Veja's product description
3

In 2019, Nike launched a campaign about the tennis superstar, Serena Williams, titled "Dream Crazier".

Here, Nike conveyed Williams's narrative journey - from her dreams as a little girl to her struggles and ultimate victories in becoming one of tennis's greatest players.

This storytelling approach presented an emotionally compelling narrative, connecting customers to the brand beyond product lines.

Tips Storytelling.

  1. Humanize Your Content. Make your content relatable. Incorporate real-life elements that resonate with users’ experiences and emotions.
  2. Maintain Consistency. Ensure that the story aligns with your brand’s voice and message. It should be a coherent part of your overall content strategy.
  3. Engage Emotionally. Try to establish an emotional connection through your story. Make users feel a part of your journey or cause.

🎫

Endowment effect.

Users value something more if they feel it belongs to them.

Coming

Definition Endowment effect.

The endowment effect describes how people tend to place more value on goods they own than those they don't.

Users are more likely to want to keep something they already own than to acquire it again.

They tend to overvalue the things they own, whatever their objective market value. (cf. Loss aversion)

Examples Endowment effect.

1

For example, Shopify offers a blog and free guides, all designed to help customers develop their e-commerce store.

Offering a free trial, as Shopify does, also leverages the endowment effect, especially if users are encouraged to create their own store during the 14-day trial.

2

The Apple showroom allows visitors to touch and use all the products without time limit.

Staff are asked not to pressure visitors to leave, and the showroom itself is open and welcoming to reinforce the sense of belonging.

3

Ever wonder why Nike lets you customize your shoes before you buy them?

It's a strategic deployment of the endowment effect. Nike's "Nike By You" option lets you design your dream shoes, tweaking every minor detail from shoe materials to your signature logo.

It's not just about buying shoes; it becomes about creating something of your own.

As you spend time tailoring your shoes, you slowly start to see them as more valuable, as they're imbued with your personal style.

The emotional investment is often high enough to close the deal.

An example of the endowment effect with the cus


Tips Endowment effect.

  1. Start a free trial. If folks can use and customize your product for a while, they grow attached, making it harder to let go.
  2. Free samples or customization options. Users cherish things they've helped create or things they own. Offering a part of your product for free invokes a sense of ownership.
  3. Displaying "My". Use words like "my" in user space. Words like "my profile" or "my setting" enhance a sense of personal ownership of the digital space.
💪

Shaping.

Crafting behavior step-by-step makes complex tasks less daunting.

Coming

Definition Shaping.

Shaping is a design strategy that involves gradually guiding users through more complex tasks by breaking them down into manageable steps.

This technique helps users build confidence and competence, encouraging them to engage more deeply with a product or service.

It prevents users from feeling overwhelmed and promotes learning and mastery over time, enhancing the overall user experience.

Examples Shaping.

1

Duolingo starts users with basic words and phrases, gradually introducing more complex sentences and grammar as users progress.

This approach helps users build language proficiency over time, preventing them from feeling overwhelmed by complexity early on.

An example of shaping with Duolingo exercises
2

IKEA masterfully employs Shaping in their product assembly process.

Customers are eased into assembly with simple tasks like identifying parts, followed by detailed, pictorial instructions for each step.

This gradual approach makes the process feel less daunting.

An example of shaping with Ikea
3

Airbnb’s design prominently features rounded shapes and consistent styles, creating a warm, home-like feel.

They also maintain consistency by using similar shapes and styles for all listing images, buttons, and icons.

Thus, users can quickly identify actionable items and important information.

Airbnb example of shaping

Tips Shaping.

  1. Structure Matters. Use shapes to direct the user's attention. Cones, arrows, or lines, can guide the eye towards important content.
  2. Round vs Sharp. Soft, round shapes are friendly and inviting, while sharp corners demand caution. Choose based on the emotion you want to evoke.
  3. Be Consistent. Keep shapes, sizes, and colors consistent for similar actions or information. It reduces user confusion.
🌔

Zeigarnik effect.

People tend to remember interrupted or incomplete tasks or events more easily than completed ones.

Coming

Definition Zeigarnik effect.

Have you ever found yourself thinking about a partially completed school or work project while trying to concentrate on something else? Or perhaps you've wondered what's going to happen next in your favorite soap opera?

If so, you've experienced the Zeigarnik effect, the tendency to remember unfinished tasks better than completed ones.

According to Lewin's theory, a task in progress creates task-specific tension. This tension subsides when the task is completed.

But if the task is interrupted, any reduction in tension is impeded. With permanent tension, relevant information becomes more accessible and easier to remember.

Examples Zeigarnik effect.

1

Marketers often use progress bars for forms or checkout processes.

This bar reminds users where they are in the process and motivates them to complete the action.

The effect is often enhanced if the bar is already in the middle of the process when it first appears, making the user feel more involved.

2

LinkedIn is quite famous for using this technique. Instead of presenting users with a long, overwhelming list of questions, it simply asks them to sign up first, then collect information later, in a very clever way.

3

Showing a progression and a list of tasks to complete is a common practice to motivate players to immerse themselves in games.
But it's also a widely used and motivating practice found in language learning applications: gamification.

Tips Zeigarnik effect.

  • Providing a progression towards a goal ensures that users are more likely to be motivated to complete the task.
😈

Negativity bias.

People recall bad experiences better than good ones.

Coming

Definition Negativity bias.

Negativity bias is a tendency of users to give more importance to negative experiences over neutral or positive ones.

Sometimes people are even more curious about the negative details.

Why? It's evolutionary - our ancestors needed to remember threats to survive.

Picture it as the reason why you remember that one negative comment on your post despite the 99 positive ones.

Examples Negativity bias.

1

Turn on the news on any given day, and you're likely to be met with a barrage of headlines highlighting crises, controversies, and calamities, all negative news.

But is the world truly as bleak as the news portrays, or is something else at play?

News media are a great example of negativity bias

The media understands that negative stories capture attention.

This isn't because positive events are less newsworthy, but because negative events evoke stronger emotional reactions, making them more memorable and shareable.

2

Insurance companies often spotlight potential disasters in their ads: homes ravaged by storms, accidents without coverage, or even a bear attack on your car.

This strategy taps into our negativity bias, and it simultaneously plays on loss aversion, which refers to our innate desire to avoid losses rather than acquiring gains.

Note that both principles are connected.

Consider the Allstate's "Mayhem" campaign where the character "Mayhem" personifies everything that could go wrong in your life.

They present various potential very negative situations that resonate with you, positioning themselves as the solution to help you better cope with these challenges.

The message is clear: without the right insurance, you're vulnerable to all sorts of "mayhem" or disasters.

The ads play on the viewer's strong emotional response in the view of these potential disasters (negativity bias) and the potential losses they could incur (loss aversion).

3

Nike doesn't shy away from showcasing negative reviews alongside positive ones. Ok, now this sounds very counterintuitive.

Why would a platform want to highlight negative feedback?

Let me explain. Nike knows exactly we'll pay more attention to negative information. That's the whole point.

When users see both positive and negative reviews, they're more likely to trust the platform's authenticity. It feels genuine, balanced, and unbiased.

The presence of negative reviews can actually enhance the credibility of positive ones.

An example of the negativity bias with Nike negative reviews

In this case, negativity bias is not leveraged to drive immediate action but to build trust and credibility.

Tips Negativity bias.

  1. Highlight mistakes avoidance. Tell users how they can prevent problems or losses on your site. It'll grab attention as people are more inclined to avoid losses than make gains.
  2. Emphasize negative reviews. Got a product with mixed reviews? Show it! Users who see it might dig deeper to see if negatives are deal-breakers, increasing page engagement.
  3. Combine with Loss Aversion Bias. Accentuate possible losses and underscore negative outcomes to motivate users to take decisive action.
🎢

Peak–End Rule.

People remember and judge an experience by how they felt at its peak and at its end.

Coming

Definition Peak–End Rule.

The Peak-End Rule is a psychological bias whereby people judge an experience based primarily on what they felt at its peak and at its end, rather than on the sum total or average of each moment of the experience.

This effect occurs regardless of whether the experience is pleasant or unpleasant.

These peaks, when pleasant, often correspond to memorable experiences (cf. delighters) in the user's journey, hence the expression “ending on a good impression”, which refers to the “Peak-End Rule”.

Examples Peak–End Rule.

1

If the meal you had in a restaurant was horrible, and you ended it with a delicious dessert, you'll have better memories of it.

2

The break-up of a relationship is also a common example, as we can vividly recall a heartbreaking or painful break-up.

3

Tips Peak–End Rule.

  • Pay particular attention to the most intense points and final moments (the "end") of the user journey.
  • Identify the moments when your product is most useful, most valuable or most entertaining, and design it to delight the user at these moments.
  • Remember that people remember negative experiences more easily than positive ones.
💡

Delighters.

Users are more likely to remember the unexpected, playful pleasures of a product, which lends credence to the company.

Coming

Definition Delighters.

Originating from the 1980s Kano Model, delighters are unexpected features or qualities in a product or service that bring joy to users, enhancing their overall experience.

These elements often exceed expectations, turning ordinary interactions into memorable ones and fostering user loyalty.

How does it work? It taps into the users' emotions, creating positive feelings towards a product or service.

This emotional connection not only enhances user satisfaction but also promotes long-term loyalty and advocacy.

Examples Delighters.

1

Amazon surprises and delights its customers by offering same-day or next-day delivery on certain products.

This service exceeds the usual delivery expectations, providing instant gratification to users and encouraging repeat purchases.

Amazon's fast delivery option as an example of delighters
2

Google transforms its homepage logo into creative and interactive doodles to celebrate various events and anniversaries.

Take the one celebrating the Appalachian Trail, for instance.

With a click, you could explore highlights of the world's longest hiking-only footpath.

These delightful doodles aren’t just for kicks — they sneak in nuggets of knowledge about important events and cultural milestones.

Google's doodles as an example of delighters
3

Spotify Wrapped is an annual delight, offering users a snapshot of their top songs, artists, and genres.

It’s a fun, shareable recap that prompts reflection on your musical year, often revealing unexpected favorites.

With a tap, you can share your musical taste on Instagram, joining the global conversation.

This not only boosts Spotify's visibility but also sparks interest as people compare and discuss their music discoveries!

Spotify annual top songs litst as an example of delighters

Tips Delighters.

  1. Surprise Users. Incorporate unexpected, pleasant features or services that surprise users, making their experience memorable and enjoyable.
  2. Personalize Experience. Offer personalized elements that resonate with individual users, making them feel valued and understood.
  3. Create Emotional Connections. Design features that evoke positive emotions, fostering a deeper connection between users and your product or service.

Availability heuristic.

Users prefer recent and available information to old.

Coming

Definition Availability heuristic.

The Availability Heuristic is a mental shortcut that relies on immediate examples that come to a person's mind when evaluating a specific topic, concept, method, or decision.

That might be why when someone says "Should we get fast food?", your brain jumps straight to McDonald's or Burger King — depending on your fast food allegiance.

Why does it work? Because brands know how to make you loyal. Let's find out how.

Examples Availability heuristic.

1

Let me ask you something: What would come first to your mind if I asked you to buy me a very specific book?

Amazon, right? Now, why would that be? It's because Amazon has cleverly cemented itself in our minds as the go-to for just about anything we need to purchase.

Shopping on Amazon is easy: quick access to crucial info like reviews, one-click purchases, and a vast selection of pretty much everything.

It's not just about being big; it's about being the first and most accessible option in our minds.

Amazon as an example of availability heuristic
2

Apple excels at using visuals to make product features memorable, particularly in their marketing for devices like the iPhone.

They use high-quality images and videos to showcase design, camera capabilities, and new technologies, making complex information engaging and easy to remember.

This visual strategy, focused on evoking emotions and highlighting innovation, is central to Apple's brand identity.

That's part of the reason why most people think of Apple when they think of buying a phone.

An example of availability heuristic with apple visuals
3

Tips Availability heuristic.

  1. Highlight success stories. Users will remember easily available information. Prominently showcasing customer testimonials can reinforce positive perceptions of your product or service.
  2. Use visuals. Images stick in people's minds longer than words. Use relevant visuals to make important information more memorable.
  3. Keep key info front and center. Flooding users with information makes it harder to recall. Pin essential data at easily viewable spots.
🌌

Spacing effect.

Our learning improves when study sessions are spaced out over time.

Coming

Definition Spacing effect.

Information sticks better when learning is spread over time, not crammed all at once — just like how school lessons are divided into multiple sessions to avoid overwhelming students.

Now what does it mean in web design? It should feel easy to navigate through the interface you are creating.

This simply means delivering content in digestible intervals (cf. Chunking). Space out your content visually but also temporally.

Examples Spacing effect.

1

Have you heard of Notion? It is all about visual simplicity and progressive discovery.

Notion offers a clean interface that organizes content into distinct blocks and pages, which can be expanded over time.

They also provide thoughtfully categorized guides. This prevents users from being bombarded by all the information at once.

An example of the spacing effect with Notion
2

Airbnb's site design smartly applies the Spacing Effect.

Listings are spaced with prominent photos and key details like price and ratings.

This layout prevents clutter, making it easy for users to scan and focus on each property.

An example of spacing effect with Airbnb
3

HubSpot's blog organizes articles into clear, spaced-out sections with ample white space around headings, summaries, and images.

The design ensures that content is not overwhelming, making the educational journey on their site more effective and user-friendly.

Hubspot blog as an example of the spacing effect

Tips Spacing effect.

  1. Temporal Distribution. Roll out new features or content in stages rather than all at once. This could mean a multi-step tutorial for a complex app or a drip-feed of articles in a learning series.
  2. Visual Separation. Use whitespace and layout divisions to separate different ideas or sections clearly. This visual spacing helps users process each piece of information without feeling overwhelmed.
  3. Consistent Intervals. Whether it's follow-up emails or serialized content, maintain consistent intervals. Predictable patterns help users form habits around your content, increasing engagement.

🚪

Provide Exit Points.

Invite users to have a pleasant experience by offering them the possibility of opting out at the right moment.

Coming

Definition Provide Exit Points.

Create experiences that have a purpose. That way, users can walk away with a sense of accomplishment and satisfaction by allowing them to opt out.

Avoid creating an association between your product and wasted time. Exit points are designed to respect your users' time.

They are essential to a pleasant customer experience and to avoid product fatigue and reactance. (cf.: Peak-End Rule)

Examples Provide Exit Points.

1

TikTok is one place, filled with an endless stream of fun videos. However, this hugely popular video-sharing app can sometimes become a little too engaging, keeping you scrolling for hours on end.

Initially, TikTok invited users to quit the app after 2 hours by default.

Now, users can choose new time limits of 40, 60, 90 or 120 minutes, and decide how much time they want to spend on the app per day.

Exemple de Provide Exit Points dans l'application TikTok
2
3

Tips Provide Exit Points.

  • Simply respect your users' time by offering them value throughout their experience with your service. And when the time is right, invite them to stop on a positive note.
🌈

Sensory Appeal.

Users are more attracted by things that appeal to several senses.

Coming

Definition Sensory Appeal.

Why are we so drawn to the smell of bread in a bakery early in the morning?

When you walk into a bakery, the mere smell wafting from the oven is often enough to entice customers to buy pastries (simply by having enticed them in the first place).

The sights, sounds and smells that reach the street are rarely accidents. This is psychological marketing known as “sensory marketing”, designed to win your loyalty and, above all, attract you.

When several of these senses are engaged, people are more likely to form an emotional bond with the brand.

Examples Sensory Appeal.

1

In its stores, Apple offers shoppers a complete brand “experience”.

In these concept stores, customers are encouraged to see, touch, and experience the entire Apple brand.

The stores are designed to convince potential and current Apple buyers that this innovative brand is and will remain the key to benefiting from the latest innovations.

An example of sensory appeal with Apple stores
2

A pioneer in multisensory marketing, Starbucks' philosophy is to satisfy its customers' senses of taste, sight, touch and hearing.

The Starbucks brand offers this complete set of sensory satisfactions through the use of taste, aroma, and music (familiar depending on the country: familiarity bias).

Thanks to this approach, consumers from all countries and cultures can share much more than just a good cup of coffee.

They benefit from the whole “Starbucks experience”.

An example of sensory appeal with Starbucks coffee shop
3

Let's take the example of the anime Demon Slayer and explain why it's such a global success?

This is partly due to its incredible animation quality, but many don't pay attention to its superb sound design and how it sublimates this piece of art.

"I've been a big anime fan since I was three apples tall, but I've never experienced such outstanding sound design for a work as I do with Demon Slayer." - Maxime Mroue

Tips Sensory Appeal.

  1. Add Captivating Imagery. High-quality, relevant images break monotony, capturing interest quickly. Use photos that reflect your brand and resonate with users, keeping them engaged.  
  2. Enhance UX with Tactile Design. Visually invoke a sense of touch using textures. It nurtures familiarity & connection, and makes buttons look clickable and text feel palpable.
  3. Use Sound Wisely. Soft, brand-consistent background music or sounds can enhance user experience. Notification sounds should be pleasant and not startling, capturing attention non-disruptively.
🏁

Serial position effect.

People remember the first and last elements of a series better, and have trouble remembering those in the middle.

Coming

Definition Serial position effect.

Examples Serial position effect.

1
2
3

Tips Serial position effect.

💾

Recognition Over Recall.

We're better at recognizing things we've already experienced than at remembering them.

Coming

Definition Recognition Over Recall.

Examples Recognition Over Recall.

1
2
3

Tips Recognition Over Recall.

📍

Method of loci.

People remember things better when they are associated with a place.

Coming

Definition Method of loci.

Examples Method of loci.

1
2
3

Tips Method of loci.

Internal Trigger.

When users are asked to take action based on a memory.

Coming

Definition Internal Trigger.

Examples Internal Trigger.

1
2
3

Tips Internal Trigger.

💡 Psychology inspirations and resources.

If you'd like to learn more about behavioral psychology and mental models, we highly recommend taking a look at these resources:

🌱

Growth Design.

The idea and structure of this ressource is inspired by Growth Design.

DESCRIPTION OF GROWTH DESIGN SITE.

The idea of creating a resource on cognitive bias was inspired by Growth Design.

Growth.design by Dan Benoni and Louis-Xavier Lavallee brings together a selection of Growth Design case studies and a cognitive bias resource like this one.

These case studies can help designers, product managers and marketers create memorable experiences for their customers.

Dan and Louis-Xavier do an amazing job, everything they share is a must-have for any marketer, it's one of the best marketing resources on the web!

📓

Codex on cognitive bias.

The four categories on our list are taken from the work of Buster Benson.

DESCRIPTION OF THE COGNITIVE BIAS CODEX.

Buster Benson did an impressive job of classifying cognitive biases. This has led him to create an enormous codex.

The four categories in this list are based on his research, so it's important that he be credited for his titanic work.

Buster Benson, author of the Codex on Cognitive Bias
Buster Benson

Author of "Why Are We Yelling?" - "We're all susceptible to cognitive biases, because our brains need them to think within the limits of the time and energy available to them. "

📘

Super Thinking.

The big book on mental models and cognitive biases by Gabriel Weinberg.

DESCRIPTION OF THE BOOK SUPER THINKING.

Super Thinking deals with the methods and shortcuts that the best specialists in many disciplines use to free themselves from complexity and distinguish good ideas from bad ones.

Gabriel Weinberg on the importance of cognitive biasGabriel Weinberg on the importance of cognitive biasGabriel Weinberg on the importance of cognitive bias
Gabriel Weinberg

CEO of DuckDuckGo - "It's important to know the names of cognitive biases and mental models. Because once you have a name for something, you can start to spot it in the real world. And once you start spotting it, you can really start reaping the benefits."

📙

Hooked.

How do you create habit-forming products from Nir Eyal?

DESCRIPTION OF THE BOOK HOOKED.

This book immerses us in the psychology of habits and shows us: How do you create a product or service that anchors habits?

Nir Eyal is the author of the worldwide bestseller Hooked, and all his ideas are based on Eyal's years of research, consulting and hands-on experience.

PS: avoid the French version, catastrophic translation...

📕

Influence and manipulation.

The psychology of persuasion by Robert Cialdini.

📒

Contagious.

Contagious: why things go viral by Jonah Berger?

📔

Predictably Irrational.

The hidden forces that shape our decisions by Dan Ariely.

📜 The Cognitive bias cheat sheet.

We've taken the time to summarize each bias in a short sentence.

These 109 cognitive biases can be found in our cognitive bias cheat sheet.

Use it to keep in mind your users' behavior towards your product.

Make sure they really appreciate your product, offer them a memorable experience!

<iframe src="https://assets-global.website-files.com/638234b816814da162a95761/63a0881b772ddaea2f41bddb_Antis%C3%A8che%20%20Psychologie%20du%20Design.pdf" name="biais" height="800px" width="100%"></iframe>
<a href="https://www.riseverse.com/ressources/biais-cognitifs" target="biais">La Psychologie du Design : liste de 106 Biais Cognitifs | RiseVerse</a>
Elon Musk on the importance of cognitive bias
Elon Musk

Tesla CEO - "Cognitive biases should be taught to everyone from an early age." - Tweet from Elon Musk (December 19, 2021)

👇 Now it's your turn to play.

So, which principle will you apply in your business?

Do you think we've forgotten to add an important cognitive bias or principles to this list?

If you have any questions at all, you can contact us at [email protected], we're happy to answer anyone, so don't hesitate!

See Our Work

Webflow Websites we’ve launched

Check a taste of our 50+ Webflow sites and the impact they've yielded to our clients - this is worth a thousand words about RiseVerse.

Ready to stand out and sell more?

Find out how we'll take your brand into a new era and get you to achieve your goals by setting up a discovery workshop with Greg, our co-founder.

Contact a Webflow Web Design Agency