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.

ExamplesCopy URL

Single metricCopy URL

Instagram Profile Performance

Listening

Breakdown metricsCopy URL

Paid Performance

Listening

Visual best practicesCopy URL

TableCopy URL

  • 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

HeadersCopy URL

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

BodyCopy URL

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

Aggregate tableCopy URL

  • Font weight: 600

Content best practicesCopy URL

Number formattingCopy URL

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

ColumnsCopy URL

  • [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 RowCopy URL

  • 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

VariationsCopy URL

Single MetricCopy URL

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

Breakdown MetricsCopy URL

  • 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