Users can browse a curated selection of offers by clicking pagination arrows, enabling efficient discovery and decision-making.

This pattern uses an animated, interactive background to engage users and visually highlight featured content, enhancing initial appreciation and pathfinding.

Users can personalize their toolbar by toggling specific buttons on or off, enhancing workflow efficiency and tailoring the interface to their needs.

Users can quickly assess system health over time via color-coded hourly indicators, revealing operational status and outage events at a glance.

Desktop, Feedback, Pathfinding, Onboarding, Web, English, Offers always-available, AI-powered guidance and support through a fixed bottom-right chat, Chat, Side Panel, Accordion, Fixed on Scroll, Notification Badge, Progress State, Live State, Transition, Scrollbar, Text Input

Desktop, Landing Page, Web, 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., Navbar, Footer, Hypertext Links, Animation, Carrousel, Fixed on Scroll, Image / Illustration, Thumbnail, Button, Transition, Video, Anchor Scroll, Scrollbar

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, This pattern provides a full-height, animated sidebar menu that slides in from the left, offering clear navigation options while dimming the main content for focused interaction., Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

Desktop, Awareness, Feedback, Onboarding, Web, English, Users can easily upload files or paste URLs, receiving clear visual feedback and background loading indicators for a seamless experience., User Selection, Drag & Drop Gesture, Loader, Animation, Image / Illustration, Empty State, Progress State, Button, File OS, Click Event

This transition visually guides the user as a window minimizes, smoothly shrinking and moving to its new location in the dock, enhancing spatial awareness and system feedback.

Desktop, Awareness, This pattern provides timely, relevant news and updates within the application, enhancing user awareness and engagement without interrupting core workflows., Notification Badge, Tooltip, Infinite Scroll, Hypertext Links

This pattern uses a subtle 3D shadow animation on hover to provide clear visual feedback, enhancing user awareness and guiding interaction.

This pattern confirms a successful subscription update, offering a clear path to re-enable emails if the user changes their mind.

This modal presents users with clear, card-based options to initiate a task, guiding them efficiently through initial decision-making.

Tablet, Awareness, Onboarding, Pathfinding, Apple OS, iPadOS, Español, This pattern allows users to quickly navigate long documents by tapping and holding the scrollbar to reveal a page outline for rapid section jumping., Pagination, Infinite Scroll, Side Panel, Long Click Event, Tap Event

Desktop, Decision Making, Web, English, Users can easily select multiple communication preferences with visually distinct, colored checkboxes that provide immediate feedback on their choices., Image / Illustration, Checkbox

Desktop, Landing Page, Web, Español, This pattern uses a dynamic carousel of images and text to showcase product features, engaging users with interactive content and clear calls to action., Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

Desktop, Landing Page, Decision Making, Web, English, This landing page effectively guides users to download icon management software by showcasing its intuitive interface and customization features., Navbar, Footer, Hypertext Links

Desktop, Accessibility, Decision Making, Web, English, Users can directly edit text content in place, providing a seamless and efficient way to update information without navigating away., Text Input, Hypertext Links, Modal

Users can efficiently organize multiple items by dragging and dropping them into a target category, enhancing content management and task completion.

This pattern uses skeleton screens to progressively load content, providing immediate visual feedback and reducing perceived wait times for users.

This pattern uses a dynamic video animation that plays upon user touch, providing engaging visual feedback and enhancing interaction.

This pattern uses subtle, interactive background animations to engage users and provide dynamic visual feedback as they scroll or interact with the page.

Desktop, Pathfinding, Accessibility, Web, Español, Dropdown filters enable users to quickly refine content views by selecting specific criteria from a compact, accessible menu., Filters

This pattern uses an animated blackout modal to focus user attention on critical information or actions, ensuring clear decision-making.

Desktop, Pathfinding, Awareness, Web, English, This pattern allows users to quickly navigate to the top of a long list by clicking a fixed "Back to Top" button that appears on scroll., Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll

Desktop, Pathfinding, Web, Español, Users can toggle a persistent sidebar menu to reveal or hide navigation options, optimizing screen space while maintaining easy access to key features., Navbar, Side Panel, Transition, Hover Event, Click Event, Avatar, List Items, Tabs

Desktop, Awareness, Pathfinding, Onboarding, Web, Español, This progress bar visually informs users about the loading status of their chats, providing a clear percentage to manage expectations during data synchronization., Loader, Hypertext Links

Desktop, Pathfinding, Awareness, Accessibility, Onboarding, Web, English, This menu provides an interactive outline of page content, allowing users to quickly navigate to specific sections and understand the page structure at a glance., Pagination, Anchor Scroll

Desktop, Decision Making, Pathfinding, Consent, Web, Español, This pattern allows users to seamlessly transition from a clear call-to-action button to an input field, streamlining the path to engagement., Text Input, Hypertext Links

Tablet, Decision Making, Pathfinding, Web, English, Floating navbar menus provide persistent navigation options, allowing users to quickly access key sections and features without losing their current context., Dropdown Menu, List Items, Hover Event, Focus Event, Image / Illustration, Banner, Fixed on Scroll, Navbar

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.

Desktop, Pathfinding, Awareness, Decision Making, Web, English, This topbar menu uses a dropdown to reveal categorized links, enabling users to quickly navigate to relevant sections and understand the product's diverse offerings., Navbar, Dropdown Menu

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

Desktop, Pathfinding, Awareness, Decision Making, Web, Español, Users can dynamically filter population data by country and year, enabling quick comparisons and insights into demographic trends., Graph, Filters, Dropdown Menu, Transition

A modal with a blackout overlay and animated transitions provides a focused input form, ensuring users can quickly add friends without distraction.

This topbar menu dynamically adjusts its layout and content, offering users clear navigation and relevant options as they explore different sections of the site.

Desktop, Accessibility, Awareness, Web, English, Users can toggle high contrast mode to improve readability and accessibility, enhancing the visual experience for those with low vision., Hypertext Links, Navbar

Desktop, Accessibility, Onboarding, Pathfinding, Web, Español, Users can switch between list and grid views to optimize content display for their preference, enhancing readability and navigation., Tooltip, Hypertext Links

Desktop, Awareness, Accessibility, Feedback, Web, English, This floating progress bar provides persistent, non-intrusive feedback on background tasks, allowing users to monitor progress while continuing other work., Side Panel, Accordion

Desktop, Pathfinding, Awareness, Decision Making, Web, English, This modal guides users through multi-step processes with clear instructions and animated transitions, enhancing awareness without obscuring the underlying content., Modal, Animation, Image / Illustration

Users can effortlessly navigate distinct content categories by tapping tabs or swiping horizontally, ensuring quick access to desired information.

Desktop, Awareness, Pathfinding, Web, Español, This horizontal item slider allows users to effortlessly browse a curated selection of items, enhancing discoverability and engagement with minimal scrolling., Carrousel, Modal, Pagination, Image / Illustration

Desktop, Consent, Decision Making, Awareness, Web, Español, Users input their email for login, then receive and enter a validation code to securely access their account., Text Input, Hypertext Links, Pagination

Desktop, Accessibility, Pathfinding, Web, English, Users can instantly toggle between light and dark display modes, enhancing visual comfort and accessibility based on their preference or environment., Checkbox, Tabs

Desktop, Accessibility, Pathfinding, Web, English, This pattern enhances clarity by dynamically magnifying specific image regions, guiding users to key details and improving comprehension of visual instructions., Animation

Desktop, Accessibility, Pathfinding, Web, English, Users can dynamically adjust the number of columns and spacing in an image grid using intuitive sliders, enhancing visual organization and content exploration., Animation, Drag & Drop Gesture, Range Field

Desktop, Decision Making, Awareness, Pathfinding, Web, English, This pattern guides users through initial setup by simulating product features, allowing them to visualize outcomes and make informed decisions before committing., Text Input, Pagination, Animation, Hypertext Links

Desktop, Pathfinding, Accessibility, Awareness, Web, English, This sidebar menu allows users to expand and collapse sections, efficiently managing screen space while providing access to numerous navigation options., Accordion, Navbar

Desktop, Pathfinding, Accessibility, Awareness, Web, Español, This vertical accordion allows users to efficiently reveal or hide detailed content sections, optimizing screen space and improving navigation for FAQs or contact information., Accordion, Hypertext Links

Desktop, Pathfinding, Awareness, Apple OS, English, 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., Tooltip, Text Input, Hypertext Links

Desktop, Accessibility, Pathfinding, Awareness, Web, Español, Users can drag a modal dialog to a fixed side panel, allowing them to view and interact with underlying content without losing context., Drag & Drop Gesture, Modal, Side Panel, Alert Dialog

Desktop, Decision Making, Awareness, Web, Español, This pattern uses a subtle, pulsing animation on the primary call to action to draw user attention and encourage progression through the flow.

Users can effortlessly create a new file on their desktop by dragging and dropping an image directly from a web browser.

Desktop, Pathfinding, Awareness, Web, Español, This pattern darkens the background and highlights the search bar, guiding users to focus on search input and results without distraction.

Desktop, Accessibility, Feedback, Web, English, Users can quickly rate an article's usefulness on a 1-10 scale, providing immediate feedback to improve content quality and relevance.

Desktop, Pathfinding, Awareness, Apple OS, Español, 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., Navbar, Dropdown Menu, Text Input, Fixed on Scroll

This transition allows users to fluidly zoom between a grid of browser tab thumbnails and a full-screen view, enhancing navigation and context switching.

Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English, 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.

Users can intuitively assign color-coded tags to designated slots via drag-and-drop, enhancing organization and quick visual identification of items.

Desktop, Decision Making, Pathfinding, Apple OS, English, This pattern allows users to efficiently compare and resolve differences between two versions of a file by synchronizing their scroll positions.

Desktop, Onboarding, Apple OS, English, 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.

This hero swiper provides a quick overview of daily calorie metrics, allowing users to easily track their budget, consumption, exercise, and remaining calories.

Desktop, Pathfinding, Onboarding, Apple OS, English, This sign-in pattern offers both traditional email/password input and a convenient QR code scan, enhancing user flexibility and reducing login friction with engaging loading tips., QR, Text Input, Password Input, Button

This pattern uses a modal blackout to confirm a user's intent to close an account, ensuring they understand the irreversible consequences before proceeding.

Desktop, Decision Making, Onboarding, Pathfinding, Web, English, 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.

Users can tap a thumbnail to smoothly zoom into a full-screen view of the image, providing an immersive and focused viewing experience.

Mobile, Decision Making, Awareness, Apple OS, English, This tooltip provides contextual guidance for an icon, explaining its function and how to use it, enhancing user understanding and feature adoption.

Desktop, Awareness, Accessibility, Apple OS, English, This pattern uses a persistent banner to remind users to verify their PIN, enhancing security and recall without interrupting core app functionality., Text Input, Modal, Banner, Hypertext Links

Desktop, Landing Page, Web, English, 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., Scrollbar, Navbar, Fixed on Scroll, Button, Animation, Video

Desktop, Pathfinding, Accessibility, Web, Español, Users can effortlessly switch between grid and list views of content, enhancing readability and personalizing their browsing experience., Navbar, Thumbnail, Toggle Field, Radio Button

Desktop, Pathfinding, Awareness, Web, English, Users can dynamically adjust content aspect ratios via a clickable menu, providing flexible viewing experiences and enhancing content adaptability., Animation, Pagination, Carrousel

Desktop, Decision Making, Awareness, Web, Español, This pattern uses a modal blackout to confirm a delete action, ensuring users are fully aware and can prevent accidental data loss., Modal, Text Input, Button

Desktop, Landing Page, Pathfinding, https://about.instagram.com/brand/gradient, Web, English, This pattern uses a dynamic, animated brand gradient to visually engage users and highlight key messages as they scroll, enhancing brand recognition and content flow., Animation, Scrollbar, Photo

Desktop, Pathfinding, Awareness, Web, Español, Users can effortlessly browse featured promotions and products through a dynamic hero slider, enhancing awareness and guiding their pathfinding., Carrousel, Drag & Drop Gesture, Transition, Photo

This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.

Desktop, Landing Page, Web, Español, A fixed navigation bar ensures key actions like "Comenzar gratis" remain accessible as users scroll, improving discoverability and conversion., Navbar, Fixed on Scroll, Photo, Device Mockup, Google

This landing page guides users to download the application for their specific operating system, simplifying the installation process.

Mobile, Accessibility, Pathfinding, Awareness, Apple OS, English, Users can effortlessly browse and select various text styles and colors via a horizontal slider, enhancing creative expression and visual customization., Drag & Drop Gesture, Infinite Scroll, Instagram

Desktop, Awareness, Pathfinding, Web, English, This spinner provides visual feedback during module loading, reassuring users that the system is actively processing and preventing perceived delays., Loader, Twitter

Hovering over a truncated title reveals its full text in a tooltip, providing complete context without cluttering the interface.

Users can intuitively reorder list items by dragging and dropping them, providing a direct and efficient way to customize their view.

Desktop, Pathfinding, Decision Making, Awareness, Web, Español, This pattern offers users clear choices to join a meeting, enabling them to download the app, continue in the browser, or open the existing application for optimal experience., Button, Microsoft, Microsoft Teams

A dynamic background animation on page load engages users immediately, providing visual interest and a sense of activity while content renders.

Desktop, Accessibility, Pathfinding, Web, Español, Users can quickly toggle between light and dark themes via a side-drawer, enhancing visual comfort and accessibility without leaving the current page., Side Panel, Transition, Image / Illustration, Click Event, Google

Desktop, Awareness, Pathfinding, Apple OS, Español, This pattern displays real-time audio levels as a dynamic graph, providing immediate visual feedback on sound input during a call., Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp

Desktop, Feedback, Awareness, Web, English, 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., Notion

Mobile, Pathfinding, Apple OS, English, Users can easily update their profile avatar by selecting an NFT from their connected wallet, visually confirming the change instantly., Twitter

Desktop, Feedback, Web, Español, Users can quickly express approval or disapproval for content, providing immediate feedback that helps prioritize or refine items., Trello

Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, A "NEW" badge next to a menu item instantly highlights recently added content or features, guiding users to discover and engage with fresh updates., Navbar, Notification Badge, Hypertext Links, Notion

Users navigate a multi-step onboarding flow with smooth, full-screen animated transitions, enhancing engagement and clearly indicating progress through each stage.

Desktop, Awareness, Pathfinding, Accessibility, Web, English, Español, This collapsible sidebar menu allows users to expand or hide navigation options, optimizing screen real estate while maintaining easy access to key sections., Side Panel, Transition, Click Event, Navbar, Google, Gmail

Desktop, Awareness, Pathfinding, Web, English, This vertical icon menu provides quick access to key sections, revealing descriptive tooltips on hover to aid navigation and improve user pathfinding., Tooltip, Side Panel, Navbar, Hover Event, Image / Illustration, Notification Badge, Dashboard, Mailchimp

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Users can click a button to reveal a contextual menu of related actions, streamlining decision-making and guiding them to their desired outcome., Google, Google Meet

Desktop, Awareness, Decision Making, Web, English, This pattern reveals a floating popover on click, providing immediate, context-specific information or actions without navigating away from the current view., Tooltip, Alert Dialog, Fixed on Scroll, Click Event, Unsplash

Desktop, Awareness, Accessibility, Web, English, Español, Users can quickly switch the site's display language via a prominent top bar link, enhancing accessibility and personalizing their experience., Vimeo

This pattern uses a fixed background image that animates and shifts as the user scrolls, creating a dynamic and engaging visual experience.

Desktop, Pathfinding, Awareness, Web, English, This pattern provides a persistent, scrollable sidebar for navigation, ensuring users can always access key sections and maintain context within complex applications., Cloudflare

Desktop, Pathfinding, Awareness, Landing Page, Web, Español, This pattern provides users with critical, localized emergency information and actionable advice through an interactive map, enhancing awareness and guiding safe behavior., Google

Desktop, Awareness, Pathfinding, Web, English, Displays a tooltip above a link when the user hovers over it, providing additional context or information without navigating away from the current page., Crunchbase

This wizard guides users through initial setup choices like appearance and chat mode, ensuring a personalized experience from the start.

This pattern uses subtle background animations that react to mouse movement, creating an engaging and dynamic visual experience for users.

Desktop, Accessibility, Onboarding, Apple OS, Español, This wizard guides users through creating a new workspace, ensuring a smooth onboarding experience by collecting essential information step-by-step., Slack

Users can collapse and expand layout sidebars to optimize screen space, enhancing focus on primary content while maintaining quick access to navigation.

Desktop, Pathfinding, Accessibility, Web, English, This pattern allows users to quickly find and select desired options from a dynamic, filtered list that appears as they type into an input field., Google, Google Analytics

Desktop, Pathfinding, Accessibility, Web, Español, This pattern allows users to efficiently browse a curated collection of content cards, with clear navigation and editing options for personalized interaction., Linkedin

Users can effortlessly upload files by dragging them from their desktop directly into a designated drop zone within the application.

Desktop, Awareness, Decision Making, Web, Español, A popover on hover reveals contextual information or actions in a temporary overlay, enhancing user awareness without disrupting the main workflow., Tooltip, Linkedin

This pattern uses an interactive background animation to engage users and provide visual feedback as they navigate or interact with elements on the page.

Desktop, Pathfinding, Accessibility, Web, English, 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., YouTube, Google

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

This pattern guides users through an onboarding flow with a fullscreen modal and swipable content, ensuring focused attention on key information.

Mobile, Pathfinding, Web, English, Users can swipe through a horizontal carousel of related content cards, efficiently discovering more options without leaving the current view., Google

Users confirm a critical action by holding a button, preventing accidental taps and ensuring deliberate engagement with the system.

Users can intuitively reorder list items on touch devices by dragging and dropping them, providing flexible organization and personalized views.

This pattern presents critical information or actions in a bottom-fixed modal, ensuring user focus by dimming the background content.

Mobile, Pathfinding, Apple OS, English, Tapping the album art smoothly zooms it to full screen, providing an immersive view of the artwork and enhancing the visual experience., Transition, Animation, Progress State, Sound Bar, Image / Illustration, Lyrics, Tap Event, Spotify

Desktop, Pathfinding, Web, English, This multi-depth sidebar navigation allows users to quickly traverse complex information hierarchies, improving discoverability and reducing cognitive load., Side Panel, Hypertext Links, Animation, Squarespace

Desktop, Accessibility, Pathfinding, Web, English, Users can dynamically adjust the content preview area, allowing them to visualize their website across various screen sizes for optimal responsiveness and design fidelity., Side Panel, Hypertext Links, Animation, Squarespace

This modal blackout pattern guides users through multi-step forms, ensuring focused input and clear progression for critical decisions.

Desktop, Decision Making, Awareness, Accessibility, Web, English, Users can precisely trim video segments using a draggable timeline with visual thumbnails, enabling efficient content selection and faster processing., Animation, User Selection, Drag & Drop Gesture, Timeline, Image / Illustration, Button, Steps, GIPHY

Users can toggle the sidebar menu to hide or reveal navigation, optimizing screen space for content focus or quick pathfinding.

Desktop, Accessibility, Pathfinding, Awareness, Web, English, Users can efficiently select multiple table rows by clicking checkboxes, enabling bulk actions and streamlining content management workflows., User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

Desktop, Pathfinding, Decision Making, Web, English, This horizontal accordion allows users to explore distinct content categories by expanding a selected panel, revealing detailed information and relevant calls to action., Instagram

This pattern provides immediate visual feedback during page loads, progressively revealing content to reassure users that the system is actively processing their request.

Mobile, Accessibility, Pathfinding, Apple OS, Español, Users can quickly preview and select new chat background colors from a categorized list, enhancing personalization and visual comfort., Animation, Pagination, Hypertext Links, Bottom Sheet, WhatsApp

Mobile, Awareness, Appreciation, Apple OS, Español, This pattern provides immediate, non-intrusive feedback to users, confirming successful actions like subscriptions with a brief, dismissible popup., Apple Podcasts, Apple

Mobile, Pathfinding, Awareness, Apple OS, English, Users can effortlessly swipe horizontally through a carousel of content, providing an intuitive way to explore related items or navigate a media gallery., Carrousel, Animation, Image / Illustration, Bento Grid, Share on Social, Fixed on Scroll, GIPHY

This pattern uses a subtle background animation on hover to provide visual feedback, guiding users to interactive elements and enhancing discoverability.

Tablet, Appreciation, Awareness, Feedback, Web, macOS, iPadOS, Español, This pattern uses a celebratory animation to provide immediate, delightful feedback to users upon completing a task, enhancing engagement and motivation., Animation, Color Marker, Avatar, Table Sheet, Text Input, User Selection, Banner, Fixed on Scroll, Checkbox, Success State, Close Overlay, Alert Toast, Asana

This multi-step modal guides users through key features with clear explanations and visual cues, ensuring a smooth onboarding experience.

Desktop, Awareness, Pathfinding, Web, Español, This pattern guides users through a multi-step onboarding or feature tour with a dismissible, paginated floating dialog, enhancing discoverability and adoption., Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress

Users can tap a persistent icon to reveal or hide a secondary sidebar, optimizing screen real estate while maintaining quick access to additional content.

Desktop, Awareness, Web, Español, A top banner informs users about new design changes, offering a clear link to "Obtener más información" for those seeking further details., Hypertext Links, Banner, Google, Google Meet

Desktop, Accessibility, Web, English, Users can quickly check and manage their notifications by clicking the bell icon, revealing a dropdown with recent alerts and an option to clear them., Hypertext Links, Dropdown Menu, Empty State, User Selection, Avatar, Animation, YouTube, Google

Desktop, Pathfinding, Accessibility, Web, English, Users can easily compare data trends over customizable time ranges within a horizontal graph, enabling quick insights into performance changes., Google, Google Analytics

Desktop, Accessibility, Web, Español, Users can precisely crop an image for various device viewports within a single interface, ensuring optimal visual presentation across all screens., YouTube, Google

Desktop, Pathfinding, Accessibility, Web, English, This pattern allows users to quickly switch between predefined time ranges to view multiple related data graphs, enabling efficient analysis of performance trends., Cloudflare

Desktop, Decision Making, Web, Apple OS, English, Users can effortlessly upload files by dragging them from their desktop directly into a browser window, streamlining the content submission process., GIPHY

Desktop, Decision Making, Apple OS, macOS, Español, This pattern allows users to cancel an ongoing operation, like a file transfer, by clicking a clear "X" icon, providing immediate control over system processes., Alert Dialog, Progress State, Close Overlay, Hover Event, Image / Illustration, Apple

Desktop, Accessibility, Web, English, Users can instantly switch between light and dark themes with a single toggle, enhancing readability and reducing eye strain for personalized viewing comfort., Cloudflare

Mobile, Accessibility, Apple OS, Español, Users can adjust image grid spacing with a pinch gesture, enhancing visual clarity and enabling precise content selection for improved accessibility., Apple, Apple Photos

Desktop, Accessibility, Pathfinding, Apple OS, Español, Users can double-click an item to open its content in a new, independent window, enabling parallel viewing and enhanced multitasking., Doble Click Event, Browser Window, Drag & Drop Gesture, Apple, Apple Notes

Users can toggle a secondary sidebar to reveal or hide contextual information, optimizing screen real estate and focus on primary content.

Desktop, Decision Making, Accessibility, Apple OS, Español, Users efficiently select a presentation template and aspect ratio from categorized options, streamlining the creation of new projects., Apple, Apple Keynote

Mobile, Accessibility, Apple OS, Español, Users can precisely crop multiple screenshots sequentially, enabling focused content extraction and streamlined sharing of specific information., Apple

Desktop, Decision Making, Awareness, Web, English, This pattern displays a floating banner over existing content, allowing users to compose new input without losing context of the underlying page., Banner, Twitter

Desktop, Awareness, Pathfinding, Web, English, This pattern keeps primary actions readily accessible by stacking them vertically, ensuring users can quickly initiate key tasks without scrolling., Fixed on Scroll, Navbar, Infinite Scroll, Button, Back Link, Search Input, Twitter

Desktop, Accessibility, Web, Español, 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., Dropdown Menu, Video, Thumbnail, Navbar, Button, Toggle Field, Netflix

This multi-step modal guides users through an onboarding process with clear form inputs and animated transitions, ensuring focused completion of initial setup tasks.

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

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

Desktop, Awareness, Web, English, Español, This loader provides visual feedback to users that content is loading, maintaining engagement and reducing perceived wait times by showing the layout structure., Loader

Desktop, Onboarding, Decision Making, Landing Page, Web, English, This pattern offers users a clear, two-step download process, first presenting a prominent "Download" button and then a secondary, fixed-on-scroll button for consistent access., Button, Fixed on Scroll, Hypertext Links, Steps, Google, Google Chrome

Mobile, Pathfinding, Apple OS, Español, This pattern provides a clear entry point for searching, quick access to key features, and personalized content, enhancing user navigation and product discovery., Banner, Carrousel, Search Input, Fixed on Scroll, Hypertext Links, Image / Illustration, Button, List Items, MercadoLibre

Desktop, Accessibility, Apple OS, macOS, English, Users can easily personalize their full-screen widget layout by dragging and dropping elements, enhancing their dashboard's utility and visual organization., Cards, Bento Grid, Long Click Event, Click Event, Close Overlay, Apple

Desktop, Mobile, Decision Making, Web, English, This pattern helps users decide whether to proceed with registration by clearly comparing the benefits of stopping versus continuing the process.

Desktop, Awareness, Web, English, This pattern informs users that a desktop application is downloading, providing clear instructions and a progress indicator to manage expectations and guide the next steps., Hypertext Links

Desktop, Consent, Web, English, Users can manage their uploaded video content, including visibility, restrictions, and upload dates, to maintain an organized channel., YouTube, Google

Desktop, Pathfinding, Web, English, This pattern allows users to browse a list of audio episodes while simultaneously playing and controlling a selected episode.

Desktop, Onboarding, Decision Making, Awareness, Web, Español, This pattern uses a tooltip to highlight "Top Recommended Restaurants, " informing users that the displayed selection is personalized based on proximity, order history, and ratings., Tooltip, PedidosYa

Mobile, Decision Making, Accessibility, Apple OS, Español, This pattern allows users to customize food orders with dietary preferences and special instructions, ensuring a personalized and accessible ordering experience., Uber EATS

Desktop, Awareness, Web, English, This pattern warns users about potential data loss when editing an active test, offering options to proceed cautiously or duplicate the test to preserve existing responses.

Desktop, Awareness, Web, English, A prominent top banner informs users about new features or promotions, encouraging engagement with a clear call to action., Banner, Hypertext Links

Mobile, Accessibility, Pathfinding, Apple OS, Español, Users can efficiently search and manage their bookmarks within Safari, leveraging a clear interface with a search bar and categorized folders for quick navigation., Apple, Apple Safari

Desktop, Awareness, Accessibility, Web, English, This pattern highlights new or experimental features within a dropdown menu, allowing users to discover and opt-in to upcoming functionalities., Dropdown Menu, Notification Badge

Desktop, Awareness, Web, English, 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., Text Input, Modal, Hypertext Links, Webflow

Desktop, Pathfinding, Apple OS, 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., Apple Safari

Desktop, Consent, Onboarding, Web, Apple OS, English, This pattern allows users to securely log in to their iCloud account by entering their Apple ID, with an option to stay signed in for convenience., Apple

Desktop, Accessibility, Web, English, Users can manage their account's discoverability and contact settings, controlling who can find them via email or phone number for enhanced privacy., Twitter

Desktop, Accessibility, Web, Español, Users can adjust text size and font for optimal readability, enhancing accessibility and personalizing their content consumption experience.

Desktop, Pathfinding, Web, English, This pattern allows users to quickly search their content with a prominent search bar that reveals recent searches and relevant suggestions upon interaction., YouTube, Google

Desktop, Mobile, Accessibility, Web, English, Users can save articles for later reading by clicking a bookmark icon, ensuring they don't lose interesting content when time is short.

This pattern provides real-time feedback on file upload progress and status, allowing users to monitor, manage, and resolve potential issues efficiently.

This sidebar empty state introduces new features with a clear illustration and call to action, guiding users to discover and adopt new functionalities.

Desktop, Accessibility, Apple OS, Web, Users can activate Reader Mode to strip away distracting elements like ads and navigation, focusing solely on the article's content for improved readability., Apple, Apple Safari

This modal blackout pattern informs users about enhanced ad privacy, offering clear choices to manage settings or accept changes with distinct action buttons.

Desktop, Awareness, Web, English, This empty state uses a humorous meme and a guiding text to playfully direct users toward the primary action button, encouraging engagement., Image / Illustration, Hypertext Links, Webflow

This pattern uses subtle animations within an email to guide users through a privacy checkup, enhancing engagement and clarity for important account actions.

This pattern allows users to effortlessly browse a carousel of news or definition cards, providing quick access to multiple content pieces with clear navigation.

Mobile, Pathfinding, Web, English, A menu drop-down provides users with a clear, compact way to access navigation options, enhancing discoverability and site exploration.

Desktop, Decision Making, Web, English, This pattern provides a host with immediate control over who joins a meeting, enhancing security and ensuring only authorized participants can enter., Google, Google Meet

This banner provides timely, relevant information and a clear call to action, ensuring users are aware of important updates or opportunities.

Desktop, Pathfinding, Decision Making, Web, Español, Users can effortlessly browse and select product variations by color, with immediate visual feedback and clear stock availability, streamlining their purchasing decision., Tooltip, Hover Event, List Items, Click Event, Photo, Color Marker, MercadoLibre

Desktop, Onboarding, Awareness, Web, Español, 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., Tooltip, Hypertext Links, Amazon

Desktop, Decision Making, Web, Español, This pattern guides users through a personalized plan upgrade flow by asking about their intent, offering tailored recommendations, and allowing them to view all options., Linkedin

Mobile, COVID-19 Edition, Apple OS, Español, This banner promotes relevant content or offers within the app's main feed, encouraging user engagement and discovery without disrupting the primary navigation.

Desktop, Decision Making, Web, English, This pattern allows users to compare subscription tiers and their benefits side-by-side, enabling an informed decision before committing to a purchase.

Desktop, Accessibility, Web, English, The accessibility icon provides users with quick access to adjust display settings, enhancing readability and overall site usability.

Mobile, Pathfinding, Web, Español, This pattern allows users to seamlessly transition from a web page to a native mobile application, enhancing engagement and providing a richer experience.

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.

Mobile, Pathfinding, Apple OS, Users can quickly navigate video content by tapping the left or right side of the screen to rewind or fast-forward in precise increments.

Desktop, 📱 Mobile, Awareness, Apple OS, Español, This banner informs users about a page reload due to an error, ensuring they understand the unexpected behavior and can proceed with confidence., Banner, Hypertext Links, Empty State, Error State, Apple Safari

Desktop, Accessibility, Web, English, Users can magnify embedded images by hovering over them, revealing crucial details and improving comprehension without navigating away., Webflow

Mobile, Accessibility, Apple OS, Español, Users confirm their delivery location on a map with a prominent pin and a clear call to action, ensuring accurate service., PedidosYa

Mobile, Awareness, Decision Making, Consent, Apple OS, English, This pattern guides users through a secure download or purchase confirmation process, requiring a physical side button press to prevent accidental transactions., Button, Tap Event, Modal, Progress State, Apple

This pattern allows users to review copyright claims on their videos, understand the impact, and select appropriate actions to resolve issues.

Desktop, COVID-19 Edition, Web, English, This pattern provides a dedicated section at the bottom of a page to combat misinformation by directing users to reliable, expert-backed content., Medium

Desktop, Pathfinding, Web, English, Users can select a specific version of a product or guide from a dropdown menu, ensuring they access relevant, up-to-date information., Apple

Desktop, Accessibility, Web, English, Users can efficiently manage multiple tasks by splitting their operating system screen into distinct, resizable windows, enhancing productivity and multitasking capabilities., Drag & Drop Gesture, Long Click Event, Browser Window, Navbar, Side Panel, Active State, Live State

This banner provides critical, timely information to users at the top of the page, ensuring high visibility for important updates or alerts.

Mobile, Awareness, Apple OS, English, This pattern allows users to quickly confirm or change their trip's starting point, ensuring accurate pickup and a smooth journey., Cabify

Mobile, Accessibility, Pathfinding, Apple OS, English, This pattern allows users to quickly select specific days of the week and set corresponding commute times, streamlining schedule management for personalized route planning., Google, Google Maps

Mobile, Accessibility, Awareness, Apple OS, English, This pattern allows users to granularly control various notification types within the app, ensuring they receive only relevant alerts and maintain privacy., Google, Google Maps

Desktop, Awareness, Web, English, This pattern uses an overlay with a stylized, partially transparent shape to draw attention to a new feature, offering options to engage or dismiss., Google, Google Suite

Desktop, Awareness, Web, English, This pattern prompts users to re-enter their password when a session expires, ensuring security while allowing them to quickly resume their work.

Desktop, Onboarding, Decision Making, Awareness, Web, English, Español, This pattern guides users through multi-step onboarding or feature discovery with a focused, sequential tooltip and a dimmed background., Google, Gmail

Desktop, Awareness, Pathfinding, Web, English, 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., Progress State, Notification Badge, Navbar, Fixed on Scroll, McKinsey

Desktop, Onboarding, Web, English, This pattern uses a placeholder text field to prompt users to share content, enhancing discoverability and guiding their initial interaction.

Desktop, Onboarding, Web, Español, Users can easily save items to a favorites list by clicking a heart icon, even as a guest, promoting future engagement and purchases., Text Input, Photo, Button, Price, Favorite Button, Hypertext Links, Image / Illustration, Dropdown Menu, MercadoLibre

Mobile, Decision Making, Apple OS, Español, This pattern prompts users browsing a mobile website to switch to the native app, offering a better experience with enhanced features.

Desktop, Accessibility, Apple OS, macOS, English, Users can quickly access and customize widgets in a two-pane sidebar, enhancing productivity by providing relevant information at a glance., Side Panel, Cards, Long Click Event, Drag & Drop Gesture, Close Overlay, Tabs, Transition, Toolbar, Apple

Desktop, Decision Making, Awareness, Web, English, This pattern uses synchronized hover animations to highlight related data points across different UI elements, enhancing user awareness and decision-making., Hypertext Links, Graph, Mailchimp

Mobile, Awareness, Apple OS, English, This pattern introduces new features contextually, like swipe typing, to help users discover and adopt useful functionalities at the right moment., Apple

Users can quickly navigate between open applications by swiping horizontally, revealing a stack of app previews for efficient task switching.

Mobile, Pathfinding, Apple OS, Español, This pattern allows users to easily browse and select files from a list, with clear visual cues for file type and modification date, enhancing navigation and organization., Google, Google Suite

Desktop, Decision Making, Web, English, This top-banner informs users about security risks and prompts them to take action, enhancing account safety and providing clear options to "Get Started" or "Dismiss"., Banner, Navbar, Avatar, Search Input, Image / Illustration, YouTube, Google

Desktop, Appreciation, Onboarding, ▼ Consent, Web, English, This pattern gathers essential user contact information, including first name, surname, and email address, to facilitate account creation and future communication., Text Input, Hypertext Links, Pagination, Google, Google Suite

Desktop, Decision Making, Web, English, This floating banner offers a persistent, non-intrusive call to action for subscription, allowing users to easily access pricing details while browsing content., Banner, Fixed on Scroll, Button, Close Overlay, Steps

Desktop, Consent, Awareness, Web, English, This pattern allows users to quickly understand and modify granular permissions for a selected user, ensuring precise control over access levels., Google, Google Analytics

Desktop, Onboarding, Web, English, This pattern uses a prominent, half-page illustration with a slider to visually guide users through key features or benefits during onboarding., Google, Google Meet

Desktop, Onboarding, Accessibility, Web, English, This wizard guides users through a series of choices, enabling them to quickly define the purpose and desired interactions for their personal profile page.

Desktop, Decision Making, Web, English, Users select target audience segments from predefined categories, enabling personalized content delivery and streamlined lead qualification.

Desktop, COVID-19 Edition, Web, English, A prominent banner on the product homepage informs users about a special offer, encouraging engagement by highlighting a free Team Plan for specific groups.

Desktop, Decision Making, Web, Español, Background ads leverage the entire viewport to display engaging, full-screen advertisements, often featuring high-quality imagery or video, to capture user attention.

Desktop, COVID-19 Edition, Web, English, A prominent banner provides users with critical, timely information and direct links to trusted external resources, enhancing awareness and facilitating access to vital updates., Medium

A floating tooltip or dialog provides contextual information or prompts user action without disrupting the main workflow, enhancing discoverability and engagement.

Mobile, Accessibility, Apple OS, Español, This pattern allows users to provide descriptive alternative text for images, enhancing accessibility for visually impaired users and improving content understanding., Twitter

Desktop, Accessibility, Web, English, This pattern provides immediate, context-sensitive text formatting options via a static tooltip, enabling users to efficiently style selected content without navigating away., Google, Google Sites

Desktop, Awareness, Apple OS, Español, This pattern provides clear warnings and explanations for critical actions, ensuring users understand the irreversible consequences of their choices before proceeding., Slack

Mobile, Onboarding, Apple OS, Español, This pattern securely verifies user identity by requiring a password re-entry, ensuring authorized access before proceeding with sensitive account changes., Twitter

Mobile, Awareness, Apple OS, English, A modal with a title, descriptive text, and a single "OK" action button informs users about a new feature, ensuring they acknowledge the information before proceeding., Apple

Mobile, Accessibility, Apple OS, Español, This pattern allows users to customize their navigation experience, including transport modes, distance units, and voice search language, enhancing usability and personalization., Google, Google Maps

Desktop, Pathfinding, Web, English, This pattern uses interactive hotspots on a product image to reveal key features and benefits, allowing users to explore details without leaving the main page.

Desktop, Decision Making, Web, English, This pattern prompts users to subscribe to a newsletter via a modal, appearing after they've consumed a certain amount of free content, encouraging continued engagement.

This pattern presents a horizontal carousel of content cards, each with a clear call-to-action, enabling users to explore related information and engage with offerings efficiently.

Desktop, Decision Making, Web, Español, Presents a promotional offer for a free trial of an audiobook service, designed to encourage user sign-up or subscription., Amazon

Desktop, Feedback, Apple OS, English, 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 notification prompts users to review their recent food order, encouraging feedback that helps others make informed dining choices.

Desktop, Pathfinding, Awareness, Web, Español, This pattern automatically cycles through content in a two-pane layout, allowing users to passively discover key features or products without direct interaction., Tiendanube

Desktop, Onboarding, Web, English, Users enter their email to receive a confirmation link, enabling them to quickly find and join existing Slack workspaces or create new ones.

Mobile, Accessibility, Awareness, Apple OS, English, This pattern displays a user's real-time location on a map with an interactive bottom sheet for quick access to contact, directions, and notification settings., Bottom Sheet, User Selection, Text Input, Hypertext Links, Dropdown Menu, Live State, Avatar, Notification Badge

Desktop, Awareness, Pathfinding, Web, English, This pattern provides a clear, persistent navigation bar at the top of the screen, allowing users to quickly return to previous views or access key sections., GitHub

Desktop, Pathfinding, Apple OS, Español, This pattern provides quick access to recent activity and featured items within a compact, dismissible overlay, enhancing user efficiency.

Desktop, Onboarding, Apple OS, Web, English, This pattern guides users through key features with a multi-step popover, ensuring a smooth onboarding experience and quick feature discovery., Figma

Desktop, Feedback, Web, English, This feedback form allows users to express their overall sentiment and provide detailed suggestions for improvement, fostering a direct channel for product enhancement.

This skeleton loader provides visual feedback during content retrieval, reducing perceived wait times and improving user experience by showing layout structure.

Desktop, Decision Making, Web, English, This pattern respectfully requests users to disable their ad blocker, explaining that the service is free to use but relies on ads for operation.

Desktop, Onboarding, Pathfinding, Apple OS, Web, Email, English, This pattern streamlines desktop app sign-in by redirecting users to a web browser for authentication, then seamlessly returning them to the application., Navbar, Text Input, Hypertext Links, Button, Numeric Input, Slack

Desktop, Accessibility, Apple OS, Español, Users can personalize their browser's start page by selecting a custom background image, enhancing visual appeal and personal connection., Apple, Apple Safari

Desktop, Feedback, Awareness, Web, Español, This pattern allows users to provide feedback on web content, enabling them to report issues or suggest improvements directly within the interface.

This pattern provides a persistent, non-intrusive notification in a sidebar, informing users of available updates and offering a direct call to action.

Users can invite up to six friends to a synchronized viewing experience, fostering shared enjoyment and social interaction around media content.

This pattern provides a fixed, animated bubble that indicates reading progress, helping users understand their position within long articles and enhancing content appreciation.

A top primary banner provides crucial, timely information and calls to action, ensuring users are immediately aware of important updates or opportunities.

Desktop, Onboarding, Web, English, This welcome screen uses a captivating background image to introduce new features, guiding users to engage with updated content immediately.

Desktop, Accessibility, Decision Making, Web, English, This pattern allows users to preview a PDF document directly within the interface and offers a clear option to download it for offline access or detailed review.

Desktop, Decision Making, Web, English, This pattern allows users to watch a free video episode, encouraging engagement and potential subscription by offering a taste of premium content.

Desktop, Feedback, Web, Español, This pattern allows users to quickly rate an article with a natural language choice, providing immediate feedback and enhancing content engagement.

Desktop, Decision Making, Web, Español, This pattern informs guest users they've reached their daily download limit, prompting them to register or log in to continue accessing resources.

Desktop, Decision Making, Accessibility, Awareness, Pathfinding, Web, English, This pattern guides users to quickly name their site by offering real-time suggestions as they type, streamlining the initial setup process., Wordpress

Desktop, Awareness, Web, English, This pattern reminds users that they can enable desktop notifications by clicking the lock icon in the browser's address bar., Facebook

Desktop, Onboarding, Consent, Web, Español, A checkbox provides clear visual confirmation of a completed step, guiding users through onboarding or multi-stage processes with immediate feedback., Google, Google Suite

Desktop, Decision Making, Web, English, This pattern showcases key product features and social proof alongside clear sign-up options, helping users quickly understand value and commit.

Desktop, Decision Making, Accessibility, Web, English, This pattern uses a modal dialog to offer a free ebook in exchange for an email address, encouraging newsletter sign-ups and lead generation.

Desktop, Onboarding, Apple OS, English, This onboarding action tooltip guides users to sign in with Google, streamlining the login process and reducing friction for new or returning users., Toggl

Mobile, Decision Making, Web, Apple OS, This banner prompts users to open content in a native app, enhancing engagement and providing a richer, more integrated experience than a web browser.

Desktop, Accessibility, Apple OS, macOS, Español, Users can effortlessly organize and filter list items by category and status, enhancing task management and focus within a customizable interface., List Items, Color Marker, Side Panel

Desktop, Onboarding, Decision Making, Web, English, This pattern guides users through a multi-step signup process, including a clear pricing selection, to onboard them efficiently and transparently., Button, Text Input, PIN Code, Toggle Field, Fixed on Scroll, Banner, Steps

Upon focusing the search bar, users are presented with a curated list of favorites, frequently visited sites, and Siri suggestions, streamlining navigation and discovery.

Users can quickly access account-specific options and site navigation through a persistent topbar dropdown menu, enhancing pathfinding and personalization.

Mobile, Awareness, Apple OS, Español, A long-press gesture reveals a context-sensitive menu, offering quick access to relevant actions for the selected element., Twitter

Desktop, Awareness, Web, Español, This pattern provides immediate, contextual feedback for form input errors, guiding users to correct mistakes efficiently and complete their tasks without frustration., Zoom

Desktop, Feedback, Apple OS, English, 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., Figma

Desktop, Awareness, Appreciation, Web, English, This pattern uses a notification badge on the top bar to alert users to new rewards, which can be viewed in a dropdown menu for easy access and appreciation., Notification Badge, Dropdown Menu, Navbar

Mobile, Pathfinding, Awareness, Apple OS, English, A bottom action menu provides persistent, easily accessible navigation and primary actions, enhancing user efficiency and discoverability on mobile devices.

Mobile, Accessibility, Apple OS, Español, Users can easily switch between light and dark color themes, enhancing readability and reducing eye strain in varying ambient light conditions., Apple

Users can precisely define column breaks within a data table, enabling flexible data organization and improved readability for complex datasets.

Desktop, Consent, Web, Español, This pattern enables users to securely access their Apple ID by entering their email, with an option to remember the account for future convenience., Apple

Desktop, Pathfinding, Web, English, Users can quickly filter their video feed by topic using a horizontal row of clickable tabs, enhancing content discovery and personalization.

This modal allows users to efficiently search for and select a preferred language from a comprehensive list, enhancing personalization and accessibility.

Desktop, Onboarding, Web, Español, 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.

Desktop, Decision Making, Web, English, This pattern helps users choose a subscription plan by clearly comparing features and pricing, often leveraging social proof to build trust and encourage conversion.

Mobile, Pathfinding, Onboarding, Apple OS, English, This pattern guides users to scan their environment with a device, displaying a grid and visual cues to detect surfaces for augmented reality experiences.

Mobile, Pathfinding, Apple OS, Español, This tab menu navigation allows users to quickly switch between different categories of items, enhancing discoverability and streamlining the browsing experience., PedidosYa

This pattern allows users to quickly rate a conversation using a Likert scale of emoji faces, providing immediate feedback within the chat interface.

Desktop, Decision Making, Awareness, Web, Español, A floating video story provides users with a dynamic, engaging explanation of a product or service, enhancing understanding and encouraging further interaction.

Desktop, Accessibility, Consent, Web, Español, This pattern presents a clear cookie consent pop-up, allowing users to accept or manage cookie preferences for a transparent and compliant browsing experience.

Mobile, Decision Making, Apple OS, Español, This pattern highlights discounted products with clear visual cues, enabling users to quickly identify savings and make informed purchasing decisions., Uber EATS

Users can right-click the maximize button to access a dropdown menu, enabling quick window arrangement options like full screen or tiling to the left or right.

This dismissible bottom-anchored popup informs users about critical information, offering options to dismiss or learn more without disrupting primary content viewing.

Desktop, Decision Making, Consent, Web, Español, This pattern presents a prominent, in-front modal to users, requiring explicit acceptance of terms and conditions before they can proceed with site interaction.

Desktop, Onboarding, Awareness, Web, English, This empty state provides a clear call to action, guiding users to initiate content creation and overcome initial blank canvas paralysis., Loader, Empty State, Google, Google Suite

Desktop, Awareness, Web, English, The video status bar provides crucial playback controls and time information, enabling users to precisely navigate and manage their viewing experience., Google, YouTube

This bottom-anchored popup provides users with immediate access to secondary, contextually relevant information without disrupting their primary task.

Mobile, Pathfinding, Apple OS, Español, This pattern enables users to refine search results with a persistent filter menu, offering various sorting, category, and condition options for efficient product discovery., Dropdown Menu, Checkbox, Accordion, Hypertext Links, Fixed on Scroll, MercadoLibre

Desktop, Onboarding, Web, Apple OS, Español, Users input their company or team name into a text field, with a character counter providing real-time feedback and ensuring compliance with length requirements., Slack

This pattern provides immediate feedback on user input, guiding them to correct errors and successfully complete forms or tasks.

Desktop, Mobile, Pathfinding, Web, Apple OS, English, This pattern displays a curated feed of articles from the user's network, enabling quick discovery of relevant content and fostering community engagement., Navbar, Fixed on Scroll, Banner, Avatar, Medium

Mobile, Onboarding, Apple OS, English, This onboarding screen asks users about their fitness goals with a clear yes/no choice, streamlining the initial setup and personalizing the app experience.

Desktop, Onboarding, Web, English, Users select their intended use case from distinct options, streamlining their onboarding experience with tailored content and features., Notion

Desktop, COVID-19 Edition, Web, Español, A context banner card proactively alerts users to potential risks or important information within an email, empowering them to make informed decisions about interaction., Tiendanube

This pattern allows users to efficiently manage and organize their content by editing, adding, or removing tags through a dedicated modal interface.

Desktop, Accessibility, Apple OS, macOS, Español, This pattern allows users to precisely select colors from a spectrum, adjust saturation and brightness, and save custom swatches for efficient reuse., Tabs, Color Marker, Progress State, Dropdown Menu, Numeric Input, Range Field, Drag & Drop Gesture, User Selection

Mobile, Decision Making, Apple OS, English, This pattern prompts users to enable notifications, offering clear benefits and a choice to defer, enhancing engagement and personalization.

This onboarding flow guides new users through initial profile setup, collecting essential personal details to personalize their experience and facilitate future interactions.

Desktop, Decision Making, Web, Español, This contextual popup allows users to manage task details and offers a clear call to action for upgrading to unlock advanced features., Trello

Desktop, COVID-19 Edition, Web, Español, This pattern displays a prominent, actionable warning message within the map's search results, ensuring users quickly access critical, up-to-date information about a pandemic., Google, Google Maps

Desktop, Awareness, Web, English, This pattern uses a branded illustration within a modal to reinforce a user's action, providing a moment of delight and confirmation before a critical step.

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.

Desktop, Decision Making, Web, English, This pattern presents a modal dialog to users, highlighting the potential negative impact of an action to encourage reconsideration and prevent unintended consequences.

Desktop, Pathfinding, Accessibility, Windows, Apple OS, Web, English, This pattern enables users to efficiently navigate and select menu items using keyboard arrows, enhancing accessibility and speed for power users., View, Original source on Twitter, Figma

Desktop, COVID-19 Edition, Web, English, This warning banner informs users that content is not fact-checked, promoting critical thinking and directing them to authoritative sources for sensitive topics., Medium

This pattern presents a floating tooltip with a dim overlay, guiding users to initiate or schedule a meeting with clear options and keyboard shortcuts for efficiency.

Desktop, Awareness, Web, English, This banner provides a clear, concise message to users, offering an alternative action to streamline the process of adding multiple subscribers., Text Input, Banner, Notification Badge, Mailchimp

Mobile, Appreciation, Decision Making, Apple OS, English, This pattern celebrates user contributions with a congratulatory message and visual feedback, encouraging continued engagement by highlighting the impact of their shared content., Google, Google Maps

Mobile, Pathfinding, Awareness, Apple OS, Español, This top banner provides real-time order status and restaurant information, allowing users to quickly track their food preparation and estimated arrival time., Progress State, Map, Live State, Image / Illustration, Bottom Sheet, Avatar, Uber EATS

Mobile, Pathfinding, Onboarding, Apple OS, English, This pattern provides users with a clear, interactive visualization of their sleep stages, enabling quick comprehension of sleep quality and duration., Fitbit

Desktop, Onboarding, Web, English, 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).

Desktop, Onboarding, Web, English, 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., Notion

Desktop, Consent, Web, Español, This pattern ensures users fully review important terms by requiring them to scroll through content before enabling a confirmation action., Google

Desktop, Decision Making, Web, English, This pattern entices users to upgrade to a premium subscription by blurring out valuable content, like profile viewers, and offering a free trial to unlock it.

Desktop, Decision Making, Web, English, This pattern helps users compare three distinct pricing tiers, highlighting features and costs to facilitate an informed subscription decision., Steps, Button, Banner

Desktop, Pathfinding, Web, English, This pattern guides users through multi-step processes with clear, numbered instructions and corresponding visual cues for efficient task completion.

Mobile, Decision Making, Apple OS, Español, Users can clear their recent search history with a single tap, enhancing privacy and decluttering the search interface for a fresh start., Twitter

Desktop, Decision Making, Web, English, This pattern enables users to quickly create a new account or sign in to an existing one, streamlining access to platform features.

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., Steps, Toggle Field, Button

Desktop, Email notification, Awareness, Email, English, This pattern provides a clear, detailed summary of a food order, including items, prices, and delivery information, ensuring users have a complete record of their purchase., Uber EATS

Mobile, Pathfinding, Web, English, This pattern provides real-time trip progress and driver details, empowering users with transparency and reducing anxiety during rideshare services., Cabify

Desktop, Appreciation, Decision Making, Web, English, A celebratory confetti explosion visually confirms successful user actions, enhancing positive reinforcement and delight., Modal, Hypertext Links, Animation, Image / Illustration

Mobile, Pathfinding, Apple OS, English, This pattern displays a walking route on a map, clearly indicating the path with a dotted line and providing an estimated travel time for efficient navigation., Google, Google Maps

This floating voice widget provides persistent awareness of an active call, allowing users to quickly mute, unmute, or end the conversation without interrupting their workflow.

Desktop, Onboarding, Consent, Web, Español, This pattern enables users to create an account by providing their name and email, with real-time validation ensuring data accuracy and a smooth onboarding experience., Twitter

Desktop, Pathfinding, Web, English, This pattern enables users to effortlessly share content across popular social networks and via email, boosting content reach and engagement., Banner, Fixed on Scroll, Tags, Share on Social

Desktop, Accessibility, Web, Español, This pattern allows users to toggle a colorblind-friendly mode, enhancing accessibility by adding distinct shapes to color labels for improved differentiation., Modal, Tooltip, Hypertext Links, Text Input, Trello

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.

Desktop, Decision Making, Web, English, This pattern offers users a clear choice between creating a new account or signing in, streamlining access and reducing decision fatigue.

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.

This modal prompts users to log in with an existing account, offering clear options to proceed or use an alternative, ensuring a smooth authentication flow.

Desktop, Mobile, Pathfinding, Awareness, Web, English, The hamburger menu icon provides a compact way to reveal a navigation drawer, allowing users to access various sections of the website efficiently.

Desktop, Accessibility, Pathfinding, Web, Español, Users can highlight and save specific text within an article, enabling focused review and easy access to key information later.

This transition subtly scales down an image on hover, providing visual feedback and highlighting interactive elements without obscuring content.

This dedicated screen ensures users explicitly confirm or deny third-party access to their LinkedIn data, promoting transparency and control over personal information.