Best way to express relationships in a Tree View?

Question

I understand that a tree view is used to express a hierarchy and relations and for grouping but I'm struggling with what if two things in different groups on the same level have a relationship and how to express it.

As you can see in the image there is a tunnel between VPN 1 and VPN 2 and in the current solution you create a new group on the same level and call it a tunnel. Is this the best way to solve this? It feels like it makes the tree very populated.

I'm wondering if anyone know any good solution to this. I'm very open to suggestions and completely different solution is welcomed too!

Answer 1

The interface with "tunneling" is confusing. I'd expect users to require training to use the interface you've shown. Some options to consider:

• Reorganize the hierarchy. You might simply need to flip the order of some nodes to fix the problem.

• Use tags. They can be shown in a tree, but they're not really hierarchical, so it doesn't matter if nodes are shown in multiple places.

Answer 2

Since users will refer to similar interfaces or scenarios in their past, I would try to think about some interfaces (familiar to your users) that follow some notion of "connecting" files. Some examples might include:

1. Shared files
2. Network options in file explorer
3. Other enterprise software with similar notions

Some ideas for the representation:

1. Instead of representing tunnels as folders, you could introduce a different icon that signifies a connection.
2. Consider giving an optional view, such as an "tree diagram" or even a table, that can better represent nodes and their connections. File folder systems are good for strict hierarchies but are limiting to show a connections.