Alternatives to More Tab Button in a UITabBar?

Question

I am working on an iPad application that currently uses a UITabBar as the prevailing navigation element. The application has maxed out the number of buttons on the bar and is now forcing a More Button as the last element when adding additional capability. Despite a designer's insistence that this is OK, it really makes me grate my teeth on iPad because the underlying table view for the additional elements is just awful. In the end I think this promotes a terrible user experience even if it looked good, just because it hides away other functionality of the application.

Example filled up UITabBar with a More Button:

When you tap on More, you get this:

I am a non-designer, but an avid iPad user and have not found any application that promotes the use of the More Button at all.

What alternatives are there (scrapping the tab bar entirely is on the table) to provide a great user experience for an application that has many functional capabilities that a user can choose from?

The More Button isn't as bad when you only have a few elements, but over time capability will be added that could get lost in the table view. That aside, the Human Interface Guidelines for the UITabBar, specifically state:

On iPad, avoid crowding the tab bar with too many tabs. Putting too many tabs in a tab bar can make it physically difficult for people to tap the one they want. Also, with each additional tab you display, you increase the complexity of your app. In general, try to limit the number of tabs in the main view or in the right pane of a split view to about seven. In a popover or in the left pane of a split view, up to about five tabs fit well.

On iPad, avoid creating a More tab. In an iPad app, a screen devoted solely to a list of additional tabs is a poor use of space.

I really like the corousel in the Garage Band iPad app. It is very extensible for adding a multitude of functions, while fully using the entire interface when in a more detailed view. I also like the iPhone Facebook app because it heavily draws a usage paradigm that is already familiar to users and is extremely flexible to having many 'sub-apps', while still making the UI customizable to endusers.

Answer 1

Well, you're not really having a UITabBar problem. It's a classic navigation design problem: what do I do with overflow when I have more items than fit in the available space?

The answer to this question can be politically contentious! Because ideally what you want to recognise is that the immediately visible navigation items are going to be just that: visible to users. Anything you stick underneath a "more" link or any other kind of interaction will get less attention. If that's okay, then go ahead and do that. But if you're expecting people to give equal attention to all, you're going to be disappointed (or your client is). And if your client or team can't decide between all the different items they want to put in there, then they're going to have a hard time when they realise they aren't meeting their goals.

Ultimately, my personal opinion is that one of the responsibilities of the UI designer is that of curation. We're experts (or we're paid to be) on how to design a user interface. Once we've learned enough about the domain of the client in order to make decisions with and for them, it's time to help them decide what to focus on. So your best bet from here is to help the client take steps towards recognising that the most important navigational elements need to exist before the user taps the "more" button.

And if you can get them to reduce the number of items to the point that you don't even need the button, that's even better. But it's not always possible given the problem domain. Sometimes it makes sense, and you can get away with a more features than fit on one screen. In those cases, you might need to help the user discover features in more ways than just expecting them to find things by themselves. So in that case you can explore various ways of assisting the user, such as with a brief tutorial or by deeplinking from other places in the app. Like you mentioned, Garage Band is a great example of an app with a ton of features that still manages to be somewhat navigable because they decided to use their own navigational paradigms and extremely visually rich controls instead of just standard iOS controls. You could definitely give that a shot.

Answer 2

It's hard yo suggest a solution without knowing what the tabs actually offer in the app. But having that many options in a tab bar is definitely not a good solution. I would suggest having a screen with icons and labels in a spacial grid view. Just like the main screen of the iPhone with all available apps. You have mentioned that features will be added over time thus having unlimitted space will work in your benefit. Spacial memory works very well for most types of users and works with great success on the iPhone/iPad. Facebook app on the iPhone uses that type of navigation and it seems to be working very well. Once a user chooses and goes into a specific view he/she can get back to the screen with all the options through the top left corner button.

Answer 3

You could use a different kind of navigation: Have a grid with all your menu items as start screen and a button to access the grid from everywhere. It's one tap more for some items but they are all visible. The grid can be an overlay so you can just open and close it. The Xing iPhone app uses this for example:

Could work for iPad as well I guess...

Answer 4

Your list view from the second screenshot provides enough space. You could limit the width of the column and display the content on a second column. Have a look at Twitter for iPad that uses a similar navigation.