last updated: 20.08.2022
Platform: Web
Designer: Matthias Stenzl
Intro
Master detail patterns are used if users need to browse and navigate fast and easily through a set of items (master) with each item connected to further information (details) that is not or only partially displayed in the master. In most cases the master consists either of a table or a set of list items.
When not using a master detail pattern, selecting an item in the list or table would lead to a screen change to a details page. When using the master details pattern, both -- the hierarchy of the master item and the details information -- can be shown on the same screen. Therefore, it is easy to rapidly switch between different master items and gather their details information.
Usage
Master and details are each displayed in a separate section on the screen.
The vertical separation displays master and details in vertical columns. There are further variants for the vertical division of the columns:
Variants: 1/3 -- 2/3, 2/3 -- 1/3
or half -- half split.
Components
The master consists one of following:
a set of list items (Object List Items or Standard List Items) or
a table (Responsive Table, Tree Table, Grid Table or Analytical Table) or
a tree
The master may be filtered via a filter and / or search control.
Details can be displayed in various ways. The content of a details section could include the following: label value pairs, forms, lists, tables, actions, graphs, images etc.
Behavior & Interaction
There are independent scrollbars for the master section and the details section.
The details section may provide an edit mode with a dedicated toolbar for "Save" and "Cancel", spanning the width of the details section. When the user finishes editing by clicking on the "Save"-button, the master updates to reflect the changed data.
It shouldn't be possible to edit in bulk a master table / list within a master detail layout. Editing should only be possible in a full screen master without any open details to avoid confusion and conflicts.
It is recommended to use only two sections in master detail scenarios. One section for the master and one for the details. Using more than two sections can be overwhelming and distract the user. A flexible column layout with three columns isn't recommended.
Recommended for long master lists or tables with lots of lines. It provides a good layout for a big number of master elements and lots of details.
Depending on the use case the screen can be split like one of the following:
- 1/3 master and 2/3 details: Less columns in the master and lots of content in the details.
- 2/3 master and 1/3 details: More columns in the master and less horizontal space needed for the details.
- Half master and half details
Opening a details section does influence the layout of the master section. The width of the master section shrinks, the content has to be rearranged. The rearranging in one single step without any hint can confuse the user. Therefore, there needs to be an animation / choreography rearranging the master elements and sliding in the details. The same applies to closing the details section.
In master detail patterns it is crucial for the users to understand the underlaying hierarchy. Make sure that it is clearly visible which master item is displayed in the details section by using a navigation indicator on the master item. The title of the detail section should explicitly be the same as the name of the master item it refers to.
Resources
Fiori Guideline: Flexible Column Layout
Visual Core Wiki: Flexible Column Layout
Fiori Guidelines: List
Fiori Guidelines: Table
Fiori Guidelines: Tree
UI5 Demo Kit: Master detail example app