This is super interesting. You have a column for each level, right? If that's the case, that would be a lot of horizontal scrolling and unnecessary scanning. It would be overwhelming on desktop and claustrophobic on mobile. Also, keep in mind that many desktop users don't use a trackpad or a mouse with a horizontal scroll wheel.
We should ask a question - what's the most important content a user needs to see at a glance? Probably:
- Active Problem
- Parent Problem
- Top Level Problem
What content is of medium importance? Probably:
- All parent problems (going all the way up to the top level)
- Child problems
What content is of low importance? Probably:
- Sibling problems
- Parent's sibling problems
So how would I do it?
We have a top-level problem - Problem Omega, and we are located at Problem Delta, which is buried 22 levels deep. We see these two at a glance. Between these two, we have 20 levels stacked. We don't need to scroll through all of them. We can expand and see the whole path down if we need to. Eventually, we can click on some of them, and at that moment, it becomes our active problem; it replaces Problem Delta. Now, if we jump like this, we would definitely need: navigate back, navigate forward, pin, or bookmark functionality. Below Problem Delta, we have his children. We don't have to stack them as they are below.
Here, I was thinking only about the most strip-down version, a mobile version. That's because it is easy to add things but super hard to remove them, so it's always wise to do a mobile design first.
Hope this helps. Cheers!
