Stacked segmented control tabs in iOS - help me convince my client

Question

I'm designing a bookings page for a delivery app and we need to segment the sections into the following categories: New, Active, and Completed. Under the "Active" category are jobs that need to be delivered "Today" and "Future" (tomorrow and beyond).

The client prefers to take a stacked tab bar approach where a secondary tab bar with "Today" and Future" appearing below the main tab when the user taps on Active jobs. My suggestion is to have a single tab bar with all the options: New, Today, Future and Done.

So far I've been unsuccessful in convincing the client that stacked tab bars are the wrong approach for the following reasons:

1) Screen real estate: this approach consumes a lot more screen space than a single row of tabs

2) User confusion: now there is just too much going on the screen so it isn't 100% clear what's going on - i.e. two tabs can be selected at once.

What do you guys think? Is my approach the right approach? Is there another way I could look at this? Or should I coninue trying to convince the client that this is the wrong approach? Whats Apple's official word on this? Honestly, that's the ultimate trump card ;)

Answer 1

While not specific to Apple, Material Design has some helpful insight on this matter, see image below

As you can see, it's the same case as your example, which is nested tabs, and it's presented as an example of what you shouldn't do.

Now, these are the specs for material tabs

Formatting specifications:

• Present tabs as a single row.
• Wrap tab labels to a second line if needed, and then truncate.
• **Do not include a set of tabbed content within a tab. **
• Highlight the tab corresponding to the visible content.
• Group tabs together hierarchically.
• Connect a group of tabs with its content.
• Keep tabs adjacent to their content to maintain the relationship between the two.

(More info at Material Design Tab's Sepcifications )

Again, this is not specific for Apple. Yet is a widely accepted design guideline with a sound UX reasoning, so I think it should be more than enough to convince your client.

Finally, you're mixing dimensions in your nested tabs, specifically time and status, which makes things really confusing, just like you say. That row on top doesn't really make much sense, I'm scratching my head trying to understand what could it mean, while your first approach is really clear (and I have made a couple booking apps, so if I don't get it, chances your users will get it are really slim)

Answer 2

This is a difficult decision to make with the information presented.

Without knowing too much about how the navigation led to this screen, both options seem a bit confusing.

How does "New" [your recommendation] represent "Active" and "Today" [client recommendation]? You may be able to uncover why they feel it is important to give a user a better understanding of where they are in navigating your app.

Suggestion

I think that it may be worth considering where both of the suggested screens were supposed to lead in your apps hierarchy, as you could probably achieve the same navigation with your single segmented control.

You may want to consider possibly splitting the ListView by dates similar to the default Calendar app.

All I could find in the Apple Human-Interface Guide that might relate to this situation is:

Use a segmented control to offer choices that are closely related but mutually exclusive.