Tabbed graphs in Console

[kkenna3]

Background

The Voice team is working on migrating the Call Insights page in Console to Console.Zen. The goal of this migration is to avoid making any drastic changes to the UI to avoid confusion by users (it's one of the top visited pages for Voice). We're trying to use as many out-of-the-box components from Paste as possible, as this page sees a lot of updates.

We currently have a "tabbed" view for a specific section that allows a user to see an aggregated data point for a particular metric, then click into it to view the full graph (see screenshot).

Feedback

I wanted some advice on how to best recreate this with Paste components, whether using an existing component or primitives. The "glanceable" data is important to keep, however we're open to changing how that info is laid out.

Stage of design

Exploration & high fidelity

Research

No response

Relevant links

Ideas brainstormed in Figma

Screenshot of existing page

Are you looking for visual design support?

• Yes

Additional Information

No response

[roxanagomez]

Hi @kkenna3 Thank you for sharing! I wanted to share a past session where we discussed a very similar use case with @ceyerkes and @cdpestitschek. You can find the recording here. We recommended using the Visual Picker for this specific scenario.

You can check the explorations here in case you wanted to try it

We can discuss in more depth during Office hours.

[krisantrobus]

Hey @kkenna3 I see you aren't signed up for our office hours. If you would like to discuss this with the team can you add an entry in our Sign Up to reserve your slot.

[roxanagomez]

Hi @kkenna3 Thank you for coming to office hours! Here is the recording of today's session.

Also, a short summary of the suggestions discussed:

There are 2 possible components that can work for this scenario:

• Visual Picker Radio
• Radio Button Group
• Both of these components have built-in labels, but since in this specific design scenario the labels need to be hidden, you may pass an aria-label. aria-label takes a string description of the component which will be read aloud by ATs in place of a visible label. This is ok to use in this situation because it's very clear what the interaction is asking of the user, but in general, we recommend using visible labels for all form elements.