Contents

Overview

A dashboard is a rectilinear layout of content tiles from one or more cloud services, all appearing on a single page. The chief purpose of a dashboard is to support user decision-making and prioritizing of tasks. The user can visit any part of the service represented in the tile by simply clicking the tile. Because of its purpose, a dashboard is often used as a Home page.

Each tile presents an overview of pertinent information about that particular service's content. A tile may also support very high level functions. For example, a tile may allow the user to accept or reject task flow requests, or switch the display mode of its content into a chart, table, or list.

Elements and Appearance

A dashboard typically occupies an entire page and is comprised almost entirely of tiles. Any other UI components on the page are there in service of the tiles, including filters, customization buttons, and drag handles. The presence of other UI components is driven by the dashboard use case.

Dashboard Tiles

The content of dashboard tiles, when taken together, is either broadly or narrowly focused.

Each tile needs an identifying title, but the tile's content should also adequately communicate its context. See the following image for an example of tiles in a dashboard.

Illustration
of dashboard with tile titles

A dashboard can optionally filter the data shown in each tile by a single parameter— such as by date, geographic region, or organization.

Personalization

Personalization is the the ability of a user to specify a preference, such as control over the spatial arrangement or presentation of content in a page.

Personalization support is desirable, although not required.

When personalization is not supported, don't give users an ability to enact a preference within a session. For example:

Accessing the Dashboard

A dashboard page serves best when it appears at the top of a navigation hierarchy.

The following image shows a dashboard accessed from the Application Navigation Bar.

A dashboard  appearing on a page as a result of the HOME button on the Application Navigation Bar being selected.

Following is an example of a dashboard accessed from the Navigation Area.

Illustration
of a dashboard page accessed from links

Multiple Dashboards

Sometimes a user needs access to multiple dashboards. In that case, the dashboards are collected and accessed as a single Application Navigation item in the Branding Area. The user may access each dashboard from the navigation area.

The following image shows a dashboard with horizontal links to access other dashboards. Drag handles appear when there is an option to rearrange dashboard tiles. The image suggests that personalizations are implicitly saved.

A Dashboard featuring several horizontal links in the navigation area, which would take the user to different dashboards. Links read Personal, Resources, Externals, Risks.

In the following image, other dashboards are available through finger tabs in the Navigation Area.

Illustration
of a dashboard page accessed from links

In the next image, other dashboards are accessed by Info Tiles in the Navigation Area.

A dashboard page featuring info Tiles on the left as a means for users to click, and bring up different dashboard apges in the main content area of the page.

Additional Resources

Demos: