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.

Enables users to temporarily pause or 'snooze' receiving newsletters, specifically allowing selection of topics to snooze, providing granular control over email subscriptions.

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

Tablet, Awareness, Onboarding, Pathfinding, Apple OS, iPadOS, Español, Pagination, Infinite Scroll, Side Panel, Long Click Event, Tap Event

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.

This pattern triggers a video animation upon a user's touch or tap interaction. It is commonly applied in mobile and interactive web interfaces to provide dynamic visual feedback or reveal content, enhancing user engagement and interactivity. Notable behavior: Touch; Tap; Initial State.

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 floating navbar menu remains fixed at the top of the viewport, often revealing dropdown sub-menus on hover or focus events. It typically contains list items for navigation and can include banners or images.

This pattern describes a multi-step form that maintains a fixed position on the screen, typically presented within a side panel. It is designed to guide users through a sequence of inputs, often involving text fields, for processes such as collecting feedback, raising awareness, or expressing appreciation. This pattern is suitable for web and tablet interfaces, ensuring a consistent user experience during data entry. Notable behavior: Form Submission; Step Navigation; Active Step.

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 mobile navigation pattern featuring multiple tabs that allow users to switch between content sections. Tabs can be navigated by tapping or by swiping horizontally, similar to a carousel.

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.

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.

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

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.

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.

This pattern synchronizes the scrolling of two distinct content views, enabling users to compare or edit information side-by-side while maintaining relative positional alignment. It is commonly found in code editors and document comparison tools. Notable behavior: Scrolling; Synchronized Scrolling; Synchronized.

Onboarding tooltips guide users through a new application or feature, highlighting key UI elements and functionalities. They typically appear sequentially to introduce core concepts and actions, improving initial user engagement and understanding within a desktop environment. Notable behavior: Hover; Click (to advance/dismiss); Visible.

A mobile application hero section that utilizes a horizontal swiper component to display featured content or promotions, allowing users to navigate through key information with swipe gestures.

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 tooltip pattern used to provide contextual information or explanations for features, commonly activated on hover or focus, enhancing user understanding and decision-making in web and desktop applications.

Mobile, Pathfinding, Apple OS, English, Transition, Image / Illustration, Calendar, Tap Event, Modal, Fixed on Scroll

Displays a small, contextual information box (tooltip) when a user hovers over or focuses on an icon, providing a label or brief explanation of its function. Notable behavior: Hover; Focus; Hovered.

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.

A horizontal slider pattern for browsing styles, optimized for mobile with drag & drop gestures and potentially infinite scrolling, enhancing pathfinding and awareness.

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 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 pattern outlines the process for users to synchronize their profile avatar with a non-fungible token (NFT) they possess, typically involving a secure connection to a blockchain wallet and selection of the desired digital asset. Notable behavior: Connect Wallet; Select NFT; Default (no NFT avatar).

Allows users to provide binary feedback (positive/negative) on content or items, typically represented by up and down thumb icons.

Highlights new or updated menu items with a 'NEW' badge to draw user attention, improve awareness, and guide navigation within a menu or navigation bar.

A multi-step process where each step occupies the full screen, transitioning between steps with smooth animations. This pattern is often used in mobile onboarding or guided flows to provide a focused user experience. Notable behavior: Navigating between steps (e.g., next/back buttons, swipe gestures); Animated transitions between screens; Current step active.

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.

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.

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.

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.

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.

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.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

A mobile onboarding pattern featuring a full-screen modal with a dimmed background, presenting content in a swiper or carousel format. This pattern is often used for multi-step flows or image galleries, typically including a close button for dismissal. Notable behavior: Swipe; Close; Modal active.

This pattern displays a series of content cards arranged horizontally within a scrollable container, allowing users to browse or discover items by swiping or scrolling. It is particularly effective for pathfinding and content exploration on both mobile and web platforms, providing an intuitive way to navigate through a collection of related information or options. Notable behavior: Horizontal scrolling; Swiping (touch); Idle.

Mobile, Decision Making, Awareness, Pathfinding, Apple OS, English, Hypertext Links, Image / Illustration, Animation, Mailchimp

Mobile, Pathfinding, Apple OS, English, Drag & Drop Gesture, List Items, Color Marker, Image / Illustration, Transition, Apple, Apple Reminders

This pattern describes a modal dialog that is fixed to the bottom of the screen, often accompanied by a dimming overlay to create a 'blackout' effect that focuses user attention. It is particularly useful on mobile devices for guiding users through a specific path or raising awareness about critical information, functioning similarly to an alert dialog. The modal remains in a fixed position even if the underlying content scrolls. Notable behavior: Close Overlay; Dim Overlay; Bottom Fixed.

A mobile UI pattern where a selected element, such as an image or content block, animates with a zoom-in transition to occupy the full screen upon a tap or click event, often used for detailed viewing or immersive content expansion.

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 UI pattern featuring content panels that expand and collapse horizontally, optimizing screen space while allowing users to reveal or hide sections. This design facilitates sequential content exploration or option selection, often seen in applications like Instagram for presenting multiple stories or filters.

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.

A mobile UI pattern enabling users to select and preview different color themes or schemes within WhatsApp. This typically utilizes a bottom sheet component to present options and may incorporate animations for a dynamic preview experience.

A temporary, non-intrusive message displayed with an animated popup, commonly seen in Apple operating systems to provide user feedback or information.

Mobile, Pathfinding, Awareness, Apple OS, English, Carrousel, Animation, Image / Illustration, Bento Grid, Share on Social, Fixed on Scroll, GIPHY

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.

Tablet, Appreciation, Awareness, Feedback, Web, macOS, iPadOS, Español, Animation, Color Marker, Avatar, Table Sheet, Text Input, User Selection, Banner, Fixed on Scroll, Checkbox, Success State, Close Overlay, Alert Toast, Asana

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

Tablet, Pathfinding, Accessibility, Apple OS, iPadOS, iOS, Español, English, Side Panel, Transition, Tap Event, Active State, Apple, Apple Safari

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

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.

Enables users to transfer data, typically files, from their operating system's desktop directly into a web browser interface by dragging and dropping.

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

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 details the specific spacing conventions for image grids within Apple mobile operating systems, emphasizing considerations for 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 describes the interaction for toggling a secondary sidebar on a desktop interface using a mouse click. It typically involves a visual transition and an active state for the toggle control.

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.

This pattern describes the user experience of simultaneously selecting and cropping multiple images or screen captures within an interface, typically found in Apple operating systems.

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.

A modal dialog pattern that utilizes a blackout overlay to focus user attention. It supports multi-step processes and forms, incorporating animations for a guided and engaging user experience.

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

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.

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.

A mobile e-commerce homepage pattern designed for product discovery and navigation, featuring a prominent search input, interactive banners, product carousels, and list items. Key elements include fixed-on-scroll components and hypertext links to facilitate user pathfinding. Notable behavior: Search; Scrolling; Sticky Header.

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

This pattern presents a comparative display of different options, features, or account tiers to a user, typically after login or during an onboarding flow, to facilitate an informed decision or encourage an upgrade.

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 outlines the process for permanently deleting content within Youtube Studio, focusing on the critical steps and user confirmations required for an irreversible data removal action.

A layout pattern featuring two distinct panes for navigating and controlling audio content. Typically used on desktop web applications, one pane might list audio tracks or categories, while the other displays details or playback controls.

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.

Guides users through the process of selecting food items, customizing orders, and completing a purchase within a mobile food delivery application, emphasizing decision-making and accessibility. Notable behavior: Item Selection; Order Customization; Item Selected.

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 details the user interface and interaction flow for managing and modifying bookmarks within the Apple Safari browser, specifically addressing the mobile experience. Notable behavior: Editing; Saving; Edit mode.

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.

Displays a preview of a tab's content when the user hovers over the tab, enabling quick content assessment without requiring a full click or navigation.

This pattern details Apple's Two-Factor Authentication (2FA) process, a critical security measure that requires users to verify their identity using two distinct methods, typically involving a code sent to a trusted device after initial password entry. Notable behavior: User enters verification code; System sends verification code; Awaiting code input.

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.

A search bar that dynamically fades out of view when not in active use or during user scrolling, optimizing screen real estate and minimizing visual distractions. Notable behavior: Scrolling; Focus/Blur; Visible.

Enables users to bookmark or store content for future access, typically via an icon or button. This pattern supports personalized content management.

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.

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

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

A News Swiper displays a collection of news articles or items in a horizontally scrollable or swipeable carousel, enabling users to browse content efficiently.

A menu drop-down displays a list of options or actions, typically triggered by a button or link, to provide navigation or contextual functionality within an interface. Notable behavior: Click; Tap; Closed.

Displays a warning to meeting participants when a guest user joins or is present in the meeting, signaling a potential need for caution or specific actions.

A top secondary banner is a persistent UI element displayed at the top of a webpage, typically below the primary navigation. It is used to convey important, non-critical information, announcements, or promotions to users, often with an option to dismiss it. Notable behavior: Dismiss; Clickable links; Visible.

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.

Guides users through the process of selecting and confirming a new subscription plan, often involving comparison of features and pricing, and completing the upgrade transaction. Notable behavior: Plan selection; Button clicks; Initial plan display.

A dismissible banner displayed within a mobile application to promote specific content, features, or offers. It typically appears at the top or bottom of the screen and can be used for announcements or calls to action. Notable behavior: Dismissing the banner; Tapping/clicking the banner to navigate; Visible.

Enables users to subscribe to a magazine by selecting a subscription plan, providing payment information, and confirming their choice. This pattern often includes options for different durations or tiers.

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

Facilitates launching a native mobile application directly from a web browser using deep linking or universal links, ensuring a smooth transition for users between web content and installed apps. Notable behavior: Link click; Button tap; App not installed (fallback).

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.

Enables users to quickly navigate backward and forward within a video stream, typically through dedicated controls or touch gestures. This pattern facilitates precise temporal seeking during media playback.

A browser status banner is a UI element displayed on web pages, typically on desktop, to provide users with important awareness messages. It can indicate various states, such as empty data or errors, and may include hypertext links for further information or actions. Notable behavior: Hypertext Links; Empty State; Error State.

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.

Facilitates user location confirmation, typically involving map interaction or address selection, crucial for location-based services like food delivery. Notable behavior: Select Location; Confirm Location; Loading Location.

This pattern describes the interaction flow for initiating a download and confirming a user action, often involving a button tap, a progress state, and potentially a modal for user awareness or consent.

Provides an interface for users to review, evaluate, and take specific actions on music-related claims, such as copyright infringements or licensing disputes.

Desktop, COVID-19 Edition, Web, English, Medium

A Section Dropdown enables users to quickly navigate between distinct sections or views within an application or page, providing a compact solution for content organization and access. Notable behavior: Click to Open/Close; Item Selection; Closed.

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, persistent banner displayed at the top of an application or webpage, typically used for critical announcements, system-wide alerts, or important calls to action. It often remains visible until dismissed by the user or a specific condition is met. Notable behavior: Dismiss; Click call to action; Visible.

This pattern facilitates the initiation of a trip or journey within a mobile application, often presenting a map-based view of the starting point alongside a clear call-to-action to begin. Notable behavior: Tap to start trip; View trip details; Initial trip start view.

This pattern displays a user's weekly schedule, often integrated within a mapping application like Google Maps, to visualize availability or planned activities over a seven-day period. It allows users to quickly review and manage their commitments in a time-based format.

A UI pattern that informs users when system notifications are disabled for the application, typically prompting them to enable notifications for a better user experience. Notable behavior: Dismissal (optional); Navigation to system settings (implied); Notifications disabled.

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 presents contextual instructions or tips to the user upon hovering over a specific UI element. It provides on-demand guidance, often utilized for onboarding or explaining complex features, without permanently cluttering the interface.

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

Mobile, Decision Making, Apple OS, Español

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

Mobile, Awareness, Apple OS, English, Apple

A mobile UI pattern enabling users to navigate between different applications or screens through horizontal swipe gestures, commonly found on Apple OS devices.

A UI pattern enabling users to select a specific icon from a predefined set to represent a file, folder, or other item, often seen in mobile operating systems for customization and organization. Notable behavior: Tap to select; Click to select; Default.

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.

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.

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

A visual component designed to display a sequence of illustrations, often occupying a half-page area. It's commonly used for onboarding flows or feature showcases, allowing users to navigate through content. Notable behavior: Slide Navigation; Swipe Gesture; Active Slide.

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.

Enables users to categorize and filter contacts into distinct groups based on shared attributes or behaviors, facilitating targeted communication and management.

Displays a prominent warning message directly on a product's homepage to alert users about critical information or issues related to the product or service.

Displays advertisements that occupy the background space of a webpage or application, often behind the main content, providing an immersive advertising experience. Notable behavior: Display; Click; Visible.

A prominent UI component designed to display important, often time-sensitive information or promotional content, typically positioned at the top or within the main content area of a news page.

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

Provides a mechanism for users to input descriptive alternative text for images, enhancing accessibility for screen readers and improving SEO.

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

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

Mobile, Onboarding, Apple OS, Español, Twitter

Mobile, Awareness, Apple OS, English, Apple

Allows users to customize their navigation experience within an application or system, often found in settings or preferences sections. This pattern enhances usability and accessibility by adapting navigation methods to individual needs and device capabilities.

A pattern for prominently displaying key features, benefits, or selling points of a product to quickly inform users and aid decision-making.

A notification pattern informing users about an upcoming or expiring subscription. It prompts action like renewal or cancellation, aiming to prevent service interruption and encourage continued engagement.

Mobile, Pathfinding, Decision Making, Apple OS, English, Linkedin

Presents a promotional offer for a free trial of an audiobook service, designed to encourage user sign-up or subscription.

This pattern describes an in-app Net Promoter Score (NPS) survey, designed to collect user feedback directly within a desktop application. It typically appears as a modal dialog, prompting users to rate their experience and optionally provide comments. Notable behavior: Rating Selection; Text Input; Initial State.

This pattern describes a mobile notification used to inform users about the status of an order, prompting them to review it. It aims to provide timely awareness and solicit feedback or further action regarding their purchase. Notable behavior: Tap to View Details; Dismiss Notification; Pending Review.

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

This pattern outlines the user interface and flow for locating and accessing an existing Slack workspace. It typically involves inputting a workspace URL or email during an onboarding or login process, facilitating user re-engagement or initial access. Notable behavior: Typing; Clicking; Initial State.

This pattern describes how notifications are presented to users based on their current geolocation displayed on a map interface. It often involves dynamic updates and interactive elements like bottom sheets or dropdowns for user interaction and information display. Notable behavior: Receiving Notifications; User Selection; Live State.

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, Pathfinding, Apple OS, Español

This pattern describes an automatically triggered popover that guides users through a sequence of steps, commonly used for onboarding new features or providing interactive tours on desktop and web interfaces.

This pattern describes a feedback mechanism, likely within a web or desktop application, where users can express their feelings or emotional responses, similar to a 'makes me feel' feature found in Mailchimp.

Displays a placeholder UI element while an image is being fetched, improving perceived performance and user experience by indicating content is on its way.

A design pattern that employs specific UI elements and messaging to encourage users to enable or allow advertisements within an application or website.

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

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.

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.

A welcome screen pattern designed to introduce users to an application or service, featuring a prominent background visual to enhance aesthetic appeal and brand identity. Notable behavior: Navigation; Dismissal; Initial State.

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 describes a mechanism where users are prompted to provide their email address as a prerequisite to access and play video content. It serves as a common strategy for lead generation, user data collection, or content access control, ensuring that only registered or identified users can view premium or restricted videos.

A system enabling users to provide feedback on articles through a natural and integrated rating mechanism, typically found on web and desktop platforms.

The "Out of downloads" pattern describes the user interface and experience presented when a user has exhausted their allocated download quota. This pattern aims to clearly communicate the current status, explain why the limit has been reached, and provide actionable options for the user, such as upgrading their plan, waiting for a reset, or contacting support. It guides the user through the decision-making process to resolve the limitation. Notable behavior: Clicking 'Upgrade Plan' button; Clicking 'Learn More' link; Quota Exceeded.

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.

A UI component allowing users to explicitly confirm agreement to terms, conditions, or actions before proceeding. It is commonly used in onboarding flows or for obtaining consent.

This pattern presents key features to users during the sign-up process, aiming to highlight value and encourage completion of registration. Notable behavior: Displaying Information; Scrolling; Initial Display.

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.

A contextual tooltip pattern used during user onboarding to highlight a specific action or UI element, guiding the user towards initial engagement with the application.

A persistent or dismissible banner displayed at the top of a mobile or web interface, prompting users to open a related native application or download it from an app store. It facilitates decision-making by offering a direct pathway to enhanced app experiences. Notable behavior: Tap to open app; Tap to download app; Visible.

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

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

This pattern describes how Apple Safari presents search options when the search input gains focus, facilitating pathfinding on desktop Apple OS.

A dropdown menu integrated into a top navigation bar, providing access to navigation links or user-specific actions. It appears upon user interaction with a trigger element in the top bar. Notable behavior: Click; Hover; Closed.

A context-sensitive menu that appears upon a long-press gesture, typically on touch-enabled mobile devices, providing relevant actions for the selected element.

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.

A multi-step form pattern designed to guide users through a sequential input process, where the form content maintains a fixed position on the screen.

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

Mobile, Pathfinding, Awareness, Apple OS, English

This pattern describes how Apple iOS implements system-wide dark and light color themes, allowing users to switch between them for enhanced visual comfort and accessibility across mobile applications.

Desktop, Accessibility, Decision Making, Web, English

This pattern describes the user experience for Apple's two-factor authentication, typically involving a primary password and a secondary verification code sent to a trusted device or phone number to enhance account security.

A UI pattern for filtering content feeds using a horizontal set of interactive tabs. Each tab represents a different filter category, allowing users to quickly switch between various views of the feed. Notable behavior: Tab selection; Filter application; Active tab.

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 a form interface that allows users to input information using natural language, often seen in onboarding flows on web and desktop platforms. Notable behavior: Natural language input; Form submission; Input validation.

This pattern describes various design techniques, often manipulative or deceptive, used to persuade users into subscribing to a service or product. It focuses on influencing user decision-making within web and desktop interfaces. Notable behavior: Form submission; Button clicks; Initial offer state.

A visual layout technique that renders elements within a grid, applying a vertical perspective effect to create a sense of depth and guide user attention.

This pattern describes a tab menu navigation system, commonly found in mobile applications like Uber EATS, designed to facilitate pathfinding and primary navigation on Apple OS devices. Notable behavior: Tap; Navigation; Active Tab.

A Likert scale feedback mechanism integrated directly into a chat interface, allowing users to rate their experience or provide input within the conversation flow.

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.

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 showcases product discounts, often highlighting original versus sale prices, to assist users in making informed purchasing decisions. It is frequently implemented in mobile e-commerce interfaces. Notable behavior: Viewing Discount Details; Active Discount; Percentage Discount.

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

This pattern presents site terms or a privacy policy directly to the user, typically as a blocking overlay, requiring explicit consent or a decision before proceeding with site interaction. It ensures users acknowledge and agree to terms. Notable behavior: User consent; Acceptance of terms; Blocking overlay active.

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.

A secondary information or action panel that appears from the bottom of the screen, typically overlaying existing content to provide additional details, options, or confirmations without navigating away. Notable behavior: Open/Close; Dismiss; Visible.

This pattern details the search experience within a mobile e-commerce application, specifically on Apple OS. It leverages UI components such as dropdown menus, checkboxes, accordions, and hypertext links to facilitate product discovery and filtering, with elements that remain fixed during scrolling for persistent access.

This pattern illustrates the user journey for creating a new Slack workspace and subsequently customizing its various settings. It encompasses the onboarding flow, guiding users through initial setup and personalization of their collaborative environment. Notable behavior: Form Submission; Input Fields; Initial Setup.

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.

Desktop, Mobile, Pathfinding, Web, Apple OS, English, Navbar, Fixed on Scroll, Banner, Avatar, Medium

This pattern describes an onboarding experience for a fitness application on mobile devices, specifically tailored for Apple OS. It guides users through initial setup and preferences to get started with their fitness journey.

This pattern guides users through selecting or defining their workspace type, typically encountered during an initial onboarding flow on web or desktop platforms.

A Context Banner Card is a prominent UI component designed to display important, context-specific information to the user. It typically appears at the top of a page or section, drawing attention to alerts, announcements, or relevant guidance.

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.

This pattern guides users to enable or configure notifications, often presenting a clear value proposition for doing so. It aims to improve user engagement by ensuring timely delivery of relevant information.

This pattern outlines the guided process for users to create their initial mailing campaign, commonly found in onboarding sequences of email marketing platforms. It focuses on sequential steps to configure campaign details, recipients, and content.

A contextual popup that appears within the user's current workflow to offer a service upgrade, prompting a decision before the user can proceed or dismiss the offer.

A warning message displayed directly on a map interface to alert users about pandemic-related information or restrictions relevant to the geographic area being viewed, ensuring critical public health data is immediately visible within its spatial context.

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.

This pattern describes a navigation technique, commonly found in the Apple Calendar application, that uses a zoom transition to move between different hierarchical views (e.g., day, week, month, year). It enhances user awareness of their location within the application's structure.

A modal dialog or popup that prevents users from navigating away or closing the current context without explicitly confirming an action or acknowledging a critical message, often used to prevent data loss or ensure a decision is made. Notable behavior: User Confirmation; Dismissal; Open.

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.

Desktop, COVID-19 Edition, Web, English, Medium

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.

This pattern details the celebratory feedback mechanism employed by Google Maps to acknowledge the successful display of search results, reinforcing user action and enhancing task completion perception.

Mobile, Pathfinding, Awareness, Apple OS, Español, Progress State, Map, Live State, Image / Illustration, Bottom Sheet, Avatar, Uber EATS

This pattern visualizes sleep data, typically showing different sleep stages over time. It allows users to understand their sleep patterns and quality through an interactive graph.

This pattern outlines the user experience for posting graphics online, focusing on the initial onboarding flow for new users on a web-based desktop platform, similar to how Dribbble handles content submission. It encompasses the steps and interactions required to upload, describe, and publish visual content, guiding users through their first contribution. Notable behavior: File Upload; Form Submission; Uploading (progress).

This pattern automatically displays a tooltip, often accompanied by a dimmed background, to guide users or highlight new features. It's commonly used in onboarding flows to draw attention to specific UI elements and provide contextual information.

This pattern mandates that users scroll through a specific content area, such as legal terms or a privacy policy, before a confirmation action becomes available. It ensures explicit engagement with critical information, often used for consent or agreement.

This pattern describes the use of visual and interactive flourishes, often referred to as 'gimmicks,' specifically designed to enhance the perceived value and desirability of premium features or offerings. These elements aim to influence user decision-making by making a product or service appear more exclusive, high-quality, or essential, thereby encouraging engagement or conversion to premium tiers.

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.

Facilitates user progression through a defined sequence of steps, commonly employed in complex forms, wizards, or onboarding flows to visualize progress and enable step-by-step navigation.

Enables users to remove their past search queries, providing control over privacy and decluttering their search interface.

Desktop, Decision Making, Web, English

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.

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.

Provides an interface for users to view, manage, and track details of their journeys. This pattern often includes route visualization, real-time progress updates, and historical trip data, facilitating navigation and record-keeping. Notable behavior: Start/Stop Tracking; View Details; Active Tracking.

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

Provides interactive, step-by-step guidance for pedestrian navigation, typically displaying a map with a highlighted route and turn-by-turn instructions to assist users in reaching a destination on foot.

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.

Desktop, Onboarding, Consent, Web, Español, Twitter

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.

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

Describes a system design where users can access or manage two distinct accounts, often for different roles or contexts, from a single entry point or within the same application session. This pattern facilitates scenarios requiring users to operate with multiple identities or profiles. Notable behavior: Account Selection; Login; Account Selection Prompt.

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.

A hamburger menu is a common UI pattern for condensing navigation links into a single icon, typically used to save space, especially on smaller screens or when a large number of navigation items are present. When activated, it reveals a full menu, often as a sidebar or overlay. Notable behavior: Click; Toggle; Collapsed.

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.

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.

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.