This pattern allows users to upload files by dragging and dropping them onto a designated area, often featuring visual feedback, progress indicators, and potentially appearing within a modal dialog. Notable behavior: Drag and Drop; File Selection; Idle.

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.

A background animation that provides visual feedback, often responding to user interactions like drag & drop gestures or indicating loading states, enhancing user awareness and engagement.

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

Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

A Progressive Layout Loader displays content incrementally, often utilizing placeholders or animations, to enhance perceived performance and user experience during data fetching or complex rendering operations.

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.

This pattern presents a multi-step modal dialog that overlays the entire screen, often used for onboarding new users or drawing attention to important information. It guides users through a sequence of steps, typically featuring pagination for navigation and potentially including images, illustrations, or hypertext links to provide additional context or actions. Notable behavior: Opening and closing a modal; Navigating through sequential steps; Modal open/closed.

Desktop, Awareness, Pathfinding, Web, Español, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress

A top-positioned banner component used to inform users about design changes or important updates. It typically includes text and hypertext links for more details, serving as a prominent awareness mechanism on web and desktop interfaces. Notable behavior: Click (Hypertext Links); Dismiss (Optional); Visible.

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, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Button, Back Link, Search Input, Twitter

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

This pattern describes the visual and functional aspects of a video loader within a web application, typically used on desktop to indicate that video content is being prepared or buffered for playback.

This pattern guides users through the process of downloading a desktop application from a web-based interface. It typically involves presenting a clear call to action, such as a hypertext link, that initiates the download of an installer or executable file. The primary objective is to facilitate the transition of users from a web experience to the installation and use of a native desktop application, thereby increasing product awareness and engagement. Notable behavior: Clicking a download link; Initiating file download; Download link visible.

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.

A page blocker warning informs users about a critical edition-related issue, preventing interaction with the underlying content until addressed. It typically appears as an overlay or prominent banner, requiring user acknowledgment or action.

A prominent banner positioned at the top of a website to display promotional content, announcements, or critical alerts. It typically incorporates hypertext links for user engagement and navigation.

This pattern highlights new or upcoming features within a dropdown menu using a notification badge to increase user awareness. It provides a clear visual cue for users to discover new functionalities. Notable behavior: Menu item selection; Menu open/close; New feature indicator.

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.

Desktop, Awareness, Web, English, Side Panel, Fixed on Scroll, Error State, Progress State, Google, Google Suite

Displays a dedicated empty state within a sidebar or side panel, often featuring an illustration and hypertext links to guide users on initial content creation or onboarding steps.

This pattern utilizes an illustration or meme within an empty state user interface to provide context, engage users, or add humor. It often includes hypertext links to guide users toward next steps or relevant information.

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.

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.

Highlights key features or new functionalities using distinct visual styles to draw user attention and guide them through important elements of an interface. Notable behavior: Hover; Click; Highlighted.

This pattern describes the process where a user is prompted to change their password immediately upon logging in if their current password has expired, ensuring account security and compliance with policy.

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

A floating tooltip or dialog displays contextual information or actions near a trigger element, appearing as an overlay without disrupting the main content flow.

A pattern that alerts users to significant, potentially irreversible changes before they are committed, ensuring user awareness and an opportunity to review or cancel.

Desktop, Pathfinding, Awareness, Web, Español, Tiendanube

A navigation bar element that provides a contextual link to a previous page or section, aiding users in pathfinding and maintaining awareness of their location within a web application.

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

A Skeleton Loader displays a simplified, placeholder version of content while actual data is being fetched. This pattern enhances perceived performance and reduces user frustration by providing immediate visual feedback and indicating the layout of incoming information. Notable behavior: Loading; Pending content; Content structure placeholder.

A background element that responds to user input or system events with dynamic visual changes, often used to enhance engagement or provide subtle feedback on web or desktop interfaces.

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

This pattern implements a 'Back to Top' mechanism, typically a fixed button that appears after a user scrolls down a long page. It enhances navigation for content presented via pagination or infinite scroll, allowing users to quickly return to the top of the page. Notable behavior: Scroll; Click; Hidden.

Displays a progress bar to indicate the loading status of content or an operation, providing visual feedback to the user during wait times and enhancing awareness of background processes.

A navigation component displaying a hierarchical outline of page content, enabling users to quickly understand the page structure and jump to specific sections via anchor links. This pattern enhances pathfinding and accessibility for long-form content, documentation, or multi-step processes by providing a clear overview and direct navigation within a page. Notable behavior: Click (to navigate to section); Scroll (to highlight current section); Active (current section).

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.

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

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.

This pattern describes a user interface element, typically found in a navigation bar, that allows users to toggle high contrast mode for improved accessibility on web and desktop platforms. Notable behavior: Click; Toggle; High Contrast Enabled.

Desktop, Awareness, Accessibility, Feedback, Web, English, Side Panel, Accordion

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

Displays per-hour status indicators on a status page, providing real-time and historical system health. Supports various UI states and interactive elements like tooltips for detailed information.

Facilitates file uploads with drag-and-drop or click interactions, providing background loading, progress indicators, and visual feedback. Manages empty, loading, and completion states for user awareness.

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.

Displays timely news or updates within an application, often indicated by a notification badge. Users can typically view details in a tooltip or dedicated panel, which may support infinite scrolling for more content and include hypertext links. Notable behavior: Infinite Scroll; Hypertext Links; Unread Indicator.

Applies a dynamic 3D shadow effect to a button, enhancing visual depth and responsiveness upon interaction through animation and transition.

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

A horizontal slider pattern for displaying items, commonly used in e-commerce for product carousels, featuring pagination and image display.

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.

A sidebar navigation menu featuring collapsable items, often used to manage a large number of navigation links by revealing sub-items on user interaction.

A vertical accordion component used to display frequently asked questions, allowing users to expand and collapse sections for information retrieval.

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.

A Modal or Dialog component that allows users to drag and drop it to a fixed position on the screen. This enables custom placement and enhances user control over the interface layout, supporting repositioning for improved user experience. Notable behavior: Drag & Drop Gesture; Fixed Position.

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 create a file from a web image by dragging and dropping it, often involving OS-level file handling and potentially a modal for confirmation or options.

This pattern describes a search bar interaction where the surrounding content is dimmed or 'blacked out' to focus user attention on the search input field. It enhances pathfinding by making the search function highly prominent and guiding users towards information retrieval. Notable behavior: Input Focus; Content Dimming; Active Search Input.

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.

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

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 desktop pattern for reminding users about a PIN, often using a modal or banner. It includes text input and hypertext links, designed for awareness and accessibility on Apple OS.

Features an animated illustration alongside a navigation menu, often used in a carousel or paginated content structure for 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 hero slider, or carousel, presents a series of prominent content items, often images, in a rotating sequence. Users can navigate through the slides using drag gestures, with smooth transitions between each item. This pattern enhances awareness and pathfinding on a webpage. Notable behavior: Drag Gesture; Slide Navigation; Active Slide.

Displays a visual spinner to indicate that a module or content is actively loading, preventing user uncertainty and improving perceived performance during asynchronous operations.

Displays a small, contextual information box when a user hovers over an interactive UI element, enhancing clarity without permanent screen clutter. Notable behavior: Hover; Hovered; Idle.

Enables users to reorder list items using a mouse-driven drag and drop gesture, enhancing list management and customization on desktop web applications.

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

This pattern features a background animation that plays automatically upon page or component load. It is commonly used to enhance user onboarding, create awareness, or provide visual interest during initial content display. Notable behavior: Automatic Play; Page Load Trigger; Initial Load.

A visual component displaying audio levels or data using a graph of sound bars, often incorporating dynamic transitions. Typically found in desktop applications, it can be interactive, responding to click events.

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.

A sidebar menu that can be collapsed or expanded to manage screen real estate, often used for navigation. Supports user pathfinding and awareness in web applications.

A vertical navigation menu composed of icons, often placed in a side panel or navbar, supporting tooltips on hover and notification badges for user awareness and pathfinding.

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

Enables users to switch the interface language via a topbar control, improving accessibility and user experience for multilingual audiences on web and desktop platforms.

Animates a background element, often an image or illustration, as the user scrolls, creating a dynamic visual transition. The background can be fixed in position relative to the viewport.

A desktop web pattern featuring a scrollable sidebar, enhancing pathfinding and user awareness within the application interface.

Displays critical information on an interactive map, enabling users to quickly understand and navigate emergency situations.

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 creates a dynamic background that visually animates and responds to the user's mouse movements, enhancing interactivity and visual engagement on a web page. Notable behavior: Mouse Move; Animated; Reactive.

This pattern describes how to manage user permissions through linked settings. It allows administrators to configure access levels and features, often with dependencies between different permission sets. The design ensures clarity and control over what users can access or modify within a system.

This pattern outlines various mechanisms for users to provide feedback directly on web content, aiming to improve content quality and user engagement.

A non-intrusive notification pattern that appears on the side of the screen to inform users about system or application status updates. This pattern is commonly found in desktop environments, enhancing user awareness without disrupting their primary workflow. Notable behavior: Side Panel.

Facilitates sharing an invitation link to a live movie event, enabling users to invite others and manage the invitation process. Notable behavior: Hypertext Links; Copy to Clipboard; Live State.

Provides a concise visual indicator, often bubble-shaped, to communicate the current status of an item or process. It enhances user awareness, particularly within dynamic content flows like infinite scroll or pagination, by highlighting progress or empty states, potentially with animation and fixed positioning. Notable behavior: Animation; Progress State; Empty State.

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 details the use of native browser notifications to deliver timely reminders to users, ensuring awareness of website-related events even when they are not actively browsing the site.

This pattern details the display of error messages directly adjacent to form input fields, providing immediate and specific feedback on invalid data entry. It enhances user experience by making error resolution clear and efficient.

Displays a notification badge on the topbar (navbar) to alert users of new rewards. Clicking the badge reveals a dropdown menu with reward details, enhancing user awareness and appreciation for earned benefits. Notable behavior: Click to open dropdown; Hover to reveal details (optional); Unread notification (badge visible).

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.

A bottom-anchored popup on the YouTube desktop web interface, used to display awareness messages, which can be dismissed by the user. Notable behavior: User Dismissal; Visible; Dismissed.

An actionable empty state provides guidance and a clear call to action when a section or application has no content. It helps users understand how to get started, add data, or resolve the empty condition, often appearing during onboarding or initial use.

A video status bar displays the current playback progress and total duration of a media item, typically within a video player interface. It allows users to visually track their position in the content and often enables direct seeking to different points in the timeline. Notable behavior: Seeking; Hover for time tooltip; Playing.

Displays real-time feedback to users about the validity of their input in form fields, indicating success, error, or warning states to guide correction. Notable behavior: Typing; Blurring; Valid.

A modal dialog pattern designed for editing and managing tags associated with an item or content. It provides a focused interface for users to add, remove, or modify tags without navigating away from the current view. Notable behavior: Open Modal; Close Modal; Modal Open.

This pattern utilizes branded illustrations to reinforce key messages, enhance user engagement, and strengthen brand identity within a product experience. Illustrations serve as visual cues that can simplify complex information, add personality, and create a more memorable and pleasant user journey, particularly effective in awareness flows, onboarding sequences, or when conveying success and empty states. Notable behavior: Passive Viewing; Default; Informational.

Desktop, Awareness, Web, English, Button, Dim Overlay, Tooltip, Alert Dialog, Close Overlay, Hypertext Links

A banner displayed at the top of a form to communicate general validation errors or system-level issues to the user. It provides immediate awareness of problems that prevent form submission, typically appearing after an attempted submission. Notable behavior: Form Submission; Dismissal; Visible.

A food order receipt displays a summary of items purchased, quantities, prices, and the total cost for a completed food order. It serves as a record of the transaction.

A floating desktop widget, fixed on scroll, designed for macOS to provide awareness of voice interactions. It features an avatar, a sound bar, and a color marker, along with actionable controls.

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.

A modal dialog that overlays the main content with a darkened background, requiring user interaction with an embedded form before returning to the underlying page. Notable behavior: Opening a modal; Closing a modal; Modal visible.

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.