Tree View - UI Element

The tree view is a UI element that helps users visualize a structural hierarchy more easily. Tree views illustrate the parent-child relationship between nodes.

‍

‍

1. ‍Basic Tree View

The default form of a tree view showcases a tree structure with labeled nodes. By actioning the arrows, users have the capacity to see the child nodes as they collapse, revealing an additional list.‍

2. ‍Basic Tree View With icons

Additionally to the basic tree view, this type adds icons to the nodes. The icons can be visualized between the collapse/expand arrow. If a tree is used alongside other design elements, its icons should be easily differentiated and distinguishable.‍

3. ‍Checkbox Tree View

This type of tree view integrates checkboxes that appear between the collapse/expand arrow and the name. Its’ main purpose is to indicate whether a node has been selected.

‍

• Icons. If a node from a tree view has an adjoined icon, that means that every node in that tree will also need to have a designated icon. This is done to ensure visual balance and coherence in the design.
• Interactions. There should only be one interaction per tree item, otherwise, the structure becomes complicated and difficult to use.
• Actionable Elements. The actionable elements in a tree view should be mouse-only and should not be focusable. Besides this, they should be hidden from keyboard users and screen readers.
• Hierarchy. A tree view has to show elements based on a hierarchical structure. Usually, nodes are either organized alphabetically or by priority.
• Text. The labels used for each of the nodes in a tree view need to be straightforward and intuitive. Another important aspect is to keep labels as short as possible, due to the limited space.

‍

• Navigation. The main purpose of the tree views component is to simplify navigation when it comes to file system structures that are comprised of documents and folders.
• Enhancing User Experience. A great advantage of integrating tree views into apps or websites is that it can significantly improve user experience by providing a more accessible means of navigating files.
• Quicker Interactions. Due to the fact that tree views better organize elements, users can perform tasks and access folders and documents more quickly.
• Do Not Use. There are certain cases in which implementing a tree view would not be appropriate. One of these instances is for hiding and showing content or UI elements on a web page. Another example is using tree views as the primary navigation for a product’s user interface, which is not suitable.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find tree views and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!