UI Design Patterns: Hierarchical Master Detail

Problem Summary

The user needs to traverse through a hierarchical or tree-like structured data and do CRUD (Create, Read, Update, and Delete) operations.


Screenshot (click to enlarge)

Use When

• The data is structured in a hierarchical manner. Example: organization structure, web pages.
• The amount of fields/columns in the data is sufficient enough to be displayed as a form in one screen-length.
  

Don't Use When

• The data is flat
• The data consists of very few fields, e.g. only key and value, or consists of many fields that span across several screen length.

Solution

• Divide the screen into two columns.
• The left column contains a tree view control to let the user navigates through the hierarchical data. On top of the tree view control is a toolbar (or collection of buttons) to work on the tree view. In the screenshot, it has "Add Child" to add a child node, "Add Root" to add root node, and "Remove" to remove a node.
• The right column contains a form that the user can use to add new data and update existing data
• The form on the right will only appear when there is selected node on the left.

Suggested Improvement

• Drag and drop among nodes in the tree view. Drag and drop is a sophisticated operation that moves a branch of hierarchical nodes from one parent to another parent.
• Clone node feature for faster creation of new data. Instead of always starting with blank form, the user is aided with a copy of data from another node.
• Load on demand treeview to handle large hierarchical data.
• Banding to improve the performance when there are too many children under one parent node
• Hierarchical delete. When the parent node is removed, all its direct and indirect children nodes are also deleted. If this is not possible, then the user should only be able to delete from the bottom-up.
  

Enterprise UI Design Patterns anyone?

As mentioned in my previous post, I have been closely following the UI design patterns published on the Internet. These patterns are really problem solver, however, I feel the majority of the patterns do not apply to the type of web application I am building.

In my current company and previous ones, I build web application for business use. This type of application have their own distinct characteristics and problems:

• Manipulates a lot of data in form layout
• Majority of the operations are CRUD (Create Read Update Delete)
• Data validations
• Hierarchical and flat data structure
• Deals with master-detail relationship
• etc.

I have been identifying some UI patterns that my team and I often use in the web application to tackle the same repeating problems. In the next posts, I will start documenting those UI patterns so that my reader can benefit from it. Feel free to comment on my patterns as I always need to continuously improve them.

UI Design Pattern Galore

Nowadays, there has been a growing number of web sites that collect UI design patterns. The UI design patterns are common solution to recurring problems when designing user interfaces. Whenever I face a usability issue or make a judgement on screen design, I always recall to the collection of UI design patterns. Therefore, it is so useful to bookmark web sites that collects design patterns. My top three sites on the list are:

Yahoo! Design Pattern Library
It has a lot of interesting (read: advanced) patterns like drag and drop, animations, etc. It is good to discover what today's web applications can do. When you are ready to put the patterns into practice, try the companion Yahoo! UI library.

Designing Interfaces
I read the book with the same title first before discovering this site. This is the book/site to discover more UI patterns beyond web page.

Patterns in Interaction Design
Plenty of patterns and tons of screenshots make this site a good reference.