8

I'm working on an iPhone app (early stage) and we had some discussions on the best navigation system:

Dashboard style (examples)

This would be the home screen. What I like: Good feature overview; a "hub" for all functions and information. What I don't like: All menu items have more or less the same priority; if there are many items they don't fit on one screen.

Tab bar (examples)

The bar would always be there, the home screen would be the most important functionality of the app. What I like: No navigation needed if you want to use the main functionality; many apps use this approach so I guess users are quite familiar with this pattern. What I don't like: You shouldn't put more than 5 items on the bar so we would have a "more" button and (see this article: The iPhone Tab Bar)

Combined

Could it make sense to have a dashboard (which would also serve as home screen) plus a tab bar with the main functions and the home button? This would mean that 2-4 functions would be available on the tab bar and on the dashboard.


Any thoughts on that? Or experiences? Or completely different approaches? Any feedback/input/critic/answer is appreciated!


Update: After reading the three great answers (thanks!), here is some additional information:

  • One of my main concerns is that actually only 3 sections are important for the user (the rest is account information, contact/feedback, legal stuff etc.). The most frequently used functionality would be search (think "find an apartment to rent"). Returning users might use pre-saved searches and favorites quite often as well.

  • Users would probably not switch a lot between sections.

  • In the combined option the tab bar would not be shown on the home screen.

4 Answers 4

5
  • If you need navigation on the home screen, use dashboard navigation

As you say, you get 9 items rather than 5. You're also better for fat fingers. You're also not making the user comprehend two different kind of things on their first view of the app.

Easier comprehension: With grid navigation on their launch screen - and only navigation - you are presenting the user with a simple navigation choice. With a tab bar they first have to ask themselves 'What does the main area do?' - because that is what they see first - and then ask themselves 'Do I actually want one of the other modes?'.

A fourth reason for a launch grid: Pixels are precious. With a tab bar, if it's there all the time, you risk having idle pixels that aren't doing much for your user - or you design assuming frequent switching of modes, as a justification for having the tab bar. Frequent mode switching is unlikely to be good.

Kinds of Navigation: Navigating within a dataset such as within graphs, lists or maps is a very different beast. It's worth making that distinction because that uses different metaphors. I am assuming we are talking here about navigation between different modes of operation.

If your design barely needs navigation between modes, then you can dispense with the dashboard screen and launch straight into action. However, your situation sounds very different.

Since you're concerned that 5 choices might not be enough, and that even 9 might still not be enough, it's sounding to me like a home screen with a grid layout is really what you want.

Combine grid and tab bar? I wouldn't. Unless you have an insane number of navigation options and want the tab bar to select between five different nine way grids. If that's where you are now, "I wouldn't start from there."

And what about if you need more than 9? That gets very application specific. Often you can combine two modes and avoid a more... by being a bit craftier. Can't say more without you telling us a bit more about what your modes/navigations are.


(After the Update)

So - it now sounds like there are 6+ locations we might go to from launch, and 3 interesting ones for everyday use. I'd still stick with the grid launch screen.

Tab bar as well? (alternative way of combining both) - With 3 interesting locations, shortcuts to those top modes from a tab bar once deeper in the app could save your users one click. You'd be duplicating the three most interesting icons from the home screen, slightly reduced or trimmed.

It's going to be a judgement call and app specific. Is it worth giving up one search result in the listing for that - or whatever else it is that you would sacrifice - for easier mode switching? Only you can tell. To be politically correct here I would say 'Test! Test!', but the truth is I would go with my own judgement. You have to like your own apps, be emotionally engaged, particularly in the early stage of development, otherwise you start to miss-fire on other details that matter.

One more point - As well as the UX choice, (is a direct link sufficiently helpful when the switching between modes is rare?), there is also your app promotion to consider. Will you be showing a screenshot of the search results? Do you want to alert people to the other functions of the app when showing them that screenshot?

3
  • Hi James, thanks for your great answer. Please see the updated question.
    – Phil
    May 2, 2011 at 8:14
  • James, thanks a lot for the update - I'll start wireframing it with grid and tab bar. Promotion is not really a issue because we're #1 in our national market and people are using the current version already.
    – Phil
    May 2, 2011 at 10:48
  • OK, I went with the dashboard/grid without tab bar. Thanks again for your input, helped a lot.
    – Phil
    May 19, 2011 at 8:05
2

To me dashboard navigation should be avoided at all costs. The attention span is much lower on a mobile display, and going back to the homescreen to find new content makes the discovery of it very hard.

You should ask yourself first: are all features necessary to make my app useful?

Ben's example of Twitter is great: they hide a lot of options in the fifth icon of the bottom bar. I would love to see some numbers behind those points, obviously it is still much a work in progress for a lot of mobile designers.

1
  • I tend to agree with this. Better to present only the most useful options and drop the rest to a lower priority location, like the Twitter example. Figure out what the users are coming to the app to do, then focus on that and make the rest part of a menu.
    – Refe
    Feb 13, 2018 at 16:20
1

First, thank you for a well written question.

I wouldn't combine them. Users hate repetition in visual elements. Instead, why dont you use the dashboard on the home screen and then use the Tab bar when they are on one of those pages?

Also, and I know this wasn't in the question, but when doing your dashboard please look at facebook's implementation vs RDIO. In RDIO all the icons mesh together and it is very hard to distinguish one from the other, while in facebook's the icons are very unique and easy to look at.

1
  • Hi Jon, thanks for your reply. The combined approach would be like you describe it (you would never see the dashboard and the tab bar on the same screen).
    – Phil
    May 2, 2011 at 8:11
1

It depends.

Dashboard: Are there a lot of options for users to choose from, or could they all fit on a tab bar? Will users want to dive into a specific area right away, or be presented with options first?

Tab Bar: Will users be jumping around between sections a lot, or generally sticking to just one? How much room does your content require on the screen? Will the tab bar make it feel crowded?

Take a look at the Twitter app. It has a tab bar at the bottom, and one of the options is for the less common areas, shown as [...].

1
  • Hi Ben, thanks for your reply. My answers: Too many options to fit in tab bar (only 4 important ones though) / Usually the user will want to use the search, returning users may want to use pre-saved searches oder look at their favorites / I guess most users will mainly use the search and not jump around between sections / content requires a lot of room / tab bar could make it feel crowded (also depends on the design solution)
    – Phil
    May 2, 2011 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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