• Votes for this article no votes for this yet
  • Dashboard Insight Newsletter Sign Up

How to Design Effective Dashboard Displays

by Wayne EckersonThursday, February 17, 2011

Filters. Filters enable users to change data in a chart by refining a query against a set of data. They represent the most basic form of dashboard interactivity. Filters let users drill down a hierarchy to view more detail, drill up to view aggregated data, or drill across to view different dimensions (e.g., sales by product versus sales by region). When a user applies a filter, every graphic associated with the filter refreshes with new data.

A classic design mistake is to place filters (or other controls) in an ambiguous location on the screen. The problem arises because fi lters can apply to every chart on a page, a selected group of charts, or an individual chart. Without proper visual cues, viewers can’t discern to which charts a filter applies.

Typically, universal filters are placed in close proximity to their associated charts, which should be grouped together and enclosed by a light border. Filters for individual charts usually are placed above the object — sometimes in a chart - specific toolbar — so it’s obvious that the filter applies to that chart alone.

A visual analysis tool may have dozens of universal filters for each page in the dashboard. By selecting and deselecting filters, users can rapidly explore data from different perspectives. To facilitate such exploration, these filters should always be visible and activated with a single click. The best way to display these types of universal filters is in a navigation band, usually on the right-or left - hand columns of the dashboard screen.

Filters can be controlled by radio buttons, check boxes, or drop-down lists. Radio buttons are used when viewers can select only one filter at a time, whereas check boxes and drop-down lists enable users to select multiple filters at once. Drop-down lists hide filters behind an icon and are more compact than check boxes but harder for users to manipulate. Users usually must hold down the control key to select multiple items in a drop-down list.

Bread Crumbs. Bread crumbs enable viewers to keep track of where they are and where they’ve been while navigating a multilayered dashboard environment. Essentially, bread crumbs document the filters users have applied to a chart or page of charts and the pages they’ve viewed. Ideally, the items in a bread crumb list are active, making it easy for users to return to a previous view.

Text. Text can be a valuable addition to a performance dashboard. Sometimes text is the only way to communicate important information, such as top 10 customers, bottom 10 products, projects at risk, or highest-performing salespeople. Text also works when it is dynamically linked to metrics in the form of annotations. In other words, users attach comments to a metric to explain its performance, forecast the future, or outline action steps to rectify a problem.

However, static text simply takes up space. For example, some dashboard designers feel compelled to add help text to a dashboard. This is a mistake. Once users figure out how to use the dashboard, they will never need to look again at the text, which just clutters the screen. A better choice would be to create a help button that users can click if they need more information.

At a bare minimum, you need to add text to dashboards to create tabs, headings, filters, and numeric values in tables and charts. Scorecards often use text in strategy maps, gap analyses, initiative descriptions, and performance summaries.

Fonts. Selecting the right fonts for different elements is important. You should pick a font that is easy to read — such as Times New Roman, Arial, Tahoma, or Helvetica — and avoid ones that are overly fancy or unusual. Use one font throughout the dashboard, varying font size where needed. A standard font size for reading is 12 point for Times New Roman and 10 point for Arial, which work well in dashboards.

Use a bigger font size for tabs and section headings and a smaller font size for supplementary information, such as legends or footnotes. Chart and table headings should be the same size as the main text but highlighted in bold. Axis labels and row/column headings in large charts or tables also benefi t from bold highlighting. If desired, use a complementary font for headings. For instance, many designers use a serif font (e.g., Times New Roman) for the main text and a sans serif font (e.g., Arial or Helvetica) for headers.

Deemphasize Design Elements

A classic mistake that developers make is to focus on the dashboard design rather than the data itself. Just because developers can create frames, borders, backgrounds, and shading doesn’t mean that they should. These background graphics can compete with real data for attention.

For example, look at a vendor’s demo dashboard in Exhibit 12.2 . Thankfully, this is not a real dashboard because it breaks all the rules in this chapter, plus many others. The dashboard has three shades of background color: one for the dashboard, another for the tabs, and another for the charts. The ostensible purpose of this background shading is to differentiate the four panes and charts within them.

airline performance dashboard
EXHIBIT 12.2 Poorly Designed Dashboard

This demo dashboard breaks all basic design rules, and then some. The use of background shading to differentiate panes is unnecessary.

White Space. However, a more expertly designed dashboard doesn’t resort to background shading to differentiate panes or charts. (See Exhibit 12.3.) In fact, it doesn’t use any shading at all, which is merely distracting. Instead, it makes clever use of white space to differentiate its three panes (i.e., “key figures,” “top/worst 10,” and “revenues per sales channel %” ). The white space between the panes is slightly greater than the white space between individual metrics within each pane. Visually, we perceive the difference at a subconscious level, and we automatically group items based on the variation in white space that separates them.

Gestalt. The use of white space to group items is an example of the Gestalt principle of proximity. About two dozen Gestalt principles of perception describe visual characteristics that cause people to group objects together. The principles are based on psychological research conducted in Germany during the early 1900s. It would be wise to explore all the Gestalt principles before designing a dashboard. (See Exhibit 12.4.)

microcharts airline dashboard
EXHIBIT 12.3 Well - Designed Airline Dashboard
Courtesy of Andreas Lipphardt. This dashboard was built using BonaVista MicroCharts.

This dashboard makes exquisite use of white space and muted lines, among other things, making it possible to display almost 50 KPIs on a single page.

Muted Lines. The well-designed airline dashboard (see Exhibit 12.3 ) jams almost 50 KPIs (each of which consists of multiple metrics) onto a single page. Yet it is very legible. An executive can quickly rifle through each of the KPIs without getting bogged down or visually misplacing adjacent metrics. The dashboard accomplishes this through the use of muted, dashed lines to separate each metric. You can imagine how different the user experience would be if the designer had used bold, continuous lines to separate the KPIs. It would not work nearly as well. Muted lines also work well inside charts or graphics to separate elements that would be hard to differentiate otherwise, as we’ll see shortly.

Tweet article    Stumble article    Digg article    Buzz article    Delicious bookmark      Dashboard Insight RSS Feed
Previous Page  Next Page
1 2 3 4 5 6 7 8
Other articles by this author


No comments have been posted yet.

Site Map | Contribute | Privacy Policy | Contact Us | Dashboard Insight © 2018