Mobile apps with large hierarchy/tree selection, with scrolling in two directions

Question

We are currently developing an app with a content catalogue. The catalogue is large (about 5'000 nodes) and hierarchical, with the typical node having about 5-10 subnodes. We want to display this in a nested UI, with mixed scrolling, something like this:

------------------------------------------------------|
| Level 1, scrolls horizontally, coupled with level 2 |
------------------------------------------------------|
| Level 2, scrolls horizontally, coupled with level 1 |
------------------------------------------------------|
|                                                     |
| Title of currently selected Level 2 item            |
|                                                     |
|    ---------------------------------------------    |
|    |  Level 3 container, scrolls vertically    |    |
|    |                                           |    |
|    |     ---------------------------------     |    |
|    |     |  Level 3 item                 |     |    |
|    |     |                               |     |    |
|    |     ---------------------------------     |    |
|    |                                           |    |
|    |     ---------------------------------     |    |
|    |     |  Level 3 item                 |     |    |
|    |     |                               |     |    |
|    |     |  ----------------   ----------|     |    |
|    |     |  | Level 4 item |   | Level 4 |     |    |
|    |     |  ----------------   ----------|     |    |
|    |     |                               |     |    |
|    |     ---------------------------------     |    |
|    |                                           |    |
|    ---------------------------------------------    |
|                                                     |
------------------------------------------------------|

As you can see, there are four levels of the hierarchy visible at the same time, and they are all scrollable, three of them horizontally, and one (level 3) vertically.

So if the user scrolls

• level 1, then level 2 scrolls simultaneously, but at a faster pace (because we have more items at level 2 than items at level 1).
• level 2, then level 1 scrolls simultaneously, but at a slower pace. When a new item at level 2 is centered, then the whole lower UI refreshes and shows the currently selected level 2 item.
• level 3, then the level 3 items scroll up and down. This is the only level that scrolls vertically.
• level 4, then the level 4 items, which are nested in the level 3 items, scroll horizontally.

My question is, has something like this (or parts of it) ever be done? Are there any apps (preferably mobile apps) that use a pattern similar to this?

Answer 1

My first bit of advice would be to avoid using horizontal scrollbars. These tend to be unintuitive for users, unless there is a very explicit and obvious way to scroll (maybe there are arrow buttons on each side to allow you to move to previous and next item). In some cases, users don't know how to scroll horizontally.

Adding multiple horizontal scrollbars that react with each other is where it gets really complex, both from a UX and development standpoint. When I move level 2, things are going to start moving around from my selection above, and that sounds confusing. I'd have to spend a lot of time trying to learn how to navigate the new design pattern you've created, while also getting distracted by things I'm not touching moving, rather than focusing on the product or other value you are trying to provide me with.

If I understand the problem correctly, you are looking to have level 1 and level 2 be high level filters so that level 3 can display a list of items relevant to the search criteria you specified in level 1 and 2. Then, you can list your level 4 results for a selection. Perhaps there's some variance, but it sounds like this is what you're after.

If we reduce that down to what exactly the user is looking to do, it sounds to me that you are trying to create a method for filtering information that will offer differing options for a user to make selections.

My suggestion would be instead go for dynamic search filters. If you select A on level 1, then show me all the results for A in level 2. This would require a signifier that level 1 is directly related to level 2's results. Then, as you select level 2, display title of level 2 as you would.

Consider including level 1 as a breadcrumb trail to make it even clearer to the user that these selections are directly related.

There are still many questions as to your context that makes it hard to fully answer, but I hope this gives you some ideas and insight for finding the right solution.