0

This is the starting page of my App.

first page

Trips, Chats and Settings at the bottom are in UITabBar

If user clicks on a trip/group, (s)he is leaded to the following Group Home. (This page is 'pushed' on 'Trips' NavigationVC)

Group Home page

Now I want the bottom options Timeline, Plans, Conversation and Budget to be working like UITabBarOptions. But this is against Apple UX Guidelines of using UITabBarController, as there should be just one TabBarController throughout the App.

The other alternative is to use PagingView Controller which looks like this:

pagecontrol

But this doesn't look as simple as the Tab Bar. What UX should I go with, or is there a better UX design to present this whole scenario?

  • You need to map this out as a list of functions and operations, with respective content lengths, so you can see this properly, and then explain the problem to yourself better. Visually expressing it will probably present the solutions. – Confused Nov 10 '16 at 14:17
  • Thanks @Confused, I was looking for a design which is commonly followed so the first time users find intuitive to use it. – sasquatch Nov 10 '16 at 14:26
  • For anyone to suggest that, they'd have to understand what you're trying to present. The above question layout makes that impossible. – Confused Nov 10 '16 at 14:29
  • Until you can articulate the question REALLY well, there's no way for the question to make sense to you, let alone someone else. And it's at the point where you can really understand what you're attempting to do that it often becomes obvious HOW to do something. – Confused Nov 10 '16 at 14:30
  • OK, I will edit to add more info and visuals to the question. – sasquatch Nov 10 '16 at 14:30
1

As you said:

But this is against Apple UX Guidelines of using UITabBarController, as there should be just one TabBarController throughout the App.

Therefore bottom tabbar is out since you already have a main tabbar.

Since I don't have the full back story, I'm assuming Timeline, Plans, Conservation and Budgets are the page sub-links.

Here are some common best practices for mobile sub navigation links:

  • Arranged the most important links from left to right.
  • Do not hide the links.
  • Icons take up space and mobile has limited screen estate. If its preventing you from showing more content, you might want to consider removing them.
  • Navigation links should be obvious to the user, tab or colored links are great choice.
  • Sufficient paddings around the link to make it easy for the fingers to tap on.

I would go for the paging view controller.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You might also want to consider this approach to surface more content:

mockup

download bmml source

Unless your target group are really tech and design savvy, I would a adopt a more common and conventional way of styling my sub-links.

0
+50

First: Not what I would recommend, but what it seems more like what you have in mind.

There is a common UI to do this, and its the UISegmentedView,

AppStore Screenshot

Second: I think a scrolling UI with all the info on the same view, grouping relevant info is better. Let me give you some examples.

enter image description hereenter image description here enter image description here

I have circled every category, this be the way to show your trip. Notice that some of this are just previews/summaries of the information, you have to go to a different view controller to have more detail.

Also your chat would need to be on another view controller as chats don't go inside tabs usually.

I would suggest something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.