In-flow user input
Inline interactions that collect structured input or allow users to review and modify agent-generated output within a generative AI chat.
Key UX concepts
The right information at the right time
Only present an interaction when the agent understands the user's intent and needs something specific from the user to proceed. Don't front-load interactions that could be deferred or resolved automatically.
Explain why input is needed
Help users understand the value in providing additional information. Highlight how their input enables the agent to generate better output or execute actions correctly, and the expected outcome.
Match input mechanism to information type
Display input methods that complement the type of information to be collected. Questions with a finite set of answers, such as selecting resource IDs or timestamps, should use a succinct form. This reduces errors and improves data quality.
Common use cases
Agent needs multiple inputs to execute an action
An inline form collects the required values directly in the conversation. For example, agent is helping create a resource and progressively displays forms inline based on what information is needed. The steps are synchronous; the output of the previous step, determines the next. Forms appear sequentially and may have agent responses between each step. Completed steps show a summarized read only view.
Generative AI assistant
Agent needs input as part of a multi-step process
Steps are independent and the agent can process them without waiting for previous results. Forms appear as individual collapsible cards within the conversation. Each step resolves on its own and doesn't block subsequent steps, similar to asynchronous creation.
Generative AI assistant
Editing values inline
An inline edit within the response allows the user to review and optionally modify the value the agent has created.
Generative AI assistant
General guidelines
Do
- Limit to 5 or fewer input fields per form to keep cognitive load low.
- When a value in the response is editable inline, display an edit icon button next to it so users can identify it as modifiable.
- For interaction with a single form, disable inputs and show a success indicator after submission.
- When possible, pre-fill fields with values inferred from context to reduce user effort.
Don't
- Don't use embedded flows to clarify user intent. Inline form input collects values to execute an action. If you need to clarify user intent, use follow-up questions instead.
- Don't include optional fields. Only ask for what's required to proceed.
Writing guidelines
General writing guidelines
Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.
Use end punctuation, except in headers and buttons. Don’t use exclamation points.
Use present-tense verbs and active voice.
Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.
Avoid directional language.
For example: use previous not above, use following not below.
Use device-independent language.
For example: use choose or select not click.
Component-specific guidelines
Card title
Be specific to the resource or action. Avoid generic labels like Information required or Configuration needed.
Accessibility guidelines
General accessibility guidelines
Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.
Make sure to define ARIA labels aligned with the language context of your application.
Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.
Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.