When to use segmented tab and tabs?

Question

Question here is when do we segmented tabs in the design vs when do you use horizontal tabs in design?

Segmented tabs

Horizontal navigation

Answer 1

• Tabs are a common UI pattern for web navigation; their use has been documented by the W3C: Tabs Pattern (W3C). They are as old as the internet.
• Segmented Control was introduced by Apple at some point during Mac OS X development. Later, it was widely adopted by designers during the "make it look like Apple" era in the mid-2000s.

As others have pointed out in the replies, the common consensus in design communities is that:

• Tabs are for navigation between different content sections.
• Segmented Control is for additional "fine-tuning" within a tab.

Answer 2

I always advocate for the use of segmented control when you are dealing with one pool of data and you want to show a Superset/Subset A/Subset B slices, filtered on either same or different attributes of the item in the pool.

Tabs are for when the pools are different.

We used this as a rule in my previous and current products, and it works out well as long as all designers undderstand the proper usage. Otherwise everyone just uses whatever they feel looks nicer, especially if the data model is complex and they need to deal with 'tabs inside tabs' structure, they would ofren use Tabs as a parent and Segments as a child, to break visual rhythm a little, but both would work as tabs.

Answer 3

Segmented tabs are used for content that is related. It can be as a filter, view change or an action. Some examples:

• Filter by active, hot, week...
• Text alignment: align left, center, right
• View change: monthly/annual pricing
• View change: js/react/vue code preview

Tabs are almost always used as a view change when you have data that has different meaning but revolves around the same context.