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 multi-step wizard guiding users through the initial setup of a chat, commonly found in desktop applications, focusing on onboarding and pathfinding, with considerations for accessibility.

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

Desktop, Onboarding, Decision Making, Accessibility, Web, Español, English, Modal, Button, Steps, Dropdown Menu, Text Input, Image / Illustration, Close Overlay, Facebook

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.

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.

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

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.

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

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 contextual tooltip pattern used during user onboarding to highlight a specific action or UI element, guiding the user towards initial engagement with the application.

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.

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.

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

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.

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

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.

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.

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

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.

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

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

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.

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.

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.

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

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.

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.

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

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.

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.

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

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

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.

Allows users to switch between list and grid display modes for content, enhancing content consumption flexibility and adapting to user preferences.

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.

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