Patterns

Summary tables

A Summary Table is most often found proceeding a chart and has two variations depending on the data in the associated chart:

  1. Single metric - Displays the aggregate totals of the time series chart above it along with related metrics
  2. Breakdown metrics - Displays the aggregate totals of the time series chart above it broken down by metric, profile, etc.

Examples

Single metric

Instagram Profile Performance

Listening

Breakdown metrics

Paid Performance

Listening

Visual best practices

Table

  • Cell Padding: Space size 350
  • Table Border: 1px, Neutral 300
  • When a table has additional columns that don’t fit in the field of view, a thin gradient should be displayed along the edge of either side which has additional columns
    • Gradient style: Neutral 200 → Transparent
  • Column widths: Determined by content, but can be overridden if necessary

Headers

  • Font size: Size 100
  • Font weight: 600
  • Font color: Neutral 600
  • Match alignment of values in the rest of the column (see below)

Body

  • Font size: Size 200
  • Font weight: 400
  • Font color: Neutral 800
  • Left align non-numeric values and right align numeric values

Aggregate table

  • Font weight: 600

Content best practices

Number formatting

  • Summary tables should follow our Number Formatting rules.
  • Totals should be whole numbers, but averages should have two decimals

Columns

  • [Metric]
    • The name of the metric(s) should always be displayed in the first column
  • Totals
    • This column displays the total count for the metric(s) over the entire time period in the preceding chart
  • % Change
    • The final column displays the percent change versus the comparison period

Emphasis Row

  • Totals and averages should be displayed in a row(s) at the top of the table
  • Totals and averages should only be displayed when more than one data source is selected
  • In addition to totals and average, emphasis rows can also include other metrics worth emphasizing - e.g. Facebook Impression and Daily Average Reach for Facebook Pages

Variations

Single Metric

  • Used when displaying a single metric
    • Examples: Followers, Listener Volume

Breakdown Metrics

  • Used when breaking down metrics by sub-metrics, channels, etc.
    • Examples:
      • Engagement Types (Likes, Shares, Replies, Link Clicks, Other)
      • Volume totals, by channel (Facebook, Youtube, Twitter, Instagram, etc.)
    • Include an inline bar chart with each metric, space permitting. Follow the Chart Colors - Color Rotations guidelines for displaying multiple bar charts.
      • The width of the bar chart for the largest value should have a width of 100%. The other, adjacent bar charts should then have relative widths.
      • Bar chart height: Space size 400