Version:
KPI Facet
KPI Facets bieten eine strukturierte Ansicht von Kennzahlen, um wichtige Daten schnell zu erfassen und zu vergleichen.
Overview
Intro
broken_image
KPI Facet
KPI-Facetten werden verwendet, um wichtige Daten, Zustände oder Key Performance Indicators (KPI´s) bzw. Kennzahlen in Kopfzeilen von Objektseiten und Widgets darzustellen.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... wenn wichtige Kennzahlen in der Kopfzeile oder in einem Widget hervorzuheben sind. ... wenn wichtige sonstige Daten oder Zustände in der Kopfzeile oder in einem Widget hervorzuheben sind. | ... wenn Reguläre Informationen darzustellen sind, verwende dazu Name-Wert-Facetten. ... wenn Fließtextartige Informationen dazustellen sind, verwende dazu die Fließtext-Facette. |
Guidelines
Aufbau
broken_image
1. Name
Hier wird die Bezeichnung der Daten dargestellt.
2. Wert
Hier wird der Wert anzeigt der hervorgehoben werden soll.
3. Jeton (Optional)
Jetons können eingesetzt werden, um Trends oder prozentuale Veränderungen darzustellen. Verwende hierzu immer die Variante: No-Border.
4. Icon (Optional)
Vor dem Wert können optional noch Icons eingeblendet werden. Icons können in zwei Größen dargestellt werden. Siehe Verhalten weiter unten.
Verhalten
In Kopfzeilen
Die Komponente ist dazu gedacht wichtige Daten in Kopfzeilen darzustellen.
Bei Bedarf können Signalfarben Grün (--mate-color-font-success), Orange (--mate-color-font-warning) und Rot (--mate-color-font-error) verwendet werden.
broken_image
Um Werten mehr Nachdruck zu verleihen, lassen sich Icons davor anzeigen.
broken_image
Zusätzlich lassen sich Jetons verwenden, um zusätzliche Angaben wie z.B. prozentuale Werte anzugeben.
broken_image
In Widgets
Die KPI-Facette kann auch in Widgets verwendet werden, um die Legende von Diagrammen zu unterstützen.
Verwende für den Punkt immer die Icon-Small Konfiguration. Siehe Widgets für mehr Informationen.
broken_image
Barrierefreiheit
Bei der Gestaltung der KPI-Facets sollte darauf geachtet werden, dass Informationen nicht ausschließlich über Farbe vermittelt werden (siehe Schaubilder). Um Barrierefreiheit und eine klare Wahrnehmung für alle Nutzergruppen sicherzustellen, müssen zentrale Inhalte zusätzlich durch weitere visuelle Mittel wie Text, Icons oder Muster unterstützt werden.