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.

A fixed bottom-right chat bubble, commonly used for customer support or feedback. It expands into a side panel, features a notification badge for new messages, and includes a text input for user interaction, often with a scrollable conversation history. Notable behavior: Expand/Collapse; Typing; Expanded.

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.

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

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 standard checkbox component enhanced with custom color styling to visually differentiate selection states or categories, improving clarity and user feedback in forms and lists.

Desktop, Landing Page, Web, Español, Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

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

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

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

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.

A dropdown filter allows users to select one or more criteria from a collapsible list to refine displayed content. This pattern helps manage screen space while providing powerful content filtering capabilities. Notable behavior: Click to open dropdown; Click to close dropdown; Dropdown open.

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.

A navigation component that allows users to toggle the visibility of a sidebar menu, often used for pathfinding on desktop and web applications.

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

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

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

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

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.

A modal dialog with a blackout overlay, containing a form, and featuring transition animations for opening and closing.

A top navigation bar pattern supporting multiple layout configurations, often featuring dropdown menus for pathfinding on desktop web applications.

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.

Allows users to switch between list and grid display modes for content, enhancing content consumption flexibility and adapting to user preferences.

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

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

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

A UI component enabling users to toggle between light and dark visual themes, enhancing accessibility and personal preference across web and desktop applications. Notable behavior: Toggle; Switch; Light Mode.

Provides sliders for users to customize the display of an image grid, allowing adjustments to parameters like size, spacing, or number of columns. Supports interactive drag-and-drop gestures for precise control.

This pattern implements an image zoom or magnifier effect, enabling users to inspect fine details by hovering over an image. A magnified view typically appears as an overlay or adjacent panel, dynamically revealing content under the cursor. Notable behavior: Hover; Mouse Movement; Default.

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.

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 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 pattern describes a zoom-in/out transition effect applied to browser windows, commonly found in desktop operating systems like Apple OS. It facilitates navigation between windows, tabs, or thumbnail views, often triggered by user interactions such as a pinch gesture. Notable behavior: Pinch gesture; Window selection; Zoomed in.

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

A sign-in pattern featuring user authentication via text/password input or QR code, enhanced with loading tips during the process to improve perceived performance and user engagement.

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.

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.

Desktop, Pathfinding, Accessibility, Web, Español, Navbar, Thumbnail, Toggle Field, Radio Button

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 visual pattern showcasing a brand gradient, typically found on web landing pages. It may incorporate animation and custom scrollbar effects, often used in contexts displaying photo content.

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.

A modal dialog pattern that overlays content, dims the background, and allows scrolling within the modal's content. Typically used for focused user interaction or displaying detailed information.

A web landing page pattern, exemplified by Google Data Studio, featuring a fixed navigation bar, device mockups, and photos to showcase product features on desktop.

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

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 user interface pattern where a theme switcher, typically for toggling between light and dark modes, is accessible within a side-drawer or side panel. This interaction involves opening the drawer, selecting a theme, and often includes visual transitions. Notable behavior: Click event; Drawer open/close; Side-drawer open.

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

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.

Layout sidebars that can be expanded or collapsed, often used for navigation or supplementary content, improving screen real estate management and pathfinding.

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, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

This pattern provides a multi-level sidebar navigation system, typically found on desktop and web applications, designed to help users efficiently navigate complex information architectures. It utilizes a side panel to display hypertext links, allowing users to drill down into multiple depths of content. The navigation often incorporates animations to enhance the user experience during expansion, collapse, or selection of menu items, facilitating clear pathfinding within the application. Notable behavior: Click to expand/collapse; Click to navigate; Expanded.

This pattern illustrates how a side panel dynamically adjusts its visibility and layout in response to changes in the viewport size. It often incorporates smooth animations to enhance the user experience during these responsive transitions. Notable behavior: Viewport Resizing; Panel Expansion/Collapse; Expanded Panel.

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

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

Allows users to toggle the visibility of a sidebar menu on desktop interfaces via a mouse click. This pattern typically involves a visual transition to expand or collapse the side panel, optimizing screen real estate and aiding in content pathfinding.

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.

Desktop, Accessibility, Web, English, Hypertext Links, Dropdown Menu, Empty State, User Selection, Avatar, Animation, YouTube, Google

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

This pattern describes how a double-click event on an element can open content in a new browser window, often used for pathfinding or accessing detailed views.

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

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.

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

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

This pattern guides users through setting their communication preferences as part of an onboarding or sign-up process. It typically involves interactive elements like text inputs and hypertext links, often presented across multiple paginated steps.

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.

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.

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

Describes methods for customizing list widgets, including the use of color markers and potential integration with a side panel for configuration options.

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.

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

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 enhances accessibility for color-blind users by employing distinct shapes in addition to color cues, ensuring critical information is always distinguishable. It may involve interactive elements like modals or tooltips for user configuration or explanatory details.

Desktop, Accessibility, Apple OS, macOS, English, Cards, Bento Grid, Long Click Event, Click Event, Close Overlay, Apple

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.

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.

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.

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.

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.

Facilitates user sign-in to Slack across multiple browsers, often involving a primary browser for authentication and a secondary browser for access. This pattern streamlines the onboarding and pathfinding experience for desktop users.

This pattern describes a two-pane sidebar designed for widget customization. It typically features a side panel that organizes configurable cards, often using tabs and a toolbar. Users can interact with widgets via drag & drop gestures and long-click events, with options to close overlays.

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

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

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

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

This pattern describes 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.

Applies a zoom-out visual transition to an element, typically an image or illustration, when a user hovers over it. This interaction provides immediate visual feedback, indicating interactivity and drawing attention to the element on desktop web interfaces.

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

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 describes an email page featuring animations and hypertext links, designed to enhance user awareness and support decision-making, primarily within a desktop environment.

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

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

Provides functionality for users to share content directly to various social media platforms, commonly implemented on web and desktop applications. Notable behavior: Sharing; Fixed on Scroll.

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

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.

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.

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.

A prominent banner positioned at the top of a web page, typically used for important announcements or calls to action, and often includes hypertext links.

Desktop, Onboarding, Web, Español, Text Input, Photo, Button, Price, Favorite Button, Hypertext Links, Image / Illustration, Dropdown Menu, MercadoLibre

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.

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

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

Provides a sophisticated interface for selecting colors, incorporating multiple input methods such as tabs, dropdowns, numeric fields, and range sliders. It supports drag-and-drop gestures for color manipulation and includes visual cues like color markers and progress states to enhance user experience.

This pattern describes how to divide a desktop or browser window into multiple, independently manageable sections, often allowing users to resize or rearrange them. It enhances multitasking by presenting related content side-by-side.

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.