Key UX concepts

  • Default

    Table view of all user resources within the service.

  • Data density

    Table view of all user resources displayed with more or less entries per page, set by the user view preferences.

  • Sort

    Table view of all user resources sorted on a certain data set by the user. Each individual table column can be sorted in ascending or descending order.

  • Filter

    Reduction of the list of user resources by a specific query set by the user.

  • Empty state

    Table view in a state of when data has been successfully fetched, and the table contains no resources (example: user deleted all resources).

  • Error state

    Table view in state of when a problem occurred fetching user resources. Supported with flash message pattern to notify the user in case of request timed-out or no access.

Building blocks

A
B
D
E
F
G
H
I
C
I
A
B
D
H
F
G
E
C

A.
Flash message

Use a flash message to notify the user about the progress and outcome (success or failure) of the actions taken upon the resources.

B.
Breadcrumbs

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).

C.
Table

Use the full-page variant of the table component for this pattern.

D.
Header

Group all the actions that a user can take upon one or multiple resources in the action stripe. Usually, those are View details, Edit, Delete, and Create. The single or multiple selection of the resources affects the state of the action stripe. It reflects the action that can be taken upon single or multiple resources.

E.
Filter - optional

Text filter helps users with an extensive number of table rows to quickly find one or several resources with a matching query. The entire set of columns are used as a base for the filter.
We recommend building in a custom message, with a clear call to action to clear the filter, when the query doesn’t match with any resources.

F.
Pagination - optional

Pagination helps users with an extensive number of resources to navigate through them across multiple pages. Users can change the default number of table rows per view on Resources preferences.

Display the pagination even if the resources set fits in one page.

Navigating via the pagination functionality overwrites any selection.

G.
Preferences - optional

Use preferences to allow users to view and change their display configuration. User configurations in preferences affect the following settings of the table view:

  • Number of rows displayed per page (Pagination).

  • Which columns are visible or set to hidden.

  • The wrapping of the lines in the table cells.

  • Change of view pattern: from table view to card view, and vice versa.

H.
Selection - optional

Table rows can be selected individually or in bulk (multiple selection) via the checkboxes mechanism. The parent checkbox, living on the table header, only selects rows visible on the page.

Any actions triggered after selection only affects the selected visible rows. Selection is overwritten by:

  • Table sorting,

  • Pagination,

  • Preferences,

  • And as soon as they are no longer visible on the page.

I.
Side navigation

Navigation is open by default on view pages. You can learn more about structuring side navigation content in service navigation.

General guidelines

Do

  • Use table view pattern for static data with multiple attributes displayed in a tabular format.
  • The best data type for a table view is data that is structured, easily comparable, and sortable.
  • Restrain from incorporating graphics in tables. For data sets with a blend of text, images, and data visualizations, or content with mixed formatting, refer to the cards view pattern.
  • Organize columns and rows based on the information needs of your users. To help them read the table, order the columns by importance from left to right.

Don't

  • Table view should not be used for page layout purposes.

Writing guidelines

Text filter (optional)

  • For the text filter placeholder, use the following text: Find resources

  • Use sentence case.

  • Don’t use terminal punctuation.

Table header

Follow the writing guidelines for tables and cards.

Custom messages

  • Use active voice wherever possible. Use passive voice only to avoid blaming the users.

  • Avoid excessive words, such as "please".

  • Avoid uppercase text and exclamation points.

Empty state (optional)

The goal of this message is to inform the user that data has been successfully fetched, and the table contains no resources. Consider incorporating:

  • A clear identification of the state. For example: Empty resources.

  • A descriptive explanation of the reasons why the state is displayed.

    • For example: No resources to display or You have no resources created.

  • The message can be extended by adding a call to action. For example: Create a resource.

Error state (optional)

Make sure to inform the user in concise and clear language, that the system encountered an error retrieving resources. Consider incorporating:

  • A clear identification of the state. For example: Could not retrieve resources.

  • A descriptive explanation on the reasons why the state is being displayed. For example: Could not access your resources.

  • A single call to action to recover from this state. For example: Refresh or Contact support

Zero results (optional)

Use concise and clear language for your custom message in cases of zero results resulting from the text filter. Consider incorporating:

  • A clear identification of the state. For example: Zero results or No results.

  • A descriptive explanation of the reasons why the state is displayed. For example: No resources match your search.

  • A single call to action to recover from this state. For example: Clear filter or Go back to default.

Accessibility guidelines

  • Every table cell should have a logical column header or row header.

  • Users should be able to access and move the active state using their keyboard (arrow keys). Each single resource has focus on the navigation (links) and on the selection mechanism (checkbox).

  • Table must be visible in screen reader list of tables.

Related patterns and components

With the view resources patterns, users can find and take action on a collection of resources in the most efficient way possible.
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.