Overview
The onboarding screen appears the first time the user interacts with the AI and it's 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 personalised 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
Anatomy
Recommended
- Make sure that the instruction provides a product relevant and executable prompt example
- Make sure the screen can accommodate translated text that might be longer than the English version
- Provide choices that are clear and relevant to the prompt
- Display up to 5 quick replies
- Use clear and concise labels for quick actions
Not Recommended
- Don't show the Onboarding screen if the user already interacted with the AI, show the conversation instead
- Avoid using an introduction text that is too generic and doesn't provide a useful example for the prompt
- Avoid using a greeting text or introduction text that is too long (more than 3 lines)
- Avoid using a request type chat bubble for the introduction text, always use the response style (since the text is coming from the AI, not the user)
- Avoid displaying too many quick actions at once
- Avoid showing irrelevant actions
- Avoid using long button labels
See also:
Behaviour
The screen appears the first time the user interacts with the AI tool. The user can either choose from one of the context specific prompt suggestions provided by the AI or type a prompt in the AI Prompt. With both actions, a conversation will be started.
Horizontal Resizing
The onboarding content also has a maximum width (same as the input field in the footer) so it doesn't stretch completely when the AI container is maximized.
Maximum width
As the horizontal width of the screen grows, the chat bubble also switches from size small to medium to large.
Different Chat Bubble Sizes
See also:
Progressive Disclosure
Additionally, the content in the screen gets adjusted to adopt to a decrease in height. The less important elements are hidden at first until only the most essential content remains. How the AI container behaves at different breakpoints can be seen in the table below:
Compact Breakpoints
Responsiveness
The AI onboarding screen allows for touch interactions and supports both Compact (Desktop) and Cozy (Mobile) visual modes. In practice, the header buttons, the AI prompt and the quick reply bar switch to Touch Optimized sizes.
Compact and Cozy Layouts
Progressive Disclosure for Touch Devices
The same progressive disclosure principle applies for touch devices (tablet and mobile) but since some of the components are bigger for touch devices (the quick reply bar and the AI container header and footer) the breakpoints are defined differently.
Cozy Breakpoints