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.

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.

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

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

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

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

Features an animated illustration alongside a navigation menu, often used in a carousel or paginated content structure for web and desktop applications.

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

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.

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.

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.

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.