Metrics
Our metrics create simple and accessible at-a-glance summaries of data sets.
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.
- Summary bar container
- Label
- Trend arrow
- Summary metric container
- Metric
- Descriptor
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.
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.
