Outputs and Displays

Overview

Outputs and Displays define how AI-generated information, content, and guidance are presented to the user. It allows us to visualize AI responses in a clear, understandable, and contextually appropriate manner. From structured cards in a conversational UI to interactive overlays that guide users through a process, these variants ensure that AI-driven content is both useful and easily consumable.

Usage Guidance

When To Use This Pattern

• To display responses from a conversational AI, including text, data, tables, lists, and action buttons.
• When presenting AI-recommended values for form fields in a way that allows users to easily review, edit, and confirm them.
• To provide a clear visual indicator of which specific UI fields have been populated with AI-suggested data.
• For delivering step-by-step instructional guidance to help users learn a new process or complete a complex task.
• To visually connect instructional guidance in an AI panel to the specific UI elements on the main page that require user attention.

When To Use Something Else

• For displaying large, interactive dashboards or complex visualizations that are not part of a conversational response.
• If a process should be fully automated without requiring user review and confirmation of the AI-generated data.
• When indicating validation errors or other field statuses not related to AI-driven autofill.
• For presenting static help documentation that is not interactive or process-oriented.

Variants

Autofill

Autofill is an interactive pattern where the Workday Assistant panel presents AI-recommended values for corresponding fields on the main page. It is designed to streamline data entry by showing what the system suggests, providing rationale, and allowing users to review, edit, and confirm the suggestions before they are applied. This ensures user control and transparency in AI-assisted tasks.

Anatomy

1. Loading Response Card: A temporary Response Card type used to indicate that the assistant is actively processing the request and generating autofilled details
2. Loading Animation: Leverages the Canvas Skeleton Loader to show suggestions populating corresponding input fields.
3. Autofill Response Card: Prompts the user to review values autofilled by Workday Assistant. Expandable containers allow the user to see how Assistant generated that recommendation.
4. Confirmation Prompts: Leverages Suggested Prompt component. Prompts the user to review and accept Assistant’s suggestions, or fix them. Ensures accuracy and reinforces that the user is in control before an action is taken.

Usage Guidance

When To Use

• Use this pattern for forms with multiple fields where AI can confidently predict and provide a suggestion for a majority of the entries.
• Use to facilitate user review, modification, and confirmation of AI-driven autofill suggestions via the Autofill Response Card before data is submitted.

When To Use Something Else

• The data being filled is not AI-generated or suggested.
• The process should be fully automated with no requirement for user review or intervention.

Best Practices

• Do clearly indicate which fields were autofilled. Use the Skeleton Loader and a distinct visual treatment—like background color/highlight—to differentiate AI-generated content from user-entered content.

• Clearly present the suggested values in the panel, along with the source or reasoning for the suggestion.

• Always allow users to edit or override AI’s suggestions.

• Ensure that any edits made by the user directly on the page are reflected in the Conversation Panel. (Edited Badge)

• Provide distinct confirmation prompts for the user to Accept Suggestions or Fix Suggestions. This ensures accuracy and reinforces that the user is in control before an action is taken.

• Do explain the source of the data, if possible. The Autofill Response Card has built-in explainability to build trust and provide context. They can also click on Sources to easily review the original documents for full transparency.

• Don’t engage autofill without the user’s consent. The user should always have the choice on whether or not to engage with the automate capability, and as such, ingresses that enact the autofill capability need to be explicit.

• Don’t silently fill the form. The user must always be made aware that an action has been performed on their behalf. Surprising the user erodes trust.

• Don’t automatically submit the form. This is the most critical rule. The user must always be the one to perform the final submission action after reviewing.

• Don’t lock autofilled fields or make them difficult to edit. The AI’s suggestions are a starting point, not a final answer. The user must have ultimate control.

• Don’t autofill highly sensitive information (like passwords or security answers) unless you are operating in an extremely secure and explicitly approved context.

Product Examples

Field Highlights (for Autofill)

Field Highlights are a visual indicator applied directly to input fields and form elements on a page. Their purpose is to clearly show a user which specific fields contain data that has been suggested or pre-filled by AI. This pattern works in tandem with the Autofill pattern, allowing for quick visual association between the suggestions and their corresponding fields. This visual treatment is cleared once the user confirms or clears autofilled suggestions.

Anatomy

1. Target Field: An input field, text area, or other form element on the main page that receives an AI-generated value.
2. Highlight: The specific visual treatment applied to the target field to distinguish it from other fields. This is often a colored border or a subtle background glow that indicates an AI suggestion is present.

Usage Guidance

When To Use

• To clearly distinguish between values suggested or pre-filled by AI from those manually input by the user.

When To Use Something Else

• When the values in input fields were not suggested by AI.
• Don’t use this highlight for errors or alerts, which have their own visual treatment (highlight and text-based explanation).

Best Practices

• Do apply highlights consistently to all fields that receive an AI suggestion.

• Ensure the highlight style is noticeable enough for quick scanning but does not obstruct the field’s content.

• Remove the highlight once the user has confirmed the autofill action to return the field to its standard state.

• Use this in conjunction with the Autofill Response Card pattern to review and confirm autofilled details.

Product Examples

Walkthrough

The Walkthrough pattern delivers AI-guided, step-by-step instructions through the Conversation Panel. Each step provides a concise explanation and corresponds to a highlighted element on the main page, directing the user’s focus. As the user navigates through the guidance, the highlight shifts to the next relevant element, making it an effective tool for learning new processes or completing complex tasks without making them leave their current workflow.

Key Elements and Interactions

1. Walkthrough Badges: When the user clicks on this indicator, the walkthrough jumps to this step- the element becomes highlighted and corresponding walkthrough information available for that element appears in the Conversation Panel. These badges allow the user to navigate between guidance in any order.
2. Highlighted Element (Active State): Indicates active step of the walkthrough. Walkthrough Badge component’s active state (caret) points to the field or element the step in the walkthrough is tied to.
3. Walkthrough Response Card: Displays element-level guidance and provides actionable suggestions, if available, for that field/element.
4. Walkthrough Card Navigation: Allows the user to navigate linearly through guidance.
5. Suggested Pills (for Edit Tasks): Allows the user to choose from values suggested by Workday Assistant. Selections made in the Panel will populate the corresponding input field.

Usage Guidance

When To Use

• To deliver step-by-step guidance that corresponds to specific elements on the main page. The highlighting feature is perfect for helping users locate and understand the purpose of different controls on a busy or unfamiliar page.
• To help users understand pages that may be new or unfamiliar to them.
• To guide users through complex or infrequent tasks. Walkthroughs provide step-by-step guidance directly within their flow of work.

When To Use Something Else

• Presenting help that is at the page-level rather than tied to specific elements on the page.
• For simple, single-step actions. Using a walkthrough for a simple action (like clicking a single button) would be overkill. A tooltip or inline hint is more appropriate.

Best Practices

• Reserve this pattern for multi-step processes where users, especially those new to the task, would benefit from direct guidance.

• Do keep walkthrough text for each step clear, concise, and directly related to the highlighted page element.

• Do use a clear visual highlight to draw the user’s focus to the specific UI element associated with each step.

• Do ensure the highlight moves to the next relevant element as the user progresses through the steps.

• Do provide an easy way for users to navigate both forward and backward through the walkthrough steps.

• Provide a clear way for the user to exit the walkthrough at any point.

• Don’t use a walkthrough for simple, single-step tasks where a tooltip or inline hint would be sufficient.

• Don’t overwhelm the user with long paragraphs of text; keep instructions for each step brief.

• Don’t prevent the user from interacting with the highlighted element; the goal is to guide them to use it.

• Don’t auto-advance through the steps of a walkthrough on behalf of the user. Allow the user to control the pace of the guidance.

Product Examples

Walkthrough Badge

A Walkthrough Badge is an interactive visual indicator used on the main interface to draw a user’s attention to specific UI elements on a page. These badges are directly referenced by the AI Walkthrough capability in the Conversation Panel. Their primary purpose is to visually connect the guidance to the relevant parts of the application UI, and allow the user to navigate between guidance in any order.

Anatomy

1. Container: Shape that contains numeric count. Shape has a fixed height and dynamic width.
2. Count: Dynamic value, centered inside Badge container.

Variations

Usage Guidance

When To Use

• As visual indicators on the main interface to draw attention to specific UI elements, sections, or regions.
• Use in tandem with the Walkthrough Response Card, which provides step-by-step guidance in the Conversation panel. Walkthrough Badges visually connect AI guidance to the element it pertains to on the page.
• To allow users to navigate between guidance in any order during a guided walkthrough.

When To Use Something Else

• Use Field Highlights to distinguish values that have been autofilled by AI.
• To provide a static informational tip that isn’t part of a sequential, multi-step process.
• For guidance on the page level rather than on a specific element.

Best Practices

• Ensure the badge is visible and clearly associated with a specific, individual UI element.

• The badge should move in a logical sequence from one element to the next as the user advances the walkthrough steps in the Conversation Panel.

• When the walkthrough is complete or exited, all badges should be removed from the screen.

Examples

• Human Capital Management: During a new hire’s first onboarding session, a Walkthrough Badge with the number “1” appears over the “My Profile” link. After they click it and the Assistant provides context, the “1” badge disappears, and a “2” badge appears on the “Complete Your Paperwork” task in their inbox. This sequential highlighting guides them through their initial setup tasks.
• Financial Management: A user is learning to create a budget report. An AI Walkthrough starts, and a Walkthrough Badge highlights the “Report Name” field. Once the user clicks “Next” in the Assistant panel, the badge moves to the “Date Range” selector. The badge continues to move to different configuration options on the page as the user progresses through the steps in the panel, visually connecting the instruction to the action.