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.

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.

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.

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.

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.

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

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.

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, Consent, Decision Making, Awareness, Web, Español, Text Input, Hypertext Links, Pagination

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

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 dialog pattern that darkens the background to focus user attention, presenting multiple choices for decision-making or consent. It typically includes interactive elements like buttons and hypertext links. Notable behavior: Multiple Choice Selection; Button Click; Modal Open.

A desktop pattern for reminding users about a PIN, often using a modal or banner. It includes text input and hypertext links, designed for awareness and accessibility on Apple OS.

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.

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.

Applies a dynamic visual effect to an element's background when a user hovers their mouse over it, enhancing interactivity and drawing attention to the element.

This pattern presents a multi-step modal dialog that overlays the entire screen, often used for onboarding new users or drawing attention to important information. It guides users through a sequence of steps, typically featuring pagination for navigation and potentially including images, illustrations, or hypertext links to provide additional context or actions. Notable behavior: Opening and closing a modal; Navigating through sequential steps; Modal open/closed.

Desktop, Awareness, Pathfinding, Web, Español, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress

A top-positioned banner component used to inform users about design changes or important updates. It typically includes text and hypertext links for more details, serving as a prominent awareness mechanism on web and desktop interfaces. Notable behavior: Click (Hypertext Links); Dismiss (Optional); Visible.

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

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

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

This pattern guides users through the process of downloading a desktop application from a web-based interface. It typically involves presenting a clear call to action, such as a hypertext link, that initiates the download of an installer or executable file. The primary objective is to facilitate the transition of users from a web experience to the installation and use of a native desktop application, thereby increasing product awareness and engagement. Notable behavior: Clicking a download link; Initiating file download; Download link visible.

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

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 dedicated empty state within a sidebar or side panel, often featuring an illustration and hypertext links to guide users on initial content creation or onboarding steps.

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

This pattern utilizes an illustration or meme within an empty state user interface to provide context, engage users, or add humor. It often includes hypertext links to guide users toward next steps or relevant information.

This pattern describes an email page featuring animations and hypertext links, designed to enhance user awareness and support decision-making, primarily within a desktop environment.

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.

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.

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

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.

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.

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.

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.

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

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

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

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.

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.