Intro

KPIs (Key performance indicators) are values for measuring and evaluating the success of an organization, an individual, a group, or an activity. KPIs are also used to highlight the current value of an object or as a summary of the object.

Types

There are four types of KPIs that can be used, which are the standard, time, icon, and progress KPIs.

Standard KPI

Standard KPI may be used for measurements like meters, Celsius, percentage, etc.

Time KPI

Time KPI may be used to measure time-based progression by using units like days, hours, minutes, etc.

KPI with icon

KPI with icon is a type that uses iconography to support the measurement. For example, a document icon can be used to show that there are files are associated with this KPI.

Progress KPI

Progress KPI utilizes a circular form that shows the progress of the KPI measurement. It might show how many steps are finished out of the total number of steps, the percentage of completion of the task, etc.

Usage

Do’s:

  • Use the KPI for a numerical metric.
  • Use the KPI unit label to shorten the metric if it may be a long value. (e.g., m or mil for millions).

Don’ts:

  • Do not use the KPI for non-numeric metrics.
  • Do not mix progress KPIs with standard, time, and/or icon KPIs together on one slide. There may only be one progress KPI per slide with no other KPIs.

Currently, KPIs are only available for the header. They are laid out horizontally with fixed padding. KPIs have a defined minimum and maximum width in order to ensure that KPIs are applied in the right situation and to be presented in a sensible way.

Due to the limitations of the header width based on device, only two KPIs may be side-by-side on mobile and three KPIs on tablet, except in the case of progress KPIs. In both mobile and tablet, there may only be one progress KPI per slide and all other KPIs must be placed in a separate slide. In addition, the standard, time, and icon KPIs are all left-aligned to the keyline while the progress KPI is center-aligned due to its circular form.

Structure

Each KPI has a container with a width that is dependent on the content. However, there is also a maximum width defined based on the device in order to maintain legibility. The KPIs also have a fixed padding between each KPI if there are more than one. The required pieces of content are the KPI numeric values and label to inform the user what the value is and what it measures. The numeric value is the emphasis and so it uses a larger font size, as well as always being located on top.

Standard KPI, Time KPI, KPI with Icon

A. App Bar

The app bar content varies depending on the architecture, but the KPI header must always have an app bar to allow users to navigate and identify the title of the screen.

B. KPI

The KPI metric is always the most prominent element of the component. The metric may show either a single value or a range (e.g., 1 of 2). A numeric value is required.

C. KPI Unit Label

The KPI can include a unit label (e.g., $, h (hours), K (thousands)) if it helps to clarify its meaning. It can be placed on either the right or left of the KPI metric. It is preferable to use unit labels to shorten a KPI that may be very long such as m or mil (millions).

D. KPI Label

The label tells the user what the KPI represents. It is required to include it and should clearly communicate the KPI’s meaning without being overly long and descriptive.

E. Pagination

If the content must use 2 or more slides, then the pagination uses dots to indicate how many slides there are and which slide is being displayed. It is non-interactive and it is solely an indicator.

Progress View KPI

A. App Bar

The app bar content varies depending on the architecture, but the KPI header must always have an app bar to allow users to navigate and identify the title of the screen.

B. Progress View

The progress view displays an amount or percentage (0 – 100%) of completeness in a visual way in a circular form. The colors on the circle represent the complete/incomplete portion of the progress.

C. KPI

The KPI metric is always the most prominent element of the component. In the progress view, the metric may show either a single percent value (50%) or a fraction (e.g., 5/10). A numeric value is required.

D. KPI Unit

Unlike the other KPI types, do not use measurement units (e.g. $, mil, km, etc) as the progress view focuses on the progression of the KPI. Percentages and fractions are the only values permitted.

E. KPI Label

The label tells the user what the KPI represents. It is required to include it and should clearly communicate the KPI’s meaning without being overly long and descriptive. For the KPI progress view, the label can be placed inside the progress indicator or below.

F. Pagination

If the content must use 2 or more slides, then the pagination uses dots to indicate how many slides there are and which slide is being displayed. It is non-interactive and it is solely an indicator.

Mobile

On mobile, only up to two standard, time, and/or icon KPIs may appear in one slide together if it does not exceed the maximum width for the header area for that device. There may only be one progress view KPI per slide.

Tablet

On tablet, up to three standard, time, and/or icon KPIs may co-exist on one slide together if it does not exceed the maximum width for the header area for that device. There may only be up to three progress view KPIs per slide if it does not exceed the maximum width for the header area.

Specs

Standard, Time, or Icon KPIs

Click to enlarge image
Click to enlarge image

Progress View KPI

Click to enlarge image
Click to enlarge image

Colors

Sample Element Alpha Hex
Header background #354A5F
Object title text #FFFFFF
KPI #FFFFFF
KPI unit #FFFFFF
KPI label #FFFFFF
Progress track #40FFFFFF or #FFFFFF with 25% opacity
Progress indicator #91C8F6
Slides indicator (active) #FFFFFF
Slides indicator (inactive) #80FFFFFF or #FFFFFF with 50% opacity