Metrics

v1.1

Our metrics create simple and accessible at-a-glance summaries of data sets.

Considerations

Keep it simple

Progressive disclosure is key—ensure you are using metrics as a tool to aid in the quick glance understanding of a data set. Long strings and overly complex filters don’t support this goal.

Tell a story

Focus on what you want to communicate and who you’re communicating to. Understanding data is much easier when there is a human narrative. Think about how you would tell the story in a sentence and start there.

Scale thoughtfully

Our metrics components scale to accommodate one or many data sets—both with and without cards. They also scale seamlessly for all screen sizes and users. Use designated colors and scaling behaviors to ensure they are simple and accessible in all contexts.

Anatomy

A summary bar with 3 summary metrics in gray cards aligned horizontally and various aspects called out using pointers. The first pointer points to the white summary bar container behind the 3 cards. The second pointer points to label which says “Sales” in all caps above the number. The third pointer points to the small green trend arrow which is pointing up next to a $ amount. The fourth pointer points to the gray summary metric container. The fifth pointer points to metric which is the largest type and bold. The sixth pointer points to descriptor text sits next to a trend arrow and shows up much the metric went up or down by %.

Summary bar container
Label
Trend arrow
Summary metric container
Metric
Descriptor

Types

Static metrics

Shows the current value of a single data set using text only.

Trend metrics

Shows how a single data set changes over a specific time period or in comparison to a previous time period.

Trend lines

A trend metric used in tandem with a sparkline to visually show the trend of a single data set at a glance. Sparklines have 6 points max.

Colors

Use green to indicate a positive trend, such as increasing sales or decreasing costs, and red for a negative trend, like declining sales or rising costs. Blue is used for neutral trends or when displaying multiple trends in sequence. Always pair the color with an up or down arrow to show the trend direction. This approach ensures high contrast for all metrics and maintains clarity for users with low vision or color blindness.

Positive

When a single data set is showing a positive trend and it is the primary metric on the page, the line and arrow in a trend line graph can be green to emphasize the goal of the graph.

Negative

Similarly, when a single data set is showing a negative trend and it is the primary metric on the page, the line and arrow can both be red.

Neutral or multiple trends

If the graph isn't showing a trend, if the trend is neutral, or if there are multiple trend metrics in a row then only the arrows should use color to indicate the trend and sparklines should remain blue.

Screen sizes

Small

On small screens, the behavior is the same as medium screens but less cards are seen by default. Make sure there is always a peek of the next card to ensure users know to scroll left and right.

Medium

On medium screens, summary metrics in cards should scroll horizontally and always maintain a peek of the next card so users know the area is scrollable.

Large

On large screens, summary metrics in a summary bar align horizontally across the page and can either be contained in a single summary bar, embedded within the page background, or each have their own card.

Examples

Best practices

Labels

Do keep labels short and glanceable.

Don’t make labels longer than 2-3 words.

Do always include a label or summary metric title to set context for what the metric is about.

Don’t remove labels if there is no clear title. Users need context about what the metric is portraying.

Metric color

Do use semantic colors only in the trend arrow icon.

Don’t use color on the metric itself. We use colored text very sparingly because color alone is not accessible to all users.

Sparkline color

Do make sparklines blue when multiple summary metrics are shown in view at a time.

Don’t make sparklines red or green when multiple summary metrics are shown in view at a time.