Farbzuordnung nach Aktionstyp

(Systematische Button-Kategorisierung)

Sechs Hauptkategorien für eindeutige Benutzerführung

Primary

Primary (Blau) - Hauptaktionen

Verwendung: Die wichtigste Aktion pro Seite/Ansicht

Speichern, Senden, Anmelden, Bestätigen, Fortfahren

Regel: Maximal 1-2 Primary Buttons pro Ansicht

Success

Success (Grün) - Konstruktive Aktionen

Verwendung: Positive, aufbauende Aktionen

Neu, Erstellen, Hinzufügen, Abspielen, Starten, Genehmigen

Hochladen, Import, Verbinden, Verknüpfen

Warning

Warning (Orange) - Verändernde Aktionen

Verwendung: Bestehende Daten werden modifiziert

Bearbeiten, Ändern, Verschieben, Umbenennen, Pausieren

Als Vorlage speichern, Zusammenführen, Merge

Info

Info (Hellblau) - Informative Aktionen

Verwendung: Anzeigen, Verarbeiten, Analysieren

Ansicht, Details, Vorschau, Export, Download, Drucken

Berichte, Statistiken, Filtern, Suchen, Vergleichen

Secondary

Secondary (Grau) - Untergeordnete Aktionen

Verwendung: Neutrale, untergeordnete Aktionen

Abbrechen, Schließen, Zurück, Kopieren, Teilen

Später, Überspringen, Als Entwurf speichern

Danger

Danger (Rot) - Destruktive Aktionen

Verwendung: Unwiderrufliche oder kritische Aktionen

Löschen, Entfernen, Ablehnen, Trennen, Abmelden

Regel: IMMER mit Beschriftung!

Outline vs. Gefüllt

(Visuelle Hierarchie und Prioritäten)

Gefüllte Buttons

Verwenden bei:

Primären und wichtigen Aktionen
Wenigen Buttons auf der Seite (< 5)
Call-to-Action Elementen
Kritischen Aktionen (Danger immer gefüllt)

Outline Buttons

Verwenden bei:

Sekundären Aktionen neben primären
Vielen Buttons auf einer Seite (> 10)
Tabellen/Listen (weniger Dominanz)
Button-Gruppen mit Auswahloptionen

Text-Regeln

(Icon, Text oder beides?)

Klare Regeln für bessere Verständlichkeit

Pflicht

Immer MIT Text

Keine Ausnahmen bei:

Geschäftskritischen Aktionen
Kaufen, Bezahlen, Buchen, Bestellen
Allen Danger-Buttons
Primary Buttons
Unklaren/Kontextabhängigen Icons

Icon + Text

Standard für die meisten Aktionen:


                                        <i class="bi bi-plus-circle"></i> Neu erstellen


                                        <i class="bi bi-eye"></i> Ansicht

Bedingt

Nur Icon erlaubt

Ausnahmen mit title-Attribut:

✓ Universal verständliche Aktionen (▶️ Play/Pause, ❌ Schließen, 🔍 Suche)

✓ Platzmangel (Tabellen, Mobile Ansichten)

✓ Nach häufiger Nutzung (30+ mal) mit User-Einstellung

Vollständige Aktions-Matrix

Success

Erstellen/Hinzufügen

Neu, Hinzufügen, Hochladen, Import

Icon: bi-plus-circle, bi-upload

Info

Anzeigen/Lesen

Ansicht, Details, Vorschau, Bericht

Icon: bi-eye, bi-info-circle

Warning

Bearbeiten/Ändern

Bearbeiten, Umbenennen, Verschieben

Icon: bi-pencil, bi-arrows-move

Primary

Aktionen/Prozesse

Speichern, Senden, Bestätigen

Icon: bi-save, bi-send

Secondary

Teilen/Kommunikation

Teilen, Email, Kopieren, Export

Icon: bi-share, bi-envelope