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

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 %.
  1. Summary bar container
  2. Label
  3. Trend arrow
  4. Summary metric container
  5. Metric
  6. Descriptor

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

Labels

Do keep labels short and glanceable.

A single trend metric in a card with the label “Costs” on the first line, a dollar amount “$6,107.65” on the second line, and up arrow icon in green on the third line followed by “$1.19” in bold and “(1.2%) in regular.

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

A single trend metric in a card with the label “Selling costs over the last 90 days” on the first line, a dollar amount “$6,107.65” on the second line, and up arrow icon in green on the third line followed by “$1.19” in bold and “(1.2%) in regular.

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

A single trend metric in a card with the label “Costs” on the first line, a dollar amount “$6,107.65” on the second line, and up arrow icon in green on the third line followed by “$1.19” in bold and “(1.2%) in regular.

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

A single trend metric in a card with no label on the first line, a dollar amount “$6,107.65” on the second line, and up arrow icon in green on the third line followed by “$1.19” in bold and “(1.2%) in regular.

Metric color

Do use semantic colors only in the trend arrow icon.

A single trend metric in a card with the label “Costs” on the first line, a dollar amount “$6,107.65” on the second line, and up arrow icon in green on the third line followed by “$1.19” in bold and “(1.2%) in regular.

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

A single trend metric in a card with the label “Costs” on the first line, a dollar amount “$6,107.65” in green on the second line, and up arrow icon in black on the third line followed by “$1.19” in bold and “(1.2%) in regular.

Sparkline color

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

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. Two trend metrics are positive and two are negative but all four spark lines are blue.

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

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. Two trend metrics are positive and two are negative but all four spark lines are blue.