Patterns

There are three patterns to choose to represent a collection of resources.

The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.
A collection of resources represented as cards. It’s effective for glancing at small sets of similar resources with text, numerical, and imagery data sets.
A collection of resources presented as table or cards and paired with a split panel for contextual resource details. It’s effective for quickly browsing or comparing key resource details.

View resources flow chart

Criteria

Choose the most suitable pattern to represent the resource collection:

Using a split view

Split view is an optional extension of the table view or card view, that adds a collapsible panel for displaying additional resource details. It is effective when users need to quickly view or compare resource details of multiple resources in-context to resource collection. Use a split view only when your users go through workflows such as monitoring or troubleshooting, which often require an additional layer of details on the table/card view. Don't use a split view when standard table/card view with separate details page meets your user's need.

Choosing between table view and card view

Table viewCard view
Number of resources in the data set9 or more resources in 99% of use cases5 or less resources in 99% of use cases
Metadata* being displayedShared metadata between resourcesDifferent metadata across resources (different types of databases with different data)
Metadata typeData that is displayed in columns (text, numerical, status, sparkline)Data that can be displayed as visuals (charts, videos)

* The configuration details of a resource. Example: ‘date created.’

Number of items in the collection

Tables enable users to quickly scan and sort columns, to compare metadata across many resources.

Use a table if the resources share the same metadata, and your users will be comparing resources to determine which to take action on. Use the card view if users will not be comparing between a large number of resources to determine which to take action on.

Metadata being displayed

Table columns allow for the same metadata type to be displayed across all resources, and allow for easy scanning and comparison of similar metadata.

Cards allow for different metadata to be displayed at the same time in a constrained space.

Metadata type

Tables are optimized for displaying metadata that can fit into data cells, and can be sorted and compared. Cards are optimized for displaying non-columnar data, like charts or images.