Interactiver Selected Zustand für Tags

[JoMarieLe]

The problem

Der Selected Zustand in Grau bei den Tags wirkt nicht selected. Es ist nicht klar welches Element selected darstellt und welches nicht, da ansonsten Grau häufig als deaktiv verwendet wird. Zudem ist eine reine Unterscheidung über die Farbe nicht barrierefrei, da der Unterschied nur über die Farbe dargestellt wird.

Die Tags wirken in einem Filter auch sehr schmal und klein, um als Filterelement durchzugehen. Gut wäre es eine Variante oder ein ähnliches Element zu haben, das hier verwendet werden kann.

Kontext: Wir verwenden die Tags innerhalb von Tabellen, um Informationen strukturiert darzustellen, bpslw. Regionen oder Status. Es können also mehrere Tags innerhalb einer Zelle auftreten. Diese Informationen sollen filterbar sein über einen Filter. Es wäre sinnvoll, wenn innerhalb des Filters eine ähnliche Darstellungsform verwendet werden würde, um die Filter einzustellen. Hierfür wirkt die Tag Komponente allerdings zu schmal und von der Klickfläche nicht optimal. Nachdem die Filter gesetzt sind werden sie über der Tabelle als Filter Chips angezeigt.

The solution

Mehr Unterscheidung zwischen dem Selected Zustand und dem Unselected Zustand durch z.B. Schriftschnitt, ein Icon, die Outline und/oder die Farbe.

Es braucht eine Tag ähnliche interaktive Komponente, die innerhalb von Filtern verwendet werden kann.

Examples

Filter mit den Tags:
Oben mein Vorschlag, Mitte DB UX konform, Unten weiterer Vorschlag (allerdings springen dann die Tags bei Interaktion durch eine sich verändernde Breite)

Die Tabelle:

[JoMarieLe]

Eine weitere Ebene des Problems mit Checked und Unchecked. Wir brauchen auch das Statuts Element in verschiedenen Farbausprägungen innerhalb der Tabelle, um anzuzeigen wie kritisch etwas ist. Auch diese Stufen, die die Kritikalität anzeigen sollen innerhalb eines Filters an und ausgeschaltet werden. Also benötigen wir diese ebenfalls klickbar, aber so, dass man die Farbigkeit noch erkennt.
In der Design System Variante sind die Farben zu wenig von einander unterscheidbar, weswegen ich die Low-contrast-Variante verwendet habe. Allerdings würde man auch in unchecked die Farben so gut wie gar nicht erkennen, daher bg-level-2

[JoMarieLe]

Wir haben die Status in Usability Test mit Nutzer:innen einfließen lassen und das Feedback erhalten, dass die Farbigkeit der Status in "Weak -static" zu bunt ist und um Aufmerksamkeit konkurriert. Die gesamte Aufmerksamkeit der Tabelle ziehe sich auf die Tags / Status und gliedern sich nicht ihrer Priorität (eher mittel, auf jeden Fall nicht hoch) entsprechend in die Tabelle ein.
Wir werden im Projekt von den Tags weiter abweichen müssen, um die Tags besser in ihren Kontext einzugliedern und die "weak-unchecked" Farbe verwenden. Als "Weak-unchecked" werden wir wahrscheinlich weak-neutral-unchecked (weißer Hintergrund) verwenden.

Die Status wie sie in der Library sind funktionieren super, wenn nur wenige gleichzeitig sichtbar sind. In einem Kontext in dem viele gleichzeitig sichtbar sind wirkt es auf User zu bunt und dominant.

Bunt - Standard:

Heller Farbe - Weak-unchecked:

[leape]

Im nächsten Release enthalten:

• optimierte Farbgebung für den Weak Static Tag
• optmierte Unterscheidbarkeit von Interactive Checked-Unchecked Tags
• zusätzliche Emphasis Origin mit einheitlicher on-origin-Farbe

Hinweis:

In der Design System Variante sind die Farben zu wenig von einander unterscheidbar, weswegen ich die Low-contrast-Variante verwendet habe.

Low Contrast als Hintergrund ist mit der on-bg-inverted-Farbe für Text nicht accessible.