Tabbar inside Modal View - iPhone

Question

Is it ok to have TabBar in Modal view in iOS UI (iPhone)?

I have a "Select Contact" view in my app and I plan to make it as modal view. But "Select Contact" is a set of views: "Favourites", "Contacts" (Address book list) and "Keyboard" (to dial number manually).

There is no restriction - "Select Contact" could be part of navigation controller, but as far as I know a TabBar inside a navigation controller is considered bad practice.

Common practice is that tabbar is the root contoller. So I'm not sure can I use it in modal view.

Currently I see two options:

1. Modal view with TabBar
2. View on main navigation stack with segmented buttons in the navigation bar (but here I think it is more used for filtering table view results)

Do you have such experience?

Answer 1

I can provide you with two different approaches for selecting contacts / participants.

Viber uses one list for contact selection when composing a message. If the user wish to compose a message to a number that is not added to a contact the user can enter that number directly in the search field. This way you save screen real estate.

Skype offers more categories for contact selection, and they're using an expandable panel with tiles to select the featured filter, rather than the tab bar that you're going towards.

This saves screen real estate, plus it enables the adding of additional filters without crowding the view since it's collapsable. However the control does suffer from some discoverability issues.

For your application I would suggest going for the Viber version for one reason. You want the user to be able to search for contacts and you want them to be able to put in a phone number of their choice, Viber does this fine. However, you also want to add favourites to the filter. I don't know how the usage pattern looks in your application but I'm fairly sure that the "Favourites feature" is not that utilized among iOS users, seeing that it's not a native feature.

Personally I would consider scrapping the favourites filter in this view However if that is not something you want to do you can probably find a way to integrate it into the Viber solution, like using a "Star icon" instead of a "Favourites" copy to represent the filter to save screen real estate.

Answer 2

Option 1. Better do not. It's may be more confusing than you're thinking. TabBar only as root navigation control, as you mentioned.

Don’t use a tab bar that lets users act on elements in the current mode or screen (that’s what the toolbar’s for). It should be accessible from every level in the app, and helps flatten the app’s information hierarchy.

Option 2. I think that will be a lesser evil. In my opinion for filtering more appropriate will be somethink like ScopeBar and for your case SegmentedControl will work perfectly.

Answer 3

If there is a large amount of contacts it would be wise to assume the user might want to search through those contacts. So an option would be to have a search bar with a scope bar at the top of the view. The scope bar would allow you to switch between "All, Favorites, etc." and still keep the proper modal design principles as well as add a feature of letting the user search.