Skip to main contentCarbon Design System

Dashboards

Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered.

Note: This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts GitHub repository.

Presentation dashboard

Presentation dashboards show viewers the current status of key performance indicators (KPIs) relevant to the business problem. A good presentation dashboard provides a big-picture view of the data while serving as a guide for the audience to decide what areas they would like to focus on and explore.

Examples include a car dashboard, a stock market ticker board, or a route map with the locations of nearby gas stations layered on top.

Best practices

Establish a strong hierarchy

Prioritize data by importance, then create a clear visual hierarchy. The most important data should have the highest contrast and occupy the largest area.

Most people in the west read left to right, then top to bottom. This is known as the F-shaped pattern. Place the most important at the top of the page and follow the F-pattern for the remaining elements, finishing with the least important information.

Limit the number of metrics

Non-essential information should be provided as needed. Design a dashboard to reduce a page’s complexity by stripping away anything that could distract a user from interpreting the information.

Use consistent color assignments

Always use consistent colors for each data set within a dashboard.

Use white space to enhance clarity

White space either sets elements apart or brings them together to distinguish a point’s priority. Space acts as a visual separator and guides a user’s eye through a page. It provides relief and breathing room. According to research conducted by Human Factors International, white space increases comprehension by almost 20 percent.

Exploration dashboard

Exploration dashboards allow users to interact with the data to discover insights and identify patterns. Examples of actions a user may perform on data include search, sort and filter data, roll up, and drill down. Exploration dashboards are intended for people who seek to look beyond a primary view and have to be very interactive.

Examples include financial reports with roll up and drill down capabilities or interactive maps that include zooming in and out. Others include business previews with a search bar and additional data available on demand like opening hours and reviews.

Best practices

Consistency is key

All charts should use the same layout and spacing, and have legends in the same position relative to the charting area. Do not switch measurement systems, like imperial to metric.

Linked charts

Mirror chart modifications like filter and zoom. When a user manipulates one chart, other charts showing related data sets should automatically update to provide multi-dimensional views of the user’s action.

Annotation

Use annotations to highlight trends, averages, peaks, and valleys to provide additional information. Annotations should help users interpret fluctuations in the data. Avoid annotations that obstruct the view of data.