Tabs visual design update

[kelseycavitt]

Review request: visual design update for Tabs component

The UX Infrastructure team is asking for feedback on a visual design update to the Tabs component.

Why we’re updating Tabs

Our team created a new component last year, In Page Navigation, that copied the design of Tabs, as this component uses links and using the underline to represent links work better for signaling that functionality to users. Tabs are buttons and need their own distinct design to better represent that functionality. They also need to work in harmony with In Page Navigation.

We also haven’t had the chance to do a peer review on Tabs, so we’re excited to get your input and feedback on the design concepts.

To review

I’ve created a few concepts for the visual design of Tabs that lives in this Figma here. Please leave comments by hitting the letter “c” or the comment icon button in the main Figma menu.

Feedback details

1. Let the Figma be your guide! Follow the prompts and arrows 🙂
2. Use the principles as your lens for your review, how well do these concepts (or a variation) adhere to them?
3. Which option works best? Is there a variation to an option that could help us get to a better design? Any visual tweaks that could be made?
4. Are there more use cases to account for that aren’t included here?

FYI: The current implementation of tokens isn’t perfect here, it will be refined in the next iteration.

Links

• Figma of proposed concepts
• Current Tabs docs
• Current In Page Navigation docs

⏲️ The time estimate of this review is medium (10-20 min).

👉 Please complete your review by Tuesday, Feb 7th. Looking forward to your feedback!

[kelseycavitt]

Hi all, thanks for your feedback and contributing to improvements to Paste!

What did we learn

Concept 1:

• Concept 1 was a clear winner, but could we make its design a little more obvious.
• The tab design needs to best optimize for the tab content it’s controlling, so having the bottom rule line extend to the width of the tab panel would be more helpful in signaling this to a user.
• Works well with In Page Navigation’s design and is distinct enough.

Concept 2 + 3:

• Looked too similar to toggle button designs, causing it to not feel like the tab content would change from this visual interaction.
• The designs felt a little too visually complex, and boxy.

Action items

With this feedback, we’ve decided to go with Concept 1, with adjustments to the width of the rule line, having it extend to the full width of the tab component container. This concept leans best into our new design language direction, as it feels light and airy, but still can support the needs of the tab’s content in a way that isn’t overpowering and balances with In Page Navigation.

We also learned that updating the Tabs’ documentation is going to be essential. Based on the feedback, here’s some items we’ll address when updating the documentation:

• Provide stronger guidance on when In Page and Tabs can be used together, and when to use one vs. the other (though this does exist now on the In Page Navigation docs site page).
• Provide guidance on when to use the fitted tabs (full-width) variant
• Provide guidance on when to use a vertical vs. horizontal layout
• Consider how many tabs is too many tabs? What does the design call for if there are only two tab items?
• When to use Tabs vs. Button Group, Radio Button Group, Toggle Buttons, In Page Navigation, etc.

Next steps

We’re publishing the component to Figma in the next couple of weeks and working on updates to the Tabs documentation. Then, we’ll make updates in the code.

Thanks again for helping to improve the Tabs component! We’ll share when these updates have been completed.