Version:

Key-Value Facet ​

Eine Key-Value Facet zeigt gepaarte Daten an, um Informationen übersichtlich darzustellen.

Overview ​

Intro ​

broken_image
Figma

Die Key-Value Facets werden häufig in Lists verwendet, um Datensätze lesbar und kompakt darzustellen. Am häufigsten tauchen Key-Value Facets in Objektseiten auf, sie können aber auch in anderen Kontexten verwendet werden.

Key ​

  • Halte die Länge von Keys kurz
  • Keys können durch Text oder Icons dargestellt werden
  • Die Visualität der Keys in Textform darf nicht verändert werden
  • Icons müssen, um die Barrierefreiheit zu gewährleisten, im Rahmen von Key-Value Facets, in Kombination mit Text verwendet werden. Siehe Icons Abschnitt „ Icons in Kombination mit Text ".

Value ​

  • Values können Links enthalten
  • Values können farblich hervorgehoben werden, verwende dazu \-\-mate\-text\-error, \-\-mate\-text\-success, \-\-mate\-text\-warning
  • Values können Icons neben dem Text beinhalten
  • Leere Values werden mit - angezeigt

Zu beachten: ​

  • In der Regel nicht mehr als 5 Key-Value Paare vertikal in einer List verwenden. Ausnahme: Eine List von 6 ist oft besser als eine künstliche Aufteilung in 5 + 1. Einzelne verwaiste Items sollten vermieden werden. Auf keinen Fall sollten mehr wie 7 Items in einer List sein.
  • Einheitliche Textausrichtung der Values in einer List ist Pflicht
  • In einer List darf nur eine Variante, wie z.B. die Standard Variante (Stacked), oder die Horizontale Variante, verwendet werden

Verwendung ​

👍 Do👎 Don't
... wenn Datensätze ausschließlich zum Lesen angezeigt werden sollen.
... wenn Kontextinformationen dargestellt werden sollen.		... wenn Daten in Formularen, unter bestimmten Bedingungen, nicht manipuliert werden können. Verwende dazu gesperrte Eingabefelder.
...wenn Fließtexte angezeigt werden sollen. Verwende dafür die Fließtext-Facette (In Planung vom UX Team).
...wenn Key Performance Indicators (KPI’s) angezeigt werden sollen. Verwende dafür die KPI Facet.

Guidelines ​

Aufbau ​

broken_image
Figma

  1. Listüberschrift: Werden innerhalb einer Sektion zwei oder mehr Lists dargestellt, muss jede List mit einer Überschrift versehen werden. Besteht eine Sektion nur aus einer List, ist keine Listüberschrift zu verwenden.
  2. Keys: Keys werden visuell weniger prominent analog zum Label von Eingabefeldern dargestellt. Am Ende eines Keys wird automatisch ein Doppelpunkt eingefügt.
  3. Value: Values sind visuell klar vom dazugehörigen Key getrennt.
  4. Leere Listüberschriften: Zudem können auch leere Überschriften genutzt werden, um größere Gruppen visuell voneinander zu unterscheiden.
  5. Leere Values: Leere Values werden mit - gekennzeichnet.

Varianten/Typen ​

Standard Variante (Stacked) ​

broken_image
Figma

👍 Do👎 Don't
... wenn ein Standardfall vorliegt, da diese Variante die neue Standardvariante ist.... wenn an der Höhe im Layout gespart werden muss, wie z.B. in der Kopfzeile auf Objektseiten. Verwende dafür die Inline Variante.
... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollten. Verwende dafür die horizontale Variante und richte die Values rechts aus.
... wenn Icons als Keys verwendet werden sollen, verwende dafür die Inline Variante.
... wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext-Facette.

Inline Variante ​

broken_image
Figma

👍 Do👎 Don't
... wenn an der Höhe im Layout gespart werden soll, wie z.B. durch die Verwendung in der Kopfzeile der Objektseite.
... wenn Icons als Keys verwendet werden sollen.		... wenn unterschiedlich lange Keys und Values in einer List stehen. Verwende dafür wie in den meisten Fällen die Standard Variante (Stacked).
... wenn nicht an der Höhe im Layout gespart werden muss. Verwende dafür wie in den meisten Fällen die Standard Variante (Stacked).
... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollen. Verwende dafür die horizontale Variante und richte den Values rechts aus.
... wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext-Facette.

Horizontale Variante ​

broken_image
Figma

👍 Do👎 Don't
... wenn Zahlen so ähnlich wie bei einem Kassenzettel zum Vergleichen übereinander stehen sollen. Verwende dafür die horizontale Variante und richte den Values rechts aus.... wenn Icons als Keys verwendet werden sollen, verwende dafür die Inline Variante.
... wenn unterschiedlich lange Keys und Values in einer List stehen. Verwende dafür, wie in den meisten Fällen, die Standard Variante (Stacked).
... wenn nicht an der Höhe im Layout gespart werden muss. Verwende dafür, wie in den meisten Fällen, die Standard Variante (Stacked).
...wenn längere Fließtexte wie z.B. Notizen dargestellt werden sollen, verwende dafür die Fließtext-Facette.

Weitere Leitlinien zur Verwendung ​

Verwendung von Value Texten mit Icons ​

👍 Do👎 Don't👍 Do
broken_image

Nutze Icons immer mit einem Text zusammen, um Values die nicht eindeutig aus dem Icon hervorgehen können dazustellen.
broken_image

Icons ohne Texte sind für Values, die nicht eindeutig ableitbar sind, nicht erlaubt.
broken_image
Wenn Values mit 1 oder 0 (Ja oder Nein) den Zustand beschrieben, dann können auch nur Icons verwendet werden. In diesem Fall müssen aria-label Attribute und Tooltips verwendet werden, um die Barrierefreiheit und die Screenreader Unterstützung zu gewährleisten.

Nicht mehr als 5 Key-Value Paare in einer List verwenden ​

👍 Do👎 Don't
broken_image

Key Value Facet List mit maximal 5 Paaren
broken_image

Key Value Facet List mit mehr als 5 Paaren

Einheitliche Textausrichtung der Values in einer List ​

👍 Do👎 Don't
broken_image

Einheitliche Textausrichtung der Values
broken_image

Nicht einheitliche Textausrichtung der Values

Weitere Informationen zu einem Value oder Key lassen sich gut in Tooltips unterbringen ​

👍 Do👎 Don't
broken_image

Verwende z.B. ein Tooltip, um weitere Informationen zu einem Value oder Key zu geben.
broken_image

Zu lange Keys können den User verwirren und unübersichtlich wirken.

Verhalten ​

Fehlende Values ​

Figma

Längere Texte ​

Bei langen Texten wird der zur Verfügung stehende Platz benutzt und danach Ellipsis eingesetzt. Die vollständigen Texte können dann über einen Tooltip eingesehen werden.

broken_image
Figma

Icon Keys ​

Icons, die anstelle von Keys verwendet werden, müssen immer mit einem Tooltip aufgelöst werden. Für mehr Informationen: Hier liegt das selbe Verhalten wie im Abschnitt „Icon zur Darstellung eines Status“ in der Dokumentation zu den Icons vor. 

broken_image
Figma

Doppelpunkt nach Key ​

Der Doppelpunkt nach dem Key wird immer automatisch hinzugefügt, damit er nicht vergessen werden kann. 

Dies ist in allen Variante der Fall, lediglich bei der Verwendung von Icons als Key wird der Doppelpunkt nicht angefügt.