How to handle cascaded navigation in mobile design?

Question

I'm designing an app for HR use. As you can see in the screenshot below, there is a dropdown box where you can select the person to view. There are a few different subsections of that (Details, Employment, etc) below in a set of tabs and the currently selected subsection below that.

As you can see, the subsection tabs do not fit well. If I lay them out horizontally they will be too wide for the screen. If I reduce them to icons only then I believe it will reduce readability. There may be a requirement to add further subsections in the future too.

One thing I'm thinking is to make the dropdown box a page on its own, and when you select a person, load the subsections on a new page.

The downside to this is you would need to go back a page to switch people.

How could I best lay this page out?

Answer 1

One of the best ways to approach nested navigation of mobile devices is using Accordion (GUI)

Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration. Wikipedia

In the mockup below i've used accordions to simplify the navigation. L1 - top level employee navigation, L2 - details navigation

Answer 2

One option is to use a design similar to a tab bar: use larger icons, add the description below the icons, possibly quite small.

This works well up to 5 items on a phone. Beyond that, it's a bit more difficult. One solution is then to have an horizontal scroll of that bar, but it needs to be obvious. You could for instance make sure the last icon is always "cut" initially so one know there's more. You could also add arrows/chevrons, but this is not quite standard UI on a mobile.

An alternative is to use a pager where the top of the screen is fixed (the user selection), while the bottom section can be scrolled horizontally (using a swipe, always bouncing back to being properly aligned of course). Again, you need a hint, which could be either the standard "dots" at the top or bottom, or arrows/chevrons around a section title at the top.

Answer 3

One option is a Scrollable Tabs pattern, as mentioned by @jcaron. It seems to fit well here. Something like:

or

Scrollable tabs are described in Material Design. However, the usual advice is to avoid scrollable content in navigation as users do no see all options before they scroll and have to perform additional taps. Actually, it was discussed here: Why is a scrollable bottom tab bar discouraged? and here: alternative to scrollable tab bar for mobile.

---

Another option, that came to my mind, is a Navigation Drawer. It is commonly used for a top-level navigation, but is also recommended for two or more levels of navigation hierarchy. So, I thought you could try something like:

->

You already have a hamburger button on a top bar, so another one would be confusing. But if you like the general idea you can develop the button in something more suitable, like shevron or "More" button or other.

Answer 4

Why not just make the tabs a second dropdown underneath the name dropdown?

The impact on vertical space is minimal; you scroll down to read and scroll up until only the tab-dropdown is visible if you want to change the tab, and 50 pixels extra if you want to change the person.

It certainly is more fluid to navigate than inserting a whole new page in the workflow.

As a bonus, this lets you switch users but stay in the same tab, which can be handy if you want to compare specific information. For example if you just want to look up who might be available on a certain holiday.

Answer 5

You may try to show only one level of navigation at once, while showing the current level depth as breadcrumbs.

Answer 6

One thing I'm thinking is to make the dropdown box a page on its own, and when you select a person, load the subsections on a new page.

This is a good idea. I suggest to swipe between the subsections from left to right. The benefit is that each subsection has full screen space. Some indicator or control for swiping might be needed but would take less space than a menu.

Answer 7

Welcome to group.

Drop-down will remain as it is. But instead vertical tabs will get converted into horizontal tabs.

May be you can try this option.

Hope this solves the problem.

In addition to this I would like to know how many options will be displayed/shown in the drop-down?

Answer 8

You should have a look at drilldown menus (see here for an example). They are a well known and established way to navigate hierarchical information on small screen sizes.