Replying to Avatar Vladimir Krstić

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!

Man, I love having you in my feed! Great input again.

I started from mobile with very similar sketches to yours but from a different assumption:

That you only really need to see the two previous levels (and not the very Top level) and then scroll up from there.

I see users mostly following a pattern of 6 steps down, 2 steps up. Similar to how they browse deeply nested documents.

On mobile I thought of something like this:

https://cdn.satellite.earth/dac0ffb69394b9dc528e2439c7557ad57d75c430bbe325e67629134b5f3952ef.mov

On top it shows the parent and you can horizontally scroll through the path or click the show/expand path button.

Reply to this note

Please Login to reply.

Discussion

Glad I could be of help. Really appreciate what few of you are doing here with designs!

This looks really good! I like it very much.

I have a problem with filter placement, it breaks the connection between the parent/s and the children. But if you put it above the parents it may not be so obvious what you filter. Probably can be solved with different visual presentation. Or, if filter applies to the whole tree it can go above. I would also prefer that you don't have a second dimension(horizontal scroll of parents), just stack all levels vertically. Users will better understand the flow.

This is a very complex problem to solve, needs a lots of research. These were all my assumptions. I feel like most would like to see a top level picture, to see the start, how many levels are in between, and where where they are at in that flow right now. Maybe I am horribly wrong. Based on my design if you've noticed that users often wanna see 2 parents above we can add button to roll-out next parent above active problem. Even if data shows that most of the time users want to see 2 parents above, it can be a bit hectic to understand why and it creates a bit more complex pattern. I would prefer simple pattern with added cost of extra click to open up that next parent just to keep the pattern simple and make sure user understands where he's at. Again, this is only me and my assumptions.

Keep on rocking!

I first had a filter button on top indeed. But then the buttons get real small. I'm going to try your suggestions too and see, thanks again.

Hey nostr:npub149p5act9a5qm9p47elp8w8h3wpwn2d7s2xecw2ygnrxqp4wgsklq9g722q I saw the problem you logged for this, thanks!

This is a really difficult and complex problem, and it's good to distill/focus all the research and designs etc from you and nostr:npub1t3gd5yefglarhar4n6uh34uymvft4tgu8edk5465zzhtv4rrnd9sg7upxq in one place, which is better done by someone who understands UX design rather than someone like me who does not.

It also makes it clear later on that you made a big contribution in case the project is successful 👀

FYI you should be able to edit the problem to add the research etc, and markdown (with images) is supported

Cool! 👍 I'll do that.