dashboard design outline - dimensional insightinfo.dimins.com/rs/254-lji-829/images/2016 chicago...

©2016 Dimensional Insight, Inc.

Dashboard Design

Rose Weinbergerrweinberger@dimins.com

©2016 Dimensional Insight, Inc.

©2016 Dimensional Insight, Inc.

AgendaAgenda

Key Considerations– Hierarchy of Information– Ideal Number of Metrics– Fundamentals of Design

Mechanics– Fonts– Colors

Resources

©2016 Dimensional Insight, Inc.

Attendees have Version 6.4 and 7.0

Version 6.4 is “Classic” interface.– The Version 7.0 Interface may be changed to “Classic” in

environment settings Version 7.0 defaults to “Simplified User Interface”

– Benefit of built in tools to improve:• Navigation• Visual Design

BOTH environments require color, font and layout choices … that is the realm of this presentation

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key Considerations

©2016 Dimensional Insight, Inc.

Key ConsiderationsAddressing key considerations

Survey users– Types of Users– Personal Preferences– Individual Needs

Decide on Content– Content for Implementation– Content per Page

Design Activities– Hierarchy– Style– Layout on a Single Page

©2016 Dimensional Insight, Inc.

A word about style

Wingtip ConverseNIKE

©2016 Dimensional Insight, Inc.

A word about style

Wingtip

Conservative

©2016 Dimensional Insight, Inc.

A word about style

New Balance

Performance

NIKE

©2016 Dimensional Insight, Inc.

A word about style

Converse

Flashy

NIKE

©2016 Dimensional Insight, Inc.

Hierarchy of Information

©2016 Dimensional Insight, Inc.

Hierarchy of Information

Sales by Product Sales Growth Sales by Region % Goal % Discounted Items

Cost of Goods Sold Total Quantities Sold Quantities Sold by

Product Current Inventory

Sales Manager Example

©2016 Dimensional Insight, Inc.

Hierarchy of Information

©2016 Dimensional Insight, Inc.

Hierarchy of Information

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsHigh information density

Will users “get it all”? Limits to human capacity for

seeing and comprehending

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

??? 3 5 7 12 24 30!

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics7 metrics per screen, (plus or minus 2)

Densely populated dashboards obstruct readability—Difficult to quickly

locate and understand information

Poor readability leads to poor user adoption

"The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information" (Miller 1956)

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

Too many different graph types can lead to confusion

versus

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of Metrics

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsLimiting factors

Short-term memory capacity Familiarity with data

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsPhysiological Factors:

Capacity for seeing Illumination needs Color contrast perception

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsTechnological Capabilities:

Computer experience Browser interface

experience Experience with

Diver

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsWalk A Mile In Your Users Shoes:

Ask Users:—What data do you want to see?—How do you want to see it?

– Are you a visual thinker? …verbal?

Identify key metrics:—Have users rank key metrics

by importance

©2016 Dimensional Insight, Inc.

Ideal Number of MetricsThen create a dashboard for user review.

Iterative processWhat-if scenarios

©2016 Dimensional Insight, Inc.

Fundamentals of Design

ELEMENTS

Size

Shape

Distance

Hue

Saturation

Value

TECHNIQUES

Comparison

Contrast

Repetition

Juxtaposition

Proximity

EFFECT

Harmony

Agitation

Rhythm

Focus

Balance

Hierarchy

FEELING

Comfort

Discomfort

Joy

Sadness

Alarm

Security

©2016 Dimensional Insight, Inc.

Fundamentals of Design

FEELING

Comfort

Discomfort

Joy

Sadness

Alarm

Security

©2016 Dimensional Insight, Inc.

Elements of good labeling

Portal Title Section Title

Navigation

Portlet TitlePortlet Key

Value Label

©2016 Dimensional Insight, Inc.

Layout: Images

©2016 Dimensional Insight, Inc.

Layout: Images

MFG Part #16479

MFG Part #45304.0

MFG Part #45064.0

MFG Part #50955

©2016 Dimensional Insight, Inc.

Layout: Images

MFG Part #16479

MFG Part #45304.0

MFG Part #45064.0

MFG Part #50955

©2016 Dimensional Insight, Inc.

Layout: ImagesFleming’s VARK model*

Visual learners Auditory learners Reading/writing-preference learners Kinesthetic learners or tactile learners

http://vark-learn.com/

©2016 Dimensional Insight, Inc.

©2016 Dimensional Insight, Inc.

©2016 Dimensional Insight, Inc.

Mechanics: Fonts

http://en.wikipedia.org/wiki/File:PC-DOS_1.10_screenshot.png

©2016 Dimensional Insight, Inc.

Mechanics: FontsFunction

Communicate Information Create Hierarchy Add Style

©2016 Dimensional Insight, Inc.

Mechanics: Fonts

What fonts are available to all of your users?

©2016 Dimensional Insight, Inc.

Mechanics: FontsThere are no completely 100% safe web fonts

http://www.w3schools.com/cssref/css_websafe_fonts.asp

©2016 Dimensional Insight, Inc.

Mechanics: Fonts

Keep it Readable!

©2016 Dimensional Insight, Inc.

Colors: Matching a Corporate ID SystemLeverage existing colors, fonts & graphics

Expedites process Increases user adoption Communicates company buy-in

©2016 Dimensional Insight, Inc.

Colors: Matching a Corporate ID SystemWhere is the information?

Marketing Department Creative Department Public Relations Firm Graphic Designer/Web Designer

©2016 Dimensional Insight, Inc.

Colors: Matching a Corporate ID System4 things to determine:

—Logo:– Use it in the Title Bar.

—Colors:– DivePort uses RGB values.

—Fonts:– Is there a “web safe”

substitute for your corporate font?

—Graphics– Are they primarily photos or

illustrations?

©2016 Dimensional Insight, Inc.

http://en.wikipedia.org/wiki/Color_blindness

Accommodating color blind users

Color blindness affects a large number of individuals, with protanopia and deuteranopia being the most common types.[11] In individuals with Northern European ancestry, as many as 8 percent of men and 0.4 percent of women experience congenital color deficiency.[45]

The number affected varies among groups. Isolated communities with a restricted gene pool sometimes produce high proportions of color blindness, including the less usual types. Examples include rural Finland, Hungary, and some of the Scottish islands. In the United States, about 7 percent of the male population—or about 10.5 million men—and 0.4 percent of the female population either cannot distinguish red from green, or see red and green differently from how others do (Howard Hughes Medical Institute, 2006). More than 95 percent of all variations in human color vision involve the red and green receptors in male eyes. It is very rare for males or females to be "blind" to the blue end of the spectrum.[46]

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind Users

Original:

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind Users

Colorblindness simulation:

Source of simulation: vischeck.com

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind Users

Typical indicators

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind Users

Typical indicators

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind UsersWhat can you do about it?

Be sensitive to user needs Find out who is colorblind

—What kind of colorblindness?

Use “barrier-free colors”—“Set of colors that is unambiguous both to

colorblinds and non-colorblinds”Source: Color Universal Design (CUD) organization; http://jfly.iam.u-tokyo.ac.jp/color/

©2016 Dimensional Insight, Inc.

Colors: Accommodating Color Blind Users

Upload a screen capture of your dashboard here to check its availability to color blind users:– http://www.color-blindness.com/coblis-color-blindness-simulator/

©2016 Dimensional Insight, Inc.

Resources

©2016 Dimensional Insight, Inc.

Content selection

Survey users or key stakeholder for content requirements:https://www.surveymonkey.com/user/sign-up/

©2016 Dimensional Insight, Inc.

Sample Questions

What type of BI user do you consider yourself to be:Executive Analyst Power User Casual User

When it comes to colors, I prefer:Company Colors Muted Colors Bright Colors Dark Colors

Please adjust colors for me:Deuteranope ProtanopeTritanope

Which of these fonts is available on your system:ArialCourier NewGeorgiaTimes New RomanTrebuchet MS Verdana Don’t know

Please indicate your computer platform:PCMac Workstation

Please indicate your operating system:WindowsMacLinux

Monitor Resolution:1024 x 7681280 x 8001344 x 10081600 x 12001920 x 1200Other:

What metrics would you like displayed?

©2016 Dimensional Insight, Inc.

Content selection

Select the right graphs for each data display.http://www.dimins.com/blog/2016/08/18/how-to-select-charts-for-effective-data-display

©2016 Dimensional Insight, Inc.

Layout - Size in pixels & Device

Use GA to determine most commonly used screen size/device.http://www.dimins.com/blog/2016/01/20/how-to-determine-the-ideal-screen-dimensions-for-dashboards/

©2016 Dimensional Insight, Inc.

Current trend: simple is good, flat is better

http://www.dimins.com/blog/2015/04/21/5-steps-to-creating-a-cleaner-looking-dashboard/

©2016 Dimensional Insight, Inc.

Color

Leverage your company’s corporate colorshttp://www.dimins.com/blog/2013/05/09/how-to-make-your-dashboard-interface-more-visually-appealing/

©2016 Dimensional Insight, Inc.

Color - Trends

Check out this cool tool for exploring color combinations:http://www.dimins.com/blog/2016/02/16/a-cool-tool-for-experimenting-with-dashboard-and-portal-color-schemes/

©2016 Dimensional Insight, Inc.

Colors – accommodating Color blind users

Blog article on color blind users:– http://www.dimins.com/blog/2015/03/23/how-to-design-a-

dashboard-for-colorblind-users/

©2016 Dimensional Insight, Inc.

Current trend: add icons

https://thenounproject.com/ Access a seemingly unlimited amount of icons to use on

dashboards Remember: some people are more visual than literal

and these icons help them quickly understand the information being displayed

©2016 Dimensional Insight, Inc.

Dashboard Design Take Away

Content needed on a dashboard depends on the user needs; get their input! See Blog article about feedback loop:http://www.dimins.com/blog/2016/03/31/how-to-refine-your-dashboard-design-using-a-feedback-loop/

©2016 Dimensional Insight, Inc.

Use collaboration tool to gather feedback

I use Teamer to share design ideas in my office.

©2016 Dimensional Insight, Inc.

Easy way to get up-to-date suggestions

Subscribe to our blog

©2016 Dimensional Insight, Inc.

This is just fun.

http://answerthepublic.com/