8

I have to document the general possibilities of an iOS app structure for my team, so I'm reading the guidelines to all the navigation and control structures.
But I can't seem to understand when to use Segmented Controls and when a Tab bar.

In the iOS Human Interface Guidelines it says

A segmented control is a linear set of segments, each of which functions as a button that can display a different view.
Use a segmented control to offer choices that are closely related but mutually exclusive.

For the Tab bar it says

A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.
Use a tab bar to give users access to different perspectives on the same set of data or different subtasks related to the overall function of your app.

The examples used (tabs on top, segmented controls on bottom):

examples

So it seems the main difference is that the Segmented Control is for switching between related views, while the Tabs are used to "sort" the displayed content, is that correct?
I've also seen other applications do it in complete reverse, so are they doing it wrong or is there just really no big difference at all?

Improve this question

2 Answers 2

Reset to default
12

I see the tab used as a primary navigation and placed at the bottom of the screen, whereas the segmented controller is more like a local switch inside a particular screen and is usually placed at the top.

They are quite similar in terms of functionality, they just differ visually in the sense that the bottom tab is heavier and conveys more important actions and the segmented controller is lighter and conveys actions with a lower magnitude or somehow related.

Edit :

As example, two screens from linkedIn's job search application

enter image description here and enter image description here


and from App Store and ITunes Store

enter image description here and enter image description here

Improve this answer
3
  • Could you go deeper into detail, maybe show one or two example applications that implement it the way you decribe it?
    – Big_Chair
    Oct 8, 2015 at 12:46
  • I see what you mean now. Thanks for the example, I'll see if I can find more like these to confirm it as a "genereally accepted rule".
    – Big_Chair
    Oct 8, 2015 at 13:14
  • 1
    yeah, no problem! I will add some more screens once my IPhone is done upgrading the OS. Found a similar question on Quora quora.com/…
    – Ovidiu Berdila
    Oct 8, 2015 at 13:26
2

Bottom tab bar/main navigation is for navigating to content that is not related to each other.

Tabs/segmented control are for filtering a view and switching between related views. For example, if I had a Directory page for everyone who worked at my office, the page title would be Directory. Then my tabs could be "Everyone," "Birthdays," and "Anniversaries." All of the content is related and the tabs/segmented controls are used to filter it.

Google has great guidelines here: https://material.io/guidelines/components/tabs.html#tabs-usage

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.