Schaltflächen

Schaltflächen sind der primäre visuelle Indikator für Nutzeraktionen.

Grundsätze

Aktionsorientiert: Schaltflächen sollten deutlich machen, dass sie eine Aktion auslösen.

Deutliches Feedback: Das Erscheinungsbild der Schaltfläche muss sich in den verschiedenen Interaktionsstatus (Mouseover, gedrückt, Fokus) 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 Variationen wie Symbole und unterschiedliche Größen unterstützen, ohne die Einheitlichkeit zu beeinträchtigen.

Nutzung und Platzierung

Eine Schaltfläche sollte in der Nähe der zugehörigen Inhalte platziert werden. Sie können allein oder zusammen 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.

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.

Anatomie

Personalisierung

Schaltflächen enthalten eine Standard- und eine große Variante sowie die Zustände „Standard“, „Fokus“ und „Gedrückt“ für jede Variante. Mit Symbolen kann die Schaltfläche besser hervorgehoben, verdeutlicht und erkannt werden. Die Schaltflächengröße kann die Wichtigkeit unterstreichen.