We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through the Design System Jira (select “Business AI” in the Stakeholder field), and check our guided prompts Jira ticket and AI patterns roadmap for the latest updates.
Current version 1 has been reviewed by the SAP design system team and the following activities are in progress: accessibility review of specifications and SAPUI5 and SAP Fiori technical planning.
Intro
Guided prompts provide structured input-Uls to guide the user in instructing the generative Al model on the desired output. They are helpful when users want to specify certain attributes, styles, or parameters for the generated content.
Guided prompts offer control and precision in generating output that aligns with user preferences. All the provided information is combined into a processable prompt in the back-end, so users only need to select the desired option, instead of verbalizing them in a custom prompt.
For more information on all types of prompt patterns, see Designing Effective AI Prompts.
Guided prompt in a popover
Usage
Do
- Use when users are known to use the generative AI feature for a limited set of use cases or queries.
- Use when the system can assist with a specific and limited number of actions.
- Use when users have little to no experience with writing prompts.
- Use when users need to customize and personalize inputs for a more flexible experience.
- Use when you need to ensure or maintain a constant and predictable outcome.
- Use when users need more flexibility in directing the output of the AI model.
Don't
- Don’t use when users lack experience in the subject matter.
- Don’t use when repetitive or common actions are involved in a workflow (consider quick prompts instead).
- Don’t use when users prefer or need high flexibility and freedom to define the desired outcome (use custom prompts instead).
- Don’t use when the use case requires users to perform only one or a few specific actions (use quick prompts instead).
- Don’t use when the user’s common intents and/or desired outcomes can’t be predicted or defined (use custom prompts instead).
Anatomy
Guided Prompt in a Popover
-
Container:
- A guided prompt is always based on a container that provides the structure for the input content.
- A container can be any of the existing containers that already exist in the Design System, some examples are: Popover, Dialog, Side Content, Card.
- The container to choose depends on the use case of the application.
- The general guidelines specified for this container must be followed in addition to the AI-specific usage guidance.
-
Input Components:
- The content section of the container consists of a selection of input controls. The structure and visual design depends on what the container offers.
- The input controls should be chosen based on the use case, however the aim should be for a diverse set of input controls and avoid to use drop-down menus for all options.
- All existing controls can be chosen in the Design System. Visual design, behavior, and interaction will follow the respective guidelines for each of them.
-
Actions:
- The action for the guided prompt is defined depending on the use case and in alignment with User Assistance.
- Placement of the action depends on the general guideline for the chosen container.
- Design of the button follows the guidelines for AI Button.
Types
Within a Popover
When to use:
- The Guided prompt is related to a specific input type e.g. text input.
- The options are limited, quick, and influence the related content directly.
When not to use:
- The actions in the container are complex.
- The popover can’t be shown directly at the related content.
Guided Prompt in a Popover
Within a Dialog
Great for usage of more complex guided prompt experiences. Avoid stacking dialog over dialog.
When to use:
- The Guided prompt use case is more complex.
- There is limited horizontal space.
- There is already a very high information density on the screen.
When not to use:
- The dialog has only very few input options, use popover instead.
- The dialog is too disruptive for your use case, consider Dynamic Side Content or Popover instead.
Guided prompt in a Dialog with expanded text section
Within a Dynamic Side Content
Great for more complex guided prompt use cases without losing the connection to the main content.
When to use:
- Complex use cases that require multiple prompt parameters
- You want to use the available screen space efficiently
When not to use:
- You have a very small amount of input controls (use quick prompts instead)
- The information density on the screen is already very high (use dialog instead)
Guided Prompt within a Dynamic Side Content
Behavior and Interaction
Initiating Content Generation
Clicking on the AI button opens the AI menu containing the action (Eg. “Improve Text”) that initiates the Guided Prompt.
1. AI menu button
2. AI menu containing the action that triggers guided prompt
3. Action that triggers the guided prompt
AI Menu with Quick and Guided Prompts
Fine-Tuning
Guided prompt container is triggered, which offers components that can be used to fine-tune the generated content.
4. Guided prompt container
5. Components to fine-tune generated content
Dialog opens with Guided Prompt elements
Generating
6. Finalizing action that applies the parameters set
AI Button used to apply guided prompts
After Generation
7. AI-enhanced content appears on section from where guided prompt was triggered
Previous content replaced by result of guided prompt
Handling Errors
If errors are encountered during or as a result of the prompt application, consider using current guidelines for handling messages.
Recommendations
Example Scenario: Text Composition
One of the most common scenarios where guided prompts can be leveraged is text composition. Since the Guided Prompt pattern reuses existing components, once the choice of components has been made, they follow the guidelines specific to the chosen component.
The following are some examples of Prompt parameters that could be used in the context of text composition.
Language
Select Control used to provide Language options
Tone of Voice
Segmented buttons used to show Tone of Voice options
Toggle Buttons are used here to enable users to choose a mixture of Tone of Voice options
Length
RangeSlider being used to set length of generated output
Application-Specific Parameters
Select Control being used to choose a Type of Response
Terminology
Adhere to the default labels provided below for text generation scenarios if possible. We strongly recommend maintaining consistency and user familiarity by following the suggested wording. Only make changes to the default text if absolutely necessary for your specific use case. If you find yourself in this situation, please reach out to the AI Experience team for further guidance.
Standard AI action labels for AI text generation and transformation
Best Practices
For actions not covered above, apply the following guidelines
- Use a verb in the imperative
- Note: The grammatical form for actions can differ for other languages. For example, German action labels use the infinitive (Speichern, Abbrechen, Bearbeiten).
- Keep AI action labels as short as possible while prioritizing clarity for users.
- Use the same AI action labels consistently.
Prompt Engineering
Responsible AI
To use guided prompts responsibly, first identify users’ needs and determine which tasks require the flexibility guided prompts provide when generating content.
Be transparent about the use of AI
Use guided prompts transparently, clearly indicating when users are engaging with AI features. Adhere to the provided pattern guideline, incorporating recommended components such as the AI icon and AI button, and use consistent terminology. Avoid any misleading language that may obscure the involvement of AI in the process.
Strive for fairness and clarity
Create guided prompts that are inclusive and representative of diverse user preferences and perspectives. However, avoid giving more parameters than needed to reduce cognitive load and clutter in the UI. Base decisions on thorough user research.
Avoid prompt-infused bias
When employing guided prompts, your product team must carefully craft instructions for the AI system to prevent unintentional bias in the results. Poor prompt design, similar to biased training data, can perpetuate harm.