I am developing a mobile application supporting iOS, Android and Windows platforms.

The app comprise of "sectional navigation". By sectional navigation I mean it has various sections such as:
1. Maps
2. Rating
3. Search
etc.etc

I am assuming that there could be a total of 8-10 sections and each section takes the user to a new screen. Some of them may open an overlay with a close button ("X" icon) at top left corner.

I want to keep a minimalist design. I had two options in my mind:
1. Tab Bar with "More" tab.
2. Horizontal scroll bar with all the options in place.

However, I am confused which would be appealing aesthetically. Tab bar seems a bit old fashioned and horizontal scroll bar seems on the opposite line of minimalist design.

I, however, saw the app Zomato which has a design update recently. They have placed a "+" icon on the bottom right corner of the screen, which when tapped, reveals menu options. I have also visited iPhone App: Tab Bar vs. Dashboard (aka Grid Navigation). Or both? and Alternative to the tab bar (in iPhone app) on this website but somehow I couldnt get my query resolved.

This is something navigation design related and numerous opinionated answers could help me try a bunch of stuff for my app and get some helpful reviews from my testers.

  • @tohster I have edited the question as per your comment. Hope it helps. – madLokesh May 4 '15 at 11:21

Let's start with your options...

  • You have heterogenous options. That means, your options are all pretty different. Because maps are very different from ratings, which are very different from search, it's not easy for users to process a lot of heterogenous options.
  • Compare that to homogenous options where the items are of the same kind. For 8-10 homogenous options, it's a little easier for users to scroll through a long menu because the user knows exactly how each item is different. Filters are a great example of homogenous items where scrolling can be effective:

    enter image description here


A modern approach to designing navbars

Would be something like....

  1. First, can you reduce the number of options to 5 or less? If yes, then you can use a straightforward tab or icon bar. Here's Instagram's: instagram menu bar

  2. If you can't do it, try again, really.

  3. If you really can't reduce, then pick one of the patterns below.

Design patterns for 8-10 mobile nav items

  • Present them all at once. Here's the Yelp Android home screen (until recently):

    enter image description here

  • Pick the 4 or 5 most common sections, then hide the rest using a dropdown or drawer menu. You can present the 4-5 items as tabs or icons. Facebook uses this approach with a hamburger menu, but horizontal or vertical ellipses (...) are popular too:

    facebook menu

  • Other patterns which are less effective for various reasons are:

    • Hide all the nav links in a hamburger menu.
    • Use a horizontally scrolling menu. This is less effective than a static menu because it is more prone to user disorientation and frustration (does the scroll position reset on page load? user may not remember that they scrolled the menu and may forget what direction to scroll in, etc).
  • I am relatively new to precise UX However, my ongoing experience as a mobile apps developer has enabled me to start looking things beyond simple coding. UX plays one of the utmost part of mobile apps programming. I, howver, lack the technical terminology to express what I am really looking for. This was the main reason I had to edit my question after your comment even though it was "according to me" quite detailed. Could you guide me to some UX/HUI learning sites where I can dive into. @tohster – madLokesh May 4 '15 at 17:30

I'd use a horizontal scroll with good visual indicators where the user is, and with some code to always put the bar always in the center/on screen so that it does not get confused. In this way the user can swiftly swipe the menu for options to where to go.

Ideally, it would be best to make massive research on this. I wish I could but i can only rely on small groups testing, when i finish my article and research i will update my answer with my findings.

I'd got with Horizontal scrolling as its not uncommon in mobile apps these days. you could add a "+" or a 'more' and anchor that so the user is scrolled a bit horizontally so they know the screen in horizontally scrollable

  • could you provide me with some good apps example. @Razor9012 – madLokesh May 5 '15 at 2:12

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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