Information Dashboard

Also known as: Dashboard, Mashup, Executive Dashboard

Tags: content, showing data

Information dashboard organizes and presents the most important information from large amounts of data in a way that it is easy to read and understand for the user. Dashboards summarize information and focus on changes and exceptions in the data.

Overview page on Mint, an online personal finance and money management app, follows several best practices for designing a good Information Dashboard.

The design is very minimalistic and simple, but still aesthetically pleasing. The most important information, alerts for the user, are listed at the top of the page where user usually looks first. In the middle appear top movers and shakers in the user’s stock portfolio. At the bottom of the page graphs display visually clear comparison to the budget targets without reading the numbers on the bars. On the left side of the page is displayed an overview of current account balances in banks where the user has an account.

Overview page in Mint.
Source: http://www.mint.com/

Overview page in Mint.

What problem does the pattern solve?

  • There is important, real time information from one or more sources that needs to be monitored regularly.
  • There is a lot of data and you need to point out something that deserves attention and might need an action.

When to use it?

  • There is important, real time information from one or more sources that needs to be monitored regularly.
  • There is a lot of data and you need to point out something that deserves attention and might need an action.

How to use it?

  • Distill and condense the key data using summaries and exceptions.
    • Provide high-level summaries of the data. Tell what is happening, not why it is happening, but provide a possibility for the user to drill down deeper into details.
    • Focus on changes and exceptions in the most critical data. Often the most important information to the user is unusual changes from normal situation.
  • Fit the information on a one page.
    • The purpose of a dashboard is to provide the key information from different sources quickly and easily to the user. Therefore the data should be shown on a single screen, preferably without scrolling.
  • Organize the content into meaningful groups to support its use (See our Content Groups pattern for details).
  • Strive for simplicity. Keep the dashboard clean and simple to make it easy to scan and understand.
    • Use visual elements consistently and as little as possible, and highlight only data that needs attention.
  • Customize the dashboard for its users.
    • You need to understand the users and their goals to be able to select the most important information to them to achieve their objectives.
    • You can also allow users to personalize the dashboard further.
  • Select the best display mechanisms for communicating the data clearly and efficiently.
    • Use text, graphs, mind maps, icons, images, tables etc.
    • Use “small multiples“ that allow users to see related data at once to make comparisons.
    • What is the best way to present data depends on several things; the needs of the users, context of use, the type of the data, and so on.
    • Describing all the different techniques for visualizing data is out of the scope of this pattern. For more information about data visualization, see “Data Visualization: Modern Approaches“ in Smashing Magazine.
  • Test it with users.
    • If the users don’t feel it is useful to them or it is difficult to use, they simply won’t use it.

Why to use it?

  • Well-designed dashboard is a powerful solution to information overload. It combines data from different sources and directs user’s attention to the most important information so that they can quickly identify trends and problem areas and react to them.
  • Dashboard makes users’ life easier, helps them make good decisions, and saves a lot of time, increasing productivity.

Sources

This pattern is inspired by Stephen Hew’s Book “Information Dashboard Design: The Effective Visual Communication of Data”.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (11 examples)

Comments

  • Jason Putorti (www) July 23, 2010 22:33

    Thanks for featuring the Mint dashboard! That's the 'original' version I designed in 2007.

    Jason Putorti
    http://twitter.com/putorti

  • janne July 26, 2010 16:40

    Thanks to you for designing a great dashboard that we can now use here as an example ;)

  • Smart Company Software (www) Dec. 17, 2010 05:13

    I'm designing a 'dashboard' for my software application and this is just the inspiration I needed. Thanks

  • dreamwing March 22, 2011 05:34

    Mint dashboard in 2007 is so cool, what about now?

  • manso May 27, 2011 17:57

    This is AWESOME.

  • Vaishakh Pushpoth (www) Oct. 21, 2011 10:36

    A very good compilation.
    Thanks a lot guys.

    BTW, a good talk by Des Traynor,
    on Dashboard Design:
    speakerdeck.com/u/destraynor/p/designing-dashboards-data-visualisations-in-web-apps

    -Vaishakh Pushpoth

  • Stuart (www) April 30, 2012 04:28

    Google Analytics dashboards have had a fair overhaul, might be worth updating them here.