Flex Frame AI

[cdpestitschek]

Background

Utilizing AI to empower Contact Center Supervisors in making informed and prompt decisions. This is achieved by facilitating the correlation between the customer and contact center metrics. The aim is to minimize obstacles in acting upon these insights and providing supervisors with readily accessible valuable information and recommended actions.

Feedback

• Looking for:
  Guidance

1. Colour guidance. Looking forward to hear - How do I make sure the colours applied at my charts are aligned with labels and pills colours. Specially for use cases we the users face Negative, Positive and Neutral visualisations.

Clarification
2.Should I consider/use this material as guideline? > Data visualisation pdf

Other topics I would like to discuss:

• Contextual interaction. How do I make sure I'm applying the recommended interaction (eg. Tool tip, Pop over and Data drill down)
• I've tried a few different ways of making my CTA prominent

Stage of design

High fidelity

Research

It is still in progress:
https://app.heymarvin.com/insight/3e3f11c7-d2e9-4ed2-83de-193956623c4f/

Relevant links

https://www.figma.com/file/9kev68PgqCOkjFQxE6K0ec/Flex---Supervisor-Frame-AI?type=design&node-id=7295-17611&mode=design&t=CQRHDzoQWFgNmNKf-0

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.

---

Colour guidance

To ensure the colors applied to your charts are aligned with labels and pills colors, especially for use cases where users face Negative, Positive, and Neutral visualizations, you should refer to the Paste color palette. The color palette is available as color styles in both the Default Theme and Dark Theme libraries. Make sure to use these color styles to maintain consistency across your designs.

Should I consider/use this material as a guideline?

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

Contextual interaction

For contextual interaction, such as tooltips, popovers, and data drill-downs, you should use contextual, inline messaging when you're communicating a direct response to a user action, providing links or buttons that are contextual to a UI element, and helping a user continue a flow. Additionally, you should use in-page messaging for high-emotion user actions or when providing information that a user might want to copy, screenshot, or save. More details can be found in the Introduction section of the Paste documentation.

Making CTA prominent

To make your Call to Action (CTA) prominent, consider using primary interactive colors for elements like buttons and links. Paste uses blue colors to help differentiate between interactive and non-interactive UI elements. Ensure that the colors meet the desired color contrast ratios to be accessible and conformant to the WCAG guidelines. You can use tools like Are my colors accessible?, Web Aim color contrast checker, and the Figma Stark Plugin to test color contrast ratios.

Remember that active UI controls must use a color that is 3:1 against adjacent colors to be identified as interactive, including interaction states like focus and hover. If color alone is used for focus, hover, or active indicators, the indicator must meet 3:1 against adjacent colors and meet 3:1 against the previous state.

For more information on color usage and UI controls, refer to the User Interface controls section of the Paste documentation.

Visual design support

Since you are looking for visual design support and are at the high-fidelity stage of design, it's recommended to visit the Design Guidelines for Paste for comprehensive guidance on incorporating the Paste design system into your project.

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:

• Insights - Editor mode, renaming, accessibility and feature find ability (updated: 05/11/2023, similarity score: 86%)
• Flex Cold transfer - Discoverability on hover of a button (updated: 12/18/2023, similarity score: 85%)
• Messaging Insights <> Paste (updated: 06/06/2023, similarity score: 85%)

[serifluous]

Hey @cdpestitschek !

How do I make sure the colours applied at my charts are aligned with labels and pills colours. Specially for use cases we the users face Negative, Positive and Neutral visualisations.

Which pills and labels are you trying to align to the charts? The data visualization palette and our status colors generally don't share the same exact colors because

1. They have different color contrast requirements
2. In most cases, Twilio charts don't communicate status so the palette was designed not to make any one category look like it was in error, negative, etc.

But if you point me to the specific elements, I can try to recommend a sequence of the palette that will get you in the same hues as the status colors, probably $color-data-visualization-10, -1, -2.

Should I consider/use this material as guideline? > Data visualisation pdf

These chart guidelines are pretty spot-on on how to choose a chart.

For colors and labels, though, follow the Paste visualization guidelines here: https://paste.twilio.design/foundations/data-visualization

cc @darcimm @dreamealist @kkenna3 for visibility

How do I make sure I'm applying the recommended interaction (eg. Tool tip, Pop over and Data drill down)
I've tried a few different ways of making my CTA prominent

Which interactions and CTAs are you asking about? Feel free to tag me in comments on the Figma file, or we can wait til office hours to discuss.