UX Design Principles

Practical Dashboard &
Analytic app design

© 2015 ZS Associates | CONFIDENTIAL Dashboard Instructional_sjbnotes2
Topics
▪ Visual Design Principles
– Hierarchy
– White space
– Alignment
– Typography
– Colors
– Consistency
– Simplicity
▪ Interaction Design Principles
– Progressive disclosure
– Control placement
– Discoverability
– Mobile considerations
▪ Design Patterns
▪ Charts
– What makes a “good” chart?
– Types and uses
– Charts to avoid
– Putting it together

7 visual design principles to keep in mind for successful dashboard design

Design Basics: Hierarchy
Icons are a single color and
tone, which support the
content below.
Larger, bolder type draws
the eye to most important
content first.
Link is lower priority, placed
at bottom-right.
Well-structured and designed information gives visual cues to support
ranked importance to users.

Learn more at: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Hierarchy of information patterns found in eye-tracking studies for cultures
that read left to right. Images below demonstrate heat maps of where a
users’ eyes move across a screen. Mapping most to least important
information to this pattern allows faster user comprehension.

Nav & Banner
I’m the most important stuff
Secondary Importance Third Important
Fourth level
No one pays attention to this

3D rendered icons with
various colors and random
placement distracts instead
of supports data.
Type size similarities and
disorganized layout make it
hard to find key data points.
Poorly structured information hurts the user’s ability to understand the
order of information and may not be in order of user importance.

Design Basics: White Space
White space (or negative
space) is used to break up
content areas, allowing
content to stand out and make
layouts easier to understand.
Do this!Bad practice

Design Basics: White Space
Avoid using borders,
boxes or blocks of strong
color to break up space.
Use white (or negative) space
to group and organize your
content. White space doesn’t
have to be white. In this
example, the space to the left
of the icons identifies them as
a group.
Group elements together and leave space between groups to tell users
that elements are related to each other. Space between groups are
generally 2 or 3 times the space inside groups of elements.

Design Basics: White space
Without deliberate space between sections of information, it’s hard for users
to know where to look first, where a section ends and another begins.
These areas have
unnecessary borders that are
very close together. This
causes a lot of visual noise.
Removing the borders would
create white space.

Design Basics: Alignment
Misaligned groups of information make it harder for users to quickly scan
information and understand how sections are related.

Design Basics: Alignment
Align content to a grid with consistently sized columns and gutters to make
it easier to people to glance at. You can break sections into proportional
groups for best results.

Design Basics: Typography
If everything is emphasized, NOTHING is.

Examples of fonts to never use:
Comic Sans - too informal
Very styled fonts, like Papyrus
Scripted fonts, like Bradley Hand
or Marker Felt
Courier is for
simulating typewriters
Overly bold, block fonts
like Arial Black
Examples of fonts to use:
Helvetica
Open Sans
Calibri
Arial
Roboto
Use no more than two font styles and avoid anything too stylized.

At full size, the example to
the left demonstrates the
following best practices:
▪ Font sizes for each axis
should be at least 10.5pt
(13px).
▪ Axis labels and header
sizes should be consistent
in size and weight.
▪ Use only a few font sizes
throughout the system to
make axis labels, graph
titles, and headers clear.
▪ Limit the use of type colors
and bold type styles

Design Basics: Colors for Data Display
This is an example of too
many bright colors
The example below is an effective use of
color in a data visualization

▪ Make background white or slightly off-
white (preferable)
▪ Most text should be dark gray or black
▪ Non-data chart elements like line
marks and labels can be light gray
▪ Colors should have brand consistency
and not exceed six in a chart
▪ Use subdued colors
▪ Use bright colors sparingly for alerts
▪ Perform a test for those with color
blindness (see next page)

9% of men and .5% of women have some degree of color blindness. Choose
colors that color blind people can differentiate or else they may not be able to
understand your charts.
Upload screenshots at http://www.color-blindness.com/coblis-color-blindness-simulator/
to see the impact colorblindness will have on your data visualization.
The colors above are what
those with normal vision see.
Above are the same colors
as seen with red-green color
deficiency

Design Basics: Consistency
In the example above, the UI patterns chosen are radio buttons and
dropdowns. While designing your dashboard, strive for consistency in
charts, colors, UI element interactions and content locations.
0.
1.3
2.5
3.8
5.
Jan Feb Mar Apr
Sales of Product B
AprtoJan
Consistency lets people learn your tool and get better at using it. Try to
choose just one UI pattern for the same interaction throughout the entire
dashboard.
0.
1.3
2.5
3.8
5.
Jan Feb Mar Apr
Sales of Product A
Product A Product B

Design Basics: Consistency
Inconsistency in type styles, link styles, graph colors, UI elements may cause
significant confusion.
Avoid underlined text
unless it’s a pattern to
indicate hyperlinks.
The charts in this
dashboard are not
consistent in color
family.
The charts and typography in this
dashboard are consistent, making it feel
cohesive.

Design Basics: Simplicity
Balancing simple objects against a contrasting background can make content
more clear and easier to comprehend.
Windows Vista introduced a taskbar with lots of
gradients and texture, making it harder to read.
Windows 10’s taskbar is a simpler
design with consistent design patterns
that makes it easier to use.

Design Basics: Simplicity
Bad practice
Do this!
Lots of use of gradients and 3D effects are
distractions from the content.
Buttons with lots of graphic design
elements aren’t necessary to indicate they
are UI elements.
UI elements lack affordance, making them
harder to interact with.
Less visual effects in the UI make the taskbar and
iconography more clear to users.
More affordance space between icons improve usability.
Consistent design pattern for icons in the taskbar.

Topics
▪ Visual Design Principles
– Hierarchy
– White space
– Alignment
– Fonts
– Colors
– Consistency
– Simplicity
▪ Interaction Design Principles
– Discoverability
– Mobile considerations
▪ Design Patterns
▪ Charts
– Types and uses
– Charts to avoid

Progressive Disclosure
Not all information is equally
important. You will probably
struggle to fit every piece of
information you might need in
a single page.
Progressive disclosure allows
you to show elements
previously hidden.
Collapsed
Expanded

Progressive Disclosure
These are different examples
of how progressive disclosure
can be applied:
▪ Expandable sections
▪ Tabs
▪ Pop-overs
▪ Dropdown selectors
▪ Tooltip

Control Placement
Controls not in a logical
place and not near the
content it controls can
lead to confusion.
This segment controls the entire
screen, which is counter-intuitive.
Bad practice

Control Placement: Do
Something here
Something
here
Can change this section
Can change this section Can change this section
Something here
Do this!
Anything on top can change all of the content below it – and should!
If something is on the left and entirely spanning the left column, it can
change everything on the right.

Control Placement: Don’t
Something
here
Something
here
Can’t change this section
Something
here
These examples show poorly placed interaction controls, which may cause
user confusion.
Bad practice

Control Placement
There is an expectation
that a new tab contains a
whole new set of data, as
shown in the example to
the left.
When that expectation is
not met, it leads to user
confusion.
Product BProduct A
Metric
R4W
volume 4x4 growth
Shipments 25 10%
Enrollments 1 13%
Net Active Patients 1 13%
Product A
Month Prod A Prod B
Jan 25 3
Feb 1 6
Mar 25 2
Your calls
Product A Product B
Metric
R4W
volume 4x4 growth
Shipments 30 10%
Enrollments 3 25%
Net Active Patients 2 15%
Product B
Month Prod A Prod B
Jan 25 3
Feb 1 6
Mar 25 2
Your calls
Table inside tab control changes
when user clicks on tab.
Table outside tab control does NOT change.

Discoverability: Make UI Obvious
UI elements that have obvious visual cues to signify their purpose can
reduce user confusion. Make it obvious which elements on the screen are
interactive UI to help clarify the purpose.
Button Clicked Button This is not a link This is an obvious link
Pop-overs provide additional
information on the same screen
For more information

Discoverability
No one will see your content if they can’t find it. Below are examples of
visual cues, such as links with colored text and progress indicators.
Rep ID Jan sales Feb sales
23465 25 3
23166 1 6
12843 25 2
23164 1 6
12841 25 2
Rep ID Jan sales Feb sales
23465 25 3
23166 1 6
12843 25 2
23164 1 6
12841 25 2
Do this!
Bad practice
Clear indicator for
scrolling region
Swipe indicator lets
user know there is
more data to be seen
Links have
different color
type style to
differentiate
from plain text

Discoverability: Show, Don’t Tell
If you need to write a bunch
of instructions, you probably
did something wrong.
Try affordances--user
interface elements that
intuitively imply the functional
use--to make interactions
clear and well-designed.
Swipe to view a chart of this data
Click the links below to filter by channel
Click target pay to see how it was calculated
Scroll to see more products
Bad practice

Mobile Considerations
▪ Touchpoint interactions are the point where a finger interacts with a
touchscreen
▪ Touchpoints need to be larger than interaction points for desktop to
account for the size of human fingers
▪ Interaction sizes should be 7 to 9mm minimum with at least 1mm of
space between clickable elements
▪ There is no hover state on touch screens, so hover effects aren’t reliable
ways to communicate to users
▪ Screen sizes across devices are variable
▪ Aspect ratio of screen height and width are variable
▪ Higher resolution screens, so graphics need to be higher resolution
▪ Use the built-in mobile functionality
7-9mm
1mm
Touchpoint

Mobile Considerations
Mobile interactions include new patterns with swipe gestures to control
UI elements. Below are examples of gesture interactions.

Topics
▪ Design Basics
– Hierarchy
– White space
– Alignment
– Fonts
– Colors
– Consistency
– Simplicity
▪ Interaction Design
– Discoverability
– Mobile Considerations
▪ Design Patterns
▪ Charts
– Types and uses
– Charts to avoid

Design Patterns: Checkboxes and Radio Buttons
Which hobbies do you enjoy?
Cooking
Gaming
Movies
Reading
Sports
Travel
Of the following, what is your favorite?
Cooking
Gaming
Movies
Reading
Sports
Travel
Checkboxes indicate that a user can choose multiple or all available options.
Radio buttons indicate that the user can choose only one of the available options.

Radio buttons and drop-down boxes allow
selection of a single value.
Radio buttons allow user to see all values at once
and take up more space.
Design Patterns: Radio Buttons versus Dropdowns
Cooking
Gaming
Movies
Reading
Sports
Travel
Cooking
Drop-down select boxes save space, but require
the user to take action to see all options.

Checkbox groups show all options that a user can
choose and require more space than a multi-select
box.
Design Patterns: Checkboxes versus Multi-Select Box
Cooking
Gaming
Movies
Reading
Sports
Travel
Cooking
Gaming
Movies
Multi-select boxes are more space efficient and hide
options, which a user needs to scroll to see and
select, adding more clicks.

Faceted navigation collects many sets of options to filter
content. It is generally best to place them on the left side
and have them filter content to the right of the screen.
These are space efficient, but may require a scrolling area
for large groups of information.
Design Patterns: Faceted Navigation

Design tables to help users scan data by using these suggestions:
▪ Indicate what columns are sortable by using color and icons
▪ Have generous spacing between cells
▪ Add a light gray background color to every other row, or light gray
hairlines
Design Patterns: Tables
Rep ID
Jan
sales
Feb
sales
Mar
sales
Apr
sales
May
sales
104 25 3 3 3 3
103 1 6 6 6 6
102 25 2 2 2 2
101 1 6 6 6 6
100 25 2 2 2 2
Subtle alternating row colors have a slight advantage over hairlines for keeping people on the correct line
http://www.alistapart.com/articles/zebrastripingmoredataforthecase/

Design Patterns: Tabs
Tabs change content for their section. They are great for saving space to
show multiple related sections on the same screen.
In this example, tab is white without a bottom
border to suggest grouping with content below.
Unselected tabs are gray with bottom border, to
make it clear they are selectable, but not active

Buttons are for actions like
popping open an edit window.
Design Patterns: Buttons versus Links
Links are generally used to move between pages.
Edit

Topics
▪ Design Basics
– Hierarchy
– White space
– Alignment
– Fonts
– Colors
– Consistency
▪ Interaction Design
– Discoverability
– Mobile Considerations
▪ Design Patterns
▪ Charts
– Types and uses
– Charts to avoid

Things to consider when you pick a chart type:
▪ What is important to the user?
▪ How much detail do they need?
▪ Who is looking at this data?
▪ How familiar are they with this chart type?
▪ How often will this data be updated
Humans are good at:
▪ visually comprehending
the height and length of
shapes and lines, as well
as slopes.
Humans are bad:
▪ evaluating the height and
length of objects with
different baselines
▪ struggle with comparing
areas

Charts show the shape of the data
$0
$57,500
$115,000
$172,500
$230,000
$287,500
Jan-03 Apr-03 Jul-03 Oct-03 Jan-04
Median
Average
Date Median Average
Jan-99 $153,100 $182,900
Feb-99 $160,000 $191,400
Mar-99 $157,300 $189,300
Apr-99 $159,900 $192,200
May-99 $154,400 $187,900
Jun-99 $159,300 $193,900
Jul-99 $158,200 $189,100
Aug-99 $154,800 $193,100
Sep-99 $163,200 $194,800
Oct-99 $161,100 $200,200
Nov-99 $180,000 $221,500
Dec-99 $164,800 $202,100
Jan-00 $163,500 $200,300
Feb-00 $162,400 $199,200
Mar-00 $165,100 $204,900
Providing a visual representation of data provides a better understanding of
relationships between them.

The workhorses of charts: lines and bars
When a trend is the focus of the
data, use a line graph
When values are the focus, use a
bar graph

Change over time: Line or bar chart
Line chart: The trend is most important,
or you have multiple values.
Bar chart: Vertical bars must be used
for changes over time. Multiple values
can be problematic because it’s harder
to see the change in one bar over time
with the other bars in the way.
Use either of these graphs in the right
context for practically any data display.

Pies: Look nice, but use sparingly
Pie charts are good when you need a rough eyeball of proportion, you only
have a few values, and values are not similar.
Pie charts can be a
challenge for users,
because people are poor
at estimating areas and
worse when estimating
areas for irregular shapes.

Proportion: Stacked Bar
A stacked bar can be the overall magnitude (shown)
or scaled to 100% to mimic a pie chart.
Alternates:
• Line chart
• Small multiples
Use stacked bars when you
care about overall magnitude of
the combination and proportions
within a bar. The focus is not
about change in each section
over time. You have more than
one part-to-whole ratio you care
about.

A problem with the stacked bar
graphs are the shifting baselines,
which make it harder to compare left
to right. Just as with pie charts,
people are bad at visually
comparing area.

This example shows a consistent
baseline makes it easier to judge
differences in the bar heights.
Alternative options are:
• Line chart
• Small multiples

Small Multiples
Small multiples help demonstrate data
when measuring identical metrics due to
use of similar scale and axes.
These charts are useful when the focus
is on shifts in the data based on variance
of the one thing that changes.

Home on the Range
If your data values are very
different, you may have issues of
losing detail in the smaller values.
You’ll need two charts, or a way to
let people filter some large values
out, or zoom in.

Relationship Charts: Scatterplot and Bubble chart
These charts are useful when you are comparing two (scatterplot) or three
(bubble chart) variables to look for correlation.
A potential issue with a scatterplot graph is
that data points overlap so you can’t see all the
positions. Making the dots semi-transparent, or
using crosses instead of dots.
Estimating area of bubbles
is a challenge, which is a
potential problem.

Problems with Judging Area
Look at the example of two circles below. Can you estimate the differences
between them? For example, how much bigger is B compared to A?
Circle B is twice the size of A, while circle C is three times the size of A.

Distribution: Histogram or box plot
A histogram maps the number of values
for each point and can be in the form of a
bar or line graph. This is useful when you
need detailed distribution of one element.
Box plot shows the range of the middle
50% of data. The lines usually extend
to the minimum and maximum, or 1
standard deviation. Outliers may be
shown with dots. The box plot is useful
for showing a distribution of multiple
elements.

Sparklines: Tiny charts, big trend
Sparklines are tiny charts used to
indicate change over time. Usually
they are scaled to fit available
space, which may exaggerate flat
lines. They may be dressed up
with average bars (shown), with
dots at highs and lows, with trend
lines, and so on, but you can’t get
too much in such a small space or
it becomes unreadable.
Use sparklines in large tables
of data where you want to include
some trend information on
each row.

Bullet Graphs: Number one with a bullet
Bullet graphs were created by Stephen Few to replace gauges, which are
inefficient with space.
Bullet charts are useful when you have
a metric that has various levels of
achievement (like high/medium/low)
and possibly a goal. They work well in
multiples and in tables.

Donut Charts: Delicious-looking but indigestible
Donut charts are not effective use of data visualization. They make areas
harder to judge than standard pie charts and easily mislead users to the
wrong conclusions about the data.
Bad practice

Bar charts with random colors
Different colors are not needed to differentiate the values in the left chart.
Use different colors when the color is necessary for meaning, such as when
there are too many values to label in the chart and need a legend.

Charts with colors too similar
Avoid charts with colors that
are too similar and lack
enough contrast to tell them
apart from each other.
% of survey types
Bad practice

Inappropriately scaled charts
Be careful of the scales you are using in your graphs. This can really hurt
the understanding of your data and your charts will lose their purpose.
-23.1.626.250.875.4100.
Jan Feb Apr Mar
Sales of Product A
0.
1.3
2.5
3.8
5.
0 1 2 3 4 5
Sales of Product A versus B
1.
2.
3.
4.
5.
0 1 2 3 4 5
Sales of Product A versus B
Bad practice
Bad practice

The Double-Y Axis of Evil
Avoid using a double-Y axis
graph. This can cause
confusion between the metrics
being evaluated and mislead
people to the wrong conclusions
about the data presented.
In the top example, the Public
Sector line (orange) appears to
be competitive with the Private
Sector line (green), but the data
doesn’t support that.
In the bottom example, a single
axis is used, and presents the
same data in a clearer way,
showing public sector is always
much lower than private sector.
Bad practice
Do this!

Funnel Charts: Lying areas
Funnels look fun, but they
skew data relationships with
non-proportional areas.
As discussed earlier, we
know humans are already
poor at comparing areas and
funnels just complicate even
more.
Bad practice
Prospects
Meetings set up
Sales
Sales funnel
In this example, the areas of each section don’t make sense. The middle
funnel section (orange) looks smaller than the top section (purple), but the
value doesn’t change. The smallest section (yellow) is far too big to be just
6% of the section above it.

Bar charts that don’t start at 0
Stay away from bar charts
that don’t start with 0 on the
axis.
Typical human perception
judges the value of bars
from their baseline.
It’s recommended that you
use start with a 0 line axis,
or use a line graph or dot
plot to show a scale starting
with a value that’s greater
than 0. We don’t judge their
magnitude from a baseline.
Bad practice
Do this!
In the example above,
2011 looks like it’s three
times as large as 2010,
even though 34% is
only 30% greater than
26%.
It is much more clear to
compare bars across a
0 line axis.

Tree Charts
Don’t use a tree chart if you need
specific comparisons or detailed info.
Only use this chart type when you want
to identify hotspot groupings and are
trying to get values at a quick glance
judging by area size and changes by
color.
Problems with this chart type:
▪ Areas are hard for humans to judge
▪ Limited colors to show values are
hard to judge
▪ Smaller boxes aren’t able to be read
▪ Can’t determine actual values of
size or change
"Heatmap incito" by I, Colinmcfarlane. Licensed under CC BY 2.5 via Wikimedia Commons -
http://commons.wikimedia.org/wiki/File:Heatmap_incito.png#mediaviewer/File:Heatmap_incito.png

Proportion: Radar Charts
Radar Charts may be useful for
determining clusters of high/low
values or outliers, or identifying
similarities.
If the radar axes are the same
scale, a bar is easier to read. If
they’re not, it’s easy to mislead
with them.
You may have more success with
a bar chart.
"MER Star Plot" by NASA Primary START - Automation Tool for Rapid Design of Space Systems.

Multiple Value Area Charts
Never use an overlay, which
covers data and creates
misleading trends.
0
10
20
30
40
1/5/02 1/6/02 1/7/02 1/8/02 1/9/02
Avoid cumulative charts, unless you only
care about overall/bottom item trend line
and are indifferent to the individual item’s
trends. The middle areas look like they’re
moving up and down, but may only be
moving because values beneath them
are moving. Use a line graph or stacked
bar instead.
Bad practice

3D: Overall bad for charts
At best, 3-dimensional elements add
very little information to your charts. At
worst, they actually mislead and
obscure your data.
Bad practice

Avoid Chart Junk
Your data isn’t boring! Adding
graphics to your charts can be
considered “chart junk.”
There is no need to add
unnecessary graphical elements
to your charts. It usually distracts
people from understanding the
data you’re trying to share.
Bad practice

For more information:
▪ Information Dashboard Design, Stephen Few
– For practical design and great before and after examples. More at
perceptualedge.com
▪ The Visual Display of Quantitative Information, Edward Tufte
– If you like high-minded theory plus a sweet chart of Napoleon's
march on Russia
▪ The Functional Art, Alberto Cairo
– If you want to tell a story with your information design, plus see
some really innovative chart types

Practical Analytic App Design: Key Takeaways
✓Use interactive elements in the ways users expect them to work; be
consistent
✓Design UI elements to have clear signifiers to indicate what is clickable
✓Draw attention to the most important items
✓Use the chart that will give the user what they need to know
✓Clearly show them the data they need and don’t distract them with things
they don’t

UX Design Principles

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to UX Design Principles

Similar to UX Design Principles (20)

Recently uploaded

Recently uploaded (20)

UX Design Principles

Editor's Notes