A master-detail UI is used to handle a one-to-many relationship. Nested master-detail relationships are common as well. For example, the selection of any company department (master) may reveal the employees in that department. Selecting any employee in that department may reveal any number of details about that employee. A UI can express a master-detail relationship, nested or not, in several ways.

There are three principle master-detail interactions.

Master-Detail Interactions

A common characteristic of master-detail UI interactions is that the master and detail are yoked – meaning that traversal across master objects traverses one or more detail objects. When two or more details are yoked to the same master, the suite should allow navigation across peer details. Do not require a user to navigate back to the master in order to navigate to the other peer detail.

The following image shows an in-context, master-detail page. The user inputs key characters to filter the list of contacts in the left pane, navigation area. Once sufficiently filtered, the user selects a person (master). The details of that person are revealed in the content area.

Depiction of in-context master-detail page, with master on the left, and details on the right side of the page.

Unsaved Changes

If a user happens to navigate from a master-detail page to another page or service without saving any changes when an explicit save model is used, a warning dialog must appear advising of this.