"Tabs" component or a new styling for a choice component

Currently, Glide is using the term Tabs to describe different pages within the app. It’s the navigation element that allows users to go between different screens. When I’m requesting the Tabs component, I’m talking about a selector that allows the user to switch between different states of the screen within the same context. Chunking content in this way is a good UX practice, especially on mobile, where the screen real estate can be at a premium. Please see this article from NNGroup for the guidelines for using Tabs, and here’s a link to Tailwind UI for the component I had in mind.

How would it be used?

There are a few use cases that come to mind:

  • Often, especially on mobile, a designer needs to provide additional context that doesn’t need to be present at all times but needs to be easily accessible
  • To chunk information from the same row and reduce information fatigue. For example, in an employee directory, different tabs could contain different information about the employee: their personal/contact information, their direct reports, their projects, etc.
  • Although this is not the most conventional use case, tabs could be used to break up a long form into steps.

In the past, we’ve been able to use the “choice” component. It matched the HIG “segmented controls”, so it worked

And with just a little bit of CSS, it looked just like Google Material’s tabs:

In the new Apps, the “Choice” component doesn’t offer a “Segmented” option. While technically, the component can still achieve the same outcome, I believe that its purpose is less clear. And with no access to CSS on the lower tier accounts, this experience is impossible to achieve.

I realize that Free/Starter accounts might not be the priority for Glide, but I believe that most of the work to make this happen is already in place. There might need to be just another CSS style added.

There are a few similar request floating around.

This one is gaining traction.

1 Like