Interaktion

Die Interaktivität von Anwendungen ist entscheidend für die Nutzer:innenerfahrung. Interaktive Elemente ermöglichen es den Nutzenden, aktiv mit dem Inhalt zu interagieren, sei es durch Klicken, Scrollen oder andere Aktionen. Nach einer Interaktion durch Nutzende sollte auch stets eine Rückmeldung des Systems erfolgen. Diese kann durch Animation begleitet werden, z. B. beim Laden von Inhalten. Interaktive Elemente sollten für Nutzende auch als solche zu erkennen sein und sich konsistent verhalten.

Auszeichnung von interaktiven Elementen

Bei KERN werden interaktive Elemente grundsätzlich in zwei verschiedene Gruppen unterteilt:

• Steuerungs-Elemente
• Eingabe-Elemente

Steuerungselemente

Eingabelemente

Diese Unterscheidung ist nicht nur funktional, sondern spiegelt sich auch im visuellen Design wider, um eine klare Benutzerführung zu gewährleisten. Zur Gestaltung werden spezifische Token verwendet. Durch diese klare Trennung und das gezielte Styling wird die Bedienung der Oberfläche für Nutzende intuitiv und übersichtlich gestaltet.

Steuerungs-Elemente

Steuerungs-Elemente sind darauf ausgelegt, unmittelbar Aktionen auszulösen. Typische Beispiele hierfür sind Buttons oder Links – also alles, was Funktionen wie Bestätigen, Öffnen, Verschieben oder Filtern ausführt. Zur visuellen Kennzeichnung werden für diese Elemente spezielle Design-Token verwendet:

--kern-color-action-...

Diese Token bestimmen nicht nur die Hintergrundfarbe, sondern auch die Farbgebung von Texten innerhalb der Steuerungs-Elemente. Die Intensität der verwendeten Action-Color gibt dabei einen Hinweis auf die Priorität der Aktion:

• Primary Button: Die gesamte Fläche des Buttons ist mit der Action-Color gefüllt und signalisiert so die höchste Priorität.
• Secondary Button: Hier wird lediglich die Umrandung (Border) in der Action-Color dargestellt.
• Tertiary Button: Bei diesem Button bleibt nur noch der Text in der Action-Color eingefärbt.

Eingabe-Elemente

Eingabe-Elemente dienen der Datenerfassung durch Nutzende. Dazu zählen klassische Textfelder (z. B. Input Text), aber auch Checkboxen und Radios. Im Gegensatz zu den Steuerungs-Elementen sind sie in der Regel nicht direkt mit einer Aktion verbunden, sondern benötigen meist eine zusätzliche Bestätigung, zum Beispiel durch einen separaten Button („Weiter”, „Speichern”, usw.).

Für die Gestaltung der Eingabe-Elemente kommen die Token --kern-color-form-input-[...] zum Einsatz, die speziell für Formularelemente definiert sind. Die Texte innerhalb dieser Eingabefelder orientieren sich an den allgemeinen Layout-Token für Texte: --kern-layout-text, um eine konsistente Typografie im gesamten Interface zu gewährleisten.

Beispiel für die Anwendung der verschiedenen Token

Das „Input File" zeigt anschaulich die Anwendung der verschiedenen Token, da es sich aus Eingabe- und Steuerungs-Elementen zusammensetzt.

Eingabelemente

Das „Input File" gehört zu den Eingabe-Elementen, weil Nutzende Dateien einfügen können und die hochgeladenen Daten erst mit einer weiterführenden Aktion verarbeitet werden (z. B. im Formular auf „Weiter” klicken). Die Label und Fläche, werden entsprechend mit den Token für Eingabe-Elemente --kern-color-form-input-[...] ausgezeichnet.

Da sich alternativ ein File-Browser öffnen lässt, wird für diese Aktion ein Button eingesetzt. Der Button ist ein Steuerungs-Element, da die Interaktion einen direkten Effekt hat: Es öffnet sich ein separates Fenster, in dem Dateien ausgewählt und hochgeladen werden können. Der Button wird entsprechend mit den Token --kern-color-action-[...] für Steuerungs-Elemente gestaltet.

Wichtiger Hinweis

Bitte achtet beim Erstellen eigener Komponenten auf die Token-Logik, damit Eingabe- und Steuerungs-Elemente klar erkennbar bleiben. Das hilft Nutzenden dabei, intuitiv zu erkennen, was in der Anwendung gefordert wird: eine Interaktion oder eine Eingabe von Informationen.