Horizontal Scrolling Menu or Tab Bar?

Question

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.

Answer 1

Let's start with your options...

• You have heterogeneous 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 heterogeneous options.

• Compare that to homogeneous options where the items are of the same kind. For 8-10 homogeneous 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 homogeneous items where scrolling can be effective:

  

---

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:

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):

  

• 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:

  

• 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).

Answer 2

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.

Answer 3

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