3

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 ;)

enter image description here

  • you seem to have "Today" listed twice in your second example. I assume that's supposed to be "Today" on the left and "Future" on the right? – PixelSnader Mar 25 '16 at 1:04
  • Yes, you're right, all fixed up now. Any thoughts? – tmbo80 Mar 25 '16 at 1:15
3

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

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)

  • I'm actually trying to convince my client not to use nested tabs, though :/ – tmbo80 Mar 26 '16 at 5:12
  • And that is what I'm explaining, why NOT to use nested tab, it's a real no no – Devin Mar 26 '16 at 15:09
  • ah, okay, because when said Android's nested tabs are "a widely accepted design guideline with a sound UX reasoning", it sounded like you were describing nested tabs in a positive light. – tmbo80 Mar 27 '16 at 8:25
  • My bad, I see where the confusion comes from. I used the don't image to show you it's the same problem Google suggests to avoid, and it looks the opposite in this context, duh. Please check the link for a better explanation than mine – Devin Mar 27 '16 at 14:31
  • Ah, I see it now, I'm just an idiot who can't comprehend the English language apparently. lol. Thanks all the same Devin, that should help :) – tmbo80 Mar 27 '16 at 23:45
0

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.

  • This is the main screen the user (the courier) is presented with when opening the app so no navigation leads up to this screen really. New is the same across both so in my version New actually does not represent Active or Today as you have suggested. Basically I've elimated the "Active" tab in my version. I've updated the screens to make this clearer. What we're looking at here is whether "Active" should have a secondary tab or not. I agree that a list view within the "Active" is actually a really good, simple solution – tmbo80 Mar 25 '16 at 3:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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