Users can browse a curated selection of offers by clicking pagination arrows, enabling efficient discovery and decision-making.

This pattern uses an animated, interactive background to engage users and visually highlight featured content, enhancing initial appreciation and pathfinding.

Users can personalize their toolbar by toggling specific buttons on or off, enhancing workflow efficiency and tailoring the interface to their needs.

Users can quickly assess system health over time via color-coded hourly indicators, revealing operational status and outage events at a glance.

Offers always-available, AI-powered guidance and support through a fixed bottom-right chat

This pattern describes a desktop web landing page, featuring a fixed navigation bar, footer, and interactive elements such as carousels, buttons, and hypertext links. It integrates animations, video, and anchor scrolling to create an engaging user experience. Notable behavior: Animation; Carrousel; Fixed on Scroll.

This pattern provides a full-height, animated sidebar menu that slides in from the left, offering clear navigation options while dimming the main content for focused interaction.

Users can easily upload files or paste URLs, receiving clear visual feedback and background loading indicators for a seamless experience.

This transition visually guides the user as a window minimizes, smoothly shrinking and moving to its new location in the dock, enhancing spatial awareness and system feedback.

This pattern provides timely, relevant news and updates within the application, enhancing user awareness and engagement without interrupting core workflows.

This pattern uses a subtle 3D shadow animation on hover to provide clear visual feedback, enhancing user awareness and guiding interaction.

This pattern confirms a successful subscription update, offering a clear path to re-enable emails if the user changes their mind.

This modal presents users with clear, card-based options to initiate a task, guiding them efficiently through initial decision-making.

This pattern allows users to quickly navigate long documents by tapping and holding the scrollbar to reveal a page outline for rapid section jumping.

Users can easily select multiple communication preferences with visually distinct, colored checkboxes that provide immediate feedback on their choices.

This pattern uses a dynamic carousel of images and text to showcase product features, engaging users with interactive content and clear calls to action.

This landing page effectively guides users to download icon management software by showcasing its intuitive interface and customization features.

Users can directly edit text content in place, providing a seamless and efficient way to update information without navigating away.

Users can efficiently organize multiple items by dragging and dropping them into a target category, enhancing content management and task completion.

A skeleton loader provides a visual placeholder for content that is still loading, reassuring users that the page is active and data is on its way.

This pattern uses a dynamic video animation that plays upon user touch, providing engaging visual feedback and enhancing interaction.

This pattern uses subtle, interactive background animations to engage users and provide dynamic visual feedback as they scroll or interact with the page.

Dropdown filters enable users to quickly refine content views by selecting specific criteria from a compact, accessible menu.

This pattern uses an animated blackout modal to focus user attention on critical information or actions, ensuring clear decision-making.

This pattern allows users to quickly navigate to the top of a long list by clicking a fixed "Back to Top" button that appears on scroll.

Users can toggle a persistent sidebar menu to reveal or hide navigation options, optimizing screen space while maintaining easy access to key features.

This progress bar visually informs users about the loading status of their chats, providing a clear percentage to manage expectations during data synchronization.

This menu provides an interactive outline of page content, allowing users to quickly navigate to specific sections and understand the page structure at a glance.

This pattern allows users to seamlessly transition from a clear call-to-action button to an input field, streamlining the path to engagement.

Floating navbar menus provide persistent navigation options, allowing users to quickly access key sections and features without losing their current context.

This pattern describes a multi-step form that maintains a fixed position on the screen, typically presented within a side panel. It is designed to guide users through a sequence of inputs, often involving text fields, for processes such as collecting feedback, raising awareness, or expressing appreciation. This pattern is suitable for web and tablet interfaces, ensuring a consistent user experience during data entry. Notable behavior: Form Submission; Step Navigation; Active Step.

This topbar menu uses a dropdown to reveal categorized links, enabling users to quickly navigate to relevant sections and understand the product's diverse offerings.

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.

Desktop, Feedback, Consent, Awareness, Web, English, Text Input, Side Panel

Users can dynamically filter population data by country and year, enabling quick comparisons and insights into demographic trends.

A modal with a blackout overlay and animated transitions provides a focused input form, ensuring users can quickly add friends without distraction.

This topbar menu dynamically adjusts its layout and content, offering users clear navigation and relevant options as they explore different sections of the site.

Users can toggle high contrast mode to improve readability and accessibility, enhancing the visual experience for those with low vision.

Users can switch between list and grid views to optimize content display for their preference, enhancing readability and navigation.

This floating progress bar provides persistent, non-intrusive feedback on background tasks, allowing users to monitor progress while continuing other work.

This modal guides users through multi-step processes with clear instructions and animated transitions, enhancing awareness without obscuring the underlying content.

Users can effortlessly navigate distinct content categories by tapping tabs or swiping horizontally, ensuring quick access to desired information.

This horizontal item slider allows users to effortlessly browse a curated selection of items, enhancing discoverability and engagement with minimal scrolling.

Users input their email for login, then receive and enter a validation code to securely access their account.

Users can instantly toggle between light and dark display modes, enhancing visual comfort and accessibility based on their preference or environment.

This pattern enhances clarity by dynamically magnifying specific image regions, guiding users to key details and improving comprehension of visual instructions.

Users can dynamically adjust the number of columns and spacing in an image grid using intuitive sliders, enhancing visual organization and content exploration.

This pattern guides users through initial setup by simulating product features, allowing them to visualize outcomes and make informed decisions before committing.

This sidebar menu allows users to expand and collapse sections, efficiently managing screen space while providing access to numerous navigation options.

This vertical accordion allows users to efficiently reveal or hide detailed content sections, optimizing screen space and improving navigation for FAQs or contact information.

A UI pattern where a floating popover element appears adjacent to a trigger element upon a click interaction, providing additional context or actions without navigating away.

Users can drag a modal dialog to a fixed side panel, allowing them to view and interact with underlying content without losing context.

This pattern uses a subtle, pulsing animation on the primary call to action to draw user attention and encourage progression through the flow.

Users can effortlessly create a new file on their desktop by dragging and dropping an image directly from a web browser.

This pattern darkens the background and highlights the search bar, guiding users to focus on search input and results without distraction.

Users can quickly rate an article's usefulness on a 1-10 scale, providing immediate feedback to improve content quality and relevance.

This pattern integrates a search input directly within a menu, typically a dropdown, enabling users to quickly filter and locate specific menu items. It enhances pathfinding and awareness, commonly found in desktop applications with navigation bars. Notable behavior: Typing; Filtering; Filtered Menu Items.

This transition allows users to fluidly zoom between a grid of browser tab thumbnails and a full-screen view, enhancing navigation and context switching.

A non-dismissible tooltip presenting a sequence of steps, commonly employed for user onboarding or guiding through multi-stage workflows, enhancing user awareness and pathfinding.

Users can intuitively assign color-coded tags to designated slots via drag-and-drop, enhancing organization and quick visual identification of items.

This pattern allows users to efficiently compare and resolve differences between two versions of a file by synchronizing their scroll positions.

Onboarding tooltips guide users through a new application or feature, highlighting key UI elements and functionalities. They typically appear sequentially to introduce core concepts and actions, improving initial user engagement and understanding within a desktop environment. Notable behavior: Hover; Click (to advance/dismiss); Visible.

This hero swiper provides a quick overview of daily calorie metrics, allowing users to easily track their budget, consumption, exercise, and remaining calories.

This sign-in pattern offers both traditional email/password input and a convenient QR code scan, enhancing user flexibility and reducing login friction with engaging loading tips.

This pattern uses a modal blackout to confirm a user's intent to close an account, ensuring they understand the irreversible consequences before proceeding.

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.

Users can tap a thumbnail to smoothly zoom into a full-screen view of the image, providing an immersive and focused viewing experience.

This tooltip provides contextual guidance for an icon, explaining its function and how to use it, enhancing user understanding and feature adoption.

This pattern uses a persistent banner to remind users to verify their PIN, enhancing security and recall without interrupting core app functionality.

A web landing page for the Snap Camera product, featuring a fixed navigation bar, interactive buttons, and animated video content to showcase its features and encourage user engagement. Notable behavior: Scrolling; Button Click; Fixed Header.

Users can effortlessly switch between grid and list views of content, enhancing readability and personalizing their browsing experience.

Users can dynamically adjust content aspect ratios via a clickable menu, providing flexible viewing experiences and enhancing content adaptability.

This pattern uses a modal blackout to confirm a delete action, ensuring users are fully aware and can prevent accidental data loss.

This pattern uses a dynamic, animated brand gradient to visually engage users and highlight key messages as they scroll, enhancing brand recognition and content flow.

Users can effortlessly browse featured promotions and products through a dynamic hero slider, enhancing awareness and guiding their pathfinding.

This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.

A fixed navigation bar ensures key actions like "Comenzar gratis" remain accessible as users scroll, improving discoverability and conversion.

This landing page guides users to download the application for their specific operating system, simplifying the installation process.

Users can effortlessly browse and select various text styles and colors via a horizontal slider, enhancing creative expression and visual customization.

This spinner provides visual feedback during module loading, reassuring users that the system is actively processing and preventing perceived delays.

Hovering over a truncated title reveals its full text in a tooltip, providing complete context without cluttering the interface.

Users can intuitively reorder list items by dragging and dropping them, providing a direct and efficient way to customize their view.

This pattern offers users clear choices to join a meeting, enabling them to download the app, continue in the browser, or open the existing application for optimal experience.

A dynamic background animation on page load engages users immediately, providing visual interest and a sense of activity while content renders.

Users can quickly toggle between light and dark themes via a side-drawer, enhancing visual comfort and accessibility without leaving the current page.

This pattern displays real-time audio levels as a dynamic graph, providing immediate visual feedback on sound input during a call.

A multi-step popup positioned in a fixed corner of the screen, typically on desktop web, designed to guide users through a sequence of actions or provide progressive information, often for feedback or awareness purposes. Notable behavior: Step Navigation; Dismissal; Active Step.

Users can easily update their profile avatar by selecting an NFT from their connected wallet, visually confirming the change instantly.

Users can quickly express approval or disapproval for content, providing immediate feedback that helps prioritize or refine items.

A "NEW" badge next to a menu item instantly highlights recently added content or features, guiding users to discover and engage with fresh updates.

Users navigate a multi-step onboarding flow with smooth, full-screen animated transitions, enhancing engagement and clearly indicating progress through each stage.

This collapsible sidebar menu allows users to expand or hide navigation options, optimizing screen real estate while maintaining easy access to key sections.

This vertical icon menu provides quick access to key sections, revealing descriptive tooltips on hover to aid navigation and improve user pathfinding.

Users can click a button to reveal a contextual menu of related actions, streamlining decision-making and guiding them to their desired outcome.

This pattern reveals a floating popover on click, providing immediate, context-specific information or actions without navigating away from the current view.

Users can quickly switch the site's display language via a prominent top bar link, enhancing accessibility and personalizing their experience.

This pattern uses a fixed background image that animates and shifts as the user scrolls, creating a dynamic and engaging visual experience.

This pattern provides a persistent, scrollable sidebar for navigation, ensuring users can always access key sections and maintain context within complex applications.

This pattern provides users with critical, localized emergency information and actionable advice through an interactive map, enhancing awareness and guiding safe behavior.

Displays a tooltip above a link when the user hovers over it, providing additional context or information without navigating away from the current page.

This wizard guides users through initial setup choices like appearance and chat mode, ensuring a personalized experience from the start.

This pattern uses subtle background animations that react to mouse movement, creating an engaging and dynamic visual experience for users.

This wizard guides users through creating a new workspace, ensuring a smooth onboarding experience by collecting essential information step-by-step.

Users can collapse and expand layout sidebars to optimize screen space, enhancing focus on primary content while maintaining quick access to navigation.

This pattern allows users to quickly find and select desired options from a dynamic, filtered list that appears as they type into an input field.

This pattern allows users to efficiently browse a curated collection of content cards, with clear navigation and editing options for personalized interaction.

Users can effortlessly upload files by dragging them from their desktop directly into a designated drop zone within the application.

A popover on hover reveals contextual information or actions in a temporary overlay, enhancing user awareness without disrupting the main workflow.

This pattern uses an interactive background animation to engage users and provide visual feedback as they navigate or interact with elements on the page.

A common UI pattern where additional options or actions related to a specific item are initially hidden to conserve space. These options are revealed upon user interaction, typically by clicking or tapping a 'dots' (ellipsis) icon, presenting a contextual menu or dropdown.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

This pattern guides users through an onboarding flow with a fullscreen modal and swipable content, ensuring focused attention on key information.

Users can swipe through a horizontal carousel of related content cards, efficiently discovering more options without leaving the current view.

Users confirm a critical action by holding a button, preventing accidental taps and ensuring deliberate engagement with the system.

Users can intuitively reorder list items on touch devices by dragging and dropping them, providing flexible organization and personalized views.

This pattern presents critical information or actions in a bottom-fixed modal, ensuring user focus by dimming the background content.

Tapping the album art smoothly zooms it to full screen, providing an immersive view of the artwork and enhancing the visual experience.

This multi-depth sidebar navigation allows users to quickly traverse complex information hierarchies, improving discoverability and reducing cognitive load.

Users can dynamically adjust the content preview area, allowing them to visualize their website across various screen sizes for optimal responsiveness and design fidelity.

This modal blackout pattern guides users through multi-step forms, ensuring focused input and clear progression for critical decisions.

Users can precisely trim video segments using a draggable timeline with visual thumbnails, enabling efficient content selection and faster processing.

Users can toggle the sidebar menu to hide or reveal navigation, optimizing screen space for content focus or quick pathfinding.

Users can efficiently select multiple table rows by clicking checkboxes, enabling bulk actions and streamlining content management workflows.

This horizontal accordion allows users to explore distinct content categories by expanding a selected panel, revealing detailed information and relevant calls to action.

This pattern provides immediate visual feedback during page loads, progressively revealing content to reassure users that the system is actively processing their request.

Users can quickly preview and select new chat background colors from a categorized list, enhancing personalization and visual comfort.

This pattern provides immediate, non-intrusive feedback to users, confirming successful actions like subscriptions with a brief, dismissible popup.

Users can effortlessly swipe horizontally through a carousel of content, providing an intuitive way to explore related items or navigate a media gallery.

This pattern uses a subtle background animation on hover to provide visual feedback, guiding users to interactive elements and enhancing discoverability.

This pattern uses a celebratory animation to provide immediate, delightful feedback to users upon completing a task, enhancing engagement and motivation.

This multi-step modal guides users through key features with clear explanations and visual cues, ensuring a smooth onboarding experience.

This pattern guides users through a multi-step onboarding or feature tour with a dismissible, paginated floating dialog, enhancing discoverability and adoption.

Users can tap a persistent icon to reveal or hide a secondary sidebar, optimizing screen real estate while maintaining quick access to additional content.

A top banner informs users about new design changes, offering a clear link to "Obtener más información" for those seeking further details.

Users can quickly check and manage their notifications by clicking the bell icon, revealing a dropdown with recent alerts and an option to clear them.

Users can easily compare data trends over customizable time ranges within a horizontal graph, enabling quick insights into performance changes.

Users can precisely crop an image for various device viewports within a single interface, ensuring optimal visual presentation across all screens.

This pattern allows users to quickly switch between predefined time ranges to view multiple related data graphs, enabling efficient analysis of performance trends.

Users can effortlessly upload files by dragging them from their desktop directly into a browser window, streamlining the content submission process.

This pattern allows users to cancel an ongoing operation, like a file transfer, by clicking a clear "X" icon, providing immediate control over system processes.

Users can instantly switch between light and dark themes with a single toggle, enhancing readability and reducing eye strain for personalized viewing comfort.

Users can adjust image grid spacing with a pinch gesture, enhancing visual clarity and enabling precise content selection for improved accessibility.

Users can double-click an item to open its content in a new, independent window, enabling parallel viewing and enhanced multitasking.

Users can toggle a secondary sidebar to reveal or hide contextual information, optimizing screen real estate and focus on primary content.

Users efficiently select a presentation template and aspect ratio from categorized options, streamlining the creation of new projects.

Users can precisely crop multiple screenshots sequentially, enabling focused content extraction and streamlined sharing of specific information.

This pattern displays a floating banner over existing content, allowing users to compose new input without losing context of the underlying page.

This pattern keeps primary actions readily accessible by stacking them vertically, ensuring users can quickly initiate key tasks without scrolling.

A UI pattern, exemplified by Netflix, that allows users to toggle the visibility of additional information, often within a navigation or content browsing context, such as revealing details about a video thumbnail via a dropdown or button interaction. Notable behavior: Click; Toggle; Expanded.

This multi-step modal guides users through an onboarding process with clear form inputs and animated transitions, ensuring focused completion of initial setup tasks.

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

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

This loader provides visual feedback to users that content is loading, maintaining engagement and reducing perceived wait times by showing the layout structure.

This pattern offers users a clear, two-step download process, first presenting a prominent "Download" button and then a secondary, fixed-on-scroll button for consistent access.

This pattern provides a clear entry point for searching, quick access to key features, and personalized content, enhancing user navigation and product discovery.

Users can easily personalize their full-screen widget layout by dragging and dropping elements, enhancing their dashboard's utility and visual organization.

This pattern helps users decide whether to proceed with registration by clearly comparing the benefits of stopping versus continuing the process.

This pattern informs users that a desktop application is downloading, providing clear instructions and a progress indicator to manage expectations and guide the next steps.

Users can manage their uploaded video content, including visibility, restrictions, and upload dates, to maintain an organized channel.

This pattern allows users to browse a list of audio episodes while simultaneously playing and controlling a selected episode.

This pattern uses a tooltip to highlight "Top Recommended Restaurants," informing users that the displayed selection is personalized based on proximity, order history, and ratings.

This pattern allows users to customize food orders with dietary preferences and special instructions, ensuring a personalized and accessible ordering experience.

This pattern warns users about potential data loss when editing an active test, offering options to proceed cautiously or duplicate the test to preserve existing responses.

A prominent top banner informs users about new features or promotions, encouraging engagement with a clear call to action.

Users can efficiently search and manage their bookmarks within Safari, leveraging a clear interface with a search bar and categorized folders for quick navigation.

This pattern highlights new or experimental features within a dropdown menu, allowing users to discover and opt-in to upcoming functionalities.

A modal dialog pattern requiring the user to explicitly type the name of an item to confirm its deletion, enhancing user awareness and preventing accidental data loss. Notable behavior: Text input; Button click (confirm/cancel); Modal open.

Displays a preview of a tab's content when the user hovers over the tab, enabling quick content assessment without requiring a full click or navigation.

This pattern allows users to securely log in to their iCloud account by entering their Apple ID, with an option to stay signed in for convenience.

Users can manage their account's discoverability and contact settings, controlling who can find them via email or phone number for enhanced privacy.

Users can adjust text size and font for optimal readability, enhancing accessibility and personalizing their content consumption experience.

This pattern allows users to quickly search their content with a prominent search bar that reveals recent searches and relevant suggestions upon interaction.

Users can save articles for later reading by clicking a bookmark icon, ensuring they don't lose interesting content when time is short.

This pattern provides real-time feedback on file upload progress and status, allowing users to monitor, manage, and resolve potential issues efficiently.

This sidebar empty state introduces new features with a clear illustration and call to action, guiding users to discover and adopt new functionalities.

Users can activate Reader Mode to strip away distracting elements like ads and navigation, focusing solely on the article's content for improved readability.

This modal blackout pattern informs users about enhanced ad privacy, offering clear choices to manage settings or accept changes with distinct action buttons.

This empty state uses a humorous meme and a guiding text to playfully direct users toward the primary action button, encouraging engagement.

This pattern uses subtle animations within an email to guide users through a privacy checkup, enhancing engagement and clarity for important account actions.

This pattern allows users to effortlessly browse a carousel of news or definition cards, providing quick access to multiple content pieces with clear navigation.

A menu drop-down provides users with a clear, compact way to access navigation options, enhancing discoverability and site exploration.

This pattern provides a host with immediate control over who joins a meeting, enhancing security and ensuring only authorized participants can enter.

This banner provides timely, relevant information and a clear call to action, ensuring users are aware of important updates or opportunities.

Users can effortlessly browse and select product variations by color, with immediate visual feedback and clear stock availability, streamlining their purchasing decision.

This pattern uses tooltips to provide reminders or onboarding information within a store context, often including hypertext links for further action or navigation. It is primarily designed for desktop web environments to enhance user awareness.

This pattern guides users through a personalized plan upgrade flow by asking about their intent, offering tailored recommendations, and allowing them to view all options.

This banner promotes relevant content or offers within the app's main feed, encouraging user engagement and discovery without disrupting the primary navigation.

This pattern allows users to compare subscription tiers and their benefits side-by-side, enabling an informed decision before committing to a purchase.

The accessibility icon provides users with quick access to adjust display settings, enhancing readability and overall site usability.

This pattern allows users to seamlessly transition from a web page to a native mobile application, enhancing engagement and providing a richer experience.

A static tooltip on a menu provides immediate, contextual information for menu items. It typically appears on hover or focus, enhancing user understanding of an item's function or details without requiring an explicit click.

Users can quickly navigate video content by tapping the left or right side of the screen to rewind or fast-forward in precise increments.

This banner informs users about a page reload due to an error, ensuring they understand the unexpected behavior and can proceed with confidence.

Users can magnify embedded images by hovering over them, revealing crucial details and improving comprehension without navigating away.

Users confirm their delivery location on a map with a prominent pin and a clear call to action, ensuring accurate service.

This pattern guides users through a secure download or purchase confirmation process, requiring a physical side button press to prevent accidental transactions.

This pattern allows users to review copyright claims on their videos, understand the impact, and select appropriate actions to resolve issues.

This pattern provides a dedicated section at the bottom of a page to combat misinformation by directing users to reliable, expert-backed content.

Users can select a specific version of a product or guide from a dropdown menu, ensuring they access relevant, up-to-date information.

Users can efficiently manage multiple tasks by splitting their operating system screen into distinct, resizable windows, enhancing productivity and multitasking capabilities.

This banner provides critical, timely information to users at the top of the page, ensuring high visibility for important updates or alerts.

This pattern allows users to quickly confirm or change their trip's starting point, ensuring accurate pickup and a smooth journey.

This pattern allows users to quickly select specific days of the week and set corresponding commute times, streamlining schedule management for personalized route planning.

This pattern allows users to granularly control various notification types within the app, ensuring they receive only relevant alerts and maintain privacy.

This pattern uses an overlay with a stylized, partially transparent shape to draw attention to a new feature, offering options to engage or dismiss.

This pattern prompts users to re-enter their password when a session expires, ensuring security while allowing them to quickly resume their work.

This pattern guides users through multi-step onboarding or feature discovery with a focused, sequential tooltip and a dimmed background.

A UI element, typically a bar, that visually indicates the user's reading progress or status within a document or page. Often integrated into a fixed navigation bar, it enhances awareness and helps users track their position. Notable behavior: Progress State; Fixed on Scroll.

This pattern uses a placeholder text field to prompt users to share content, enhancing discoverability and guiding their initial interaction.

Users can easily save items to a favorites list by clicking a heart icon, even as a guest, promoting future engagement and purchases.

This pattern prompts users browsing a mobile website to switch to the native app, offering a better experience with enhanced features.

Users can quickly access and customize widgets in a two-pane sidebar, enhancing productivity by providing relevant information at a glance.

This pattern uses synchronized hover animations to highlight related data points across different UI elements, enhancing user awareness and decision-making.

This pattern introduces new features contextually, like swipe typing, to help users discover and adopt useful functionalities at the right moment.

Users can quickly navigate between open applications by swiping horizontally, revealing a stack of app previews for efficient task switching.

This pattern allows users to easily browse and select files from a list, with clear visual cues for file type and modification date, enhancing navigation and organization.

This top-banner informs users about security risks and prompts them to take action, enhancing account safety and providing clear options to "Get Started" or "Dismiss".

This pattern gathers essential user contact information, including first name, surname, and email address, to facilitate account creation and future communication.

This floating banner offers a persistent, non-intrusive call to action for subscription, allowing users to easily access pricing details while browsing content.

This pattern allows users to quickly understand and modify granular permissions for a selected user, ensuring precise control over access levels.

This pattern uses a prominent, half-page illustration with a slider to visually guide users through key features or benefits during onboarding.

This wizard guides users through a series of choices, enabling them to quickly define the purpose and desired interactions for their personal profile page.

Users select target audience segments from predefined categories, enabling personalized content delivery and streamlined lead qualification.

A prominent banner on the product homepage informs users about a special offer, encouraging engagement by highlighting a free Team Plan for specific groups.

Background ads leverage the entire viewport to display engaging, full-screen advertisements, often featuring high-quality imagery or video, to capture user attention.

A prominent banner provides users with critical, timely information and direct links to trusted external resources, enhancing awareness and facilitating access to vital updates.

A floating tooltip or dialog provides contextual information or prompts user action without disrupting the main workflow, enhancing discoverability and engagement.

This pattern allows users to provide descriptive alternative text for images, enhancing accessibility for visually impaired users and improving content understanding.

This pattern provides immediate, context-sensitive text formatting options via a static tooltip, enabling users to efficiently style selected content without navigating away.

This pattern provides clear warnings and explanations for critical actions, ensuring users understand the irreversible consequences of their choices before proceeding.

This pattern securely verifies user identity by requiring a password re-entry, ensuring authorized access before proceeding with sensitive account changes.

A modal with a title, descriptive text, and a single "OK" action button informs users about a new feature, ensuring they acknowledge the information before proceeding.

This pattern allows users to customize their navigation experience, including transport modes, distance units, and voice search language, enhancing usability and personalization.

This pattern uses interactive hotspots on a product image to reveal key features and benefits, allowing users to explore details without leaving the main page.

This pattern prompts users to subscribe to a newsletter via a modal, appearing after they've consumed a certain amount of free content, encouraging continued engagement.

This pattern presents a horizontal carousel of content cards, each with a clear call-to-action, enabling users to explore related information and engage with offerings efficiently.

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

This pattern describes an in-app Net Promoter Score (NPS) survey, designed to collect user feedback directly within a desktop application. It typically appears as a modal dialog, prompting users to rate their experience and optionally provide comments. Notable behavior: Rating Selection; Text Input; Initial State.

This notification prompts users to review their recent food order, encouraging feedback that helps others make informed dining choices.

This pattern automatically cycles through content in a two-pane layout, allowing users to passively discover key features or products without direct interaction.

Users enter their email to receive a confirmation link, enabling them to quickly find and join existing Slack workspaces or create new ones.

This pattern displays a user's real-time location on a map with an interactive bottom sheet for quick access to contact, directions, and notification settings.

This pattern provides a clear, persistent navigation bar at the top of the screen, allowing users to quickly return to previous views or access key sections.

This pattern provides quick access to recent activity and featured items within a compact, dismissible overlay, enhancing user efficiency.

This pattern guides users through key features with a multi-step popover, ensuring a smooth onboarding experience and quick feature discovery.

This feedback form allows users to express their overall sentiment and provide detailed suggestions for improvement, fostering a direct channel for product enhancement.

This skeleton loader provides visual feedback during content retrieval, reducing perceived wait times and improving user experience by showing layout structure.

This pattern respectfully requests users to disable their ad blocker, explaining that the service is free to use but relies on ads for operation.

This pattern streamlines desktop app sign-in by redirecting users to a web browser for authentication, then seamlessly returning them to the application.

Users can personalize their browser's start page by selecting a custom background image, enhancing visual appeal and personal connection.

This pattern allows users to provide feedback on web content, enabling them to report issues or suggest improvements directly within the interface.

This pattern provides a persistent, non-intrusive notification in a sidebar, informing users of available updates and offering a direct call to action.

Users can invite up to six friends to a synchronized viewing experience, fostering shared enjoyment and social interaction around media content.

This pattern provides a fixed, animated bubble that indicates reading progress, helping users understand their position within long articles and enhancing content appreciation.

A top primary banner provides crucial, timely information and calls to action, ensuring users are immediately aware of important updates or opportunities.

This welcome screen uses a captivating background image to introduce new features, guiding users to engage with updated content immediately.

This pattern allows users to preview a PDF document directly within the interface and offers a clear option to download it for offline access or detailed review.

This pattern allows users to watch a free video episode, encouraging engagement and potential subscription by offering a taste of premium content.

This pattern allows users to quickly rate an article with a natural language choice, providing immediate feedback and enhancing content engagement.

This pattern informs guest users they've reached their daily download limit, prompting them to register or log in to continue accessing resources.

This pattern guides users to quickly name their site by offering real-time suggestions as they type, streamlining the initial setup process.

This pattern reminds users that they can enable desktop notifications by clicking the lock icon in the browser's address bar.

A checkbox provides clear visual confirmation of a completed step, guiding users through onboarding or multi-stage processes with immediate feedback.

This pattern showcases key product features and social proof alongside clear sign-up options, helping users quickly understand value and commit.

This pattern uses a modal dialog to offer a free ebook in exchange for an email address, encouraging newsletter sign-ups and lead generation.

This onboarding action tooltip guides users to sign in with Google, streamlining the login process and reducing friction for new or returning users.

This banner prompts users to open content in a native app, enhancing engagement and providing a richer, more integrated experience than a web browser.

Users can effortlessly organize and filter list items by category and status, enhancing task management and focus within a customizable interface.

This pattern guides users through a multi-step signup process, including a clear pricing selection, to onboard them efficiently and transparently.

Upon focusing the search bar, users are presented with a curated list of favorites, frequently visited sites, and Siri suggestions, streamlining navigation and discovery.

Users can quickly access account-specific options and site navigation through a persistent topbar dropdown menu, enhancing pathfinding and personalization.

A long-press gesture reveals a context-sensitive menu, offering quick access to relevant actions for the selected element.

This pattern provides immediate, contextual feedback for form input errors, guiding users to correct mistakes efficiently and complete their tasks without frustration.

A multi-step form pattern designed to guide users through a sequential input process, where the form content maintains a fixed position on the screen.

This pattern uses a notification badge on the top bar to alert users to new rewards, which can be viewed in a dropdown menu for easy access and appreciation.

A bottom action menu provides persistent, easily accessible navigation and primary actions, enhancing user efficiency and discoverability on mobile devices.

Users can easily switch between light and dark color themes, enhancing readability and reducing eye strain in varying ambient light conditions.

Users can precisely define column breaks within a data table, enabling flexible data organization and improved readability for complex datasets.

This pattern enables users to securely access their Apple ID by entering their email, with an option to remember the account for future convenience.

Users can quickly filter their video feed by topic using a horizontal row of clickable tabs, enhancing content discovery and personalization.

This modal allows users to efficiently search for and select a preferred language from a comprehensive list, enhancing personalization and accessibility.

This pattern describes a form interface that allows users to input information using natural language, often seen in onboarding flows on web and desktop platforms. Notable behavior: Natural language input; Form submission; Input validation.

This pattern helps users choose a subscription plan by clearly comparing features and pricing, often leveraging social proof to build trust and encourage conversion.

This pattern guides users to scan their environment with a device, displaying a grid and visual cues to detect surfaces for augmented reality experiences.

This tab menu navigation allows users to quickly switch between different categories of items, enhancing discoverability and streamlining the browsing experience.

This pattern allows users to quickly rate a conversation using a Likert scale of emoji faces, providing immediate feedback within the chat interface.

A floating video story provides users with a dynamic, engaging explanation of a product or service, enhancing understanding and encouraging further interaction.

This pattern presents a clear cookie consent pop-up, allowing users to accept or manage cookie preferences for a transparent and compliant browsing experience.

This pattern highlights discounted products with clear visual cues, enabling users to quickly identify savings and make informed purchasing decisions.

Users can right-click the maximize button to access a dropdown menu, enabling quick window arrangement options like full screen or tiling to the left or right.

This dismissible bottom-anchored popup informs users about critical information, offering options to dismiss or learn more without disrupting primary content viewing.

This pattern presents a prominent, in-front modal to users, requiring explicit acceptance of terms and conditions before they can proceed with site interaction.

This empty state provides a clear call to action, guiding users to initiate content creation and overcome initial blank canvas paralysis.

The video status bar provides crucial playback controls and time information, enabling users to precisely navigate and manage their viewing experience.

This bottom-anchored popup provides users with immediate access to secondary, contextually relevant information without disrupting their primary task.

This pattern enables users to refine search results with a persistent filter menu, offering various sorting, category, and condition options for efficient product discovery.

Users input their company or team name into a text field, with a character counter providing real-time feedback and ensuring compliance with length requirements.

This pattern provides immediate feedback on user input, guiding them to correct errors and successfully complete forms or tasks.

This pattern displays a curated feed of articles from the user's network, enabling quick discovery of relevant content and fostering community engagement.

This onboarding screen asks users about their fitness goals with a clear yes/no choice, streamlining the initial setup and personalizing the app experience.

Users select their intended use case from distinct options, streamlining their onboarding experience with tailored content and features.

A context banner card proactively alerts users to potential risks or important information within an email, empowering them to make informed decisions about interaction.

This pattern allows users to efficiently manage and organize their content by editing, adding, or removing tags through a dedicated modal interface.

This pattern allows users to precisely select colors from a spectrum, adjust saturation and brightness, and save custom swatches for efficient reuse.

This pattern prompts users to enable notifications, offering clear benefits and a choice to defer, enhancing engagement and personalization.

This onboarding flow guides new users through initial profile setup, collecting essential personal details to personalize their experience and facilitate future interactions.

This contextual popup allows users to manage task details and offers a clear call to action for upgrading to unlock advanced features.

This pattern displays a prominent, actionable warning message within the map's search results, ensuring users quickly access critical, up-to-date information about a pandemic.

This pattern uses a branded illustration within a modal to reinforce a user's action, providing a moment of delight and confirmation before a critical step.

This pattern describes a navigation technique, commonly found in the Apple Calendar application, that uses a zoom transition to move between different hierarchical views (e.g., day, week, month, year). It enhances user awareness of their location within the application's structure.

This pattern presents a modal dialog to users, highlighting the potential negative impact of an action to encourage reconsideration and prevent unintended consequences.

This pattern enables users to efficiently navigate and select menu items using keyboard arrows, enhancing accessibility and speed for power users.

This warning banner informs users that content is not fact-checked, promoting critical thinking and directing them to authoritative sources for sensitive topics.

This pattern presents a floating tooltip with a dim overlay, guiding users to initiate or schedule a meeting with clear options and keyboard shortcuts for efficiency.

This banner provides a clear, concise message to users, offering an alternative action to streamline the process of adding multiple subscribers.

This pattern celebrates user contributions with a congratulatory message and visual feedback, encouraging continued engagement by highlighting the impact of their shared content.

This top banner provides real-time order status and restaurant information, allowing users to quickly track their food preparation and estimated arrival time.

This pattern provides users with a clear, interactive visualization of their sleep stages, enabling quick comprehension of sleep quality and duration.

This pattern outlines the user experience for posting graphics online, focusing on the initial onboarding flow for new users on a web-based desktop platform, similar to how Dribbble handles content submission. It encompasses the steps and interactions required to upload, describe, and publish visual content, guiding users through their first contribution. Notable behavior: File Upload; Form Submission; Uploading (progress).

This pattern automatically displays a tooltip, often accompanied by a dimmed background, to guide users or highlight new features. It's commonly used in onboarding flows to draw attention to specific UI elements and provide contextual information.

This pattern ensures users fully review important terms by requiring them to scroll through content before enabling a confirmation action.

This pattern entices users to upgrade to a premium subscription by blurring out valuable content, like profile viewers, and offering a free trial to unlock it.

This pattern helps users compare three distinct pricing tiers, highlighting features and costs to facilitate an informed subscription decision.

This pattern guides users through multi-step processes with clear, numbered instructions and corresponding visual cues for efficient task completion.

Users can clear their recent search history with a single tap, enhancing privacy and decluttering the search interface for a fresh start.

This pattern enables users to quickly create a new account or sign in to an existing one, streamlining access to platform features.

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.

This pattern provides a clear, detailed summary of a food order, including items, prices, and delivery information, ensuring users have a complete record of their purchase.

This pattern provides real-time trip progress and driver details, empowering users with transparency and reducing anxiety during rideshare services.

A celebratory confetti explosion visually confirms successful user actions, enhancing positive reinforcement and delight.

This pattern displays a walking route on a map, clearly indicating the path with a dotted line and providing an estimated travel time for efficient navigation.

This floating voice widget provides persistent awareness of an active call, allowing users to quickly mute, unmute, or end the conversation without interrupting their workflow.

This pattern enables users to create an account by providing their name and email, with real-time validation ensuring data accuracy and a smooth onboarding experience.

This pattern enables users to effortlessly share content across popular social networks and via email, boosting content reach and engagement.

This pattern allows users to toggle a colorblind-friendly mode, enhancing accessibility by adding distinct shapes to color labels for improved differentiation.

This pattern highlights matching items within a dropdown menu as a user types into an associated search input, aiding in quick pathfinding and user selection.

This pattern offers users a clear choice between creating a new account or signing in, streamlining access and reducing decision fatigue.

A floating status banner presents non-blocking, transient messages to users, typically positioned at the top or bottom of the viewport. It delivers immediate feedback or critical updates without interrupting the user's primary workflow.

This modal prompts users to log in with an existing account, offering clear options to proceed or use an alternative, ensuring a smooth authentication flow.

The hamburger menu icon provides a compact way to reveal a navigation drawer, allowing users to access various sections of the website efficiently.

Users can highlight and save specific text within an article, enabling focused review and easy access to key information later.

This transition subtly scales down an image on hover, providing visual feedback and highlighting interactive elements without obscuring content.

This dedicated screen ensures users explicitly confirm or deny third-party access to their LinkedIn data, promoting transparency and control over personal information.