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

©2016 Dimensional Insight, Inc.

Dashboard Design

Rose [email protected]


AgendaAgenda

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

Mechanics– Fonts– Colors

Resources


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


Key Considerations


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


A word about style

Wingtip ConverseNIKE


A word about style

Wingtip

Conservative


A word about style

New Balance

Performance

NIKE


A word about style

Converse

Flashy

NIKE


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


Ideal Number of Metrics


Ideal Number of MetricsHigh information density

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

seeing and comprehending



??? 3 5 7 12 24 30!


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)



Too many different graph types can lead to confusion

versus


Ideal Number of MetricsLimiting factors

Short-term memory capacity Familiarity with data


Ideal Number of MetricsPhysiological Factors:

Capacity for seeing Illumination needs Color contrast perception


Ideal Number of MetricsTechnological Capabilities:

Computer experience Browser interface

experience Experience with

Diver


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


Ideal Number of MetricsThen create a dashboard for user review.

Iterative processWhat-if scenarios


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


Fundamentals of Design

FEELING

Comfort

Discomfort

Joy

Sadness

Alarm

Security


Elements of good labeling

Portal Title Section Title

Navigation

Portlet TitlePortlet Key

Value Label


Layout: Images


Layout: Images

MFG Part #16479

MFG Part #45304.0

MFG Part #45064.0

MFG Part #50955


Layout: ImagesFleming’s VARK model*

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

http://vark-learn.com/


Mechanics: Fonts

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


Mechanics: FontsFunction

Communicate Information Create Hierarchy Add Style


Mechanics: Fonts

What fonts are available to all of your users?


Mechanics: FontsThere are no completely 100% safe web fonts

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


Mechanics: Fonts

Keep it Readable!


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

Expedites process Increases user adoption Communicates company buy-in


Colors: Matching a Corporate ID SystemWhere is the information?

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


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?


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]

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

https://en.wikipedia.org/wiki/Color_blindness#cite_note-pmid21774112-11

https://en.wikipedia.org/wiki/Color_blindness#cite_note-45

https://en.wikipedia.org/wiki/Finland

https://en.wikipedia.org/wiki/Hungary

https://en.wikipedia.org/wiki/Scotland

https://en.wikipedia.org/wiki/Color_blindness#cite_note-46


Colors: Accommodating Color Blind Users

Original:



Colorblindness simulation:

Source of simulation: vischeck.com



Typical indicators


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/

http://jfly.iam.u-tokyo.ac.jp/color/



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/


Resources


Content selection

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

https://www.surveymonkey.com/user/sign-up/


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?


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

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


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/

http://www.dimins.com/blog/2016/01/20/how-to-determine-the-ideal-screen-dimensions-for-dashboards/


Current trend: simple is good, flat is better

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

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


Color

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

http://www.dimins.com/blog/2013/05/09/how-to-make-your-dashboard-interface-more-visually-appealing/


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/

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


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/

http://www.dimins.com/blog/2015/03/23/how-to-design-a-dashboard-for-colorblind-users/


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

https://thenounproject.com/


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/

http://www.dimins.com/blog/2016/03/31/how-to-refine-your-dashboard-design-using-a-feedback-loop/


Use collaboration tool to gather feedback

I use Teamer to share design ideas in my office.


Easy way to get up-to-date suggestions

Subscribe to our blog


This is just fun.

http://answerthepublic.com/

http://answerthepublic.com/

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

Documents