Outputs and Displays - Response Cards

Overview

Response Cards are containers that display AI responses in the Conversation Panel. They are designed to be highly versatile and can support:

• Simple text-based answers.
• Rich data, such as tables and visualizations.
• Interactive elements like buttons and links.
• Custom layouts for Assistant capabilities like guided walkthroughs and reviewing autofilled details

Usage Guidance

• Select the Response Card variant whose content most clearly and effectively presents the AI’s response. See Variants for specific usage guidance for each variant.
• Ensure the response is always directly relevant to the user’s prompt.

When To Use

• For displaying AI responses within the Workday Assistant.
• When a response needs to include text, data, links, and action buttons.
• Presenting information as an attachment.
• Displaying bulleted or numbered lists.
• Showing data visualizations as part of a response.
• Communicating errors to the user.
• Indicating a loading state while fetching a response.
• Organizing information into tables.
• Initiating a guided walkthrough for a task.
• Allowing the user a way to see what was autofilled on the page and the reasoning behind it.

When To Use Something Else

• To present information outside of the conversational interface when the user has not initiated the interaction by typing a question.
• To display highly complex, interactive dashboards that require a full-page view.
• Communicating system-level alerts not tied to a specific user query.

Best Practices

• Keep the information within a single card concise and focused on a specific response.

• Use formatting like lists and bolding to improve readability and make responses easy to scan.

• Provide relevant action buttons when applicable.

• To build trust, make sure users can easily understand how an answer was generated and what sources were used.

• Don’t present information as a dense, unformatted wall of text. This makes it difficult for users to find what they need.

• Don’t use ambiguous or technical jargon without providing a clear explanation.

Variants

Welcome

Used to display an initial greeting, introduction, or suggestions when a user first opens the Conversation Panel.

Anatomy

1. Container: Houses Workday response.
2. Welcome Heading: Workday Assistant introduces itself.
3. Body Text: Workday Assistant describes its capabilities.

Usage Guidance

When To Use

• Use as the initial message when a user opens the Conversation Panel for the first time in a session.
• Use to provide a brief, high-level introduction to the assistant.
• Use to summarize the assistant’s primary capabilities (e.g., guiding through a page, autofilling fields, answering questions) to set user expectations.

When To Use Something Else

• Do not use after a conversation has already begun, as it would be disruptive.
• Do not use as a response to a direct user question. The AI should provide a direct answer instead.

Best Practices

• Do concisely summarize the assistant’s key functions to help users understand what it can do.

• Do clearly state the assistant’s name or identity (e.g., “Hi! I’m Workday Assistant.”).

• Don’t overload the card with a long list of every possible feature. Stick to a high-level summary.

• Don’t use technical jargon to describe the assistant’s capabilities.

Text

The most fundamental card type, used for displaying simple or formatted text-based responses.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant.
3. Heading: When the response is lengthy, use a heading.
4. Text-Based Response: Keywords emphasized in bold font-weight.
5. Expandable (Conditional): Allows the user to view sources or see a detailed breakdown used to derive Workday Assistant’s response. Links will open in a new tab. Table and List views available.
6. Action Button (Conditional): Secondary Button used for actions.
7. Suggested Pills (Conditional): Values suggested by Workday Assistant based on historical data, user type, or other personalized data. Selections made in the Side Panel will populate the corresponding field.

Usage Guidance

When To Use

• To provide a direct, text-based answer to a user’s question.
• To provide suggested values in response to a user’s query.
• To summarize information or provide a text-based comparison.

When To Use Something Else

• Consider using a Walkthrough Response Card to guide users through tasks that require complex user input, like filling out a long form. The Text Response Card is primarily for displaying information, not for heavy data entry.
• Use an Autofill Response Card to facilitate user review, modification, and confirmation of AI-driven autofill suggestions via the Autofill Response Card before data is submitted
• Use a Table Response Card to display complex data.
• Use a Data Visualization Response Card when the primary information is better conveyed visually, such as through a chart or graph.

Best Practices

• Do keep the text clear, scannable, and concise

• Ensure there is a clear visual hierarchy, with the Header coming first, followed by primary text, followed by any links, Buttons, or Pills.

• Do provide links to “Sources” when presenting factual data or information that may require validation.

• Do provide links to “Sources” when presenting factual data or information that may require validation.

• Include relevant next steps, such as a Secondary Action Button or a list of Suggested Prompts, whenever possible.

• Offer a way to view a “Detailed Breakdown” when summarizing complex information. This allows the user to dive deeper into the details.

• Don’t present information as a dense, unformatted wall of text; keep the content scannable and easy to digest.

• Don’t use ambiguous or technical jargon without providing a clear explanation.

Attachments

Used for presenting and allowing users to interact with files, such as documents or images, within the conversation.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant
3. Text-Based Response: Keywords emphasized in bold font-weight.
4. Attachment: Interactive CTA, allows the user to initiate an action, such as downloading an attachment or initiating a task, such as a Microtransaction.

Usage Guidance

When To Use

• Use when the AI needs to provide the user with a downloadable document, such as a form or a report.

When To Use Something Else

• Use a Button for linking to web pages or other parts of the application.

Best Practices

• Do clearly label the attachment with its full, descriptive name (e.g., “Lost/Missing Receipt Form”).

• Do include a clear download icon to indicate that the item is a downloadable file.

• Do provide brief, contextual text explaining what the attachment is for or what the user should do with it.

• Include a link to Sources where the original document is located.

• Don’t use ambiguous or shortened file names that could confuse the user.

• Don’t use this component for non-downloadable assets.

• Don’t provide an attachment without any context or instruction; the user should know why they are being given the file.

• Don’t make the clickable area for the download too small, especially for mobile users.

Loading

A temporary card type used to indicate that the assistant is actively processing a request or fetching information.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant
3. Text-Based Response (Optional): Keywords emphasized in bold font-weight.
4. Loading Sparkle: Indicator from Canvas Kit. Aids in showing the system is actively processing their request and generating a response.

Usage Guidance

When To Use

• Use to provide immediate feedback that the user’s request has been received and is being processed.

When To Use Something Else

• Avoid using it for instantaneous or very fast responses, as it will create an unnecessary visual flash.

Best Practices

• Do include a continuously moving animation to visually signal that the system is active.

• Do provide concise text explaining what the AI is currently doing (e.g., “Generating expense details…”) whenever possible.

• Do ensure the loading card is replaced by the final response card once the process is complete.

• Don’t use static text like “Loading…” without an animated indicator, as the user may think the interface is frozen.

• Don’t use overly technical jargon in the explanatory text.

• Don’t allow the card to get stuck in a loading state if an error occurs. Replace it with a clear error message.

• Don’t use a textless loading indicator if providing context about the process would help manage user expectations during a longer wait.

Errors

Used for communicating clearly and concisely to the user that a request could not be processed or understood.

Anatomy

1. Icon: Indicates error state.
2. Heading: Specifies the specific error
3. Body Text: Supplementary description of the error and instructional text, if applicable.
4. Read More Link (Conditional): Links out to Workday AI documentation hosted on Workday’s website.
5. Retry Button: Allows the user to try generating a response to Workday Assistant again when there’s an error or outage.

Usage Guidance

When To Use

• Use when the Assistant is unavailable or experiences a system failure.
• Use when a user’s prompt cannot be processed because it violates a safety policy, such as detecting harmful content.
• Use to inform the user that their request was received but could not be completed due to an unexpected issue.

When To Use Something Else

• Do not use when the AI simply doesn’t know the answer to a question. A standard text response explaining this is more appropriate.
• Do not use for simple clarifications. If the AI needs more information from the user, it should ask a clarifying question instead of showing an error.
• Do not use as a replacement for standard form validation (e.g., if a user enters a date incorrectly in a form field).

Best Practices

• Do provide a clear and concise title that summarizes the issue (e.g., “Harmful Content Detected” or “Workday Assistant Currently Unavailable”).

• Do briefly explain the problem in simple terms and suggest a next step for the user.

• Do offer a clear action when applicable, such as a “Retry” button.

• Don’t display technical error codes or jargon that the user won’t understand.

• Don’t use accusatory language. Keep the tone helpful and neutral (e.g., “Looks like we’re having some trouble…” is better than “You caused an error.”).

• Don’t leave the user at a dead end. Always provide a suggested next step, even if it’s just to try again later.

• Don’t make the error message ambiguous. The user should understand the nature of the problem, whether it’s a system issue or an issue with their input.

Autofill

Prompts the user to review values autofilled by Workday Assistant. Expandable containers allow the user to see how Assistant generated that recommendation.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant.
3. Text-Based Instruction: Workday Assistant instructs the user to check that all autofilled details are accurate.
4. Expandable Container (Collapsed): Collapsed by default. Shows the name of the field and the autofilled value.
5. Expandable Container (Expanded): Reveals reasoning behind what was autofilled as well as links to source documents used to populate the value.
6. Overflow: To cap the default max height of this Card, when there are more than 5 autofilled values, show the first 5 by default, then collapse the rest under a “Show More” CTA.

Usage Guidance

When To Use

• Use immediately after an AI has autofilled fields in a form or task to provide a detailed list of what was autofilled and why. Review the pattern documentation for Autofill for more details on the autofill pattern.
• Use to allow the user to review and verify the accuracy of the autofilled data before proceeding.

When To Use Something Else

• Do not use if the AI did not perform an autofill action.

Best Practices

• Do ensure the information in the card is a direct reflection of what was filled into the form fields.

• Do display the autofilled data as a clear list of text label-value pairs (e.g., “Expense Date: 03/14/2024”).

• Do include a “Show More” link to expand the list when there are too many fields to display at once.

• Don’t present the card without an explicit instruction for the user to “double-check” the details.

• Don’t assume the autofilled data is correct; the entire purpose of this card is to facilitate user review.

Walkthrough

Cards that initiate an interactive, step-by-step guided experience to help a user complete a task.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant.
3. Text-Based Instruction: Workday AI instructs the user that the following things require action or attention. This text does not change as the user navigated between field-level guidance.
4. Field Label: Place “Add” verb before the name of the field to make it more action-based. Label is bolded. Add a required asterisk if the field is required. Add a numeric badge to match corresponding field-level indicator on the task page if there are multiple fields which Workday AI has autofilled.
5. Field-Level Guidance: Instructional text, field definition, or other details that help the user make a selection.
6. Sources Expandable: Allows the user to view sources used to derive Workday AI’s response. Link will open in a new tab.
7. Suggestions (Conditional): Prompt Pills suggested by Workday AI based on historical data, user type, or other personalized data. Selections made in the Side Panel will populate the corresponding field.
8. Navigation Footer: Allows the user to navigate linearly between field-level guidance using Secondary Buttons.

Usage Guidance

When To Use

• Use to provide contextual, step-by-step help for understanding page or guidance in a workflow.
• Use to guide users through a multi-step process, especially for onboarding or a task they are unfamiliar with.

When To Use Something Else

• When the AI can intelligently pre-fill a significant portion of a form, provide an option for the user to initiate the autofill. This action should then display an Autofill Response Card for the user to review autofilled details and accept or fix the suggestions.

Best Practices

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

• Do include clear navigation controls that allow the user to move both forward and backward through the steps.

• Allow the user to exit the walkthrough at any time.

• Don’t use long paragraphs of text for instructions; keep the text brief and scannable.

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

Example

• Walkthrough Response: A user asks, “How do I submit a purchase order?” The assistant replies with a Response Card containing a brief description and an action button to “Start Walkthrough.” Clicking the button initiates an interactive, step-by-step guide that points to different elements on the screen to guide the user through the process.

Tables

Organizes structured data into a clear, embedded table.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by AI
3. Table: Table set against a bg fill
4. View in Popup: Icon in the Complex Table Preview that opens a Popup where the user can view a Table or Chart beside the Conversation Panel. Show a Tooltip on hover. The Popup can be resized and moved.
5. Expandable (Conditional): Allows the user to view sources or see a detailed breakdown used to derive Workday Assistant’s response. Links will open in a new tab. Table and List views available.
6. Feedback Thumbs: Interactive Buttons that allow users to provide feedback on the helpfulness and accuracy of an AI-generated response.

Usage Guidance

When To Use

• Use to display complex, structured data in a clear format of rows and columns.

When To Use Something Else

• Avoid it for unstructured, narrative information that doesn’t fit a row-and-column format.
• Avoid using it for a simple list or a single data point; a Text Response Card is more suitable.
• Do not use it to show trends or relationships in data; a Chart Response Card would be more effective.

Best Practices

• Do provide a clear title that summarizes the table’s contents.

• Do use clear and concise column headers.

• Allow the user to expand their Table.

• Do provide table-level actions that are commonly used, such as Export to Excel.

• Don’t make column headers ambiguous or overly long.

Product Examples

Data Visualizations

Provides support for various chart types to display data graphically within the conversation.

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by Workday Assistant
3. Table: Table set against a bg fill
4. View in Popup: Icon in the Complex Table Preview that opens a Popup where the user can view a Table or Chart beside the Conversation Panel. Show a Tooltip on hover. The Popup can be resized and moved.
5. Expandable (Conditional): Allows the user to view sources or see a detailed breakdown used to derive Workday Assistant’s response. Links will open in a new tab. Table and List views available.
6. Feedback Thumbs: Interactive Buttons that allow users to provide feedback on the helpfulness and accuracy of an AI-generated response.

Usage Guidance

When To Use

• Use when a user’s query is best answered with a graphical representation rather than just text or a table.
• Use to visualize data to reveal trends, comparisons, or patterns.

When To Use Something Else

• Avoid using it for a single data point that doesn’t require visualization; a Text Response Card is better.
• Do not use it for presenting precise, tabular data where the individual values are more important than the visual trend; a Table Response Card is more appropriate.
• Avoid it when a data set is too small to create a meaningful visualization.

Best Practices

• Do provide a text summary or key insight above the chart to contextualize the data.

• Do include a clear title for the chart.

• Do ensure all axes are clearly labeled.

• Allow the user to expand their Data Visualization.

• Don’t choose a chart type that is inappropriate for the data you are displaying (e.g., using a pie chart to show a trend over time).

• Don’t use colors that have poor contrast or are not accessible to colorblind users.

Example

• Data Visualization Response: A user asks Workday Assistant, “What is the breakdown of my team’s headcount by location?” The assistant returns a Response Card containing a simple bar chart that visually represents the number of employees in each city, allowing the user to understand the distribution at a glance.

Charts

Provides support for various chart types to display data graphically within the conversation.

Anatomy

1. Container: Houses Workday response.
2. Single Sparkle: Indicates the response was generated by AI
3. Chart: Chart set against a bg fill
4. View in Popup: Icon in the Complex Table Preview that opens a Popup where the user can view a Table or Chart beside the Conversation Panel. Show a Tooltip on hover. The Popup can be resized and moved.
5. Expandable (Conditional): Allows the user to view sources or see a detailed breakdown used to derive Workday Assistant’s response. Links will open in a new tab. Table and List views available.
6. Feedback Thumbs: Interactive Buttons that allow users to provide feedback on the helpfulness and accuracy of an AI-generated response.

Usage Guidance

When to Use

• Use when a user’s query is best answered with a graphical representation rather than just text or a table.
• Use to visualize data to reveal trends, comparisons, or patterns.

When to Use Something Else

• Avoid using it for a single data point that doesn’t require visualization; a Text Response Card is better.
• Do not use it for presenting precise, tabular data where the individual values are more important than the visual trend; a Table Response Card is more appropriate.
• Avoid it when a data set is too small to create a meaningful visualization.

Best Practices

• Do provide a text summary or key insight above the chart to contextualize the data.

• Do include a clear title for the chart.

• Do ensure all axes are clearly labeled.

• Allow the user to expand their Data Visualization.

• Don’t choose a chart type that is inappropriate for the data you are displaying (e.g., using a pie chart to show a trend over time).

• Don’t use colors that have poor contrast or are not accessible to colorblind users.

Product Examples