How to achieve quick navigation, for scrollable horizontal tabs on Android mobile devices

Question

Problem

Labels is quite a common feature, in note taking app, for categorizing notes.

Most of the note taking app in the markets, will place labels selection in hamburger navigation bar. For instance, this is how Google Keep looks like

I can understand why they want to design so. I think the main reason is that, the designer doesn't want Label navigation controls to take away screen estate, from main notes display.

However, it also comes with shortcoming. Navigating various labels is not easy, as they are hidden inside hamburger menu. User need to first open up navigation menu by tapping on hamburger icon, before able to navigate list of Labels.

I tried to choose a new design, by placing labels on horizontal tabs.

So far, after distributing to 20,000 people, most users appreciate this design. They rated the app as 4.8/5. They have confirmed tabs design, make navigation across labels much more easier.

However, tab design comes with shortcoming too.

When you have a huge list of labels (Says 10), having to scroll horizontal tabs to locate the desired label, becomes cumbersome.

---

Proposed solution idea

One of the improvement I can think of is that, when user tap on current active tab, a dialog will pop up, which allow user to see a list of labels. When user taps on the desired label, he will directly "jump" to the desired label tab page.

But, such UX is not easy to be discovered!

---

Do you have any idea how we can further improve this horizontal tab design?

---

p/s If you wish to have a true UX feeling on how the tab navigation feel like for labels, you may try it out from https://wenote.jstock.co

Answer 1

You should use a dropdown/modal to list the labels if the label limit exceeds what can fit on the screen. Imagine laving 20 labels, and having to continuously scroll to find what you are looking for.

What you can do is make the UI change dynamically depending on the total number of labels, or stick to a dropdown/modal only and add affordances to indicate you can interact with them.

---

Navigating various labels is not easy, as they are hidden inside hamburger menu.

You don't need to use a hamburger menu, in fact I would oppose using that icon. Using the term label and having a dropdown arrow would suggest to the user that there are more labels to be filtered. Your first example uses a gear icon, which is confusing it that is meant to show more labels.

---

Here are some different Android Reddit apps to look at that have different label (subreddit) structure:

reddit is fun, Boost for reddit, Now for reddit

The first has dropdown navigation, while the second uses both horizontal scroll with a dropdown, and the third uses horizontal scrolling.

From experience, the first solution is the best as it is faster, easier to read, and utilizes the screen space only when I need it to.

Answer 2

Let's overthink it for one second

You see we can come up with infinite crazy unusual solutions, but we would be always surrounding ourselves in risk (new pattern, will it work etc etc...)

1. Rotate the text
2. Gradually decrease font size (left most large to right most small)
3. Show the first letter

etc...

We will probably never provide a comprehensive solution in this direction.

Maybe 20/80

While i do not know your product or your users i can almost bet the the 20/80 principle would work well here.

Let's say the 99th percentile of maximum number of categories for your users is 20 categories.

This means according to the 20/80 principle your users are using 4 categories 80 percent of the time, and the remaining 16 categories are used 20% of the time.

If this holds, then it make more sense to go for something like

As you can see, you still give the user the ability to access the important categories with ease and speed, allow them to have the flexibility to define which are the important categories and when they need the other ones, they need to make an extra step, this way you have divided the problem into two and solved both.