Dashboard

Survival
Guide
What Every BI Dashboard Developer Should Know

Best practices for effective design

Interfaces that empower users

Design specifications for hot new mobile apps

By Mike Erickson
Dashboard Design Specialist

v1.0, January 2011

Dashboard Survival Guide
What Every Dashboard Developer Should Know

Dashboards Deconstructed Proven Survival Techniques

Business Intelligence spans dozens of inter-related components, This guide is dedicated to all who are challenged with sharing
from key metrics to data architecture. However, few of these mounds of information in a few hundred pixels, who struggle to
elements will be more visible to business users than dashboards. clear the clutter from charts and graphs, or need quick-reference
tools to take their presentation to the next level.
Dashboards allow users at all levels, from the CEO to frontline
staff, to access critical performance information and align their We hope you can benefit from practical solutions and technical
day-to-day tasks with company objectives. They harness the tips based on our work with hundreds of clients nationwide,
vast collection of raw data that lies at the heart of Business creating lasting, customized — and most importantly —
Intelligence, and transform it into clear and actionable insights. actionable dashboards.

Yet for all their merit, few developers receive training in how to
create highly effective dashboards. Part art and part science,
powerful dashboard development requires an analyst’s love of
numbers, a programmer’s bag of tools and a designer’s eye for art.
- Mike Erickson
Dashboard Design Specialist
No small request.
Lancet
 Inside This Guide

Best Practices for Effective Dashboards 5

1. Design With Purpose 5

“”
2. Plan for All Devices 7
3. Stick to the Brand 9
4. Empower Decisions 11
5. Maximize Space 12
A dashboard is a visual display of the most important
information needed to achieve one or more objectives, 6. Apply the Power of One 13
consolidated and arranged on a single screen so the 7. Arrange Data Logically 15
information can be monitored at a glance. 8. Keep it Simple 16
9. Diagram Wisely 17
Stephen Few, author
10. Involve Others 19
Information Dashboard Design

Helpful Resources 21
Design Specifications for iPad® 21
Design Specifications for iPhone® 23
Books 25
Design Programs 25
Stock Photography 25

About the Author 26

About Lancet 26
 1
Design With Purpose
Using a wireframe as the first stage of dashboard design (top) helps stakeholders
envision the finished product (below).

What is the goal of the dashboard?

Who will use it?
What information do these users need?

Great design starts with having a goal in mind long before pen
meets paper or web visualizations appear on screen. Even the
most visually interesting presentation of information fails if it
doesn’t deliver the right insight to the right users.

That’s why it’s critical to ask questions and get agreement from
business leaders before starting the design process. For best
results, evaluate user input objectively, and communicate openly
about the time, cost and functionality options required to execute
these requests. Don’t hesitate to offer alternative solutions that
can achieve a better ROI.

Map Your Course

Engage stakeholder support up front to help speed roll-out
and adoption across the company.
Work with project managers, the technical team or
sponsoring executives to understand and establish the
business goals for the dashboard.
Identify necessary requirements and prioritize the
information to display.
Follow an iterative design process with clear milestones.

5 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 6

 2
Plan for All Devices The iPad® and iPhone® are revolutionizing the way we interact with information,
and will likely be two of the most important applications for future dashboards.

How will users interact with the dashboard?

What browsers and applications does the design support?
How will it translate to mobile devices?

With the recent explosion in smart phones and other mobile

devices, it’s no longer enough to design a “one size fits all”
dashboard and assume all users will access the information
from a traditional desktop computer or laptop. Smart design
establishes a plan early on for maximizing the usability of the
dashboard across platforms.

Be Prepared for All Scenarios

Identify the most suitable browsers and devices for your user base.
Research the minimum and maximum live area, screen resolution
and other technical specifications.
Build and test your dashboard in multiple environments.
Refer to the design specifications at the back of this guide.

7 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 8

 3
Stick to the Brand
Leverage the colors, fonts and images from corporate communications
to create a dashboard that’s instantly familiar to users.

What elements are key to the company’s visual identity?

Are fonts, colors, images and logos consistent across the dashboard?
Are design elements in line with the current corporate brand?

In the same way a company’s data quality relies on sound

architecture, using brand and design guidelines will ensure
company communications reflect a unified personality.

No dashboard exists in a vacuum; it’s one of many communication

tools used within a company. The corporate brand identity is the
ideal reference when choosing colors, fonts, logos and layouts for
your dashboard.

Take Shelter in Your Brand

Review the company web site or brochures to see the
corporate brand in action.
Ask the marketing or corporate communications department
if guidelines for colors, fonts and logo usage exist.
Utilize autoformat functionality to make your dashboard
designs consistent — and efficient.

9 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 10

 4 5
Empower Decisions Maximize Space
Can users of all levels find information quickly and intuitively? How much detail is absolutely essential?
Are menu choices and drill-down options obvious? What is the primary focus?
Is information logically structured and clearly labeled? Can multiple items be served with one label or menu?

If one word could describe a great dashboard, it might be Great dashboards mind the details. Once you’ve mocked
“intuitive.” A well-architected dashboard doesn’t require a up your visual presentation, take time to review and tighten
user manual or a training session. It should present volumes up each individual element. Every unnecessary decimal
of information at a glance, enable business users to monitor place, every redundant menu choice or oversized font is an
performance and make data-supported decisions — all from opportunity to optimize your onscreen real estate.
a single screen. Understand how your business leaders make
decisions and you can engineer the optimal presentation for
Survival Rations
their needs.
Truncate figures to the shortest suitable format, such as
displaying decimal places to tenths rather than thousandths,
Follow Your Instincts or showing data by quarters rather than months.

Review dashboard navigation and make sure it follows Keep text as small as possible while maintaining legibility.
standard conventions, such as underlining hyperlinks. Size fonts from 8-11 points, including heads and sub-heads.

Check graphs, charts and grids for easy to follow titles and Minimize or eliminate the company name and logo or move
captions; avoid acronyms and jargon. it to a page footer.

Evaluate overall presentation of information so key items, Consider a consolidated menu bar that can serve all
like alerts, are readily apparent to even casual users. elements onscreen, rather than individual menus for each
chart or diagram.
Maintain a consistent structure across every dashboard to
train users where to go and what to expect.
Try to maintain a consistent structure from one dashboard
to the next. This subconsciously trains users where to find
information and what to expect from the BI process.

11 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 12

 Apply the Power of One
As this “before and after” shows, by prioritizing information and grouping related
information under a common menu structure, users can easily view critical details

6
without scrolling. Tabs and drill-down links keep details at hand without cluttering
the presentation.

Does critical information fit easily on one screen?

Can users view the entire picture without scrolling?
What information can be relocated to a drill-down category?

When we do the math on successful dashboards, it all adds

up to one: one dashboard that fits on one screen with just
one focus on each tab. Work with your business leadership to
prioritize information and define the most critical material you
need to present. A cluttered presentation that’s overloaded
with information defeats the purpose of the dashboard and will
reduce usability.

Stay on the Trail

Group closely related information together so users don’t
need to flip between tabs.
Optimize your space by showing summary data on the main
tab and using drill-ins so users can access details as needed.
Set up your content so that it fits on one tab, without
scrolling. Test on multiple browsers and devices.

13 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 14

 7 8
Arrange Data Logically Keep it Simple
Can users find Key Performance Indicators (KPIs) right away? Is the information the most prominent part of the design?
Is there a planned sequence to the flow of information? Do colors and visuals overpower or support the intake of information?
Are like elements designed consistently and grouped together? Can any design elements be removed without impacting overall focus?

Studies prove that we approach information in a familiar Powerful dashboards incorporate great design. However, great
pattern, moving left to right and top to bottom. For dashboard design should be subtle. Your color, image and layout choices
designers, that means the upper left corner should house the should support the user’s goals, not distract from them. One
most important information, with critical components flowing in of the most common dashboard mistakes is failure to highlight
order of priority. what’s important — the data. Review your finished product with
a critical eye. Don’t be afraid to edit.

Use Your Head

Make sure Key Performance Indicators (KPIs) for the
The Bare Necessities
dashboard are located in the top left corner. Avoid design elements that don’t have a purpose. Less is
Group like displays of information together to speed more in design.
readability, such as grids in one area and charts in another. Be sure the image is subtle if using a photo or graphic as
Place non-essential items like dashboard names, company the background to the dashboard.
logos and instructional text where they are visible to users, Try single colors in charts. Use a mix of font weights to
but don’t detract from prominent areas of the screen. emphasize information.

Humans process information

from left to right and top to
bottom. Use this sequence to
your advantage by placing KPIs
in the top left of any design.

15 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 16

 9
Line Graphs Daily Sales Over a Quarter
Line graphs work well

Diagram Wisely with sophisticated data

sets that show trend
metrics over time,
especially when values
Are visualizations used appropriately? are close in range.

Could another approach better present the information?

Is there a clear and compelling rationale for each visualization choice? Bar Graphs Television Inventory Levels
Bar graphs provide
Selecting the right visual to display a data set can be tricky, categorical summaries
of data rather than
as it significantly impacts how readily users can absorb the independent values.
information at hand. If in doubt, mock up your data in several
different configurations and color schemes, and compare the
results side by side.
Gauges and Thermometers
Gauges and Revenue Actual Versus Forecast
Choosing the Right Tool for the Job thermometers are best
for displaying metrics
versus a goal or forecast.
Choose a color scheme with just enough contrast to
make each variable stand out. Avoid jarring colors and
monochromatic shading.
Balance variety with appropriateness when selecting
among line and bar graphs, pie charts, gauges and Heat Maps Sales by Region and State
thermometers, heat maps and other options. Refer to
Heat maps convey
the examples on the facing page as a guide to choosing areas of interest in a
optimal visualizations. two-dimensional image.

Pie Charts Marketshare

Pie Charts are a good
choice for three or fewer
dissimilar values.

17 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 18

 10
Involve Others Feedback from peers and stakeholders or the assistance of a professional
graphic designer can transform a good dashboard (top) into a great dashboard
(bottom). Note how much more restrained colors and imagery, and a smaller
logo open up the information and keep the dashboard consistent with
Does the dashboard meet business objectives? company brand guidelines.

Can users navigate effectively?

Is design assistance required?

As with all facets of Business Intelligence, a team approach

generally yields the best results. Dashboard design is all about
aligning the business around a common set of metrics and
objectives, so it’s natural to involve many players throughout
its development.

Creating a dashboard is a process, not a single event. There

will be multiple iterations throughout its lifecycle. Embrace
constructive feedback openly and don’t hesitate to speak out
when additional resources are required.

Survival in Numbers
Learn how users will interact with the dashboard, and tailor
functionality to their needs.
Ask peers to weigh in on designs and test drive prototypes.
Early feedback can save hours of rework.
Consult a graphic design professional for layout
recommendations or hands-on assistance. There’s no
substitute for experienced input.

19 BEST PRACTICES FOR EFFECTIVE DASHBOARDS 20

 iPhone
iPad Design
Design
®
Reference
Specifications
2” 8”
REMEMBER
640 px 768 px
By default, MicroStrategy Dashboards
have a resolution of 96 pixels per inch.

Design for the iPhone 10.667”

4, which has twice
the resolution of prior 1024 px
iPhones.

10.667”
3” 1024 px
960 px 3”
960 px
10.458” 8”
2.875” 1004 px 768 px
920 px

10” 7.792”
2.6” 960 px 748 px
832 px

7.333”
2” 704 px
640 px

PORTRAIT LANDSCAPE
Inches Pixels Inches Pixels
Canvas:
Canvas: 8”
2” xx 10.667”
3” Canvas:
Canvas: 768
640 xx 1024
960 Canvas:
Canvas: 10.667”
3” x 2” x 8” Canvas:
Canvas: 1024
960 xx640
768
Maximized:
Maximized: 8”2” xx 10.458”
2.875” Maximized:
Maximized: 768
640 xx 1004
920 Maximized: 10.667” x 7.792” Maximized: 1024 x 748
With
With Title
Title Bar:
Bar: 8”
2” xx 10”
2.6” With
With Title
Title Bar:
Bar: 768
640 xx 960
832 With Title Bar: 10.667” x 7.333” With Title Bar: 768 x 704

21 HELPFUL RESOURCES 22
 iPhone Design
iPhone DesignSpecifications
Reference
®

2”
REMEMBER
640 px
By default, MicroStrategy Dashboards
have a resolution of 96 pixels per inch.

Design for the iPhone 4, which has twice

the resolution of prior iPhones.

3”
960 px 3”
960 px
2.875”
920 px

2.6”
832 px

2”
640 px

PORTRAIT LANDSCAPE
Inches Pixels Inches Pixels
Canvas: 2” x 3” Canvas: 640 x 960 Canvas: 3” x 2” Canvas: 960 x 640
Maximized: 2” x 2.875” Maximized: 640 x 920
With Title Bar: 2” x 2.6” With Title Bar: 640 x 832

23 HELPFUL RESOURCES 24
 Resources About the Author
Books Mike Erickson
Information Dashboard Design: The Effective Visual Dashboard Design Specialist
Communication of Data Mike Erickson is a seasoned graphic designer
– Stephen Few who has worked his magic on every MicroStrategy
dashboard that Lancet has produced since 2005.
Performance Dashboards: Measuring, Monitoring, and
His background in web design and marketing
Managing Your Business
gives him a unique and valuable perspective
– Wayne Eckerson
when it comes to designing usable and attractive
dashboards, mobile apps and GUIs.

Design Programs
Adobe Photoshop - adobe.com/photoshop
GIMP - gimp.org/downloads About Lancet
Picasa - picasa.google.com
Maximize your Return On Data™ with strategic leadership, hands-on
project implementation and professional training from the Business
Stock Photography Intelligence specialists at Lancet.
Corbis Images - corbisimages.com
iStockphoto - istockphoto.com Since 1997, Lancet has helped IT professionals and business leaders
define, build, manage and learn the discipline of Business Intelligence –
Getty Images - gettyimages.com
and excel at its application.
Shutterstock - shutterstock.com

More than 100 MicroStrategy clients across the country rely on us

for BI guidance, project execution, platform administration, custom
visualizations and program support.

Learn More:
www.lancetsoftware.com

25 HELPFUL RESOURCES 26
 Power Up Your
Next Dashboard
Contact Lancet for design consulting, custom
visualizations or hands-on dashboard development.
info@lancetsoftware.com • 952.230.7360

Learn more:
www.lancetsoftware.com/dashboards

Maximizing Return on Data TM

11980 Portland Avenue South • Burnsville, Minnesota 55337 • 952.230.7360 • www.lancetsoftware.com