SaaS Dashboard Design Guidelines - Turning Data Dumps Into Decision Tools

Principle 1: Know Your Dashboard Type

Not all dashboards are the same. The three main types (from Stephen Few's research):

1. Strategic Dashboard (Executive)

• Purpose: Monitor high-level KPIs for strategic decisions
• Audience: C-suite, VPs, Directors
• Update frequency: Weekly, monthly, quarterly
• Data density: Low — few key metrics, large numbers, clear trends
• Example: ARR, churn rate, customer count, NPS

2. Operational Dashboard (Real-Time)

• Purpose: Monitor ongoing operations and react to issues
• Audience: Operations teams, support, engineering
• Update frequency: Real-time or near-real-time
• Data density: Medium — current status, alerts, recent activity
• Example: Server status, active users, open tickets, current revenue

3. Analytical Dashboard (Exploratory)

• Purpose: Investigate data, identify patterns, make decisions
• Audience: Analysts, product managers, marketers
• Update frequency: Daily or on-demand
• Data density: High — multiple dimensions, drill-down capability
• Example: User behavior analytics, conversion funnels, cohort analysis

Before designing any dashboard, ask: which type is this? The design decisions flow from there.

Principle 2: Maximize the Data-Ink Ratio

Edward Tufte's principle: the proportion of ink (or pixels) used to represent data should be maximized. Non-data ink — borders, gridlines, decorations, 3D effects, shadows — should be minimized.

How to apply:

• Remove unnecessary chart borders
• Use subtle gridlines (or remove them)
• Avoid 3D charts (they distort data perception)
• Skip decorative elements that don't convey information
• Use color purposefully — not for decoration

Good: Clean chart with data points clearly visible, minimal decoration Bad: 3D pie chart with gradient fills, drop shadows, and thick borders that obscure the data

Principle 3: Eliminate Chartjunk

Chartjunk (Tufte's term) is any visual element that doesn't contribute to understanding the data. Examples:

• Background images behind charts
• Gradient fills on bars
• 3D effects
• Overly complex legends
• Unnecessary animation

Every visual element should earn its place by conveying information or improving clarity.

Principle 4: Match Chart Type to Data Type

The wrong chart type misrepresents data. We'll cover chart selection in detail in Part 3.

Quick rules:

• Trends over time → Line chart
• Comparisons between categories → Bar chart
• Parts of a whole → Stacked bar (for 5+ parts) or pie/donut (for 2-4 parts only)
• Relationships between two variables → Scatter plot
• Detailed records → Table
• Single metric → Metric card

Principle 5: Design for Scannability

Users don't read dashboards — they scan them. Design accordingly:

• F-pattern / Z-pattern: Place the most important data top-left
• Visual hierarchy: Most important metrics are largest, highest-contrast
• White space: Break information into logical groups with breathing room
• Typography: Large numbers for headline metrics (48px+), smaller for supporting data
• Color: Use color sparingly to highlight what's important

Principle 6: Provide Context

A number without context is meaningless. Always provide:

• Comparison: vs. previous period, vs. goal, vs. benchmark
• Trend: Up/down arrow, trend line, percent change
• Time range: "Last 30 days," "This quarter," "Year to date"
• Status: Good/warning/critical based on thresholds

Example — bad: "Revenue: $42,500" Example — good: "Revenue: $42,500 (↑ 12% vs. last month, on track to $50K goal)"

Principle 7: Enable Drill-Down

Summary metrics on a dashboard should be clickable, leading to detailed views. A dashboard that's a dead end fails its users.

Pattern:

• Dashboard shows "42 new users this week"
• Clicking the number opens a detailed view: list of users, signup dates, sources, activation status
• From there, users can filter, sort, export

1. Line Chart

Best for: Trends over time Use when: Showing how a metric changes (daily, weekly, monthly) Avoid when: Data points are not time-based or comparing unrelated categories Example: MRR over 12 months, daily active users, page views

Design tips:

• Use 2px stroke width (not too thin, not too thick)
• Minimize gridlines; use dotted/light gray
• Label axes clearly with units
• If showing multiple lines (max 5), use distinct colors and hover states
• Include Y-axis zero baseline unless you're specifically showing rate of change

2. Bar Chart (Vertical / Column)

Best for: Comparing values across categories Use when: Categories are distinct (not continuous time) Avoid when: You have 20+ categories (becomes unreadable) Example: Revenue by product line, users by region, conversion by campaign

Design tips:

• Always start Y-axis at zero (bars are length-based; truncating axis misleads)
• Sort bars by value (high to low) unless there's a reason not to (e.g., chronological)
• Use 2-3 color variants maximum
• Keep bar width consistent; gaps between bars should be narrower than bars themselves

3. Horizontal Bar Chart

Best for: Ranking categories with long labels Use when: Category names are too long for vertical bars Example: Top 10 pages by traffic, top performers, sorted rankings

4. Stacked Bar Chart

Best for: Showing parts of a whole across categories Use when: You need to show total AND breakdown Avoid when: Individual category comparisons are more important than the total Example: Revenue by product category, stacked by month

5. 100% Stacked Bar Chart

Best for: Comparing proportions across categories Use when: You care about percentage breakdown, not absolute values Example: Customer segments by pricing tier (what % of each tier)

6. Pie Chart / Donut Chart

Best for: Parts of a whole (very limited use case) Use when: You have 2-5 categories and they add to 100% Avoid when: You have 6+ categories (use bar chart or stacked bar instead) Why avoid overuse: Humans are bad at comparing angles and arc lengths. Tufte and many modern designers recommend avoiding pie charts in most cases.

If using pie charts:

• Maximum 5 slices
• Sort from largest to smallest (clockwise from 12 o'clock)
• Label slices directly (don't rely on legends)
• Include percentages

7. Area Chart

Best for: Cumulative trends over time Use when: Showing volume or total accumulation Example: Cumulative signups over time, storage used over time

Design tips:

• Use semi-transparent fills
• Avoid stacking more than 4 series (becomes unreadable)

8. Scatter Plot

Best for: Showing relationships between two variables Use when: Looking for correlation or outliers Example: Customer LTV vs. CAC, engagement vs. retention

Design tips:

• Label axes clearly with units
• Use color or shape to differentiate groups
• Add trend line if correlation is the point

9. Heatmap

Best for: Showing density or intensity across two dimensions Use when: Data has two categorical dimensions (e.g., time × day) Example: Activity by hour × day of week, cohort retention over time

Design tips:

• Use a sequential color scale (light to dark, not rainbow)
• Label axes clearly
• Provide a legend with color scale

10. Funnel Chart

Best for: Showing sequential steps with drop-off Use when: Visualizing a process (signup → activation → paid) Example: Conversion funnel from visit to purchase

Design tips:

• Show both absolute numbers and conversion percentages
• Highlight the biggest drop-off steps

11. Sankey Diagram

Best for: Showing flow between categories Use when: Users come from multiple sources and end at multiple destinations Example: Attribution flow (source → landing page → conversion)

12. Gauge Chart

Best for: Showing a single metric relative to a threshold Use when: Tracking progress to a specific goal Example: Goal attainment (75% of $100K target)

Caveat: Often overused. A simple metric card with context is usually better.

13. Metric Card (Number + Label + Context)

Best for: Single most important KPIs Use when: A number is the answer Example: ARR, MRR, DAU, customer count

Structure:

• Label (small, top): "Monthly Recurring Revenue"
• Number (large, center): "$42,500"
• Change indicator (small, below): "↑ 12% vs. last month"
• Optional: Mini trend line or spark chart

14. Data Table

Best for: Detailed records users need to scan Use when: Users need to see individual items (not aggregated) Example: List of customers, recent transactions, user activity

Design tips:

• Sortable columns
• Filterable / searchable
• Pagination for 100+ rows
• Right-align numbers, left-align text
• Use subtle alternating row colors (or none)
• Bold header row
• Include export option

Color

Don't rely on color alone. Approximately 8% of males and 0.5% of females have color vision deficiency. Always include:

• Text labels on charts
• Pattern fills (stripes, dots) in addition to color
• Icons or shapes to differentiate categories

Color contrast: Text on chart backgrounds must meet WCAG 4.5:1 minimum (see Resource 17: Color Contrast Guide).

Use colorblind-safe palettes:

• Viridis, Cividis, or Magma (sequential data)
• ColorBrewer (categorical data)
• Tableau's default palette is generally colorblind-safe

Keyboard Navigation

Data visualizations should be keyboard-accessible:

• Table rows and columns are navigable with arrow keys
• Chart data points are focusable and announce their values
• Filter controls are keyboard-operable
• All interactive elements have visible focus indicators

Screen Reader Support

For each chart:

• Provide an accessible text summary (aria-label or description)
• Include a data table alternative (visible or linked)
• Use proper semantic HTML for tables
• Announce chart updates when filters change

Motion

Respect the user's prefers-reduced-motion setting:

• Disable chart entrance animations for users who prefer reduced motion
• Don't use animation as the only way to convey information

Before shipping a dashboard, check:

Purpose & Audience:

• Clear dashboard type (strategic/operational/analytical)
• Primary audience defined
• Primary question the dashboard answers is identified

Content:

• 3-6 primary KPIs (not 15+)
• All metrics have comparison context (vs. previous, vs. goal)
• Time ranges are clear
• Data freshness is indicated ("Last updated X ago")

Visual Design:

• Clear visual hierarchy (most important is most prominent)
• White space used effectively
• Color used purposefully, not decoratively
• Typography hierarchy is clear
• Mobile layout works

Chart Selection:

• Each chart matches its data type
• No 3D effects
• No unnecessary chartjunk
• Axes are labeled with units
• Y-axis starts at zero for bar charts

States:

• Empty states are designed with CTAs
• Loading states use skeleton screens
• Error states have clear recovery
• Filtered empty states explain why

Interactivity:

• Summary numbers are drill-down enabled
• Filters work and persist within session
• Date range selector is clear
• Export options available

Accessibility:

• Color is not the only indicator of meaning
• Text meets WCAG contrast (4.5:1)
• Keyboard navigation works
• Screen reader alternatives provided
• prefers-reduced-motion respected

Performance:

• Dashboard loads in under 3 seconds
• Large datasets use pagination or virtualization
• Filters don't cause full page reloads

• Edward Tufte, "The Visual Display of Quantitative Information" (1983, 2nd ed. 2001)
• Stephen Few, "Information Dashboard Design" (2006, 2013)
• Cole Nussbaumer Knaflic, "Storytelling with Data" (2015)
• Nielsen Norman Group, Data Visualization Research
• Material Design, Data Visualization Guidelines
• IBM Carbon Design System, Dashboards Pattern
• ColorBrewer (colorbrewer2.org) for accessible color palettes

Created by Desisle — SaaS UI/UX Design Agency desisle.com | hello@desisle.com Free to use and share with attribution.

For custom dashboard design, contact us at hello@desisle.com.