Patterns

While your service could include a split view which provides users with a subset of resource details, a dedicated resource details page allows users to view the details of a resource on a single page and perform actions on that resource.

Users can use tabs to view the configuration details of a single resource on a single page. Users can choose each tab on the page to easily switch between different groupings of information in the same view.
With the details page as a hub pattern, users can view the details about a resource and a preview of related resources. Use the hub for resources that have large and complex data sets.

Flow chart

Criteria

Details pageDetails page with tabsDetails page as a hub
User tasksOne main taskMultiple tasks on a resourceMultiple tasks on a resource and related resources
Content structureEverything at a glanceContextualContextual
NavigationDoes not serve as navigationDoes not serve as navigationServes as navigation

User tasks

Users can perform tasks that directly affect a resource (for example: Edit or Delete the resource) or tasks that also affects a related resource.

  • Use tabs to structure the information into independent, actionable groups.

  • Use a container with a link to navigate users to related resources.

Content structure

Details pages should always contain the details of a resource. If possible, display all information at once on a details page, so that everything is accessible by the user.

  • Details page with tabs displays details of a single resource on a single page, grouping information by task.

  • Details page as a hub displays details of a resource and a preview of related resources on a single page. Provide links to view the full resource collection for each related resource.

Navigation

The details page (with or without tabs) is always self-contained and keeps the user focused in one place.

Use details page as a hub if users need to navigate to one or more view resources pages.