1. Designrichtlinien
WiP
1.1. Screenbereiche (Screenareas)
WiP (beinhaltet die Grundstruktur einer Frontend-Seite anhand der isy-angular-widgets Komponente isy-hauptfenster)
1.3. Readonly vs. Disabled
1.3.1. "Readonly" State
Ein "Readonly"-Feld erlaubt es, die darin enthaltenen Daten zu sehen, jedoch nicht zu ändern. Dies ist besonders dann nützlich, wenn Informationen relevant sind, jedoch nicht modifiziert werden sollen.
Merkmale:
-
Sichtbarkeit: Der Inhalt des Feldes kann von Nutzenden vollständig gesehen und von Screenreadern erfasst werden.
-
Interaktivität: Die Daten können nicht bearbeitet werden, jedoch bleiben Funktionen wie das Markieren und Kopieren erhalten.
-
Design: Optisch wird das Eingabefeld leicht modifiziert mit leichteren Farben oder Formen dargestellt.
Anwendungsfälle:
-
Bestätigungsseiten: Nach der Eingabe eines Formulars kann ein "Readonly"-Zustand verwendet werden, um die eingegebenen Daten zur Überprüfung anzuzeigen.
-
Informationsanzeige: Felder, die wichtige Daten enthalten, die jedoch von bestimmten Nutzergruppen nicht verändert werden sollen (zum Beispiel automatisch generierte ID-Nummern, erfasste Zeitstempel).
Handlungsempfehlungen:
"Readonly" sollte für Felder verwendet werden, deren Inhalte für Nutzende relevant sind, aber nicht verändert werden dürfen. Gestalte das Design so, dass die visuelle Unterscheidung klar, aber nicht störend ist - zum Beispiel durch subtile Farbveränderungen. Erlaube Nutzenden weiterhin Inhalte aus dem "Readonly"-Feld zu kopieren.
1.3.2. "Disabled" State
Ein "Disabled"-Feld hingegen ist vollständig inaktiv. Nutzende können den Inhalt nicht oder schlecht sehen, nicht bearbeiten und auch keine Interaktion (wie Kopieren) durchführen. Diese Option wird verwendet, um Nutzenden zu signalisieren, dass bestimmte Funktionen oder Eingaben derzeit nicht zur Verfügung stehen.
Merkmale:
-
Sichtbarkeit: Oft wird der Inhalt des Feldes ausgegraut oder gar nicht sichtbar gemacht.
-
Interaktivität: Keine Interaktion möglich - weder das Bearbeiten, noch das Kopieren von Inhalten.
-
Design: Meist visuell hervorgehoben durch ausgegraute Felder oder abweichende Farbschemata, um den Zustand klar zu kommunizieren.
Anwendungsfälle:
-
Zugriffssteuerung: Felder, die nur von Nutzergruppen mit bestimmten Rechten bearbeitet werden dürfen, können für andere "disabled" sein.
-
Bedingte Formularfelder: Wenn bestimmte Eingaben erst aktiviert werden sollen, nachdem vorherige Felder korrekt ausgefüllt wurden, können diese initial "disabled" sein.
Handlungsempfehlungen:
"Disabled" sollte für Felder verwendet werden, die Nutzenden derzeit nicht zugänglich sein sollen, um Fehlinteraktionen zu verhindern. Vermeide "Disabled" für wichtige Informationen, die Nutzende sehen müssen - in solchen Fällen ist "Readonly" besser geeignet. Mache den "Disabled"-Status klar ersichtlich, indem eine deutliche visuelle Abgrenzung durch Ausgrauen oder andere farbliche Mittel verwendet wird.
Vergleich und Fazit
Der wesentliche Unterschied zwischen "Readonly" und "Disabled" liegt in der Sichtbarkeit und der Interaktivität der Felder. Während "Readonly"-Felder Nutzenden Informationen präsentieren, die sie nicht bearbeiten dürfen, aber weiterhin sehen und kopieren können, sind "Disabled"-Felder vollständig gesperrt und weder sichtbar noch interaktiv. Für die Anwendung in Formularen sollten folgende Grundsätze beachtet werden:
-
"Readonly" ist ideal, wenn die Informationen wichtig sind und für Nutzende sichtbar bleiben müssen, aber nicht verändert werden sollen.
-
"Disabled" eignet sich, wenn Nutzende keine Informationen im Feld sehen oder bearbeiten sollen - zum Beispiel bei unzugänglichen Funktionen oder Bedingungen, die erst später erfüllt werden müssen.
1.4. Panel vs. Akkordeon vs. Überschrift
Allein aus der Beschreibung der einzelnen Elemente, Panel, Akkordeon und Überschrift, lässt sich eine konkrete und präferierte Anwendung der einzelnen Elemente ableiten. Alle Elemente erfüllen ihren eigenen Zweck. Auffällig ist jedoch die sehr ähnliche Gestaltung des Akkordeons und des Panels. Dies liegt an der historischen Annäherung der Elemente. Für Nutzende ist eine solche differenzierte Betrachtung der Elemente in den meisten Fällen nicht möglich und auch nicht notwendig. Daher kann zugunsten der Usability auf eine optische und historisch gewachsene minimale Differenzierung der beiden Elemente verzichtet werden.
Alle drei Elemente werden zur Strukturierung von Frontends und deren Inhalte benötigt.
Elemente:
-
Überschriften sind aus Sicht der Barrierefreiheit mindestens in erster Ebene notwendig und sollten zur Strukturierung des Frontends genutzt werden.
-
Akkordeons sollten für lange und rein informative Inhalte genutzt werden (zum Beispiel FAQ-Bereich).
-
Panels sollten für lange und komplexe interaktive Inhalte genutzt werden (zum Beispiel Benutzereingaben).
Übergeordnete Verwendung:
Eine Frontend-Page sollte mindestens eine Überschrift (h1) enthalten und nur einen Widget-Typ nutzen (Akkordeon oder Panel).
Eine Vermengung beider Elemente soll vermieden werden, da unterschiedliches Verhalten optisch ähnlicher Elemente Verwirrung bei Nutzenden herbeiführt.