Visually Unrecognizable "Tabs"

Release notes

UI Tabs are more readily visually recognized as Tabs.

Problem to solve

  • Tabs in some parts of the GitLab UI are not styled in a visually recognizable way.
  • While this is a common UI trend across the industry, it causes the functionality to seem hidden to many users.
  • This is evidenced by attempting to create an instructional sentence to have the user find and select a non-default tab (without a screenshot). As shown by the screenshots below it is extremely difficult to construct such a sentence for what amounts to a group of contextless floating words.
  • IMO the inability to describe any styled UI element in human instructional sentences indicates that the styling has drifted away from the value of the universal intuitive recognizability that the element was derived for in the first place.

Proposal

Update website styling so that all tabs look something like their real world equivalent. Specifically that some type of UI element enclose the word and show which one is active since they function as a group.

While the example focuses on a recent find in the UI, the principle would apply to the entire product.

Screenshot

Screen_Shot_2022-03-08_at_9.24.54_AM

If the above tabs were styled more like their real world counterpart, an instruction sentence is straightforward like this:

"After clicking Infrastructure => Kubernetes clusters click on the 'Certificate' Tab"

With the current UI, attempts look like:

"After clicking Infrastructure => Kubernetes clusters near the top left (but not in the navigation panel), under the project breadcrumb trail locate and click the word 'Certificate'"

Another example:

Screen_Shot_2022-03-08_at_11.32.20_AM

I regularly get "Aha's" when I demonstrate that "Instance" and "Group" capabilities exist because the lack of tab visualization causes completely overlooking of the additional functionality.

Intended users

Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later.

Personas are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/

User experience goal

Users can follow human sentence instructions to locate and click tabs in the GitLab UI because the styling of these elements reflects real-world tabs in binder.

Further details

Include use cases, benefits, goals, or any other details that will help us understand the problem better.

Documentation

See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change

Availability & Testing

This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier.

What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing?

Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance.

  • Unit test changes
  • Integration test changes
  • End-to-end test change

See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning

What does success look like, and how can we measure that?

Analyze existing web traffic for confusion about this and/or ask users if they know the difference.

Edited by DarwinJS