©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/