Horizontal-align "children" to "parents"

[j6k4m8]

In this screenshot, it's unclear to me that "Ask questions..." is not a descendent of "Learn more...":

It would make more sense — to me at least — if children were aligned so that I could read "across" a row; if there isn't a node in that row, then perhaps display empty space there:

Or perhaps I'm misunderstanding the semantics of this UI!

Excited to discuss this; I think this is a tool I've been looking for for a long time.

[eldelacajita]

I think I understand what you mean. You could align all children to their parents, but that would create an interface full of gaps. Imagine you have parent 1 with 10 children, and parent 2 with 5 children. In order to align each children to their parents, the distance between parent 1 and 2 would have to be equal to the height of 10 children, spreading the parents too far apart and making the whole UI almost unusable. You want to keep things reasonably compact.

So, instead, all elements flow vertically and children align only when the parent is selected. Both parents and children are shown in white, while the rest remains in grey, which is already a clear hint to tell which elements are related or not to each other.

[j6k4m8]

Sorry, meant to reply to this ages ago!

My interpretation is that the gaps are semantically meaningful: Those gaps in the UI are indicators of information flow.

Perhaps a way around this is is to collapse the height of non-selected children so they don't take up that much vertical space?

Another way around this is to just keep doing what you're doing, since it rocks :)