Dashboard

Example of the Dashboard UX pattern.

Problem

People need a high-level, quickly-consumable overview of the current state of a large set of information that usually needs to be tailored to them.

Solution

Create a view that has high-level indicators that provide immediate insight into the current state of the things that a person is interested in.

Context

  • You can identify, reduce, and effectively and quickly communicate insight into the interests of the user.
  • Your users will be willing to regularly use this view of the information such that the investment to create it will be worth it.
  • There are not better options, such as mobile push/pull technologies, to get the person the information they need.

Rationale

Dashboards, as their name implies, should contain elements that can be readily, quickly, and effectively consumed while a user’s primary focus is on other responsibilities. As such, you really need to be able to distill the information into what are often called Key Performance Indicators (KPIs). If you can’t do that, the dashboard will quickly become unusable because it will require too much parsing by the humans reading them.

Dashboards have become very common, but before investing in them, you should ensure that they will actually be used because the work to create an effective dashboard can require a lot of effort. Sometimes there are not enough KPIs to make the dashboard interesting enough to visit regularly. Sometimes the users will not have access to PCs or connectivity as much as they’d need to make them useful. In both cases, using a simple mobile interface is a better option—a smaller form factor matches displaying fewer KPIs, and of course many folks have cellular access via phones more often than PC and internet connectivity.

Implementation

Before starting to design the actual dashboard interface, you need to determine what KPIs and other high-level information that a given user or role would actually need and use. It’s best to get as much of this known before starting to design because the different elements may be related or not related in ways that would affect the dashboard design.

You really need to try to fit all of the elements into one screen (or more if users will have multiple monitors to use with the dashboard). The key consideration here is that the user should be able to glance over the dashboard without having to interact with it in order to glean the information needed. Also, having all elements visible together can help users discover patterns and connections between the various data that the software is not designed to (or is incapable of) detecting.

To keep the dashboard focused, you can think in terms of showing only things that are always interesting to the users or things that are only momentarily interesting but important. It’s easy for dashboards to become overpopulated and hard to use, so the best thing is to keep them focused.

The next thing is to think in terms of what is most important and what elements are related. Related elements should usually be visually close to each other to imply that connectedness; you may even want to make the connections clearer using grouping mechanisms.

Put the most important elements or group of elements at the top and left. (Note: This may be conditioned based on native language reading direction, so if you have right-to-left readers, you might want to try a location matching the reading direction.) Front-and-center is also an important location, depending on if the layout emphasizes a central object.

You can then use size, isolation, color, orientation, and even highlighting marks to imply relative importance. Size is an obvious one—bigger objects occupy more space and demand more attention, as a rule. Isolation, i.e., creating space around an object, is another way to draw attention to it. Other things like color, orientation, and highlighting marks (arrows, borders, lines, etc.) can also be used to make particular elements stand out, but be careful not to overuse these as doing so can cause so much noise that they cancel each other out and even make the dashboard as a whole more difficult to consume due to distractions they create. It’s probably best to resort to these as a last option and use them sparingly.

While stereotypical dashboards like to use big, beautiful, fancy metaphorical elements like radial gauges and linear meters, it is often more useful to err on the side of being plain, particularly for dashboards with lots of indicators. The choice of a visual to communicate an indicator should be driven by its ability to better communicate its value or its importance—aesthetics and metaphors should take a back seat here unless they actually help make the information more consumable or notable.

The information you display should be actionable if applicable, i.e., if the software can drive users to take action with software to act on data, provide that facility with links or other commands. Similarly, if the information is supported by deeper information to which the system can provide access, providing drill-downs are very helpful to empower users to better understand the indicators.

How to D isplay D ata
The best way to display data will always depend on the kind of information, the nature of the message, and the needs and preferences of the users. A single dashboard usually displays a variety of data and requires different artifacts to display it.

For quantitative information, text is always more precise than graphics. Text organized into tables is a very good medium for looking up information. Graphs don’t support looking for individual values as efficiently and precisely. However, if you want to get the bigger picture, or to compare multiple measures, text is not enough. Graphs strength is letting users visualize numbers by giving a shape to numeric values.

Once you decide if you are going to use text or graphics for each measure, you need to select the display media you are going to use for each one. You can use these display media:

  • Graphs: bullet graphs, bar graphs, stacked bar graphs, line graphs, a combination of bar and line graphs, sparklines, box plots, scatter plots, Treemap.
  • Gauges: to show simple measures and compare them with predefined values
  • Icons: to indicate alerts, up/down, and on/off
  • Text: labels and numbers
  • Organizers: tables, spatial maps, and small multiples
  • Images: photos, illustrations, and diagrams, which are occasionally of use
  • Drawing objects: which can represent hierarchy or flow

 

Ease of Use
Organizing the dashboard information in such a way it does not result in a cluttered mess is one of the most challenging aspects of dashboard’s visual design.

Information should be organized to support its meaning and use. Create groups according to business functions, entities and use. All items in the same logical group should be put together. Delineate the groups using the least visible means.

You should support meaningful comparisons and discourage meaningless comparisons.

As in most UI design tasks, maintain consistency, label things appropriately, select the right colors, and make it aesthetically pleasing.

Design the dashboard as a portal so users can easily drill down to the additional information they need to support their actions.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Dashboard pattern can be implemented using combination of any the following ASP.NET controls: WebDataGrid, WebGrid, WebChart,WebGauge, WebPanel. Check out the samples browser to see it in action.

Silverlight

You can combine the NetAdvantage for Silverlight xamWebGrid control, as well as controls from NetAdvantage for Silverlight Data Visualization including the xamWebChart, xamWebGauge and xamWebMap to implement this pattern.

Windows Forms

You can combine the NetAdvantage for Windows Forms WinGrid control with the WinGauge and the WinChart to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinanceto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid and the XamChart controls. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamShowCase called xamTraderto see it in action.

Examples

I think that TweetDeck is a kind of dashboard. The domain is, of course, tweets, but it allows people to choose from or create custom top N lists of tweets that they're interested in so they can stay on top of (monitor) what's going on in that aspect of their lives.

http://quince.infragistics.com/10yw

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

This is really an example of examples--pointing you to all the many examples over at Dashboard Insight. Pretty awesome!

http://quince.infragistics.com/118y

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

The primary example for this pattern is a mixture of strategic and frequently updated operational information targeted to the CIO’s needs and interests. The most important information is located at the upper left, and shows the status of the assets managed by his department. When something is not going well, it’s flagged with a red circle. The CIO just needs to look at the first row of labels in the dashboard to know if something needs his urgent attention. The rest of the dashboard has strategic information. There is a great deal of contextual information provided to complement each measure by being easily compared to measures of acceptable information. This contextual data will help the CIO to make sense of these measures. Even if there’s a great deal of information, it does not look cluttered. The non-data pixels have been reduced to a minimum. Blank space was used to separate the various sections in the dashboard. Color has been used judiciously. The example is taken from Stephen Few's book.

http://quince.infragistics.com/114c

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

This example dashboard was highlighted by Dashboards by Example (http://www.enterprise-dashboard.com). It’s their 2008 Best Excel Dashboard and is an “International Bank Dashboard” submitted by Wade Stokes. As they note, it makes very efficient use of screen real estate by using the sparklines approach popularized by Edward Tufte.

http://quince.infragistics.com/10wj

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

This is a simple sample from an earlier version of Infragistics’ ASP.NET toolkit. There are those who argue against the use of radial gauges because they take up too much space to indicate too little; however, they are visually appealing, so end users tend to like them.

http://quince.infragistics.com/10yb

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

This is a sample dashboard for insurance agents to keep tabs on their work. It is using Infragistics ASP.NET components inside of SharePoint 2007.

http://quince.infragistics.com/11cg

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

iGoogle serves a sort of personal dashboard that is easy to customize with all sorts of widgets.

http://quince.infragistics.com/112x

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

Microsoft also has a personal, customizable dashboard on Windows Live.

http://quince.infragistics.com/113s

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

Infragistics xamTrader WPF toolkit sample shows how you can build a trader dashboard with real-time charting, the ability to quickly take action on items as they appear in the Watch List, and a monitor to keep tabs on Pending Orders. Infragistics has data visualization tools for ASP.NET, Windows Forms, WPF, JSF, and Silverlight that can be used to speed development of any dashboard on those platforms. To see more about these, just go to http://www.infragistics.com/chart.

http://quince.infragistics.com/11db

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

This is a Silverlight sample put out by Infragistics using a preview of their Silverlight toolkit. It uses Microsoft Virtual Earth to mashup a dashboard for Customer Relationship Management (CRM). Picking a different customer on the left will show their relationship information.

http://quince.infragistics.com/10wi

Example of the Dashboard UX Pattern Example of the Dashboard UX Pattern

Sources

Stephen Few, Information Dashboard Design: The Effective Visual Comunication of Data

The Dashboard Spy Blog, Dashboards by Example

Tags

Data Visualization, Chart, Displaying Complex Data, Analysis, Grid.