Introduction to Dashboard Design

1

• Introduction to Dashboard Design

Part 1 - Presented by Rosemary Weinberger,
Creative Director Dimensional Insight, Inc.
2
A G E N D A

• A Business Perspective of Dashboard Design
• Good Dashboard Design is Important
• Good Dashboard Design is not a Subjective
  Experience
• Best Practices Lead to Good Dashboard Design

3
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• Why is Dashboard Design Important?
• Time Money Is Well Spent
• Youll Attract More Users
• Existing Users Will Be Happier

4
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• Reason Users dont use your dashboards
• The information they need is not there like
  this empty vending machine
• The dashboard is hard to read
• The users dont like the way it looks

5
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• What information do my users need?
• You cant create in a vacuum.
• Talk to your users.
• Ask lots of questions!

6
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• Why are dashboards hard to read?
• Crowded space
• Information is poorly organized
• Non-relevant items on dashboard

7
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• Why are dashboards hard to read? (continued)
• Physiological constraints
• Short Term Memory Capacity
• Visual Perception
• Other constraints
• Eye Movement

8
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• Eye Movement Studies
• English-speaking people look from top left to
  bottom right, as they read
• This is a cultural predisposition - if one reads
  right to left, looking is typically right to
  left

9
D A S H B O A R D D E S I G N I S I M P O R
T A N T

• What can good design do to improve the
  situation?

10
D A S H B O A R D D E S I G N I S I M P O R
T A N T
QUALITATIVE THRESHOLDS
ORGANIZED
RELEVANT
ENJOYABLE
11
D A S H B O A R D D E S I G N I S I M P O R
T A N T
QUALITATIVE THRESHOLDS
ORGANIZED
RELEVANT
ENJOYABLE
12
D A S H B O A R D D E S I G N I S I M P O R
T A N T
QUALITATIVE THRESHOLDS
ORGANIZED
RELEVANT
ENJOYABLE
13
Q U A L I T Y I S N O T A S U B J E C T I
V E E X P E R I E N C E

• What is Good Design?
• I know good design when I see it.
• Gives impression that good design cannot be
  defined clearly
• Leaves one feeling that good design is just a
  matter of personal opinion

14
Q U A L I T Y I S N O T A S U B J E C T I
V E E X P E R I E N C E

• What is Good Design? (continued)
• Some people say that good design is a subjective
  experience
• One mans treasure is another mans trash.

15
Q U A L I T Y I S N O T A S U B J E C T I
V E E X P E R I E N C E

• What is Good Design? (continued)
• There are Qualitative Thresholds
• Base Line Functionality
• Smooth Operation
• Pleasure

Best!
Better
OK
16
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

17
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Shape Size Distance Hue Saturation Value
18
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
There are shapes
19
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
There are shapes
20
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
There are shapes
21
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
There are shapes
22
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
sizes
23
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
and sizes
24
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
and more sizes.
25
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
Distances may be near
26
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
or far.
27
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
Hue refers to color names.
28
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
Theres saturation ...
29
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
and value (Darkness Brightness).
30
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
31
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
You can compare ...
32
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
or contrast using size ...
33
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
or contrast using shape ...
34
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
or contrast using color.
35
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N
Relative proximity can create meaning.
36
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

37
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
EFFECT Harmony Agitation Rhythm Focus Balance Hier
archy
38
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
EFFECT Harmony Agitation Rhythm Focus Balance Hier
archy
39
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
EFFECT Harmony Agitation Rhythm Focus Balance Hier
archy
40
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
EFFECT Harmony Agitation Rhythm Focus Balance Hier
archy
FEELING Comfort Discomfort Joy Sadness Alarm Secur
ity
41
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

ELEMENTS Size Shape Distance Hue Saturation Value
TECHNIQUES Comparison Contrast Repetition Juxtapos
ition Proximity
EFFECT Harmony Agitation Rhythm Focus Balance Hier
archy
FEELING Comfort Discomfort Joy Sadness Alarm Secur
ity
42
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Fundamentals of Design

FEELING Comfort Discomfort Joy Sadness Alarm Secur
ity
43
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• A Word About Color

44
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• A Word About Color

45
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Important things to know about color
• Color is Only a Sensory Perception

46
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Important things to know about color (continued)
• Achromatic and Chromatic Adaptation
• Adjustment Processes Optimize Recognition

47
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Important things to know about color (continued)
• Dont be afraid of color
• Recognize its role in engaging the audience
• Use color to communicate effectively

48
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• About Fonts
• Will user print dashboards?
• Fonts designed for print versus digital media
• What fonts are available to all users?
• Readability at different sizes
• Serif versus non-serif

49
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• How does one create a good dashboard design?

50
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Follow a Process
• Start by Communicating with Users
• Survey, Ask Questions, Listen

51
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Follow a Process (continued)
• Learn More About the User and Her Needs
• What is the content?
• Is there a Corporate Identity System to follow?
• Are any of the users color blind?
• What are the personal preferences of the users?

52
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Follow a Process (continued)
• Create a Hierarchy of Information
• Begin with a written list
• Limit to 3-7 metrics or groupings of metrics per
  screen
• The hierarchy will be re-created on the dashboard
  to reflect the list

53
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Follow a Process (continued)
• Use the Fundamentals of Design to create
  hierarchy, focus or alerts
• Most important metric upper left, etc.

1
2
3
4
5
6
7
8
9
54
B E S T P R A C T I C E S L E A D T O G O
O D D E S I G N

• Follow a Process (continued)
• Draft - Review - Revise
• Repeat iterations until user is satisfied with
  dashboard design
• Schedule Annual review

55
S U M M A R Y A B U S I N E S S P E R S P
E C T I V E O F D A S H B O A R D D E S I G
N
1

• 1. Dashboard Design is Important!
• It Improves User Adoption Rates
• Existing Users are Happier

56
S U M M A R Y A B U S I N E S S P E R S P
E C T I V E O F D A S H B O A R D D E S I G
N
2

• 2. Good Design is not Subjective
• There are Qualitative Thresholds
• Readability
• Functionality
• If Possible, Make Dashboards Attractive to the
  Users
• Learn about individual preferences

57
S U M M A R Y A B U S I N E S S P E R S P
E C T I V E O F D A S H B O A R D D E S I G
N
3

• 3. Best Practices Lead to Good Design
• Follow a Process
• Use the Fundamentals of Design!!!
• Get Input Directly from End Users
• Review Annually

58
(No Transcript)
59
Resources

• References Resources
• Official Google Blog Eye Tracking Studies more
  than meets the eye, Anne Aula and Kerry Rodden,
  User Experience Researchers
• The Basic Law of Color Theory, Harald Kueppers,
  Barrons Educational Series, Inc., 1982

60

• Introduction to Dashboard Design

Part 1 - Presented by Rosemary Weinberger,
Creative Director Dimensional Insight, Inc.