What is a "List-Detail" Interface in an Application?
List-detail is a common design pattern for graphical user interfaces where you have a layout consisting of two panes: the "list" pane, and the "detail" pane (also called the main pane). The list pane displays a menu as a vertical list of items, while the detail pane displays details about the currently selected item. The list-detail pattern works essentially the same way as tabs, but tabs are typically shown on top of the detail view, while the "list" is typically shown at the left side. Both tabs and list-detail are commonly found in dialog boxes, specially in settings dialogs which can be complex and have many options, requiring one of these for navigation.
The list-detail interface has a few advantages over tabs:
Item Count: tabs become cluttered if they have too many items. The list pane can have its own scrollbar and as many items as it needs.
Organization: the list pane can use a tree view instead of a list view to show its items in a categorized, hierarchical manner.
Style: the list pane may feature large icons for the settings, while tabs can only have tiny icons.
Complex Navigation: complex settings may require a main navigation AND a sub-navigation, in which case having 2 tabs bars one on top of the other can be inconvenient (see Inkscape's "Fill and Stroke" tab, which has a "Fill" and a "Stroke paint" tab within it for an example of why this is bad). In this case, one option is to mix list-detail with tabs, having the list for main navigation, and tabs in the details pane for sub-navgation (e.g. Krita's settings dialog does this).
Unified UI for Small Screens: cross-platform applications that need to operate in various screen sizes can use the list-detail pattern to unify their dialogs. In large screens, both panes are displayed, while in small screens, the list view is display normally, and when a list item is selected, the screen switches to display the detail view for that item.
Leave a Reply