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 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.
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 remianing elements, finishing with the least important information.
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.
Always use consistent colors for the each data set within a dashboard.
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 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.
All charts should use the same layout and spacing, and have legends at the same position relative to charting area. Do not switch measurement systems, like imperial to metric.
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.
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.