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

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.

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

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 modal dialog with a blackout overlay, containing a form, and featuring transition animations for opening and closing.

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

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.

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.

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.

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 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 facilitates collecting user feedback on articles within a web application, ensuring an accessible experience for all users. Notable behavior: Submitting feedback; Rating content.

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

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.

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

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

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

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

A multi-step wizard guiding users through the initial setup of a chat, commonly found in desktop applications, focusing on onboarding and pathfinding, with considerations for accessibility.

A multi-step wizard guiding users through the process of creating a new Slack workspace, typically involving sequential forms for setup and configuration. Focuses on onboarding new users efficiently.

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

Displays a dynamic dropdown menu with search results or suggestions as a user types into an input field, facilitating quick information retrieval and navigation. Notable behavior: Typing; Text Input; Empty Input.

A UI component displaying a series of cards horizontally, allowing users to navigate through them and perform actions on individual cards. Optimized for web and desktop environments.

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.

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

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

A data visualization pattern that presents information horizontally across a timeline, enabling users to observe trends and events within specified time ranges. Notable behavior: Zooming; Panning; Loading.

Provides a unified interface for users to crop an image into multiple distinct zones or aspect ratios, optimizing it for various display contexts. This pattern is commonly used in content creation platforms for managing thumbnails and previews.

Displays multiple data graphs, each presenting metrics over independently selectable time ranges, commonly used in analytics dashboards for comparative data analysis.

Provides a user interface element for switching between light and dark visual themes, allowing users to customize their viewing experience and improve accessibility.

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.

This pattern illustrates the user interface for selecting a template or format within Apple Keynote. It guides users through decision-making by presenting various options, commonly found in desktop applications. Notable behavior: Selection; Browsing Options; Default.

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, Accessibility, Apple OS, macOS, English, Cards, Bento Grid, Long Click Event, Click Event, Close Overlay, Apple

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 provides a dedicated interface for users to manage and configure privacy settings related to their account, controlling data visibility, sharing preferences, and communication options.

Read Modes enable users to customize the visual presentation of content, such as color schemes, font sizes, or contrast levels, to improve readability and cater to individual accessibility needs. Notable behavior: Toggle Read Mode; Select Theme; Dark Mode Active.

Describes Apple Safari's Browser Reader Mode, an accessibility feature that simplifies web page content for improved readability on desktop devices.

This pattern outlines methods for implementing accessibility adjustments within web applications, enhancing usability and compliance for diverse user needs.

Implements a visual cue on images, typically a magnifying glass icon, that appears on hover. This interaction signals to the user that the image can be clicked to reveal a larger view or zoom functionality, enhancing detail inspection.

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.

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 outlines a multi-step wizard interface designed for user profile generation, commonly used during onboarding processes. It guides users through sequential steps to create or update their profile information, ensuring an accessible experience on web and desktop platforms. Notable behavior: Step-by-step navigation; Form submission; Active step.

Desktop, Accessibility, Web, English, Google, Google Sites

This pattern describes how users can customize the background appearance of a web browser, often including options for color, image, or theme selection. It frequently incorporates accessibility considerations to ensure readability and user comfort, particularly in desktop environments.

A component that displays a PDF document directly within the user interface, offering a clear option for users to download the file for offline access or archival purposes.

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 outlines design strategies and UI elements aimed at encouraging users to subscribe to a newsletter, typically involving clear calls-to-action and highlighting the value proposition. Notable behavior: Form input; Button click; Initial form state.

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

Desktop, Accessibility, Decision Making, Web, English

A modal dialog pattern enabling users to select their preferred language and region settings. It temporarily overlays the main content, requiring interaction before returning to the underlying application. Notable behavior: Open/Close; Selection; Open.

This pattern describes the user interface and interaction flow for managing site cookies within a PrestaShop e-commerce platform, focusing on user consent and accessibility for web and desktop environments.

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.

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.

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.

A keyboard-navigated menu enables users to efficiently browse and select menu items using keyboard inputs, enhancing accessibility and pathfinding in desktop and web applications. Notable behavior: Keyboard navigation; Arrow key navigation; Focused.

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.

This pattern enables users to highlight specific sections of text within content, similar to the functionality found in reading applications like Pocket. It facilitates visual annotation and easy recall of important information within articles or documents. Notable behavior: Text selection; Applying highlight; Normal text.