Frankreichs Designsystem: Einen Status neben einer Aktion verständlich anzeigen

Die französische DSFR-Dokumentation beschreibt das Badge als kurze Information. In einer Tabelle hilft die Unterscheidung zwischen dem aktuellen Zustand und der nächsten Handlung.

Status und Handlung aus Sicht einer Zeile lesen

Stell dir eine Liste mit zu prüfenden Beiträgen vor. „In Prüfung“ beschreibt den aktuellen Zustand. „Beitrag prüfen“ bezeichnet eine Handlung. Die DSFR-Dokumentation stellt ein Badge als kurzes Textelement dar und unterscheidet Varianten etwa für Information, Warnung und Erfolg. Übertrage das Prinzip auf die Zeile: Der Status beantwortet, was gerade mit dem Beitrag geschieht. Ein separater Link führt zu einer Ansicht und eine Schaltfläche führt eine konkrete Aktion aus. Wenn Leserinnen erst ausprobieren müssen, ob der farbige Status anklickbar ist, sollte die Darstellung überarbeitet werden. Benenne die nächste Handlung dort, wo sie tatsächlich verfügbar ist.

Kurze Statuswörter aus dem Ablauf ableiten

Beginne mit den Zuständen, die im System wirklich vorkommen. Für eine kleine Redaktion können ein Entwurf, eine laufende Prüfung und ein freigegebener Stand ausreichen. Prüfe, welche Wörter auch ohne Symbol und Farbe klar bleiben. „Rückfrage offen“ vermittelt eine andere Information als „Fehler“. Bei mehreren Informationen in einer Zeile beschreibt die DSFR-Dokumentation eine Gruppierung für mehrere Badges. Entscheide trotzdem vorher, was in der Tabelle sichtbar sein muss und was in die Detailseite gehört. Eine lange Reihe ähnlicher Markierungen macht den nächsten Schritt schwerer zu erkennen. Ein Freigabedatum kann oft besser als gewöhnlicher Text neben dem Zustand stehen.

Die Aktualisierung bei einer echten Aktion überprüfen

Führe in einer Testumgebung eine Freigabe aus. Prüfe danach, welchen Zustand die Tabelle anzeigt und ob er nach einem Seitenwechsel oder einem erneuten Laden bestehen bleibt. Wenn die Aktion scheitert, soll der bisherige Zustand nachvollziehbar erhalten bleiben und der Fehler getrennt erklärt werden. Kontrolliere mit der Tastatur, ob nur tatsächlich bedienbare Elemente zum Fokus gehören. Bei einer schmalen Darstellung sollte der Status noch zur richtigen Zeile gehören. Für die Abnahme kannst du vor und nach dem Vorgang Statuswort, Handlungsbezeichnung und beobachtete Serverantwort festhalten. So prüfst du zugleich die Oberfläche und die Verbindung zum gespeicherten Zustand.