Inhaltsbereich Navigation Navigation Fußzeile

Button

Verwendung

Buttons werden benutzt, um in Formularen Aktionen wie Absenden, Speichern, Suchen, Löschen oder Abmelden auszuführen. Aktionen können sich auf ganze Seiten, Bereiche oder einzelne Objekte beziehen. In der Regel lösen diese einen Datenaustausch zum oder vom Server aus, der zu einer Änderung der Daten in der Datenbank führt, z. B. „Speichern“.

Andere Arten von Buttons manipulieren durch ihre Aktionen die Anzeige von Inhalten einer Maske selbst: Daten können clientseitig hinzugefügt oder gelöscht werden, eine Auswahl in einer Tabelle getroffen werden oder weitere Funktionalitäten und Inhalte wie z. B. Tooltips, Kontextmenüs oder Filter ein- und ausgeblendet werden.

Welche Arten von Buttons in einer Maske eingesetzt werden, muss im Rahmen der Maskenspezifikation festgelegt werden. Wenn hier bei der Bezeichnung eines Buttons von den vorgeschlagenen Namen abgewichen wird, dann soll sich die Bezeichnung auf „[Substantiv] + [Verb]“ beschränken (z. B. „Vorgang absenden“).

Der Zweck von Buttons ergibt sich immer aus der Beschriftung bzw. bei Icon-Buttons aus dem Alternativtext und title-Attribut sowie ihrem Kontext, z. B. die eindeutige Zuordnung über benachbarte Tabellenzellen. Daher sind für Standard-Buttons keine zusätzlichen Tooltips und mit der Ausnahme von Icon-Buttons auch keine title-Attribute vorgesehen.

Best Practices

  • Um die Übersichtlichkeit und schnelle Erfassbarkeit zu wahren, muss die Anzahl an Buttons möglichst gering sein.
  • Aktionselemente müssen eindeutig und unmissverständlich durch Beschriftungen und / oder Icons beschreiben werden.
  • Den Nutzenden soll die (unter Umständen auch unwiderrufliche) Auswirkung einer Aktion klar sein. Im Zweifel sollte ein zusätzlicher Bestätigungs-Dialog eingeblendet werden.
  • Das Betätigen eines Buttons sollte eine Reaktion der Anwendung an die Nutzenden auslösen, zum Beispiel durch Aktualisierung der Daten einer Maske.
  • Durch die Platzierung oder Benennung des Buttons muss klar erkennbar sein, auf welches Objekt oder Inhalt sich die auszulösende Aktion bezieht.
  • Bezieht sich eine Aktion auf mehrere Objekte, so muss dies klar kommuniziert werden.
  • Aktionselemente sollen so platziert werden, dass alle zusammengehörigen Aktionsmöglichkeiten für den Benutzer erkennbar sind.

Abgrenzung

Buttons und Links sind semantisch und funktional deutlich voneinander abgegrenzt. Button-Elemente dienen nicht der Navigation, hierfür müssen Links benutzt werden. In begründeten Ausnahmefällen wie z. B. in Kacheln können Links aber optisch wie Buttons gestaltet werden. Hierzu werden die entsprechenden Klassen vorgehalten.

Bitte beachten Sie, dass Link-Buttons nur in Ausnahmefällen eingesetzt werden sollten, da die Tastatur-Bedienung von Buttons (Enter oder Leertaste wenn fokussiert) und Links (reagieren nur auf Enter) unterschiedlich ist. Wenn beide, Links und Buttons, gleich aussehen kann dies für Nutzende verwirrend sein. Zudem unterscheiden sich die Interaktionen von Screenreader-Nutzenden zur Erkundung von Links und Buttons erheblich, sodass unter Umständen wesentliche Funktionen überlesen werden, wenn sie nicht mit dem semantisch korrekten Element implementiert sind.

Standard-Buttons

Das Design System unterscheidet bei Schaltflächen vom Typ Standard-Button zwischen verschiedenen Ausprägungen. Generell sind alle Standard-Buttons immer vom Typ Sekundär, ausser sie wurden fachlich als der eine Primär-Button definiert, den eine Maske enthalten darf. Nur in begründeten Ausnahmefällen darf ein Interface auch mehr als einen Primär-Button enthalten, sofern diese in ihren Auswirkungen vergleichbar sind und dies über die gesamte Anwendung hinweg konsistent ist.

Primär
Die wesentliche Aktion in einem Formular, z. B. „Speichern“. Bei Eingabemasken muss immer eine Schaltfläche als primär definiert werden.
Primär-Buttons stehen in einer Zeile von Buttons immer rechts.
Sekundär
Eine beliebige Anzahl von Aktionen mit geringerer Wahrscheinlichkeit oder niedriger Priorität welche die Bedienungsmöglichkeiten erweitern, oder mit potentiell destruktiven Aktionen wie dem Löschen von Daten als Ergebnis der Aktion.
Sekundär-Buttons stehen in einer Zeile von Buttons immer links und damit getrennt vom Primär-Button. Ein möglicher „Zurück“-Button steht in der Reihenfolge immer am linken Anfang einer Aufreihung von Sekundär-Buttons.
In der responsiven Ansicht auf kleinen Bildschirmgrößen behalten die Buttons ihre Reihenfolge Sekundär zu Primär von oben nach unten.
Destruktiv
Sofern Aktionen möglicherweise unwiderrufbare Auswirkungen mit erheblicher Tragweite haben, wie zum Beispiel das Löschen von Nutzerkonten, so können diese auch als destruktive Primär-, Sekundär-, oder auch Tertiär-Buttons angezeigt werden. Eine solche Verwendung ist immer eine fachliche Einzelfall-Entscheidung; in der Regel sollte aber eine Maske oder ein Prozeßschritt nie mehr als einen destruktiven Button haben.
Inaktiv
Aktionen, die zum gegebenen Zeitpunkt aus inhaltlichen Gründen nicht möglich sind: Hier ist die Position nicht vorgegeben, da der Zustand und somit auch die Platzierung abhängig von der Applikationslogik sind.

Die optionale Einbettung von Icons aus dem zur Verfügung gestellten Icon-Font in einem Standard-Button ist ebenso möglich, wenn dies bei der Visualisierung der Aktion unterstützt – ein Beispiel ist hier ein „Löschen“-Button mit vorangestelltem Papierkorb-Icon. Zu beachten ist, dass die Beschriftung des Buttons entsprechend gekürzt werden muss, um zu vermeiden, dass der Text zweizeilig umbricht (zulässig, aber unerwünscht). Diese wesentliche Information über die auszulösende Aktion muss sich aber im sichtbaren Text befinden.

Beschriftung von Standard-Buttons

Standard-Buttons enthalten immer einen sichtbaren Text, der in knapper Form die auszulösende Aktion beschreibt, idealerweise in der Kombination „[Substantiv] + [Verb]“. Dabei muss zwingend darauf geachtet werden, dass der Text auf den festgelegten Bildschirmgrößen vollständig dargestellt wird. Dieser sollte 20 Zeichen nicht überschreiten, in begründeten Ausnahmefällen sind technisch bis zu 50 Zeichen möglich, dann aber ohne Icon.

Icon-Buttons

Auf kleineren Bildschirmgrößen können Probleme mit dem zur Verfügung stehenden Platz für die Darstellung von beschrifteten Standard-Buttons auftreten. In solchen Fällen ist es möglich, zum Beispiel in Datentabellen mit einem responsiven Pattern den Text eines Buttons durch ein äquivalentes Icon zu ersetzen.

Icon-Buttons finden Verwendung, wenn

  • begrenzter Raum zur Verfügung steht, wie zum Beispiel die „Zeile hinzufügen“- oder „Zeile löschen“-Symbole in Funktionsspalten von Tabellen,
  • ein Symbol als hinreichend bekannt vorausgesetzt werden kann und keine sichtbare textliche Beschreibung benötigt, wie zum Beispiel das i-Symbol bei Tooltip-Buttons,
  • in Kombination mit einem Input-Feld, wie zum Beispiel als Auslöser einer Suche an einem <input type="search"> mit dem Suchlupe-Symbol, oder zum Einblenden des maskierten Passworts an einem <input type="password"> über einen Button mit dem Auge-Symbol.
  • eine Tabelle paginiert werden soll und die Paginierung direkte Sprungmöglichkeiten, z. B. auf Seite 3 der Abfolge, ermöglicht

Icon-Buttons sind in der Regel als sekundäre Buttons gestaltet, d. h. mit blauem Rahmen und blauem Icon auf weißem Hintergrund. In Ausnahmefällen können sie als flächig blaue Buttons mit weißem Icon gestaltet werden, um z. B. besondere Aufmerksamkeit auf sich zu ziehen. Die Zustände bei Interaktion entsprechen denen von Standard-Buttons.

Icon-Buttons finden sich aufgrund des limitierten Platzes häufig in Datentabellen, z. B. in dedizierten Funktionsspalten zum Löschen einer Zeile. Wenn in einer solchen Tabelle mehrere Arten von Icon-Buttons zum Einsatz kommen, so muss darauf geachtet werden, dass gleichartige Buttons immer in einer vertikalen Achse untereinander stehen, auch wenn es in den Zeilen unterschiedliche Anzahlen von Funktionsbuttons gibt. Der entstehende Weissraum durch den Entfall einzelner Buttons muss nicht nur in Kauf genommen werden, sondern ist auch ein Gestaltungsmittel, das die Orientierung in der Anwendung unterstützt.

Beschriftung von Icon-Buttons

Funktions-Buttons verfügen anstelle von sichtbarem Text über ein entsprechendes Icon, das die auszulösende Aktion visualisiert. In diesem Fall muss das Icon über einen sprechenden Alternativtext verfügen und beinhaltet in der Regel auch ein title-Attribut, über das Mausnutzern der Zweck bzw. die auszulösende Aktion vermittelt wird.

Kombinationen & Platzierung

Das Design System sieht in Masken und auch in bestimmten Dialogen ein Schaltflächenzeile vor, in der die primären und sekundären Standard-Buttons in einer gemeinsamen Zeile (Desktop) oder unmittelbar untereinander (kleinere Viewports) stehen. Diese Schaltflächenzeile schließt eine Maske oder einen Auswahldialog ab und befindet sich entsprechend der natürlichen Leserichtung immer unten rechts.

Die Schaltflächenzeile nimmt die gesamt Zeilenbreite ein, es dürfen keine anderen Elemente in dieser Zeile stehen. Alle Buttons innerhalb dieser Schaltflächenzeile haben immer die gleiche Breite, die wiederum abhängig von der jeweiligen Geräteklasse ist.

Grundsätzlich sind alle Buttons einer Ausprägung kombinierbar, d. h. ein oder mehrere Standard-Buttons bilden in der Regel eine Schaltflächenzeile, die mindestens eine primäre Aktion enthält. Icon-Buttons sind in Schaltflächenzeilen nicht erlaubt, die dem Abschluss eines Formulars dienen

Grundsätzlich muss die primäre Aktion in der Schaltflächenzeile immer rechts stehen. Zwei primäre Aktionen sind nur dann erlaubt, wenn diese gleichrangig sind bzw. gleich zu gewichtende Auswahlen treffen lassen (Ja / Nein), da eine Mehrzahl von primären Aktionen (“Call to Action“) die Auswahl für Nutzende erschweren.

Buttons mit dem Charakter eines Fortschritts sind primäre Aktionen und stehen somit rechts, solche mit dem Charakter eines „Abbrechens“ stehen links. Weitere Schaltflächen ordnen sich entsprechend dazwischen ein.

Die Reihenfolge mehrerer Buttons wird wie folgt von links nach rechts beispielhaft festgelegt:

Zwei Buttons wie „Abbrechen“, „Weiter“
Abbrechen ist der sekundärer Button (links), Weiter der primäre Button (rechts).
Drei oder mehr Buttons wie „Zurück“, „Abbrechen“, „Weiter“
Zurück und Abbrechen sind sekundäre Buttons (links), Weiter der primäre Button (rechts).
Darstellung der Vorgaben aus der vorhergehenden Liste.
Buttons am Breakpoint LG

Gleiches bei Icon-Buttons: auch hier sind beliebige Kombinationen denkbar und möglich, zum Beispiel „Löschen“- und „Hinzufügen“-Buttons an einer Komponente. Icon-Buttons besitzen im Gegensatz zu Standard-Buttons keine dedizierte Platzierung und Ausrichtung, sondern werden, wie z. B. Tooltip-Buttons oder Buttons in der Funktionsspalte einer Datentabelle im jeweiligen Kontext platziert.

Kombinationen der rechteckigen, deutlich höheren Standard-Buttons mit kleineren quadratischen Icon-Buttons sind jedoch nicht erlaubt.

Positionierung & responsives Verhalten

Die Schaltflächenzeile dient nicht nur der konsistenten und damit vorhersehbaren Platzierung, sondern steuert auch das responsive Verhalten wie z. B. Breiten der Buttons und Umbrüche, wenn mehrere Buttons in einem Dialog auf einem mobilen Endgerät dargestellt werden müssen. Unterhalb eines bestimmten Breakpoints werden diese nun untereinander dargestellt.

Ab dem Breakpoint XS (≥ 0px)

  • Buttons nehmen 100% des verfügbaren Grids ein
  • Buttons werden 1rem voneinander entfernt angeordnet
  • Icon-Buttons behalten ihr quadratisches Format
Buttons ordnen sich auf mobile Breakpoints untereinander an.
Smartphone - Breakpoint XS

Ab dem Breakpoint SM (≥ 576px)

  • Buttons sind mindestens 7.5rem (120px) breit. Darüber hinaus wachsen sie mit ihrem Inhalt.
  • Buttons werden horizontal sowie vertikal 1rem (16px) voneinander entfernt wenn sie in Zeilen angeordnet werden.
  • Die Ausrichtung der Buttons kann je nach Einsatz variieren.
Buttons ordnen sich auf Tablet-Breakpoints im Zeilenfluß nebenieinander an.
Breakpoint SM

Ab dem Breakpoint LG (≥ 992px)

Breakpoint LG

Do’s and Dont’s

So:

  • Primärbuttons sollten selten und bewusst eingesetzt werden. Sie ziehen die Aufmerksamkeit auf sich und sollten für die wichtigsten Funktionen der Seite genutzt werden bzw. für die Aktion, die Nutzende weiterbringt.
  • Eindeutige und selbstbeschreibende Beschriftung
  • Erlernte Icons mit adäquaten Alternativtexten
  • Eine primärer Button in einer Gruppe von Buttons

So nicht:

  • Mehrere Primärbuttons nebeneinander konkurrieren um die Aufmerksamkeit der Nutzenden. Eine solche Darstellung sollte nur in Ausnahmefällen genutzt werden, z. B. für mehrfache mögliche Aktionen an einem Datensatz.
  • Buttons als Navigationselemente
  • Überlange Beschriftungen
  • Mehr als ein Icon pro Button
  • title-Attribute als Ersatz für unverständliche Button-Beschriftungen

So:

  • Gleichmäßige und einheitliche Abstände – Folgen mehrere Buttons aufeinander, so sind diese mit 1rem voneinander zu trennen

So nicht:

  • Buttons werden nicht als zusammengehörig wahrgenommen, wenn sie zu weit voneinander entfernt sind.