KPIs
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.
KPI header on mobile (left) and tablet (right)
Usage
- 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).
- 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.
Anatomy
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.
KPI anatomy
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.
Progress KPI anatomy
Adaptive Design
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.
KPIs on mobile
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.
KPIs on tablet
Variations
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 associated with this KPI.
Standard KPI (top), time KPI (middle), and KPI with icon (bottom)
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 the completion of a task, etc.
Progress KPI with title outside (first), with fraction and title outside (second), with title outside and two lines (third), and title inside (fourth)
Specifications
Standard, Time, or Icon KPIs
KPI placement on phone (top) and tablet (bottom)
KPI placement specification
Progress View KPI
Progress KPI placement on phone (top) and tablet (bottom)
Progress KPI placement specification
Resources
Development: KPI Headers
SAP Fiori for iOS: KPIs
Your feedback has been sent to the SAP Fiori design team.