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.

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

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

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

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

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.

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

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.

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 informs users that a desktop application is downloading, providing clear instructions and a progress indicator to manage expectations and guide the next steps.

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 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.

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.

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.

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 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.

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.

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 synchronized hover animations to highlight related data points across different UI elements, enhancing user awareness and decision-making.

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

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

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

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.

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 subtle, interactive background animations to engage users and provide dynamic visual feedback as they scroll or interact with the page.

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.

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 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.

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

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 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.

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 modal presents users with clear, card-based options to initiate a task, guiding them efficiently through initial decision-making.

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.

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.

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.

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 uses a modal blackout to confirm a user's intent to close an account, ensuring they understand the irreversible consequences before proceeding.

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

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.

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

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.

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.

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 pattern uses subtle background animations that react to mouse movement, creating an engaging and dynamic visual experience for users.

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

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.

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.

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

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 floating video story provides users with a dynamic, engaging explanation of a product or service, enhancing understanding and encouraging further interaction.

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

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 pattern provides immediate feedback on user input, guiding them to correct errors and successfully complete forms or tasks.

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

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 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 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 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 highlights matching items within a dropdown menu as a user types into an associated search input, aiding in quick pathfinding and user selection.

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.

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