<a href="/wiki/display/CPDesign/AI+Onboarding">AI Onboarding</a>

Created by Bernath, Anna, last modified by Milanov, Kalin on Feb 14, 2024

Component Owner: BTP

Designer Responsible: Milanov, Kalin

Specification Status: IN REVIEW

Overview

The onboarding screen appears the first time the user interacts with the AI, and its purpose is to explain to the user how the product works and encourage them to try it out by writing their first prompt. It includes the product logo, a personalized greeting (that further reinforces the notion of intelligence), onboarding messages explaining how to interact with the AI, and the quick reply bar that contains some product-specific prompt suggestions.

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-onboarding/media1_19fc72391e73ae17e28ee6e0eecb1aa9f65290ee2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_19fc72391e73ae17e28ee6e0eecb1aa9f65290ee2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_19fc72391e73ae17e28ee6e0eecb1aa9f65290ee2.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media%5C_19fc72391e73ae17e28ee6e0eecb1aa9f65290ee2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media_19fc72391e73ae17e28ee6e0eecb1aa9f65290ee2.png?width=750&format=png&optimize=medium</a>" width="768" height="1592"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-onboarding/media1_157c49a5ac4e531b35dcf23c6f7bd48de23d55e39.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_157c49a5ac4e531b35dcf23c6f7bd48de23d55e39.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_157c49a5ac4e531b35dcf23c6f7bd48de23d55e39.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media%5C_157c49a5ac4e531b35dcf23c6f7bd48de23d55e39.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media_157c49a5ac4e531b35dcf23c6f7bd48de23d55e39.png?width=750&format=png&optimize=medium</a>" width="768" height="1592"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-onboarding/media1_14826a1be82f98cdb4c044b0343d004cfbd04dea7.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_14826a1be82f98cdb4c044b0343d004cfbd04dea7.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_14826a1be82f98cdb4c044b0343d004cfbd04dea7.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media%5C_14826a1be82f98cdb4c044b0343d004cfbd04dea7.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media_14826a1be82f98cdb4c044b0343d004cfbd04dea7.png?width=750&format=png&optimize=medium</a>" width="768" height="1592"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-onboarding/media1_128c10392c0c09c7028caaa222f33619d6cab735d.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_128c10392c0c09c7028caaa222f33619d6cab735d.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_128c10392c0c09c7028caaa222f33619d6cab735d.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media%5C_128c10392c0c09c7028caaa222f33619d6cab735d.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-onboarding/media_128c10392c0c09c7028caaa222f33619d6cab735d.png?width=750&format=png&optimize=medium</a>" width="769" height="1592"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div>A</div> <div>AI Container Header</div> <div>The header of the AI container. This header incorporates specific branding. For full specifications, see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FAI%2BContainer">AI Container</a>.</div> </div> <div> <div>B</div> <div>Onboarding Content</div> <div>Gradient background in the Joule brand colors stretching from top to bottom of the onboarding screen.</div> </div> <div> <div>C</div> <div>Conversation Area</div> <div>A container that hosts quick replies and transforms into the AI Container content area.</div> </div> <div> <div>D</div> <div>AI Container Footer</div> <div>Empty container/aggregation in which the AI prompt is placed. For full specifications, see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FAI%2BContainer">AI Container</a>.</div> </div> <div> <div>E</div> <div>Joule Logo Area</div> <div>The animated Joule logo.</div> </div> <div> <div>F</div> <div>Greeting Text Area</div> <div>Personalized greetings to welcome the user and reinforce the notion of intelligence.</div> </div> <div> <div>G</div> <div>Quick Reply Bar</div> <div>Prompt suggestions. For full specifications, see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FAI%2BQuick%2BReply">AI Quick Reply</a>.</div> </div>

Desktop Specification (Compact Mode)

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>B</div> <div>Onboarding Content</div> <div> <p>display: flex;<br>flex-direction: column;<br>align-items: center;<br>flex: 1 0 0;<br>align-self: stretch;</p> <p><strong>AI Gradient</strong><br>background-image: linear-gradient(var(–sapAIGradientBeginColor) var(--sapAIGradientEndColor));</p> </div> </div> <div> <div>C</div> <div>Conversation Area</div> <div> <p>display: flex;<br>padding: 0.5rem;<br>flex-direction: column;<br>justify-content: flex-end;<br>align-items: center;<br>gap: 0.5rem;<br>flex: 1 0 0;<br>align-self: stretch;</p> <p>background: var(–sapGroup_ContentBackground);</p> <p><strong>Vertical Height - 360px</strong><br>background: none;</p> </div> </div> <div> <div>E</div> <div>Joule Logo Area</div> <div> <p>display: flex;<br>justify-content: center;<br>align-items: center;<br>gap: 0.625rem;<br>align-self: stretch;</p> <p><strong>Vertical Height - 640px</strong><br>padding: 4rem 0rem;</p> <p><strong>Vertical Height - 5600px</strong><br>padding: 3rem 0rem;</p> <p><strong>Vertical Height - 480px</strong><br>padding: 2rem 0rem;</p> <p><strong>Vertical Height - 360px</strong><br>display: none;</p> </div> </div> <div> <div>E1</div> <div>Joule Icon</div> <div> <p>width: 5rem;<br>height: 5rem;</p> <p>color: var(--sapAIHeader_TextColor);</p> </div> </div> <div> <div>F</div> <div>Greeting Text Area</div> <div> <p>display: flex;<br>max-width: 50rem;<br>padding: 0rem 0.5rem 1rem 0.5rem;<br>flex-direction: column;<br>justify-content: center;<br>align-items: flex-start;<br>gap: 1.5rem;<br>align-self: stretch;</p> <p>border-bottom: var(--sapContent_Transparent_Border);</p> <p><strong>Vertical Height - 640px</strong><br>max 4 lines of text</p> <p><strong>Vertical Height - 5600px</strong><br>max 2 lines of text</p> <p><strong>Vertical Height - 480px</strong><br>max 2 lines of text</p> <p><strong>Vertical Height - 360px</strong><br>max 2 lines of text</p> </div> </div> <div> <div>F1</div> <div>Greeting Text</div> <div>font-size: var(--sapFontLargeSize);color: var(--sapAIHeader_TextColor);</div> </div> <div> <div>F2</div> <div>Instruction Text</div> <div>font-size: var(--sapFontHeader2Size);color: var(--sapAIHeader_TextColor);</div> </div>

Mobile Specification (Cozy Mode)

Vertical Responsiveness

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>E</div> <div>Joule Logo Area</div> <div> <p><strong>Vertical Height - 720px</strong><br>padding: 4rem 0rem;</p> <p><strong>Vertical Height - 640px</strong><br>padding: 3rem 0rem;</p> <p><strong>Vertical Height - 5600px</strong><br>padding: 2rem 0rem;</p> <p><strong>Vertical Height - 480px</strong><br>padding: 1rem 0rem;</p> <p><strong>Vertical Height - 360px</strong><br>display: none;</p> </div> </div> <div> <div>F</div> <div>Greeting Text Area</div> <div> <p><strong>Vertical Height - 720px</strong><br>max 4 lines of text</p> <p><strong>Vertical Height - 640px</strong><br>max 2 lines of text</p> <p><strong>Vertical Height - 5600px</strong><br>max 2 lines of text</p> <p><strong>Vertical Height - 480px</strong><br>max 2 lines of text</p> <p><strong>Vertical Height - 360px</strong><br>max 2 lines of text</p> </div> </div>

Keyboard Handling

The keyboard handling for the AI Onboarding consists of navigating through several text components. Occasionally there might be an AI Quick Reply bar present. Refer to Fiori Keyboard Interaction for full specifications about each of these components.

Text - p.270
See AI Quick Reply for full specifications on that component.

Keyboard Interaction

TAB
- On enter, move the focus to the first element in the component's tab chain
- On leave, move the focus to the next element after the AI Onboarding
SHIF+TAB
- On enter, move the focus to the last element of the component's tab chain
- On leave, move the focus to the next element before the AI Onboarding
UP - moves focus to the previous element of the component's tab chain. Do not loop the interaction.
DOWN - moves focus to the next element of the component's tab chain. Do not loop the interaction.

The screen reader for the AI Onboarding is based on the screen reader of the Text. Refer to Fiori Screen Reader Specification for full specifications.

Text - p.75

API Requirements

Provide API to change the invisible description of the Branding Icon