1

I am developing a tree chart app. It currently looks like this:

enter image description here

This is only small part of it, once zoomed out a bit you can see the bigger picture of it: enter image description here

How could I be able to make it smaller? I was thinking about resizing the tree nodes and make them pop on hover. Something like that. But I would also like to hear your suggestions.

1

It's impossible to show all the nodes of a big tree and have them all readable so compromises are inevitable:

Clearly the compromises are as follows:

  • Don't show the entire depth. Show subset of the levels or a selected discontiguous subset of the levels, possibly using a similar eliding technique as you might with text, to indicate undisplayed portions.

  • Don't show the entire breadth. Show a sequential subset of items at a given level, possibly scrollable or paginated in some way.

  • Both of the above

However, there are creative ways of adapting what you show and when. Some methods might put too much onus on the user to remember where in the tree to find things. Although a first view of the tree may be more exploratory, it might be worth considering navigation aids to help with repeat visits, such as favourites, history, bookmarks, or url-enabled views.

One approach for some inspiration might be to borrow some ideas from mapping tools. Maps after all are the ultimate tree view tool! Users can browse from a global view down to the tiniest village anywhere in the world, but you can't view both at once.

Here's a couple of examples:

Show a zoomed portion of the whole tree, with a highlighted thumbnail view of the whole tree in a corner view. This would work better if you have full zoom/pan controls, perhaps with 'notched' points for key zoom factors. enter image description here

Use an automatic clustering technique as you might with pins on a map, where the clustering depends on the zoom factor. enter image description here

I have in the past used the Google maps API as a browser based tool for navigating huge images (tiled) of large tree-like structures. It depends on how much interactivity you need with your tree.

    -
0

You could manage drop down menus so users can navigate at different breath/depth levels. Showing the first levels initially and then the user can unfold deeper levels with the drop down option.

0

Unreal Engine has a similar node system that handles this problem well. Adding the option to minimize individual nodes can help save space. Furthermore, allowing the user to "group" nodes (e.g. highlight a group of nodes and create one large node around them that acts as a folder) and then being able to minimize the group would help considerably.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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