Surfaces and Containers

Overview

Surfaces and Containers are the dedicated environments where AI interactions take place and AI-generated content is displayed. These are the primary UI structures—such as panels, full-page takeovers, embedded cards, and popovers—that house the AI experience. They provide a consistent and contained space for users to engage with AI capabilities, from conversational UIs to integrated, contextual insights.

Usage Guidance

When To Use This Pattern

• To host a conversational UI for multi-step tasks, extended interactions, or contextual guidance that needs to be displayed alongside the main page content.
• For immersive experiences that require more space to manage complex workflows or explore detailed, AI-generated insights without the distraction of other UI elements.
• To display contextual, AI-generated content like recommendations or insights directly within a user’s workflow on pages like hubs or dashboards.
• When users need to review, refine, and explicitly accept AI-generated content before it is inserted into a larger interface, such as a text editor.

When To Use Something Else

• For displaying large, complex datasets or interactive dashboards that are not conversational in nature.
• For brief, single-step interactions or simple queries that can be handled more efficiently by a popover, toast, or another lightweight component.
• When the user must be able to interact with the main page content simultaneously and a full-page takeover would be too disruptive.
• For displaying read-only insights or very simple content that does not require a user validation step.

Variants

Conversation Panel

The Conversation Panel is a container fixed to one side of the screen (often the right side), that provides users with contextual assistance, information retrieval, and task guidance through a conversational interface. The Conversation Panel allows users to ask questions in natural language or interact with Suggested Prompts relevant to their current context within the application. The Conversation Panel dynamically updates its suggestions and responses based on the user’s focus, aiming to provide timely help, answer queries, and streamline workflows without requiring the user to navigate away from their primary task. The call and response between user prompting and AI responses appear in a chat-like format.

Anatomy

1. Header: Displays the name of the feature, CTAs to close and additional actions (future)
2. Conversation: Call and response between the user and Workday Assistant. AI responses are styled as Response Cards. Response Card variants support simple text-based answers as well as layouts tailored for capabilities like guided walkthroughs and reviewing autofilled details.
3. Prompt Bar Footer: Includes Suggested Prompts and a Prompt Bar where the user enters free-form text-based queries to produce a response.

Usage Guidance

• A primary conversational interface that allows users to ask questions and receive AI-driven support without leaving their current context.
• Presents contextual information and actions relevant to the content on the main page.
• Ensure actions suggested within the panel are relevant and help users get answers and complete tasks more efficiently.

When to Use

• Use a Conversation Panel to present contextual information relevant to the current task.
• Provide a dedicated space for users to engage in a multi-turn, back-and-forth conversation with the AI.
• To offer step-by-step guidance for complex processes.
• To surface AI-generated content and suggestions alongside the main application.
• To give users access to help and support without navigating away from their work.

When to Use Something Else

• The Conversation Panel should primarily offer assistance, not serve as the main interface for task execution. Core application functions involving complex data entry or data manipulations, or intricate interactions should continue to use dedicated forms, editors, or specialized interfaces.
• Use the Conversational Panel as a means to accelerate task completion, never as a replacement that adds complexity. Before implementing a conversational flow, ask: “Does this make the task faster?”
• For presenting extensive data that requires deep comparison or analysis, opt for data tables or detailed report views over a Conversational Panel, as they provide more appropriate affordances than a Panel with a fixed width.
• The Conversation Panel should not replace standard navigation menus or structures for moving between main sections of the application.
• When the user’s full attention is required for a critical task.

Best Practices

• Clearly introduce the panel’s purpose and capabilities upon first interaction, such as a welcome message. Set realistic expectations about what the assistant can and cannot do.

• Conversational outputs should use plain, concise language. Avoid jargon or explain it if unavoidable.

• Provide clear, intuitive entry points and ingresses for interaction with the Conversational Panel.

• Provide a persistent and easily accessible prompt bar for user input.

• Allow users to easily correct or clarify their previous inputs.

• Don’t assume users instinctively know what to ask or what the panel is for. Offer contextually relevant suggested prompts or action buttons to guide users and reduce typing effort.

• Don’t create dead-ends. Always provide a way to continue, get help, or exit the conversation.

• Don’t force users through lengthy conversations for tasks that could be completed with a single click or simple command.

• Don’t interrupt the user’s primary workflow unnecessarily. The Conversational Panel should be an aid, not a distraction.

Examples

• Manage My Time (Take Time Off): A user needs to decide when is the best time to take a vacation. They open the Conversation Panel to quickly get policy info, check their leave balance, and submit a vacation request. The Conversation Panel interprets the intent using NLP and pulls data from the system—like PTO balance, holidays, and leave policies. Based on this information, the Conversation Panel offers personalized suggestions and initiates a time-off request- completing the task through a brief dialogue. Once confirmed, it submits the request and notifies the manager.
• Worker - Manage My Pay (Confirm Accuracy of Pay): A worker accesses their payslip from the Workday homepage and reviews earnings, deductions, and bonuses. Noticing a discrepancy or having a question, they open the Conversation Panel. The AI interprets their query and provides clear, personalized explanations based on real-time payroll data, payslip context, and company policy. The worker gains clarity or initiates a resolution—all without leaving the payslip view.
• Manager - Work Effectively With Others (Change Job - Promote Team Member): A manager wants to promote a team member and wants to make sure they do so accurately, in line with policy and with real-time support to ensure confidence in their decisions. They open the Conversation Panel on the Change Job task. The Conversation Panel helps autofill details of the form with relevant employee data, and the manager can ask the Conversation Panel clarifying questions—such as compensation details or policy guidance—right within the task. The Conversation Panel responds with personalized, context-aware answers using Workday data and company policies.

AI Content Popover

Anatomy

Popover Container

1. Draggable Indicator
2. Loading Indicator
3. Loading Indicator Text
4. Data Source(s)

Popover Results

1. Draggable Indicator
2. Generated Text
3. Action Buttons
4. Disclaimer
5. Data Source(s)
6. Resize on All Sizes

Usage Guidance

• Present AI-generated content that requires user validation before use.
• Provide clear options for refining the content to better meet user needs.
• Use the popover for in-context content generation and refinement.
• Ensure the actions to accept, discard, or refine are always visible and accessible.
• Keep the popover’s content focused on a single, specific generation task.

When to Use

• Allowing users to see, iteratively refine with AI assistance, and approve AI-generated text or data before committing it.
• Showing AI-generated content for review within a larger interface like a rich text editor or document view.
• Enabling users to interact with the AI to refine the output using refinement prompts before insertion or acceptance.
• When the generated content is text-based and intended for direct insertion.

When to Use Something Else

• Presenting read-only AI insights that do not require user refinement.
• The AI-generated content is very large or complex, warranting a full-screen experience.
• The interaction is a simple, one-time generation without a need for iterative changes.
• Needing to display a stream of conversational messages.

Best Practices

• Always present AI-generated content in the popover to keep the human in the loop.

• Use the popover for content generation and refinement that occurs directly within the current interface context.

• Keep the popover’s content focused on a single, specific AI generation task.

• Don’t use the popover to display a stream of conversational messages; this requires a different interaction pattern.

Product Examples

Conversation Panel Fullscreen

Fullscreen offers an expanded, dedicated surface for user interactions within the Conversation Panel. It provides an immersive, full-screen experience ideal for viewing complex data in a larger surface or having a focused conversation without the constraints of a smaller Panel. Users can switch between default and fullscreen views at any time using the consistent toggle control in the Panel’s header.

Anatomy

1. Grow/Shrink Button: Action Button to toggle between default Conversation Panel width and fullscreen
2. Close Button: Closes the Conversation Panel.
3. Executed Prompt: User prompts are styled as chat bubbles, which are right-aligned in the fullscreen view to create a more conversational layout.
4. AI Response: On fullscreen, AI’s Response is center-aligned with a maximum width of 1024px for improved readability.
5. Suggested Prompts: Rather than stacking vertically, Suggested Prompts wrap horizontally in the fullscreen view to take advantage of the extra space.
6. Prompt Bar: On fullscreen, the Prompt Bar is center-aligned with a maximum width of 1024px for improved readability.

Usage Guidance

• Always provide the option for the user to expand to fullscreen. Fullscreen is optimal for displaying complex data such as Tables and Charts that are constrained within the default width of the Panel.
• Ensure there is consistent placement for the call-to-action to switch between default and expanded views.
• Upon entering fullscreen, the icon must change to its opposite (e.g., “shrink” icon)
• When the user exits fullscreen, they should be returned to the exact same position in the conversation they left so that context is preserved.

When to Use

• Ideal for displaying dense, detailed responses and complex data visualizations.
• For focused conversation and interaction with the agent when context of the underlying page is not needed.

When to Use Something Else

• Not ideal when the user wants to perform a simple, quick query. The user loses context in fullscreen mode.
• Not ideal whenever the user needs to view, compare, or reference information outside of the Conversational Panel to complete their task.
• The user’s primary goal is to continue interacting with the main application page content.

Product Examples

Embedded AI Card

The Embedded AI Card is a component integrated directly into a page layout to deliver contextual, AI-generated content. It surfaces key insights, actionable recommendations, or concise summaries exactly where users need them, such as on a hub or within a specific task. The purpose of this card is to provide timely intelligence and suggested actions, helping to streamline the user’s workflow without forcing them to navigate away from their current context.

Anatomy

1. Title: An optional title bar that provides context for the action or if the content came from Workday Assistant.
2. Content: The main body of the card that displays the AI-generated text, which could be a recommendation, an insight, or other summarized information.
3. Sources: An accordion link that displays the sources of the content if applicable.
4. Action Button/s: A container at the bottom of the card holding one or more that allow the user to act on the information provided (e.g., “View Details,” “Apply Suggestion”).
5. Disclaimer: A legal disclaimer must be shown at the bottom of the card to indicate the contents are AI generated.
6. Feedback Thumbs Up & Down: A container at the bottom of the card holding two thumbs up and down buttons to allow the user to provide feedback on the content.
7. ‘Ask Workday’ Ingress Button: A button that allows the user to Ask Workday a question related to the card’s content.
8. Suggested Prompts: Suggested prompts as an ingress to assistant showing follow up questions related to the card’s content.

Usage Guidance

• The information presented on the card should be brief and easily scannable.
• Actions provided on the card must be directly related to the insight or recommendation shown.
• Placement on the page should be logical, appearing near the content it relates to.

When to Use

• Surfacing timely, relevant information and actions directly within the user’s workflow on various pages.
• Displaying a contextual AI-generated recommendation on a task page.
• Presenting a key insight or summarized information on a dashboard or hub page.
• Prompting a user with a suggested next step based on analyzed data.

When to Use Something Else

• Presenting critical system alerts that demand immediate, unavoidable user action.
• Displaying large datasets, complex charts, or detailed visualizations.
• Showing static, user-entered information that is not generated by AI.
• Requiring the user to navigate through a multi-step process or form.

Best Practices

• Use for surfacing timely, relevant information and actions directly within the user’s workflow.

• Use the title to provide context or indicate if the content came from Workday Assistant.

• Always show a legal disclaimer at the bottom to indicate AI-generated content.

• Include suggested prompts as an ingress to the assistant for follow-up questions related to the card’s content.

• Presenting critical system alerts that demand immediate, unavoidable user action.

• Displaying large datasets, complex charts, or detailed visualizations.

• Showing static, user-entered information that is not generated by AI.

• Avoid overwhelming the user with too much information or too many actions on a single card.

Product Examples

Search Top Results Card

This card highlights the most relevant search result in a distinct card format. It can display various forms of information, including direct links, AI-generated answers, brief snippets of personal information, and lists, providing a quick and comprehensive overview of the top match.