User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am developing a tree chart app. It currently looks like this:
This is only small part of it, once zoomed out a bit you can see the bigger picture of it:
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.
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.
Use an automatic clustering technique as you might with pins on a map, where the clustering depends on the zoom factor.
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.
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.
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.
