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!

Reply to this note

Please Login to reply.

Discussion

I was wondering who would be the first to notice that it's using carbon!

Your observations and notes here are seriously helpful and really awesome.

Have you worked with carbon before? I find it really difficult to do any frontend/design/layout stuff in general, but carbon definitely makes things easier.

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.

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.