Side panel for AI powered copilot

[kellyjacobs417]

Background

Hi - I'm building UX for a copilot experience that requires a user to open up a chat window to interact with the copilot in Segment's functions flow.

Feedback

I'm using the AI chat kit patterns that are in development and I was wondering if there are any best practices I should be following for the chat window.

• Am I using the right width for the side panel?
• Should I consider having the chat side panel overtake the area with the tabs instead of opening next to it?
• Are there any other accessibility consideratios I should be making?

Stage of design

No response

Research

No response

Relevant links

Screenshots of existing experience

Latest explorations

Exploration with the panel overtaking the tab area

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Menu side bar - background effect (updated: 08/05/2022, similarity score: 86%)
• Messaging Insights <> Paste (updated: 06/06/2023, similarity score: 86%)
• Textarea in popover guidance (updated: 11/21/2023, similarity score: 85%)

[dosubot[bot]]

For the AI-powered copilot chat window design, considering best practices in UX and accessibility is crucial. Here are some recommendations:

1. Width of the Side Panel: The right width depends on the content and interaction required. However, a good starting point is between 320px to 480px. This range is generally effective for maintaining readability and usability without overwhelming the user's workspace.

2. Chat Side Panel Placement: Having the chat side panel overtake the area with the tabs can offer a more focused interaction for users, especially if the copilot's assistance is central to the task at hand. This approach can reduce distractions and make the copilot feature more prominent. However, it's important to provide users with the ability to easily toggle between the chat and the tabs to ensure they can access all necessary functions without frustration.

3. Accessibility Considerations:

   • Ensure the chat interface supports keyboard navigation thoroughly, allowing users to interact without relying on a mouse.
   • Use ARIA roles and properties to describe elements and states, making the chat accessible to screen reader users.
   • Provide sufficient contrast ratios for text and interactive elements to aid users with visual impairments.
   • Consider implementing resizable text that does not break the design, ensuring that users can adjust text size according to their needs.
   • Offer options to mute sounds or notifications for users who are sensitive to these or who may be using the application in a noise-sensitive environment.

Reviewing the provided Figma links, it seems you're exploring various layouts and interactions. Continuously testing with your target users, including those with disabilities, will provide valuable insights into which design choices best meet their needs and preferences. Additionally, referring to the WCAG guidelines can help ensure your design is accessible to as wide an audience as possible.

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[serifluous]

Hey @kellyjacobs417, thanks for coming to office hours! We forgot to record the session, but I'll just paste in your own summary from Slack here to round this out ;)

You'll recommend a pane that overtakes the additional menu of tabs, so that:

• It starts moving towards a more conventional pattern for this type of tool (given the technical/capacity constraints)
• Brings AI-driven help together into one experience without having multiple layers of tabs
• We don't introduce a new/custom collapsable menu interaction
• Encourages discovery

And then the team should use full story/customer feedback to gain a better understanding of how customers use this to optimize the interaction patterns here, potentially go for more of a minimizable column and figure out where a summary should actually go.

[cyberlord29]

Hi @serifluous ,

This is basically a suggestion on the implementation of the component, since we want to make this generic, could the implementation of the lower panel or footer of each chat list item be left open so we can pass in children and use exposed handlers so we can apply any actions from the response or message ListItem.

Im getting a sense that this is a component for common use and the usages may vary.

Is there any estimate on when we can use this generic component, or can we go ahead and build a basic version of it so we can release our public beta for functions Copilot ?

[serifluous]

(For the Paste team: We handled this in a meeting. In general, most components in the Functions copilot flow are composable with existing Paste components or ones coming soon in the AI UI Kit. The width-adjustable panel is custom)