KPIs (key performance indicators) are metrics used to evaluate the success of an organization, an individual, a group, or an activity. They serve to highlight the current value of an object or as a summary of the object. KPIs can be displayed in a header, in the content area of an object, on a card, or in a modal window.
KPI header on mobile (left), in a card component (middle), and in a widget component (right)
- Don’t use KPIs for non-numerical metrics.
- Don’t mix standard KPIs with progress view KPIs when nesting KPIs in an object. Standard KPIs should only be grouped and displayed with one another, likewise with progress view KPIs.
- Don’t write overly long or descriptive KPI labels. KPI labels should be concise while also clearly communicating the KPI meaning.
Standard KPIs and KPIs with Icons
The KPI icon is used to provide a visual representation of information related to the KPI metric. It defaults to a trend symbol for standard KPIs. With the KPI Icon variant, you can choose an icon from the Icon Explorer.
B. Prefix and Suffix
The KPI prefix and suffix are used to define units of measurement for the KPI metric and are placed at the left and/or right side of the KPI numeric value .
The KPI value is the core element of the component. The value may either be a single number or a combination of numbers, for example, “1/2”.
The KPI label is used to provide additional information about the KPI.
Anatomy of a standard KPI
Anatomy of a KPI with icon
KPI Progress View
A. Progress View
The progress view displays a visual representation of completeness using a circular progress track.
The KPI is a component nested within the progress view KPI component. See information on KPIs above for anatomy.
The progress view title is used to provide additional information about the overall KPI progress view.
Anatomy of a KPI progress view
Behavior and Interaction
A KPI is a display-only component used to show a key figure.
The standard KPI is available in three different sizes and can be highlighted with semantic colors. Standard KPIs may be used for measurements such as meters, Celsius, percentage, etc.
Small KPI (left), medium KPI in a semantic color (middle), and large KPI (right)
KPI with Icon
The KPI with icon is available in three sizes and can be highlighted with semantic colors. The iconography helps represents the KPI metric. For example, a document icon can be used to show there are files associated with a KPI.
Small KPI with icon (left), medium KPI with icon (middle), and large KPI with icon in a semantic color (right)
KPI Progress View
The KPI progress view utilizes a circular form that represents the progress of its KPI metric. It can be used to show the step progress of a goal, percentage of completion of a task, and more.