Key performance indicators (KPIs) are measurable values that are used to evaluate the success of an organization, an individual, a group, or a particular activity. KPIs are also used to highlight the current value of an object or as a summary of the object.
KPIs can be used in a header, in the content area of an object, in an object cell, or in a modal window.
KPIs in the Header or Content Area
In the header or content area, KPIs are arranged horizontally with a fixed padding between each. The number of KPIs that can appear in the header depends on the width of the KPIs themselves, and the entire KPI collection should be center-aligned. The KPIs in a header or content area may be tappable.
KPIs in a Cell
KPIs found within a cell take a different size than other KPI types. KPIs in a cell are not tappable.
KPIs in a Modal
In a modal window, KPIs are vertically-stacked. A maximum of two KPIs are allowed in each row (depending on their overall width). KPIs in a cell are not tappable.
The width of the container varies depending on the width of its content, though it has a minimum and maximum possible width.
B. Numeric Value
The numeric value may show a single value or a range (e.g., 1 of 2). The numeric value is mandatory for a KPI. The numeric value can include a unit label (e.g., $, h (hours), K (thousands)) if it helps to clarify its meaning.
C. KPI Label
The label tells the user what the KPI represents. It is mandatory to include, and should clearly communicate the KPI’s meaning without being overly long and descriptive.
A KPI collection is a group of two or more KPIs. The collection takes the maximum width defined by the screen margins, with a fixed amount of padding between each KPI container in the collection.
This is the most prevalent KPI type, and is used to indicate quantity, percentage, or value. It may or may not have a unit label (e.g., $), with a maximum of two unit labels allowed.
The time KPI is used to show a detailed breakdown of time. It is recommended to include a unit label (e.g., h (hours)) for clarity.
KPI with an Icon
The KPI with an icon allows the user to add a visual identifier to a KPI. The icon sits to the left of the numeric value, and a maximum of one unit label is allowed.
KPI in a chart shows a visual representation of progress of an object. The numeric value inside the KPI maybe in the form of a percentage value or may display the completed vs total value. Chart KPIs cannot be used in an Object Cell. It comes in two sizes – Small and Large.
Small Chart KPIs maybe used in cards along with other content.
Large Chart KPIs maybe used in headers or other content area.
The KPI component is supported in both compact and regular widths.
KPIs have a defined minimum and maximum width, and how they are displayed depends on the following:
- Dynamic width size of the KPI container
- Where they are found, be it the header, content area, table view, or modal
The header, for example, can display 1 or 2 KPIs in compact width or 4 to 5 KPIs in regular width (depending on the width of the KPIs themselves). In compact, when more than 2 KPIs are required, the header will take the overflow state and show all KPIs on multiple pages.