Transparency and Explainability

Joule / Patterns / Transparency and Explainability

Intro

The transparency and explainability feature ensures clarity about Joule’s AI-generated responses. By providing source information, users can follow up, learn more, and/or validate the accuracy of the generated information.

Joule source information view in compact Joule panel (left) and regular Joule panel (right)

Usage

Do

Provide the transparency and explainability feature for every Joule-generated response.

Don't

Don’t use the transparency and explainability feature for responses or notifications that are not generated by Joule.

Don’t change the style or placement of the information icon button. It is intentionally styled and placed alongside other response-related actions.

Anatomy

Information Icon Button

The information icon button is placed inside the response action bar of the associated Joule-generated response.

A. Information Icon Button

Used to view more information about a Joule response.

Information icon button anatomy

Source Information View

The source information view consists of a modal bottom sheet with the following component features.

A. Drag Handle

Used to collapse the bottom sheet.

B. App Bar

Displays the “Close” icon button and bottom sheet title.

C. Source List

Display a list of sources.

D. Actionable Source

Provides a source title, description, and an “External Link” icon button that the user can tap to open a link.

E. Read-Only Source

Provides a source title and description.

Source information view anatomy

Behavior and Interaction

View Source Information

The user can view source information by either:

  • Tapping on the “Information” icon button
  • Tapping the citation numbers that appear within the Joule response text message when there are actionable sources attached

Methods for viewing source information for a Joule-generated response

To open a source link, the user can tap the “External Link” icon button in an actionable source. This opens the link in the device's default app.

Opening a URL link

Variations

Response Types

The variant of source shown depends on the type of response content contained within a Joule-generated response. These response types explain to the user how a response was created in the backend.

Read-Only Source

There are four response types that appear as read-only sources. These response types are not interactive.

Small Talk

Small Talk are responses that the LLM generates itself and are not grounded in SAP knowledge.

Example Joule response: “Hi [User]”

Both source title and description for this type are predefined and not dynamic.

Capability-Based

A capability-based scenario is a specific functionality such as "creating a purchase order" or "checking the vacation balance" that allows the users to achieve a business goal. This content is implemented and delivered by SAP.

Example Joule response: “Here is your spot award [+ object card]”

The source title is dynamic and changes based on the use case, but the description remains ‘SAP AI Joule use case’.

Extensibility

An extensibility scenario is a capability-based scenario that a customer implemented themselves.

Example Joule response: “Here is your spot award [+object card]”

Both source title and description for this type are predefined and not dynamic.

External

External content comes from sources such as Microsoft Copilot or other digital assistants.

Both source title and description for this type are dynamic based on the use case.

Actionable Source

There is only one response type that appears as an actionable source. This response type is interactive.

Information Retrieval

Informational retrieval allows the user to get answers to questions that are found in the SAP Help Portal or documents that the customer uploaded, such as HR or travel policies, outside of the Joule interface. It shows up as a citation in the conversation.

Example Joule response: “A Spot Award in SAP SuccessFactors (SFSF) is a one-time recognition based on a specific achievement or special contribution [1].”

Joule response types from top to bottom: Small Talk, capability-based, extensibility, external, information retrieval

Adaptive Design

The source information view always fills the width of the Joule panel, while the bottom sheet adjusts its height to fit the content.

Joule source information view in compact width and height (left) and medium width and compact height (right)

Resources

Joule for iOS: Transparency & Explainability

Joule for Web: Joule Web UI Kit Source Panel

Related Components/Patterns: Text Messages, Response Actions