Schaltflächen

Schaltflächen sind der primäre visuelle Indikator für die Aktionen eines Nutzers.

Grundsätze

Aktionsorientiert: Buttons sollten deutlich vermitteln, dass sie eine Aktion auslösen.

Deutliches Feedback: Das Erscheinungsbild des Buttons muss sich in den verschiedenen Interaktionsstatus (Mauszeiger darauf bewegen, drücken, fokussieren) deutlich ändern, um sofortiges Feedback zu geben.

Einheitlich: Alle Schaltflächen sollten eine gemeinsame visuelle Sprache haben, damit sie sofort erkennbar sind.

Flexibel: Die Schaltflächenkomponente sollte gängige Varianten wie Symbole und unterschiedliche Größen unterstützen, ohne die Konsistenz zu beeinträchtigen.

Nutzung und Platzierung

Ein Button sollte in der Nähe des zugehörigen Inhalts platziert werden. Sie können allein oder mit anderen Komponenten wie Karten und Listen platziert werden.

check_circle

Das sollten Sie tun

Verwenden Sie die progressive Offenlegung, um weniger relevante Aktionen zu verbergen.

cancel

Das sollten Sie nicht tun

Die Ansicht des Nutzers mit zu vielen Schaltflächen überladen. Verwenden Sie stattdessen eine Schaltflächengruppe.

check_circle

Das sollten Sie tun

Verwenden Sie Schaltflächen, um eine Aktion auszulösen. Oder verwenden Sie einen Titel-Chip für ein statisches Element.

cancel

Das sollten Sie nicht tun

Eine Schaltfläche als statisches dekoratives Element verwenden

Symbolschaltflächen

Es sind Symbolschaltflächen verfügbar, um die Dichte der Inhalte zu verringern. Verwenden Sie Symbolschaltflächen, wenn das Symbol eine Aktion eindeutig veranschaulicht. Andernfalls fügen Sie ein Schaltflächenlabel ein.

check_circle

Das sollten Sie tun

Verwenden Sie eine Schaltfläche mit Symbol für häufige, leicht erkennbare Aktionen.

cancel

Das sollten Sie nicht tun

Verwenden Sie eine Symbolschaltfläche für sehr unauffällige Aktionen.

Toggable

Für Aktionen mit booleschen Statuswerten wie „Favorit“ ist für jeden Button-Typ eine Umschaltvariante verfügbar. Durch das Austauschen von Symbolen zwischen den Ein/Aus-Zuständen wird die Interaktion übersichtlich und reaktionsschnell.

check_circle

Das sollten Sie tun

Verwenden Sie eine Ein/Aus-Schaltfläche, wenn es boolesche Optionen für eine Aktion gibt. Wie Start/Stopp.

cancel

Das sollten Sie nicht tun

Verwenden Sie eine Ein/Aus-Schaltfläche für nicht binäre Aktionen.

Anatomie

Schaltflächen bestehen aus einer Beschriftung und einem optionalen Symbol, das vor oder nach der Beschriftung angezeigt wird.

Symbolschaltflächen bestehen nur aus einem erkennbaren Symbol.

Beide haben eine umschaltbare Variante.

Anpassung

Schaltflächen sind in einer Standard- und einer großen Variante verfügbar. Eine große Schriftgröße kann die Wichtigkeit unterstreichen.

Symbole können verwendet werden, um die Schaltfläche in einer nachgestellten oder vorangestellten Position stärker hervorzuheben, zu verdeutlichen und wiedererkennbarer zu machen.