Tabs Component: Questions / Answers

[tbaker1026]

Some questions to start but feel free to add additional input / ideas

• How many tabs do you typically use before the UX breaks down?
• What are your most common use cases for tabs?
• Where do you think tabs work well, and where do they fall short?
• When would you use tabs over other layout structures?
• Where in your products are you using tabs today or plan to use them? (provide links or designs)

Notes

• Mention which product and team you are on
• Subscribe to this discussion thread to follow along (over to the right under Notifications)

[outerpress]

• In the appointments tool we have links that basically function as tabs. Figma
• However, each link leads to a different page entirely with a separate URL. You can see the differences in that link I shared above.
  • We have a longstanding requestto use parameters instead of separate URLs, but there are some technical hurdles with the different data types under each view, so we're holding off until our next big refactor of these lists to revisit that.
  • The contents under each view show very different data and actions. The Pending view is in the process of being expanded to show referrals and requests.
• On mobile, if the list of links get too long, they stack.
• One challenge is the placement of the print button, which is meant to print just the list, not the entire page.
  • To deal with hierarchy and placement of the print button within the list of links, we created a tertiary button, which is in an experimental design ticket, but I don't think ever made it into our standard set of buttons (and likely never will if I remember those conversations right)
• Another note is that Appointments exists in the context of all the other health tools, so we're working to align with what Messages etc. are doing with similar lists.

Happy to answer any other questions. I'll edit this comment if I remember anything else that might be helpful.

[sh0wn]

We use 2 to 3 tabs in the claims detail screens within the Claim Status Tool (Benefit Management Tools). The screens that haven’t been fully updated with the latest design typically contain two tabs labeled ‘Status’ and ‘Issues.’ This pattern can be found in Supplemental Claims and Appeals. The newer pattern adds a third tab labeled ‘Overview.’ This pattern can be found in Compensation Claims.

Purpose: We use tabs to display different views or categories of the same subject matter. Each tab represents a distinct view of the same compensation claim.

Links

• Status, Files, Overview Tabs in CST
• Local Benefits Tools Components

How the tabs look on mobile

[babsdenney]

@sh0wn Thank you for sharing! This is great! Do you know what happens if the tabs overflow on the page?

Also similar to Appointments. From your purpose statement, it seems likely you are presenting the same data in different views.

Purpose: We use tabs to display different views or categories of the same subject matter. Each tab represents a distinct view of the same compensation claim.

Looking at the screenshots, it looks like the information on each page is a bit different. Do you feel like these pages would work better with tabs or have you ever considered segmented buttons for this use case?

[sh0wn]

@babsdenney Good question about the overflow. We only have the three tabs, but I'm also curious what happens when the tabs overflow as well. This tab design predates my team, but I am intrigued by the segmented button idea. One thing I prefer about the segmented buttons is that they align closer with how we implement this type of behavior in the mobile app.

Unfortunately, our version of the Benefit Management team is coming to an end at the end of August, but you have inspired me to create a discovery ticket for exploring the segmented button idea for the next team.

[babsdenney]

@sh0wn That's great to hear about the segmented button. The segmented button is very new to the scene and the uses for segmented button and tabs can be similar sometimes. This is one of the first components brought over from the mobile app and we are trying to align the mobile app components with the design system components. Thanks for creating a ticket for the next team to look into that.

I did take a look at the tabs in production and see that they stack on mobile.

[babsdenney]

@outerpress Thank you for sharing! Looking at your use case for tabs and wondering if you have considered switching to the new segmented button? In the when to use segmented button section, it mentions using segmented buttons for upcoming and past appointments. I think you would have to use parameters with the segmented buttons so that might be a hurdle.