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

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.

eBay Selling Overview page on a small mobile screen. There is a summary bar with a profile section at the top. Below the avatar and username there are two summary metrics in cards aligned horizontally. Only the first metric card is completely visible and the second is scrolled halfway off screen.

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.

eBay Selling Overview page on a medium iPad screen. There is a summary bar with a profile section at the top. Below the avatar and username there are three summary metrics in cards aligned horizontally. Only the first two metric cards are completely visible and the third is scrolled halfway off screen.

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.

eBay Selling Overview page on a large desktop screen. There is a summary bar with a profile section at the top. Below the avatar and username there are 4 summary metrics in cards aligned horizontally with equal padding on either side.

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