Response Actions

Joule / Components / Response Actions

Intro

Response actions allow users to perform various actions on the associated Joule response. These include invoking the feedback and explainability features.

Joule response actions in compact Joule panel (left) and expanded Joule panel (right)

Usage

Do

Provide response actions after every Joule-generated response.

Don't

Don’t show response actions for responses or notifications that are not generated by Joule.

  • Don’t remove the action icons, even if the corresponding action is unavailable. If a user attempts to interact with an unavailable action, an error state will be triggered. Keeping all icons visible helps establish a consistent mental model of each feature.
  • Don’t change the style or placement of the response action icon buttons. They are intentionally designed and positioned in a specific order.

Anatomy

Action Buttons

The action buttons are located within the response action bar of the associated Joule-generated response.

A. “Information” Icon Button
Used to view more information about a Joule response.

B. “Thumbs Up” Icon Button
Used for submitting positive feedback for a Joule response.

C. “Thumbs Down” Icon Button
Used for submitting negative feedback for a Joule response.

D. “Sources” Button
Used to view source information about a Joule response.

Response actions anatomy

Behavior and Interaction

Trigger Action

The user can trigger an action from the response action bar by tapping on the associated button.

Triggering the response insights feature using the response actions

Accessibility

Roles and Labels

The subcomponents include SAP Fiori icon buttons. The icons follow commonly used naming conventions from the UI kit, while the accessibility labels are added to provide more contextual information, enhancing the user experience for users that rely on screen readers when interacting with Joule.

A. “Information” Icon Button
Role: Button
Label: View sources

B. “Thumbs Up” Icon Button
Role: Button
Label: Like this response

C. “Thumbs Down” Icon Button
Role: Button
Label: Dislike this response

D. “Sources” Button
Role: Button
Label: Sources

Accessibility roles and labels for response actions

Resources

Joule for iOS: Response Actions

Joule Web: Response Actions

Related Components/Patterns: Buttons, Feedback, Transparency & Explainability