Table of Contents
This is the continuation on the previous article on UI Patterns vs UX Patterns .
When I began the article mentioned above, my initial goal was to create a concise and straightforward guide. I intended to provide clarifications and examples to help readers, especially those new to the field of User Experience, gain a clear understanding.
However, as I continued writing and conducting research, I realized the extent of confusion that exists, even among experienced professionals. To provide a more comprehensive explanation, I chose to incorporate both a UI and a UX Pattern Library in this resource. This library includes information on the type of pattern, its definition, and a brief explanation of its practical usage.
As I proceeded with the project, with valuable input from my amazing team, it became evident that presenting UI and UX pattern examples on the same page could be overwhelming and potentially counterproductive. To avoid overwhelming you and ensure a positive learning experience, I decided to create a separate third page.
Yes, you read that correctly – despite the extensive content on this page, it exclusively features UX patterns. UI patterns are not included here (although it’s worth noting that certain UX patterns may require the use of UI patterns, a point I discussed in detail in the introductory article).
In summary, what you are about to explore represents a substantial effort. It encompasses a wealth of information that would typically require reading numerous books and academic papers, particularly in the fields of psychology, semiotics, and anthropology. Having the majority of these patterns consolidated within a single article (well, actually three) was quite a challenge. But whether you are a student or someone starting a career in this field, you’ll be well-equipped to impress your teachers or superiors with your in-depth understanding of UX patterns. Well, at least I hope so!
List of UX Patterns Examples and Definitions
Here’s a list of some common User Experience Patterns, each accompanied by its type and a brief description for easy understanding. Please note that this list isn’t exhaustive since to include all UX patterns would result in a massive collection that continues to grow. Nonetheless, it is comprehensive, covering well-known, frequently used patterns, as well as some lesser-known but interesting ones. At first glance, you’ll notice that none of these UX patterns necessarily require visual design (or UI design as we’re at it). Instead, they relate to user journeys and cognitive processes. Some of these principles and UX patterns were already covered in another one of our massive theoretical articles about persuasive design.
UX pattern library
Achievement
Type: Game Reward
Definition: Earning achievements or badges can provide a sense of accomplishment. Achievements recognize and reward user accomplishments.
Usage: Earning achievements or badges can provide users with a profound sense of accomplishment. Achievements, as a game reward mechanism, effectively recognize and reward user accomplishments, driving engagement and motivation.
Anchoring
Type: Cognitive Bias
Definition: Initial information influences subsequent decisions. Anchoring sets a reference point for evaluating options.
Usage: Anchoring, a cognitive bias, occurs when initial information significantly influences subsequent decision-making processes. It serves as a reference point against which users evaluate various options, often shaping their final choices.
Appropriate Challenge
Type: Game Design Principle
Definition: Tasks that match an individual’s skill level are motivating. This principle ensures that challenges are neither too easy nor too difficult.
Usage: The game design principle of “Appropriate Challenge” revolves around offering tasks that align with an individual’s skill level. This approach is highly motivating because it ensures that challenges are neither too easy nor too difficult for users, thus maintaining their engagement.
Authority Bias
Type: Social Influence
Definition: People tend to follow authority figures. Authority bias influences decision-making based on perceived expertise.
Usage: In the realm of social influence, “Authority Bias” reveals a common tendency: people often defer to authority figures. This bias impacts decision-making, as individuals are more likely to trust and follow those perceived as experts.
Cashless Effect
Type: Cognitive Mechanism
Definition: The ease of digital payments can lead to increased spending. This mechanism highlights the impact of payment methods on consumer behavior.
Usage: Exploring the realm of cognitive mechanisms, the “Cashless Effect” highlights how the ease of digital payments can lead to increased spending. It underscores the profound impact that payment methods can have on consumer behavior.
Choice Closure
Type: Cognitive Mechanism
Definition: People prefer to make decisions and have a sense of closure. This mechanism drives individuals to resolve open choices.
Usage: The cognitive mechanism known as “Choice Closure” reflects the human preference for decisiveness and closure. It compels individuals to make choices and reach resolutions, reducing the burden of unresolved decisions.
Chunking
Type: Cognitive Technique
Definition: Breaking down information into smaller, manageable chunks. Chunking aids in processing and remembering complex information.
Usage: “Chunking,” a cognitive technique, involves breaking down complex information into smaller, more manageable chunks. This strategy aids in processing and retaining intricate data, making it more accessible to users.
Cognitive Dissonance
Type: Psychological Conflict
Definition: The discomfort of holding conflicting beliefs or values. Cognitive dissonance motivates resolution through attitude or behavior change.
Usage: Under the category of psychological conflict, “Cognitive Dissonance” manifests as the discomfort stemming from conflicting beliefs or values. This psychological tension often motivates individuals to resolve it through changes in attitude or behavior.
Commitment & Consistency
Type: Psychological Principle
Definition: People strive to align their actions with past commitments. Commitment and consistency promote stability in behavior.
Usage: The psychological principle of “Commitment & Consistency” underscores human tendencies to align their actions with past commitments. This drive toward maintaining consistency promotes stability in behavior and decision-making.
Competition
Type: Motivational Factor
Definition: Striving to outperform others. Competition can enhance motivation and effort.
Usage: As a motivational factor, “Competition” spurs individuals to outperform their peers. It enhances motivation and effort levels, fostering a competitive spirit among users.
Conceptual Metaphor
Type: Cognitive Technique
Definition: Using metaphors to convey abstract ideas. Conceptual metaphors make complex concepts more understandable. In cognitive linguistics, conceptual metaphor, or cognitive metaphor, refers to the understanding of one idea, or conceptual domain, in terms of another.
Usage: “Conceptual Metaphor,” as a cognitive technique, leverages metaphors to convey abstract ideas more effectively. By making complex concepts more relatable, it enhances comprehension and communication.
Curiosity
Type: Cognitive Mechanism
Definition: People are naturally drawn to information gaps and seek to fill them. Curiosity motivates exploration and learning.
Usage: In the realm of cognitive mechanisms, “Curiosity” plays a pivotal role by naturally drawing individuals toward information gaps. This innate curiosity drives exploration and facilitates learning.
Decoy Effect
Type: Cognitive Bias
Definition: Introducing a less attractive option to influence choices. The decoy effect steers users toward a desired choice.
Usage: The “Decoy Effect,” classified as a cognitive bias, comes into play when a less attractive option is introduced to influence choices. Users tend to gravitate toward the desired choice as a result of this cognitive bias.
Delay Discounting
Type: Cognitive Bias
Definition: People tend to undervalue future rewards compared to immediate ones. This bias leads to favoring immediate gratification over long-term benefits.
Usage: Among cognitive biases, “Delay Discounting” reveals that people tend to undervalue future rewards when compared to immediate ones. This bias often leads to favoring immediate gratification over long-term benefits.
Delighters
Type: User Experience Enhancement
Definition: Unexpected surprises enhance the user experience. Delighters create memorable moments for users.
Usage: “Delighters” in the realm of user experience enhancement refer to unexpected surprises that enhance the overall user experience. These delightful moments create lasting and memorable impressions on users. One example is the morphing shapes that make our homepage UI design so recognizable at first sight
Endowment Effect
Type: Cognitive Bias
Definition: People tend to overvalue items they possess. The endowment effect influences decision-making based on ownership.
Usage: The “Endowment Effect” uncovers the cognitive bias where individuals tend to overvalue items they possess. This bias significantly influences decision-making, particularly when ownership is a factor.
Fixed Rewards
Type: Game Design Element
Definition: Consistent rewards can maintain motivation. Fixed rewards ensure predictability in user experiences.
Usage: “Fixed Rewards,” as a game design element, revolve around the concept of offering consistent and predictable rewards. These rewards play a pivotal role in maintaining user motivation and engagement.
Framing
Type: Cognitive Bias
Definition: Presenting information differently can alter perceptions and decisions. Framing shapes how information is interpreted.
Usage: The cognitive bias known as “Framing” demonstrates how presenting information differently can significantly alter perceptions and decisions. It molds the way individuals interpret and respond to information.
Fresh Start Effect
Type: Behavioral Reset Strategy
Definition: The motivation to start anew, often associated with specific times or events. The fresh start effect encourages behavior change.
Usage: The “Fresh Start Effect” encapsulates the motivation associated with starting anew, often triggered by specific times or events. This psychological phenomenon encourages individuals to embrace behavior change. Goal-
Gradient Effect
Type: Psychological Phenomenon
Definition: Progress toward a goal accelerates as the goal is approached. This effect drives users to complete tasks as they near achievement.
Usage: The “Goal-Gradient Effect” illuminates a psychological phenomenon where progress toward a goal accelerates as the goal itself approaches. This effect serves as a powerful motivator, prompting users to complete tasks as they near achievement.
Halo Effect
Type: Cognitive Bias
Definition: Generalizing a positive impression to unrelated aspects. The halo effect influences perceptions based on a single trait.
Usage: The “Halo Effect,” categorized as a cognitive bias, manifests when individuals generalize a positive impression to unrelated aspects. This cognitive bias influences perceptions based on a single positive trait or characteristic.
Hedonic Adaptation
Type: Psychological Phenomenon
Definition: Rapidly adapting to positive changes in life. Hedonic adaptation explains why initial excitement often fades.
Usage: Psychologically, “Hedonic Adaptation” refers to the human tendency to quickly adapt to positive changes in their lives. This phenomenon explains why initial excitement often fades over time.
Illusion of Control
Type: Cognitive Bias
Definition: Believing in more control over outcomes than is realistic. The illusion of control can impact decision-making.
Usage: The “Illusion of Control” is a cognitive bias that leads individuals to believe they have more control over outcomes than they actually do. This cognitive distortion can significantly impact decision-making processes.
IKEA Effect
Type: Cognitive Bias
Definition: Attaching higher value to products created personally. The IKEA effect emphasizes the importance of personal involvement.
Usage: The “IKEA Effect,” classified as a cognitive bias, highlights the phenomenon where people attribute higher value to products they’ve actively contributed to creating. This cognitive bias underscores the importance of personal involvement.
Inaction Inertia Effect
Type: Cognitive Mechanism
Definition: Preferring inaction over action due to perceived effort. The inaction inertia effect often leads to procrastination.
Usage: The “Inaction Inertia Effect” sheds light on the cognitive mechanism wherein inaction is favored over action due to the perceived effort required. This mechanism often results in procrastination or resistance to change.
Intentional Gaps
Type: Game Design Principle
Definition: Leaving gaps or uncertainties in the user experience intentionally. Intentional gaps pique curiosity and encourage exploration.
Usage: Within the realm of game design principles, “Intentional Gaps” refer to deliberately leaving gaps or uncertainties in the user experience. These gaps are strategically designed to pique curiosity, encouraging exploration and discovery.
Investment Loops
Type: Game Design Principle
Definition: The game design principle of “Investment Loops” revolves around creating mechanisms that encourage users to invest time, effort, or resources, resulting in a continuous cycle of engagement. This principle is commonly employed in game design to keep players immersed in the game world.
Kairos
Type: Timing Strategy
Definition: Identifying opportune moments for specific actions. Kairos emphasizes the importance of timing in interactions.
Usage: “Kairos,” as a timing strategy, revolves around the art of identifying opportune moments for specific actions or interventions. It underscores the critical role that timing plays in interactions, often determining their success.
Liking
Type: Social Influence
Definition: Positive feelings toward a person or entity influence decisions. Liking plays a role in social acceptance and trust.
Usage: “Liking” in the context of social influence highlights the significant impact of positive feelings toward a person or entity on decision-making processes. It plays a pivotal role in fostering social acceptance and trust. More about liking and related behaviors in our previous article here.
Limited Choice
Type: Design Strategy
Definition: Simplifying choices by offering fewer options. This strategy reduces decision complexity and can enhance user experience.
Usage: The design strategy of “Limited Choice” involves simplifying choices by offering a reduced number of options. This approach effectively reduces decision complexity and has the potential to enhance the user experience.
Limited Duration
Type: Design Strategy
Definition: Offering something for a limited time can increase engagement. This strategy creates a sense of urgency.
Usage: The design strategy of “Limited Duration” entails offering something for a limited time, which can significantly increase user engagement. This approach creates a sense of urgency and encourages prompt action.
Loss Aversion
Type: Cognitive Bias
Definition: People fear losing what they have more than gaining something new. Loss aversion influences decision-making based on risk avoidance.
Usage: “Loss Aversion,” categorized as a cognitive bias, illuminates the human tendency to fear losing what they already possess more than the prospect of gaining something new. This cognitive bias often shapes decision-making, with individuals opting to avoid risks to protect their current holdings.
Need for Closure
Type: Cognitive Bias
Definition: Individuals desire clear, definitive answers and are uncomfortable with ambiguity. This bias drives the need for resolution and closure in decision-making.
Usage: The cognitive bias known as “Need for Closure” reflects individuals’ strong desire for clear and definitive answers, coupled with discomfort in the face of ambiguity. This cognitive bias significantly drives the need for resolution and closure in various decision-making processes.
Negativity Bias
Type: Cognitive Bias
Definition: Negative information has a stronger impact than positive information. Negativity bias can shape perceptions and decisions.
Usage: “Negativity Bias,” classified as a cognitive bias, points to the phenomenon where negative information exerts a more potent influence than positive information. This bias often shapes perceptions and decision-making.
Noble Edge Effect
Type: Social
Definition: Highlighting ethical or altruistic aspects can enhance appeal. The noble edge effect emphasizes noble intentions or contributions.
Usage: The “Noble Edge Effect” in social contexts emphasizes the strategy of highlighting ethical or altruistic aspects to enhance appeal. This approach underscores noble intentions or contributions, which can significantly impact how a person or entity is perceived.
Nostalgia Effect
Type: Emotional Influence
Definition: Fondness for past experiences or memories. The nostalgia effect evokes positive emotions and connection.
Usage: The “Nostalgia Effect,” within the realm of emotional influence, centers on the human tendency to experience fondness for past experiences or memories. This emotional connection often evokes positive emotions and strengthens a sense of connection.
Pattern Recognition
Type: Cognitive Skill
Definition: Recognizing familiar patterns can simplify decision-making. Pattern recognition relies on past experience.
Usage: “Pattern Recognition” as a cognitive skill involves the ability to recognize familiar patterns, which can significantly simplify decision-making processes. This skill draws upon past experiences to identify and navigate recurring patterns effectively.
Peak-end rule
Type: Memory Phenomenon
Definition: People remember experiences based on peak moments and the end. The peak-end rule shapes retrospective evaluations.
Usage: The “Peak-end Rule,” observed as a memory phenomenon, highlights how people tend to remember experiences based on their peak moments and the way they conclude. This phenomenon influences retrospective evaluations and memories.
Praise
Type: Social Reward
Definition: Expressing approval or admiration can reinforce desired behaviors. Praise reinforces desired behaviors.
Usage: “Praise” as a social reward involves expressing approval or admiration, which can effectively reinforce desired behaviors. It serves as a powerful motivator for individuals to continue exhibiting positive actions.
Present Bias
Type: Cognitive Bias
Definition: People prioritize immediate rewards over future ones. Present bias affects decision-making based on temporal preferences.
Usage: Among cognitive biases, “Present Bias” points to the human tendency to prioritize immediate rewards over future ones. This cognitive bias significantly impacts decision-making, often guided by temporal preferences.
Privileges
Type: Social Influence
Definition: Recognizing individuals with special privileges or status. Privileges can influence behavior and interactions.
Usage: “Privileges” in the context of social influence involves recognizing individuals with special privileges or elevated status. These privileges can significantly influence behavior and interactions within social groups.
Priming Effect
Type: Cognitive Influence
Definition: Exposure to specific stimuli can influence subsequent behavior or decisions. The priming effect activates related concepts in the mind.
Usage: The “Priming Effect” as a cognitive influence underscores the impact of exposure to specific stimuli on subsequent behavior or decisions. This effect activates related concepts in the mind, shaping how individuals perceive and respond to stimuli.
Reduction
Type: Simplification Strategy
Definition: Simplifying complex information or choices. Reduction reduces cognitive load and enhances clarity.
Usage: The simplification strategy of “Reduction” involves streamlining complex information or choices to reduce cognitive load and enhance clarity. This approach is particularly valuable in improving user understanding and decision-making.
Reciprocation
Type: Social Norm
Definition: People feel obligated to return favors. Reciprocation maintains social harmony and goodwill.
Usage: “Reciprocation” as a social norm revolves around the human inclination to feel obligated to return favors. This social practice plays a crucial role in maintaining social harmony and fostering goodwill among individuals.
Recognition over Recall
Type: Cognitive Principle
Definition: Presenting information that doesn’t require memory recall. Recognition over recall reduces cognitive effort for users.
Usage: The cognitive principle of “Recognition over Recall” emphasizes presenting information in a way that doesn’t demand memory recall from users. This approach significantly reduces cognitive effort and enhances user ease.
Reputation
Type: Social Evaluation
Definition: A person’s status or image in a social context. Reputation can influence trust and credibility.
Usage: “Reputation” in the realm of social evaluation pertains to an individual’s status or image within a social context. A person’s reputation can exert a considerable influence on trust and credibility.
Retaliation
Type: Social Interaction
Definition: Responding to perceived slights or harm. Retaliation involves reacting to negative interactions.
Usage: In the domain of social interaction, “Retaliation” pertains to the act of responding to perceived slights or harm. It involves reacting to negative interactions in various social contexts.
Role Playing
Type: Social Engagement
Definition: Taking on different roles or identities in a context. Role playing fosters creativity and exploration.
Usage: “Role Playing” in the realm of social engagement involves individuals taking on different roles or identities within a specific context. This practice fosters creativity, exploration, and a deeper understanding of various roles and perspectives.
Scarcity
Type: Design Strategy
Definition: Creating a perception of limited availability can increase desirability. Scarcity triggers urgency and demand.
Usage: The design strategy of “Scarcity” centers on creating a perception of limited availability, which can significantly increase desirability. This strategy triggers a sense of urgency and heightened demand among users.
Self-Expression
Type: Personalization Element
Definition: Allowing users to express themselves through customization. Self-expression adds a personal touch to experiences.
Usage: “Self-Expression” as a personalization element involves enabling users to express themselves through customization. This personal touch enhances user experiences by allowing individuals to tailor them to their preferences. Self-
Monitoring
Type: Personal Control
Definition: Users track their own progress or behavior. Self-monitoring enhances awareness and self-regulation.
Usage: “Self-Monitoring” as a personal control mechanism empowers users to track their own progress or behavior. This self-awareness and self-regulation can lead to improved decision-making and behavior.
Serial Positioning Effect
Type: Memory Phenomenon
Definition: People remember the first and last items in a sequence. This phenomenon affects recall based on item position.
Usage: The “Serial Positioning Effect” as a memory phenomenon highlights how people tend to remember the first and last items in a sequence more vividly. This phenomenon significantly influences recall based on the position of items within a sequence.
Set Completion
Type: Cognitive Mechanism
Definition: People have a tendency to complete sets or collections. Set completion drives users to acquire missing pieces.
Usage: The cognitive mechanism known as “Set Completion” reflects the human tendency to strive for completeness by acquiring missing pieces within sets or collections. This drive significantly influences user behavior and decision-making.
Shaping
Type: Behavioral Design
Definition: Gradually guiding users toward desired behaviors. Shaping reinforces incremental progress.
Usage: “Shaping” as a behavioral design technique involves the gradual guidance of users toward desired behaviors. This approach reinforces incremental progress, ultimately leading to the attainment of specific goals.
Simulation
Type: Immersion Technique
Definition: Creating realistic scenarios for user interaction. Simulation immerses users in virtual experiences.
Usage: “Simulation” as an immersion technique entails the creation of realistic scenarios for user interaction. This immersive approach allows users to engage with virtual experiences, enhancing their understanding and engagement.
Social Proof
Type: Social Influence
Definition: People look to others for cues on how to behave. Social proof guides decisions based on others’ actions.
Usage: In the realm of social influence, “Social Proof” reveals the tendency of individuals to look to others for cues on how to behave. This influential phenomenon guides decision-making based on the actions and choices of others.
Status
Type: Social Hierarchy
Definition: One’s position in a social hierarchy or group. Status can influence behavior and interactions.
Usage: “Status” within the context of social hierarchy pertains to an individual’s position within a social group or hierarchy. This status can exert a considerable influence on behavior and interactions within social contexts.
Storytelling
Type: Narrative Technique
Definition: Using narratives to engage and communicate. Storytelling creates emotional connections and enhances understanding.
Usage: “Storytelling” as a narrative technique involves using narratives to engage and communicate with audiences. This powerful approach creates emotional connections and enhances understanding of complex concepts.
Tailoring
Type: Personalization Strategy
Definition: Customizing content or experiences to individual users. Tailoring enhances relevance and user satisfaction.
Usage: “Tailoring” as a personalization strategy focuses on customizing content or experiences to cater to individual users. This approach significantly enhances relevance and overall user satisfaction.
Temptation Bundling
Type: Behavioral Strategy
Definition: Combining desirable and less desirable tasks to increase motivation. Temptation bundling links activities to boost engagement.
Usage: “Temptation Bundling” as a behavioral strategy involves combining desirable and less desirable tasks to increase motivation. This technique links activities, making them more engaging and encouraging individuals to complete less appealing tasks while enjoying desired ones.
Trigger
Type: Activation Mechanism
Definition: Prompts or cues that initiate actions. Triggers prompt users to engage or perform specific tasks.
Usage: “Triggers” as activation mechanisms are prompts or cues that initiate actions. These triggers play a pivotal role in prompting users to engage or perform specific tasks.
Tunnelling
Type: User Guidance
Definition: Guiding users through a specific path or sequence. Tunnelling directs users toward desired actions or goals.
Usage: “Tunnelling” as a user guidance strategy involves guiding users through a specific path or sequence. This approach effectively directs users toward desired actions or goals, enhancing the overall user experience.
Unlock features
Type: Game Reward
Definition: Encouraging users to unlock additional features can promote engagement. Feature unlocks provide incentives for continued use.
Usage: Encouraging users to “Unlock Features” through game rewards can be a powerful way to promote engagement. Feature unlocks serve as incentives for continued use, motivating users to explore and utilize additional functionalities.
Value attribution
Type: Cognitive Mechanism
Definition: Assigning value to items or experiences based on context. Value attribution influences perceptions of worth.
Usage: “Value Attribution,” as a cognitive mechanism, involves the assignment of value to items or experiences based on context. This process significantly influences perceptions of worth and can shape decision-making.
Variable rewards
Type: Behavioral Mechanism
Definition: Providing unpredictable rewards to maintain engagement. Variable rewards add excitement and motivation.
Usage: The behavioral mechanism of “Variable Rewards” entails providing unpredictable rewards to maintain engagement. This approach adds an element of excitement and motivation, keeping users engaged and invested.
Zeigarnik Effect
Type: Memory Phenomenon
Definition: Unfinished tasks tend to stay in our memory. The Zeigarnik effect highlights the persistence of incomplete actions in memory.
Usage: The “Zeigarnik Effect” as a memory phenomenon highlights how unfinished tasks tend to linger in our memory. This effect emphasizes the persistence of incomplete actions, which can impact subsequent behaviors and decisions.
This is not all! Let’s continue with UI Patterns!
As I mentioned at the beginning of this article series, what you’re currently reading is one of three extensive pieces. This specific article centers on presenting UX patterns examples and providing access to the UX pattern library, constituting the second installment within this series.
Additionally, at the time I’m writing this there are 66 UX Patterns defined and explained. But this library will continue evolving and growing, so it’s a good idea to bookmark this page and have it as reference for the future, since new patterns emerge every day. And guess what? Patterns may also change or disappear! I assume you already imagine it, but this is one of the foundations of Quantum UX.
I recommend continuing your exploration by moving on to the UI pattern library. There, you’ll find a wide variety of patterns tailored for your user interfaces. This will equip you with valuable insights into when and how to apply them effectively. By navigating through this current article and the upcoming one on UI patterns library and examples, you will likely gain a comprehensive understanding of both UI and UX patterns, a knowledge base of significant relevance to your expertise. And of course, if you’re serious about learning UX research you can’t miss the article on UX research methodologies.
Fabio is Bachelor in Marketing, Master in Human Computer Interaction and a UX Evangelist.
He worked for some of the biggest companies in the world. As such, he has developed entire systems and businesses for clients of all sizes.
We can improve your business!
Let us help you with the best solutions for your business.
It only takes one step, you're one click away from getting guaranteed results!
I want to improve my business NOW!