Designer’s Field Guide

Metric Display Standards

Best practices for presenting numbers that change with time

Tim Sheiner
Jul 31, 2020 · 11 min read

Change over Time

Metric Tile
Layout
Object Model
Tile Variations
Branding
Overlays
Usage
Dashboard
KPI Banner
Compact Layout
Inline
Interactivity
Messaging
Drill Down
Triggers
Alerts

Caveat: Standard vs Custom

Examples of custom metric displays
Examples of custom metric displays

Metric Tile

Layout

Standard tile zones
Standard tile zones
Standard tile zones

Object Model

Example showing required and optional elements of the tile object model
Example showing required and optional elements of the tile object model
Example showing required and optional (italic) elements of the tile object model
Three display cases for trend indicator

Tile Variations

Tile variations with different combinations of required and optional elements

Branding

Tile variations with appropriate branding zones called out
Tile variations with branding zones called out

Overlays

Metric on Metric

Example of Metric on Metric Overlay
Example of Metric on Metric Overlay
Example of Metric on Metric Overlay

Event on Metric

Example of Event on Metric Overlay
Example of Event on Metric Overlay
Example of Event on Metric Overlay

Usage

Dashboard

Schematic illustration of Dashboard usage case
Schematic illustration of Dashboard usage case
Schematic illustration of dashboard responsive behavior
Schematic illustration of dashboard responsive behavior

KPI Banner

Schematic illustration of KPI banner usage

Popover

Schematic illustration of popover usage
Schematic illustration of popover usage

Inline

Schematic illustration of popover usage
Schematic illustration of inline usage

Interactivity

Messaging

Schematic of a possible messaging interaction
Schematic of a possible messaging interaction

Drill Down

Schematic representation of drill down interaction
Schematic representation of drill down interaction

Triggers

Schematic of possible trigger interaction directly on the display
Schematic of possible trigger interaction when direct interaction with the display is not possible.
Schematic of possible trigger interaction when direct interaction with the display is not possible.

Alerts

Salesforce Design

A collection of stories, case studies, and ideas from…