Data Structure - The Tree

A successful product must be based on data and design. Both must be congruent at all times; they can be used to inform each other and to help them understand their users. Different data tables have different sizes, complexity, contents, and purposes. Well-designed data tables enable users to make decisions and take action regardless of the use case.

Frame 9.png

This article is all about my personal experience to help you design better data tables in your applications. As a product designer, the first thing to understand is the value of data and its application. Data is useless without the ability to visualize and act upon it. Enhanced data collection and better user experiences will be a prerequisite for the success of future industries. Whenever we visualize a data table, we always envision rows and columns. However, there are other ways to visualize it, like…

Tree Table

It contains a hierarchical set of data structured in rows and columns and grouped into nodes. It allows users to navigate nested hierarchical information. Trees are commonly used as non-linear data structures. They don’t store data in a linear way. They organize data hierarchically.

Frame 3 (7).png

It is best to use trees when users already understand the hierarchy…

The users who are most enthusiastic about tree control are likely to know the hierarchy the best. Putting the hierarchy into context, let's think about two things: who made the hierarchy, and do my users know it?

It is known…

Frame 10.png

According to this medical-based tree, the hierarchy is determined collectively by the anatomy of our heart. As a designer, you might be able to assume most users understand and know about the trees data table. They will probably find it easy to navigate to specific observations such as Rheumatic if this is the case. It can still be difficult for users to understand the classification of things even with "well-known" trees. Is it possible to locate Doming of AML reliably? Commissural fusion? Ask yourself honestly, do the users really know this tree?

If the user knows what he is looking for and where it is located in the tree, the tree can be an excellent widget. There is the capability to present hundreds or thousands of items in a compact space, which is easy to navigate by the user.

Large trees fall down…

While we've discussed how to use trees, we also need to address when not to use them. It is fundamentally used to organize hierarchical information so that it can be found quickly without errors. Users can find items by navigating a tree: opening and closing nodes as well as scrolling.

Frame 11.png

The more data there are in the tree, the harder disquisition becomes. This means that a tree with data in it's harder to use than one with 100 data in it. That’s true indeed if all the data are in one vessel, just because of the scrolling needed. The more the groups, the more delicate it becomes to explore all data. The user has to open, scroll, close, etc. to find all those data. As the number of data in your tree grows, consider some capabilities that will help users.

Try to give the tree as important perpendicular space as possible, to enable the user to see as numerous particulars, at a time, as possible.

Generally, when we use a tree we show the tree on the left and the user can select an item in the tree. On the right, we frequently show the properties of the selected item. An alternative to this is to rather use a tree table, which incorporates the expand/ collapse controls into a table.

Data Structure - The Tree

Comments

More from this blog

The Power of Grids in Design

Exploring Liminality: Designing in the Space of Transition

Unraveling the Domino Effect: How Design Choices Shape Digital Experiences

Jenga: The Story of Our Design System

Navigation Architecture Design

Tree Table

Conclusion

Command Palette

Comments

More from this blog

Tree Table

Conclusion