Dashboard design

www.RedPillAnalytics.com [email protected] @RedPillA © 2015 RED PILL Analytics

Dashboard Design, Tips & Tricks

2

KEVIN MCGINLEY

medium.com/@kevin_mcginley @kevin_mcginley linkedin.com/in/kevinmcginley

http://www.redpillanalytics.com

mailto:[email protected]?subject=

http://twitter.com/RedPillA

© 2015 RED PILL Analytics

Think Of Yourself As An Artist


It’s Your Job To Capture The Beauty Of Data


Your Tools Are Lines…


And Angles


Colors That Blend…


Colors That Shade…


Colors That Contrast…


And Colors That Sizzle


You Care About Shapes…


And Shape Alignment


Everything Looks Good In Its Place…


And We Notice When Something Is Off


Contents

•Dashboard Design Tips • Color • Lines And Shapes • Chart Tips •Dashboard Layout

15


mailto:[email protected]







Side-By-Side: Overview

20





Side-By-Side: Office Details

21




Color


Color Combinations Matter!

23

www.colorbrewer2.org





Combinations and Consistency

24

Color palettes don’t match and Brands

colors are inconsistent.

Color palettes don’t match and Brand


Brands are consistent and are part of the

same palette.





Use Color Brewer To Obtain Color Palettes

25

All colors used on the page are part of the same palette or are

neutral.

Each object has its own color palette and

sometimes mixes within an object.





The Beauty Of Grey: Good For Conditional Formatting

26

Dark blue bars draw attention away from min/max bars/dots.

Light blue headers and

dark gray total shading is distracting.

Use of light grey throughout causes

conditional formats to stand out more.




Lines And Shapes


Avoid Gridlines In Charts

28

Color palettes don’t match and Brands


Gridlines are drawing attention away from the important lines.

Your eye focuses on the lines that matter.





Use Thinner Lines In Line Charts

29

Use 2pt lines in line charts; can be defaulted

on the server.

OBIEE defaults to 3pt lines, which can be hard to read when

they overlap.





Use Section Lines On Dashboards

30

Objects appear to be floating in space.

Section lines anchor each object to an area

of the dashboard.





Bars Instead Of Circles For Gauges (And In General)

31

The horizontal bar style gauge more closely resembles Few’s Bullet Chart.

Stephen Few argues that circular objects can always be better

represented as rectangles.




Chart Tips


Provide A Legend When Using Conditional Formatting

33

Stick to fewer colors, consider colors within

the same hue, and provide a legend.

There are 8 color shades in these

gauges and we know what none of them

mean.





Consider Fewer Y-Axis Values With Smaller Numbers

34

Values need only provide a frame of reference. Consider smaller fonts,

abbreviated numbers (include decimals), and only 3 ticks for

bottom, middle, and top.

It’s not necessary to have 7 numbers here; it clutters the chart and

distracts from the chart focal point (the line).





Lose Axis Labels; De-emphasize Legends

35

The chart title indicates the legends and they are obvious; shrink the font sizes on legends to keep the focus

on the chart lines.

Neither Y nor X-axis labels are needed here and they

consume space. The legend contributes to the clutter.





All About That Quadrant: Scatters & Bubbles

36

Lose the gridlines and reduce the tick lines to 3 to emphasize the four

quadrant aspect of a scatter or bubble chart. Use the chart title for

the bubble size axis label.

The extra gridlines distract from reading the bubble chart

and the trellis version is to small to make sense of.





Stack It Real Good

37

There is no way to tell the year total in the

chart and the chart is more cluttered.

Stacking the bars helps keep the total year number in perspective

and simplifies the chart





Performance Tile Tips

38

Use the larger size tiles, avoid bold fonts, gradients, conditional formatting, and

stick to soft colors.

Bold numbers are harder to read and the underline style adds

no value.




Dashboard Layout


Use Space Carefully

40

Increase default chart sizes, use larger tiles, and arrange objects like you’re packing a

car or a grocery bag.

Objects are smaller than they need to be and aren’t arranged

optimally.





Make Good Functional Decisions

41

This Trellis Chart makes more sense as a standalone bubble.

This column prompt would be better suited as a column selector.

Shading not necessary (assumed to be a

mistake).

Column selector on the bottom because it

affects the X-axis.





More Functional Decisions

42

Hide a table behind a chart with a view selector to both

meet requirements and drive visual dashboards.

Objects are smaller than they need to be and aren’t arranged

optimally.

The intended but missing filter view

report added below the prompts.




Live Dashboards

Technology

Dashboard design