Darstellung

Varianten

Button-Gruppe

Primär-Buttons treten alleine oder zusammen mit Sekundär-Buttons und Links auf.

Den Sekundär-Button platzieren wir in unmittelbarer Nähe des Primär-Buttons, falls dessen Funktion einen direkten Bezug zum Primär-Button hat.

Mehr als drei Aktionen sollten wir nicht nebeneinander darstellen, damit wir Nutzende nicht überfordern.

Alles Weitere zu Buttons:

Gruppen von Aktionen in Inhaltselementen können links ausgerichtet sein (z.B. Teaser) oder rechts (z.B. Meldungen, Aktionslisten),

Formular-Aktionen

Unterhalb von Formularen sind Buttons in ihrer Wichtigkeit von rechts nach links sortiert. Der wichtigste Button «Primär-Button» ist immer rechts platziert.

Innerhalb eines Formulars, Dialogs, Wizards usw. darf es jeweils nur einen Primär-Button geben.

Formular-Aktionen können links oder rechts ausgerichtet sein. 

Aktionen in Dialogfenstern/Modal

Wenn wir Buttons für die Bedienung eines Dialogfensters/Modal verwenden, werden Buttons unten rechts platziert. Diese nehmen den ganzen Platz des Aktionsbalkens ein und passen sich der Breite des Dialogfensters an.

Modal-Aktionen sind rechts ausgerichtet.

Verwendung

Ausrichtung

Standard-Ausrichtung von Buttons

Eine Aktion in Form von Buttons oder Links kann im Layout, beziehungsweise der Box, links oder rechts ausgerichtet sein. Buttons stehen immer in Bezug zu einem Inhalt. Deswegen ist die Platzierung stark abhängig vom Element oder der Komponente, in denen sie verwendet werden.

Generell platzieren wir in einem Webseitenlayout für Desktop den Button oder die Button-Gruppe links. So zum Beispiel, wenn der Button im Inhalt oder in einem Teaser zur Anwendung kommt. Ist das Browserfenster gross und Nutzende scrollen, um den Inhalt zu lesen oder zu scannen, ist es am besten, wenn der Button dort platziert wird, wo Nutzende auch hinschauen – auf die linke Seite der Layout-Spalte.

Ausrichtung bei Prozessen

Verwenden wir Buttons für die Bedienung von Prozessen, wie zum Beispiel bei Schritt für Schritt Formularen oder Dialogfenstern, platzieren wir Buttons unten rechts. Gleiches gilt für Buttons in Elementen, die eine klare Leserichtung von links nach rechts aufweisen. Das können Benachrichtigungs-Banner, Suchfelder oder Aktionslisten sein. Hier gehen Nutzende davon aus, dass es weitergeht und bringen dieses Muster mit einer Bewegung nach rechts in Verbindung (Blättern).

Tritt ein Primär-Button in Verbindung mit einem Sekundär-Button in einem Prozess auf, ist der Primär-Button immer rechts vom Sekundär-Button positioniert (umgekehrte Reihung). Weitere Funktionen bilden wir linksbündig als tertiäre Links ab.

Volle Breite

Integrieren wir Buttons in ein schmales Element oder handelt es sich um eine mobile Darstellung, werden Buttons auf die gesamte Breite gestreckt. Sie weisen dann keine Ausrichtung mehr auf, weil sie als Gruppe oder als einzelner Button die ganze Breite ausfüllen.