2

I'm seeking insights on the most effective graphical representation for visually indicating the relationship between two containers: one serving as the parent and the other as the child. The primary objective is to swiftly convey the depth of their relationship.

Initially, I explored nesting the child container within the parent container. However, this approach presents a symmetry issue since both containers contain information. Consequently, vertically misaligned text arises, leading to a notable visual disturbance as illustrated in the image below (highlighted by red lines). Parent-Child Example

Additionally, I experimented with positioning the child container beside the parent container's information rather than below it. However, this alternative method still presents challenges with horizontal alignment.

2 Answers 2

1

If you have only two panes, you can often get away with simply placing the child below or to the right (for western cultures) of the parent and use the same vertical alignment. Users often can tell from the pane titles that one pane is the child of the other, such as in a window manager like Windows Explorer.

When you have multiple panes, then you are more likely to need to graphically encode the level and relations in the hierarchy. Indenting or nesting the panes is an intuitive way to show hierarchical relations, but you’re correct about the alignment issue. It’s not just an aesthetic problem. When there are multiple levels, indenting can waste a lot of space and it can be hard to distinguish the level of indenting when higher level panes have scrolled out of view. Nested boxes also waste space but in theory the user can see how deep they are in the hierarchy by counting the box borders. In practice, however, the boxes can become a confusing clutter of lines or shades.

  One approach I’ve had success with is to indicate the level of panes with different number of “bullets” in the pane title: Two plus signs in front of pane

The rule is each pane belongs under the next closest pane above it that has one less bullet. This allows for complex relations among panes, including panes that may have multiple child panes of the same level, each for a different object class: 10 panes in various relations

Okay, that’s getting carried away. Generally, you want to limit a single page or window to about 6 panes, assuming skilled users. But I have found that once users “get” the rule, they can easily understand many variations of relations between panes. They still have to “get” the rule, so this may not be suitable for use-it-once web sites, but rather for sites users use frequently so it’s worth the trouble of learning the rule.

For use-it-once sites and/or untrained users, you may be better off breaking the hierarchy into pages and using breadcrumbs to indicate the depth and relation among pages.

Single third-level pane with path as breadcrumbs

In other words, represent the hierarchy in the navigation structure, rather than master-detail panes.

2
  • Thank you for your insightful suggestions. I've implemented the positioning as you recommended, working specifically with only two containers. However, I encountered a symmetry issue. Do you have any additional suggestions to address this while maintaining clarity in indicating the parent-child relationship?
    – Alice
    Feb 19 at 6:14
  • Maybe I don't know what you mean by a symmetry issue. If there are only two containers and the container titles make the relation obvious, then you don't have to indent the child container, and the child fields align under the parent's (assuming they have the same fields). If you use indenting, you could oversize the first field of the parent table a little so at least its right edge and the remaining fields align between parent and child. Feb 20 at 14:15
0

Nesting as you have shown in the image is the most suitable option. The visual disturbance can be minimized and useful redundancy can be added to show the hierarchy if you

  • align all leading texts in a card level with the card caption or heading. This can be achieved by adding a bullet symbol and some spacing to the caption or header.
  • Change the style of child fields as you cannot add any container effects to the child card.
1
  • Thank you for your suggestion to utilize nesting for the parent-child relationship between containers. I'm interested in implementing your approach but would appreciate clarification on two points: 1. Could you provide more detail on aligning leading texts with the card caption or heading? 2. Regarding changing the style of child fields, could you suggest specific style changes for clarity without container effects? Your insights are appreciated, and I look forward to your response.
    – Alice
    Feb 19 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.