Skip to main contenteBay Playbook

Metrics

v1.1

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

Stylized graphic for a metric.

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

Types

A text-only summary metric that includes the label “SALES” at the top, the metric “$12,106.25” on a second line, and the descriptor of “Last 90 days” on a third line at the bottom.

Static metrics

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

A trend metric that includes the label “SALES” at the top, the metric “$12,106.25” on a second line, and on the third line a green arrow pointing up with “$5.29” in bold and “3.5%” in parenthesis in regular weight next to it.

Trend metrics

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

A trend metric that includes the label “SALES” at the top, the metric “$12,106.25” on a second line, and on the third line a green arrow pointing up with “$5.29” in bold and “3.5%” in parenthesis in regular weight next to it. To the right of the metric there is a green spark line that is trending up and to the right.

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.

2 trend metric cards both showing a positive trend. One has a green triangle pointing upward and the other has a green triangle to the left of the trend and a green line trending up to the right.

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.

2 trend metric cards both showing a negative trend. One has a red triangle pointing downward and the other has a red arrown pointing down to the left of the metric and a red line trending down to the right.

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.

3 trend metrics aligned horizontally in cards. The first is a positive trend, the second is a negative trend, and then third is a positive trend. All three have spark lines and they are all blue.

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

Examples

Desktop screen showing eBay Selling Performance page which has a series of links in a left hand nav, a summary bar with 4 metrics across the top under the page title “Sales”, and a stacked bar chart underneath showing “Total sales”.
Three mobile eBay screens showing various parts of the selling experience. The first is the Service Metrics page showing a donut chart of return rate with a single summary metric to the left of the chart that says, “12.53%” and the descriptor “176 of 2,147 total”. The second is the “Traffic” page showing a summary bar at the top with the first two cards visible. They are “Impressions” and “Page views” with a stacked area chart below. The third is the “Collection” page which shows a trend metric for “eBay market value” and a trend line below it.

Best practices