A standard checkbox component enhanced with custom color styling to visually differentiate selection states or categories, improving clarity and user feedback in forms and lists.

A landing page pattern for software, featuring a navigation bar, footer, and hypertext links, optimized for web and desktop contexts to aid user decision-making.

Enables direct text editing within its display context, allowing users to modify content without navigating away or opening a separate editor. Supports inline text input and potential modal interactions.

Desktop, Accessibility, Feedback, Awareness, Decision Making, Web, Español, User Selection, Drag & Drop Gesture, Tooltip, Scrollbar, Checkbox

This modal dialog pattern utilizes a blackout overlay and animation to effectively capture user attention. It is commonly employed for critical decision-making processes, guiding users through onboarding flows, or displaying important information within web and desktop applications. The pattern ensures user focus on the modal content by dimming the background, often incorporating animated transitions for a more engaging and smoother user experience. Notable behavior: User attention capture; Decision prompting; Modal active (background dimmed).

Desktop, Decision Making, Pathfinding, Consent, Web, Español, Text Input, Hypertext Links

A topbar menu designed to adapt across multiple layouts, providing primary navigation and access to features, often utilizing dropdown menus for hierarchical content on desktop web applications. Notable behavior: Clicking menu items for navigation; Opening/closing dropdown menus; Menu item active/inactive.

A feature presentation tooltip, as seen in Jira, guides users through new functionalities or important updates. It often appears during onboarding or to raise awareness, utilizing tooltips with hypertext links and pagination for multi-step tours on both desktop and web interfaces.

A population pyramid visualization with interactive live filters, often using dropdown menus, for data exploration on desktop and web platforms. Features transitions for dynamic updates.

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

Desktop, Consent, Decision Making, Awareness, Web, Español, Text Input, Hypertext Links, Pagination

Simulates platform onboarding, guiding users through initial setup and feature discovery. Involves text input, pagination, and animated transitions for an interactive learning experience.

This pattern employs a visual effect to draw user attention to a Call to Action (CTA). It highlights important actions, aiming to increase user awareness and guide decision-making, commonly seen in e-commerce interfaces to encourage interaction. Notable behavior: Attention-grabbing animation; Hover; Idle.

Enables users to assign colors to tags by dragging and dropping color markers onto designated slots, facilitating categorization and visual organization.

This pattern synchronizes the scrolling of two distinct content views, enabling users to compare or edit information side-by-side while maintaining relative positional alignment. It is commonly found in code editors and document comparison tools. Notable behavior: Scrolling; Synchronized Scrolling; Synchronized.

A modal dialog pattern that darkens the background to focus user attention, presenting multiple choices for decision-making or consent. It typically includes interactive elements like buttons and hypertext links. Notable behavior: Multiple Choice Selection; Button Click; Modal Open.

A tooltip pattern used to provide contextual information or explanations for features, commonly activated on hover or focus, enhancing user understanding and decision-making in web and desktop applications.

A modal dialog with a blackout overlay, typically used to confirm a destructive action like deletion, often requiring user input or explicit button clicks to proceed or cancel.

A landing page designed to promote and facilitate the download of a mobile application. It typically includes a navigation bar, visual elements, and calls to action to guide users.

A combination of buttons designed to facilitate the download of an application, guiding users towards installation across different platforms or stores.

A UI pattern where a button triggers an overlay menu containing a list of actions, typically used for contextual operations or secondary actions.

A floating popover component that appears upon a click event, commonly used to display contextual information, tooltips, or alert dialogs, and can remain fixed on scroll. Notable behavior: Click Event; Popover (visible/hidden); Tooltip (visible/hidden).

A UI pattern where a small, transient overlay (popover) appears when a user hovers over a specific element, providing additional context or actions without navigating away from the current view.

Desktop, Onboarding, Decision Making, Accessibility, Web, Español, English, Modal, Button, Steps, Dropdown Menu, Text Input, Image / Illustration, Close Overlay, Facebook

Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, Timeline, Image / Illustration, Button, Steps, GIPHY

A UI pattern featuring content panels that expand and collapse horizontally, optimizing screen space while allowing users to reveal or hide sections. This design facilitates sequential content exploration or option selection, often seen in applications like Instagram for presenting multiple stories or filters.

Applies a dynamic visual effect to an element's background when a user hovers their mouse over it, enhancing interactivity and drawing attention to the element.

Enables users to transfer data, typically files, from their operating system's desktop directly into a web browser interface by dragging and dropping.

Desktop, Decision Making, Apple OS, macOS, Español, Alert Dialog, Progress State, Close Overlay, Hover Event, Image / Illustration, Apple

This pattern illustrates the user interface for selecting a template or format within Apple Keynote. It guides users through decision-making by presenting various options, commonly found in desktop applications. Notable behavior: Selection; Browsing Options; Default.

A banner that appears dynamically, often at the top or bottom of the viewport, in response to specific user input or actions. It aims to provide timely information or prompt a decision, enhancing user awareness within web or desktop applications.

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

This pattern displays recommendations within search results to guide users, enhance awareness, and assist in decision-making, often utilizing tooltips for additional information on desktop and web platforms. Notable behavior: Hover; Focus; Recommendations displayed.

Manages the user's download process through two distinct stages, typically involving an initial selection or confirmation before the final file acquisition. This pattern enhances decision-making and provides clarity for users initiating downloads. Notable behavior: Button Click; Link Navigation; Initial State.

A modal dialog that overlays and dims the main content, presenting a set of actions for the user to make a decision. It typically prevents interaction with the underlying page until dismissed.

Enables users to subscribe to a magazine by selecting a subscription plan, providing payment information, and confirming their choice. This pattern often includes options for different durations or tiers.

Guides users through the process of selecting and confirming a new subscription plan, often involving comparison of features and pricing, and completing the upgrade transaction. Notable behavior: Plan selection; Button clicks; Initial plan display.

Displays a warning to meeting participants when a guest user joins or is present in the meeting, signaling a potential need for caution or specific actions.

This pattern describes an email page featuring animations and hypertext links, designed to enhance user awareness and support decision-making, primarily within a desktop environment.

Provides an interface for users to review, evaluate, and take specific actions on music-related claims, such as copyright infringements or licensing disputes.

A floating tooltip guides users through a sequence of steps, often for onboarding or feature discovery. It highlights specific UI elements while dimming the rest of the screen to maintain focus on the current step.

A floating banner designed for presenting a 3-tier pricing or subscription model. It remains fixed on scroll, typically includes buttons for selection, and may offer a close overlay option. This pattern aids decision-making on web and desktop platforms.

This pattern describes a security-focused top banner, typically integrated into or positioned near a navigation bar on desktop web applications. Its primary purpose is to convey critical security information or alerts, guiding users in decision-making processes. It often includes elements like an avatar, search input, and an image or illustration to enhance clarity and user engagement. Notable behavior: Top-of-viewport.

This pattern describes the use of synchronized animations that trigger across multiple related UI elements when a user hovers over one of them. It enhances user awareness by visually linking interconnected components and providing immediate feedback.

Presents a promotional offer for a free trial of an audiobook service, designed to encourage user sign-up or subscription.

A notification pattern informing users about an upcoming or expiring subscription. It prompts action like renewal or cancellation, aiming to prevent service interruption and encourage continued engagement.

Displays advertisements that occupy the background space of a webpage or application, often behind the main content, providing an immersive advertising experience. Notable behavior: Display; Click; Visible.

Enables users to categorize and filter contacts into distinct groups based on shared attributes or behaviors, facilitating targeted communication and management.

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

A visual transition pattern where an element, such as a window or panel, animates by shrinking and moving to a designated dock area when minimized.

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, Español, Modal, Thumbnail, Animation, Close Overlay, Cards, Dim Overlay

A UI component enabling users to select product colors, typically presented as a list of color markers or photos. It supports hover events for tooltips and click events for selection, aiding decision-making on web and desktop platforms.

A design pattern that employs specific UI elements and messaging to encourage users to enable or allow advertisements within an application or website.

A component that displays a PDF document directly within the user interface, offering a clear option for users to download the file for offline access or archival purposes.

This pattern describes a mechanism where users are prompted to provide their email address as a prerequisite to access and play video content. It serves as a common strategy for lead generation, user data collection, or content access control, ensuring that only registered or identified users can view premium or restricted videos.

The "Out of downloads" pattern describes the user interface and experience presented when a user has exhausted their allocated download quota. This pattern aims to clearly communicate the current status, explain why the limit has been reached, and provide actionable options for the user, such as upgrading their plan, waiting for a reset, or contacting support. It guides the user through the decision-making process to resolve the limitation. Notable behavior: Clicking 'Upgrade Plan' button; Clicking 'Learn More' link; Quota Exceeded.

This pattern features natural language input fields that offer real-time suggestions, aiding users in decision-making and efficient pathfinding within web applications. It enhances user awareness and accessibility by guiding input through predictive text or relevant options.

This pattern presents key features to users during the sign-up process, aiming to highlight value and encourage completion of registration. Notable behavior: Displaying Information; Scrolling; Initial Display.

This pattern outlines design strategies and UI elements aimed at encouraging users to subscribe to a newsletter, typically involving clear calls-to-action and highlighting the value proposition. Notable behavior: Form input; Button click; Initial form state.

Desktop, Onboarding, Decision Making, Web, English, Button, Text Input, PIN Code, Toggle Field, Fixed on Scroll, Banner, Steps

Desktop, Accessibility, Decision Making, Web, English

This pattern describes various design techniques, often manipulative or deceptive, used to persuade users into subscribing to a service or product. It focuses on influencing user decision-making within web and desktop interfaces. Notable behavior: Form submission; Button clicks; Initial offer state.

Displays a video story directly on a website, enabling users to consume narrative content such as testimonials, product showcases, or brand narratives without navigating away. This pattern enhances user engagement by integrating multimedia storytelling within the web experience.

This pattern presents a context menu, activated by a right-click event, offering various options for maximizing a window. It is commonly found in desktop or browser environments, enhancing user control over window display. Notable behavior: Right Click.

This pattern presents site terms or a privacy policy directly to the user, typically as a blocking overlay, requiring explicit consent or a decision before proceeding with site interaction. It ensures users acknowledge and agree to terms. Notable behavior: User consent; Acceptance of terms; Blocking overlay active.

A contextual popup that appears within the user's current workflow to offer a service upgrade, prompting a decision before the user can proceed or dismiss the offer.

A modal dialog or popup that prevents users from navigating away or closing the current context without explicitly confirming an action or acknowledging a critical message, often used to prevent data loss or ensure a decision is made. Notable behavior: User Confirmation; Dismissal; Open.

This pattern describes the use of visual and interactive flourishes, often referred to as 'gimmicks,' specifically designed to enhance the perceived value and desirability of premium features or offerings. These elements aim to influence user decision-making by making a product or service appear more exclusive, high-quality, or essential, thereby encouraging engagement or conversion to premium tiers.

This pattern presents a clear, three-tiered pricing comparison table designed to help users evaluate different service plans or product offerings. It facilitates decision-making by highlighting key features, benefits, and pricing for each tier, typically culminating in a call-to-action button for selection. Optimized for web and desktop environments, it guides users through the steps of choosing the most suitable option. Notable behavior: Plan Selection; Call-to-Action Click; Selected Plan.

Desktop, Decision Making, Web, English

Incremental pricing presents cost adjustments based on user selections or progression through steps. Users make decisions via toggle fields and buttons, influencing the final price.

A dynamic visual effect that simulates an explosion of confetti, typically used to celebrate user actions or provide positive feedback.

Describes a system design where users can access or manage two distinct accounts, often for different roles or contexts, from a single entry point or within the same application session. This pattern facilitates scenarios requiring users to operate with multiple identities or profiles. Notable behavior: Account Selection; Login; Account Selection Prompt.

Presents a dedicated screen to confirm a significant user action, ensuring explicit consent and heightened awareness before proceeding. This pattern is crucial for irreversible operations, often featuring clear calls to action and supporting visuals.