A mockup tool that has been growing in popularity is my Microsoft Powerpoint template. It’s a high-fidelity mockup tool especially for dashboard design. However, it’s rendered in Powerpoint and anybody can use it.

Take a look at the design:

You can download it here:

Powerpoint Template for Dashboard Mockups (that’s a direct ppt file download).

To get more tools and templates like this, sign up for my free business intelligence newsletter at http://www.enterprise-dashboard.com. You’ll find a brilliant assortment of tools and examples of business intelligence dashboards.

When designing custom layouts for dashboard applications built in-house or creating a custom layout in an off-the-shelf dashboarding software product, I tend to follow the 3 or 4 column approach with portlets of various sizes spanning the different columns as needed. Can’t picture what I mean?

Take a look at this dashboard layout picker from a dashboard software package (iDashboards 5.0).

What is your most commonly used layout? Do you mostly arrange portlets containing charts and graphs of various metrics and KPIs? If so, maybe you choose the 3×3 layout for 9 charts. More likely, you mix up wider portlets for text content.

It would be interesting to find out how these various digital dashboard layouts are ranked in terms of usage.

Click on the “read more” link below to see how the iDashboards software product handles the dashboard layout selection process. Screenshots of the dashboards can be found below.

Here is the sequence of actions for creating a new dashboard in iDashboards.

First, take a look at the default sales dashboard that comes with iDashboards:

As you see, it has a 3 column by 2 row configuration for the portlets. It has the following metrics:

• Top 10 Shipping Customers
• Market Share
• Sales by State
• Top 3 Products
• Sales Performance
• Sales by Province

Note the bottom leftmost section where you will find a “Menu” button. If you click it, you get the following panel where you can select a new dashboard and pick out the desired layout per the screenshot we saw earlier:

If you pick the 2 row layout, you will get the following dashboard template:

At this point, you can populate the top portlet of the dashboard with a graph.

Use the SQL Custom Query tool to select your data for the chart.

Here is the resulting chart in the top portlet of the dashboard:

Tags: iDashboards 5.0 Screenshot, idashboards layout configuration, digital dashboards

This is a post by The Dashboard Spy as part of the Dashboards By Example blog. Check out the following Business Intelligence resources:

Dashboards.TV
Dashboards by Example Volume 1
Business Intelligence White Papers

(click on the image to see the point)

Now, instead of “prescriptive” advice, we try the “descriptive” approach. Llet’s examine the thoughts of an experienced dashboard designer regarding his use of color during the course of designing a real estate dashboard. For this we turn to long-time Dashboard Spy contributor Robert Allison and his entry to a dashboard design contest.

Robert designed a real estate dashboard. Following the scenario of the contest in which he assumed the role of an analyst for a group of real estate agents, Robert strived to “… create a visualization that will allow them to view several characteristics of house sales in a given month to help them better track and understand what’s happening in the housing market.”

Here was Robert’s real estate dashboard. Click on the image to enlarge it. Below the screenshot of the dashboard, you’ll find Robert’s explanation of how he chose to use color to emphasize certain things in his design.

Use of Color Explained on this Real Estate Dashboard

Click on the “more” link for the dashboard designer’s thoughts.

From Robert Allison:

Color:
—–

At first glance, this dashboard might appear to have “too much” color.
But, rest assured, the color has a purpose!

Each of the plots in this dashboard has markers/bars representing
the 5 neighborhoods – I thought it was very important to be able to
identify a given neighborhood, and be able to clearly see its values
in all the graphs. In an interactive system, I could let you click on
a neighborhood and temporarily “hilight” that neighborhood’s markers
in all the plots, but in a single/static gif image, I had to color
code each neighborhood. I picked colors which are easy to distinguish,
and which give no sense of bad/good (ie, no gradient shading).

Location:
——–

The 3 most important things in real estate … Location, Location, Location
Why should a real estate dashboard be any different?

I’m not a real estate agent, but I tried to make an educated guess
that maybe “Sales Amount” and “Days on Market” might be the two
most important things, and I put them in the top row.
(A %-based sales commission is based on selling price, and
the shorter time the houses are on the market, the more houses
an agent can sell in a year – ie, these are the factors that
most strongly affect an agent’s take-home $$).

I then tried to line up charts directly below them that had the same
horizontal axes, so you could easily compare the data between the
charts by looking up/down between them.

And finally the charts along the bottom row basically take the
info that’s in the charts generally above them, and plot them
in a slightly different way. The visual flow should be
generally top-to-bottom, left-to-right.

Tie-In’s:
——–

The colors are consistent in all charts, visually tying them together.
Since all the graphs use the same colors, I only need one color
legend for the entire graph.

Similar axes are lined up, when possible, to give visual continuity
and allow easy comparisons. Sparing use of light-colored reflines
also helps in comparing between graphs (as well as seeing exactly
where the markers/bars fall on the graph).

Also, the 3 charts that have %-based axes all have a refline at 100%.
This helps show that you’re looking at the same info, in different ways.

Extras:
——

There’s a “Help” button in the top/right. In the html/web version of
this chart, clicking on that will show you a page that explains how
to read the chart. (Information such as that the “triangle” marker
shows last year’s median value.) This explanatory, which users
generally only need to see once, would otherwise clutter the chart.

Although the contest is just for the image, this chart was also created
with html charttips (hover your mouse over the colored markers & bars
and you’ll see the data values), and drilldowns (click on the markers
and bars, and it drills-down and shows you the spreadsheet of the
actual/raw data).

—————————————————————

Results / Observations:
———————-

Filthy Richlands has the highest Sale Amount, and its median
has risen dramatically since last year. (Likewise for the
Asking Price).

Badlands Sale Amount is frequently higher than the Asking Price
(so much so that the median is actually over 100%).

Badlands has the lowest median days on market, and
Somnolent Community has the highest median days on market.