0

I have the following example app for desktop:

desktop mockup

Here's the mobile equivalent:

mobile mockup

As you can see, on mobile I've converted the tabs here to a standard dropdown control. On the phone when you select it you get the rotating "dropdown" control. When you select a "tab", it navigates the app to that selection.

What other options are there for the mobile equivalent of tabs?

1

Is this top-level navigation, or navigation within a certain section of your app?

For top-level navigation, a navigation drawer ("hamburger menu") makes sense if you have more than 4 sections (in your case), or standard tabs if you have 4 or fewer.

If it's navigation within a part of your app, I'd recommend having an additional navigation page leading to the different sections. (You probably know this pattern from your system settings.)

This is all assuming that the sections have basically equal importance (it seems they do from your wireframe). If not, you could separate those with lesser importance ("Settings", for example) and list them in a menu.

(P.S. I notice you have a hamburger menu on the right. Will that button be used for navigation? If not, you shouldn't be using a hamburger icon. If so, it should probably be on the left for LTR languages, to both follow standard mobile navigation patterns and to show the hierarchy between pages [screens on the left are parents of screens on the right].)

1

Is this question for a website, or an app?

If it's an app, you have multiple options:

Android

enter image description here

As one of the other answers already suggested, a navigation drawer is suited for a big range of categories.


enter image description here

You also have the possibility of using scrollable tabs. But these can make it hard for the user to maintain a mental model of the possible categories.


enter image description here

And of course, you could always just use a simple flat hierarchy.
That one is basically the same as the navigation drawer, just with an extra page in the beginning. It makes the mental model of the navigation as easy as possible though, since it's always just a linear path down. Whereas in the nav. drawer you can jump from one catergory to another from any page.

(More information on navigation in Android)


iOS

enter image description here

In iOS you also have the option to use tabs.
When there's more than 5 of them, you can replace the 5th element with a "more" tab, which opens a new site with the rest of your tabs.


enter image description here

And just as in Android, you can use a flat hierarchy.

(More information on navigation in iOS)


My suggestion would be to use the flat hierarchy.

  1. Because you don't have that many categories, so it's easy to keep an overview as the user
  2. It looks consistent on both OSs and doesn't create different user experiences on different devices
0

Keeping in mind that tabs are really only useful if you don't have too many categories, and that the labels for the tabs are not going to be too long, you have at least one or two different options on mobile (also depending on if you are going for a native app or web application look & feel):

  • Button group / Button toolbar from Bootstrap (which is mobile first)

enter image description here

  • Pills from Bootstrap (which is theoretically not all that different from tabs)

enter image description here

But to be honesty most of the strategies are just variations of being able to toggle between different states and displaying the relevant content. What you have to do first is to ensure that the content is appropriate for display on mobile, then you can work out the IA and navigation strategy that suits the best.

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.