KPIs
KPIs provide key information to the user at a single glance.
Best Practices
KPIs - Best practices
- The width of the KPI slots should change based on the screen size (not the spacing between them). The space between each KPI slot should always be 8px.
- If there is any description available for the KPIs that has to be shown in a tooltip on rollover the KPI slot.
- There can be any number of KPIs shown on a dashboard (we suggest not more than a total of 10) and a maximum of five slots should be allocated per row to display the KPIs.
- If there are <5 KPIs then we use blank spaces for the remaining slots out of five.
-
If a KPI slot has a click-through, then its metric title should appear in NHS Blue #005EB8 along with an arrow
-
If a KPI slot does not have a click-through, then its metric title should be in NHS Dark Grey #425563 without an arrow
- There should not be a mix of interactive and non-interactive KPIs on the dashboard
- Titles for KPIs will be pulled dynamically from the data, so during the testing, if we notice the titles are long then increase the height of these KPI slots.
KPIs per row
There can be any number of KPIs appear on dashboards (we suggest not more than 10), but a maximum of five slots and a minimum of four should be allocated per row to display the KPIs.
KPIs with long titles
Refer to the templates for container set-up and padding specification
KPIs per row - empty slots
If there are <5 KPIs then the remaining slots out of five should be left as blank.
KPIs variations
Interactive KPIs
If a KPI slot has a click-through, then its title should appear in NHS Blue #005EB8 along with an arrow.
Non-interactive KPIs
If a KPI slot does not have a click-through it should be in NHS Dark Grey #425563 without an arrow.
KPIs grouping
5 KPIs should be spread across the screen. When there is a mixed scenario of grouped KPIs and individual KPIs then you must to leave an extra space on the top of the slot. If possible arrange the groups first followed by the individual KPIs.
