The split view is an extension of the table view or card view. It adds a collapsible panel for displaying additional resource details. It’s effective when users need to quickly view or compare resource details of multiple resources within their workflow. The split view serves three primary objectives:
Resource identification: Users need to quickly view key details to identify resources within a group of similar resources. The key details needed in this scenario are often a list of sub-resources or additional attributes which can’t be displayed in the table or cards view, but are critical to identify a specific resource.
Monitoring: Users need to quickly check details like status or metrics, to monitor the health of a group of resources.
Troubleshooting: Users need to quickly check or compare relevant resource details to troubleshoot an issue.
A split view is a page layout used to view resources and browse key details. It’s split into two main parts: the main page area, and the actual split panel with resource details.
A split view is a page layout used to view resources and browse key details, which is 'split' into two main parts: the main page area, and the actual split panel with resource details.
Main page area
Use the main page area to display the collection of resources following the guidelines of table view or card view. The main page area contains these building blocks:
Use the service name for the root page in the breadcrumbs, and make it a link. Follow it with the page title, which is usually the category name of the service items (Examples: Resources, Distributions, Instances).
Use table or cards component to display resource collection.
The split panel presents additional information about the selected resources. By default, it’s closed on page load and opens automatically on resource selection. Use the split panel component to implement this pattern.
Details of the selected resources
Display relevant details for the selected resources based on the user's objectives.
When structuring content in the split panel, start from the user needs and choose the appropriate representation based on the use case. Present users with meaningful content that fits into their browsing, monitoring, or troubleshooting workflow.
Make sure you consider how the content is displayed when the users select single or multiple resources, because the resources might have different structures or serve different objectives. Below are some examples of content and the corresponding use cases.
Use-case #1: A table of sub-resources for resource identification
Users need to view the sub-resources to identify a resource from a group of similar ones. Use a table to represent the sub-resources.
Use-case #2: An overview of selected resources for high-level insights
When users perform multi-selection, the split panel should present meaningful aggregated details. A typical example is an overview of the selected resources which summarizes key data points for users. This could include the status or state of the resources.
Use-case #3: An attribute comparison table for comparing resources
Users performing troubleshooting often need to scan attributes for similarities and differences to inform them about the next steps. To help with this comparison, use a table to represent attributes of multiple resources. For an example, see the split view with details comparison demo.
Follow these best practices to design a comparison table:
Use the selected resource ID as column headers, and the attributes to compare as the row labels.
To keep it concise, include only attributes relevant for comparison.
Help users narrow down the resources they’re comparing by filtering the resource collection. We recommend users compare five or fewer resources at a time (see Nielsen Norman Group guideline), but don’t block users from selecting more than five resources.
Display the resources from left to right following the order of selection. When a resource is deselected, remove its information from the split panel.
Use-case #4: Metrics for quick monitoring
Users need to view the metrics of a single resource or compare metrics across multiple resources and quickly parse specific highlighted values or trends to achieve fast monitoring. Show a group of key metrics represented as charts when users select a resource, and the combined data for these metrics when users select multiple resources. Make sure to follow the guidelines for data visualization.
Split panel layout
Split panel position
There are two positions of the panel: bottom and side. Choose the default position that best accommodates your content.
The bottom position is best when:
Users frequently need to view more than 5 columns in the resources table. A bottom position leaves more screen real estate to the resource table.
Users need to perform monitoring or comparing within the details panel. A bottom position provides more horizontal space for content like an attribute comparison table.
The side position is best when:
The resource table on the page typically has 5 or fewer important columns.
The details in the details panel are a small set of content for users to browse.
We strongly recommend implementing both positions and allow users to change the default position with the panel preferences to better fit their needs. The panel preferences modal is triggered by the preference icon button in the details panel.
Split panel states
The split panel is closed on page load by default and opens automatically on resource selection. Users can use the angle-down icon button to collapse the panel. Once users close the details panel, it stays closed even if they change the resource selection. This allows users to focus on the the resource collection.
Key UX concepts
Split view is not a replacement of details page
Always use details pages to display full resource details of a single resource. A split view should never replace details pages in the service information architecture. The details on a split view and on a details page serve different objectives. The details or aggregated details on a split view assist users with identifying the next steps in their workflow of resource finding and browsing, monitoring, and troubleshooting by providing in-context information of the selected resources. Whereas on a details page, users primarily view and analyze the details of a single resource.
Split view is for inspecting the selected resources
The content in the split panel should always reflect the selected resources.
When a resource is deselected, remove its details from the split panel.
When nothing is selected, display the empty state: a line of text informing users why the panel is empty and suggesting they make a selection to view more content.
When the selection gets cleared upon navigation, ensure the panel displays an empty state.
Follow the empty state guidelines for each component used in the split panel.
Always present meaningful resource detail aggregation when users perform multi-selection.
Use tabs to group content in the split panel if there are multiple groups of details to display.
Omit the containers and place content like key-value pairs directly on the split panel when possible to reduce visual noise.
Don't overwhelm users with information. Be selective on the content of the split panel and keep it concise to minimise the cognitive load.
Don’t repeat the action buttons from the table/cards header in the split panel.
General writing guidelines
Keep labels and descriptions clear and concise.
Use parallel sentence structure.
Use sentence case for all text. Don’t use title case.
Use terminal punctuation (periods, exclamation points, question marks).
Use present-tense verbs and active voice wherever possible.
Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."
For the content within the split panel, follow the writing guidelines of the individual components used. For example, container or key-value pairs.
A collapsible panel that provides access to secondary information or controls. It is the primary component to implement split view, a pattern to display resource collection with contextual resource details.