Information Dashboard

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.

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.

Accessibility

Sources

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

Useful links

Example images (10 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 Lammi ⋅ July 26, 2010 16:40

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

  • 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.

  • C. Haw ⋅ Aug. 19, 2013 21:26

    Anyone ever played with the idea of an expander type "rollup" dashboard (header bar would contain alerts etc - click to open it anytime, as opposed to from a tab? Just wondered if that seemed like an application that would work, and if you had any examples...

  • Obat Herbal Hepatitis B (www) ⋅ Nov. 30, 2016 03:50

    dia akan selalu ada bersama kita

  • Mark Wahlberg Max Payne Jacket (www) ⋅ Dec. 1, 2016 08:40

    Such a very informative data you have shared with us, i usually visit here. But this data is very useful Thanks for sharing.

  • vshare download (www) ⋅ Dec. 2, 2016 14:02

    Great In the web page you could see wallpapers and ringtone. Most likely to the respective sections to download them. Fine.

  • get robux (www) ⋅ Dec. 7, 2016 21:00

    You will easily cross all the levels of roblox which is the best platform for the entertainment and when you will get robux you will be allowed to play this game with full freedom.

  • GODADDY COUPON CODES (www) ⋅ Dec. 13, 2016 09:37


    I really love your dedication in your post... I love your insights and I have applied some of your tips and it was really effective

  • Cinema Box APK Download (www) ⋅ Dec. 14, 2016 07:22

    good The application has a really friendly interface that will be very easy to browse. You could easily open up the application and also comprehend the best ways to function it. nice.

  • Bruno (www) ⋅ Dec. 19, 2016 18:53

    Amazon gift card code generator now easily available on this website.

  • Peter (www) ⋅ Dec. 23, 2016 07:39

    You’ve written nice post, I am gonna bookmark this page, thanks for info. I actually appreciate your own position and I will be sure to come back here.

  • Vidmate for PC Download (www) ⋅ Dec. 26, 2016 09:02

    Great The above overview of Vidmate apk download has actually been validated by our team and also with any luck works for our readers as well. Fine.

  • tutuapp pokemon go android (www) ⋅ Dec. 26, 2016 13:24

    good We would certainly advise users to publish remarks if they've something various problems or issues since it's entirely difficult to cover each and every issues associated with Tutu app nice.

  • ABHI SHARMA (www) ⋅ Dec. 27, 2016 18:23

    http://mozillafirefox2017freedownload.com
    http://avgfreedownload2017.com/latest-version-of-avg-antivirus-2017-free-download-for-windows-android/

  • ABHI SHARMA (www) ⋅ Dec. 27, 2016 18:24

    <a href="http://mozillafirefox2017freedownload.com">mozilla firefox 2017</a>
    <a href="http://avgfreedownload2017.com/">AVG Download 2017</a>

  • ABHI SHARMA (www) ⋅ Dec. 27, 2016 18:24

    [url="http://mozillafirefox2017freedownload.com"]mozilla firefox free 2017 download[/url]
    [url="http://avgfreedownload2017.com"]AVG Free 2017[/url]

  • ABHI SHARMA (www) ⋅ Dec. 27, 2016 18:59

    mozilla firefox 2017
    AVG Free Download 2017

  • ABHI SHARMA (www) ⋅ Dec. 27, 2016 19:07

    mozilla firefox 2017AVG Download 2017

  • instagram followers free (www) ⋅ Jan. 6, 2017 11:08

    Option available for everyone.

  • Rahul Krishnan (www) ⋅ Jan. 14, 2017 07:20

    Thanks a lot for sharing this with us

  • tutu app download (www) ⋅ Jan. 15, 2017 19:33

    this is informative, thanks for shaing it,