Interaktionen

Button

Das Button-Pattern, das für vielfältige Arten von Interaktionen eingesetzt werden kann, gibt es in drei Größen, vier Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns.

Für diese Einsatzzwecke sind die vier Ordnungen zu verwenden:

  • Die roten Buttons (1. Ordnung) sind wichtigen Primär-Aktionen vorbehalten, z.B. „In den Warenkorb“, „Zur Kasse“, „Jetzt bestellen“.
  • Die dunkelgrauen Buttons (2. Ordnung) sind nur in Sonderfällen einzusetzen, z.B. wenn der hellgraue Button in Konkurrenz zum roten Button zu unauffällig wäre.
  • Die hellgrauen Buttons (3. Ordnung) sind die Standard-Buttons.
  • Die linkähnlichen Buttons (4. Ordnung) können zum Beispiel als "Abbrechen"-Button eingesetzt werden und sollen sich klar untergeordnet ins Layout integrieren. Sie dürfen allerdings nicht für Links in Fließtexten eingesetzt werden, hierfür ist das Link-Pattern zu verwenden.

Buttons können neben dem Text auch Icons beinhalten, um Aktionen zu verdeutlichen. Zum Beispiel "In den Warenkorb" mit einem Warenkorb-Icon oder "Suchen" mit einem Lupen-Icon. Werden Buttons als Navigations-Element eingesetzt, kann zusätzlich ein richtungsweisendes Pfeil-Icon integriert werden. Zum Beispiel "< Zurück" oder "Weiter zur Bestellung >". Die Farbe der Icons richtet sich nach dem Button-Text.

button150

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

button100

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

button50

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

Symbol-Button

Der Symbol-Button ist eine Spezialvariante des Buttons. Er ist rund und besitzt als Inhalt genau ein Zeichen aus der Icon-Font. Zum Einsatz kommen die Symbol-Buttons überwiegend als Navigations-Elemente ("<" ">") oder Tooltip-Basiselemente ("i" / "?").

Den Symbol-Button gibt es in fünf Größen, fünf Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns. Die Ordnungen 1-4 entsprechen denen des Button-Patterns. Die zusätzliche 5. Ordnung ist eine Variante mit semi-transparenter Hintergrundfarbe.

Bei dem symbolButton10 dürfen nur die Tooltip-Basiselemente ("i" / "?") als Inhalt verwendet werden!

symbolButton150

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton100

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton50

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton25

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton10

3. Ordnung

Drop-Button

Der Drop-Button ist eine Kombination aus Button und Dropdown-Liste. Bei Benutzung löst er nicht sofort eine Aktion aus, sondern fährt zunächst eine Liste mit Auswahlmöglichkeiten aus, aus der dann die endgültige Aktion ausgewählt werden kann.

Den Drop-Button gibt es in drei Größen und vier Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Die Ordnungen entsprechen denen des Button-Patterns. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns. Ebenfalls zum Pattern gehören die Funktionalitäten des Aus- und Einklappens und das automatische Ausrichten des Ausklappelements.

Der Inhalt des ausgeklappten Elements ist nicht Bestandteil des Patterns und muss separat definiert werden. In diesem Zusammenhang muss auch für eine sinvolle Maximalbreite des ausgeklappten Inhalts gesorgt werden, damit dieser nicht über den Viewport hinausragt.

dropButton150

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

dropButton100

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

dropButton50

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

Auswahlkachel

Die Auswahlkacheln sind Gruppen von kachelförmigen Elementen, über die Auswahllisten realisiert werden können. Anwendungsbeispiele sind die Auswahl von Größen, Farben oder anderen Ausführungsvarianten eines Produkts. Das Pattern gibt es in zwei Größen und drei Varianten: Normal, Breit und Multi-Auswahl. Kacheln mit Multi-Auswahl werden an Stellen eingesetzt, an denen der Nutzer mehrere Optionen gleichzeitig wählen darf (z.B. Produktlisten-Filter).

Die einzelnen Kacheln besitzen einen Hover-Effekt und können neben dem normalen auch noch einen ausgewählten und einen deaktivierten Zustand annehmen.

Die durch die Auswahl einer Kachel ausgelöste Aktion ist kein Bestandteil des Patterns. Dazu gehört insbesondere auch das Verändern des Zustands der Kacheln, das selbst implementiert werden muss, dadurch aber flexibel an die jeweiligen Anforderungen angepasst werden kann.

selTiles100

mit Zahlen (mit und ohne Häkchen)

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46
  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Zahlen und breiteren Kacheln (mit und ohne Häkchen)

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46
  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Text (mit und ohne Häkchen)

  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff
  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff

mit Farben (mit und ohne Häkchen)

mit Bildern (mit und ohne Häkchen)

mit einem Bilder-Fallback für den IE (mit und ohne Häkchen)

selTiles50

mit Zahlen

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Text

  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff

mit Farben

mit Bildern

mit einem Bilder-Fallback für den IE

Tooltip

Der Tooltip ist eine Sprechblase mit Zusatzinformationen. Diese Sprechblase wird nur eingeblendet, wenn der Nutzer mit einem bestimmten Basiselement interagiert. Die hier dargestellten Fragezeichen-Symbol-Buttons sind nur Beispiele und können gegen beliebige andere Basiselemente ausgetauscht werden.

Der Inhalt der Sprechblase ist standardmäßig ein String, der wie eine copy100 formatiert wird. Dieser String kann über die Angabe einer CSS-Klasse aber auch anders formatiert werden. Außerdem gibt es die Möglichkeit, durch die Angabe einer ID-Referenz komplexe Inhalte zu integrieren.

Die Sprechblase öffnet sich standardmäßig immer mittig oberhalb des Basiselements. Die Positionierung kann aber auch durch Angabe von X- und Y-Koordinaten relativ zu dieser Position verschoben werden oder die relative Positionierung kann immer abhängig zur Mauszeiger-Position erfolgen.

Bei diesem Pattern gibt es eine Unterscheidung zwischen der Bedienung per Maus und per Touch:

  • Maus: Der Tooltip öffnet sich, sobald man mit der Maus über das Basiselement fährt. Er schließt sich, sobald man das Basiselement mit der Maus wieder verlässt.
  • Touch: Der Tooltip öffnet sich bei einem Touch auf das Basiselement. Hierbei ist in der oberen rechten Ecke der Sprechblase zusätzlich ein "Schließen-X" zu sehen. Standardmäßig schließt sich der Tooltip bei einem Touch auf das X, das Basiselement oder einen anderen Ort außerhalb der Sprechblase wieder. Der Tooltip kann aber auch so konfiguriert werden, dass das Schließen-X nicht sichtbar ist oder sich der Tooltip auf Touch-Devices gar nicht öffnet.
  • Click: Der Tooltip öffnet sich bei auch auf Non-Touch-Devices mit einem Klick auf das Basiselement.

Standardvariante

mit CSS-Klasse zur Formatierung

mit CSS-Klasse zur Formatierung des gesamten Tooltip

mit ID-Referenz zur Integration von komplexen Inhalten

mit relativer Positionierung über x-y-Koordinaten

mit Positionierung über Mausanhängigkeit

ohne Schließen-X auf Touch-Devices

keine Anzeige auf Touch-Devices

Anzeige nur per Klick/Touch

als Hinweiskommunikation

als Hinweiskommunikation (Erfolg)

als Hinweiskommunikation (Fehler)

als Hinweiskommunikation (Warnung)

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!