92 lines
1.5 KiB
Markdown
92 lines
1.5 KiB
Markdown
# FEEDBACK_GUIDE.md
|
||
|
||
## Zweck
|
||
Dieses Dokument definiert **konsistentes visuelles Feedback** in Form von Alerts und Toasts.
|
||
|
||
Ziel:
|
||
- klare Zustände
|
||
- keine Überraschungen
|
||
- sofort verständliche Rückmeldungen
|
||
|
||
---
|
||
|
||
## Grundregeln
|
||
|
||
- Feedback ist immer sichtbar
|
||
- Feedback ist textlich eindeutig
|
||
- Farbe unterstützt – ersetzt aber nicht die Aussage
|
||
|
||
---
|
||
|
||
## Alerts
|
||
|
||
Alerts sind **statisch** und kontextgebunden.
|
||
|
||
Typische Nutzung:
|
||
- Formularfehler
|
||
- Systemzustände
|
||
- Konfigurationsprobleme
|
||
|
||
### Beispiele
|
||
|
||
```html
|
||
<div class="alert success">Einstellungen gespeichert</div>
|
||
<div class="alert warning">Unvollständige Konfiguration</div>
|
||
<div class="alert error">Speichern fehlgeschlagen</div>
|
||
```
|
||
|
||
Regeln:
|
||
- Alert steht nahe am betroffenen Inhalt
|
||
- kein automatisches Verschwinden
|
||
|
||
---
|
||
|
||
## Toasts
|
||
|
||
Toasts sind **temporär** und nicht blockierend.
|
||
|
||
Typische Nutzung:
|
||
- Erfolgsmeldungen
|
||
- kurze Hinweise
|
||
- Hintergrundaktionen
|
||
|
||
### Beispiel
|
||
|
||
```html
|
||
<div class="toast success">Änderungen übernommen</div>
|
||
```
|
||
|
||
Regeln:
|
||
- niemals kritisch
|
||
- immer zeitlich begrenzt
|
||
- dürfen ignoriert werden
|
||
|
||
---
|
||
|
||
## Wann was?
|
||
|
||
| Situation | Element |
|
||
|---------|---------|
|
||
| Formular ungültig | Alert |
|
||
| Aktion erfolgreich | Toast |
|
||
| Kritischer Fehler | Alert |
|
||
| Hintergrundinfo | Toast |
|
||
|
||
---
|
||
|
||
## Anti-Patterns
|
||
|
||
- Toasts für Fehler
|
||
- Alerts ohne Text
|
||
- Farben ohne Bedeutung
|
||
- mehrere Feedback-Typen gleichzeitig
|
||
|
||
---
|
||
|
||
## Status
|
||
|
||
Version: **v1.0 (Baseline)**
|
||
|
||
Dieses Dokument ergänzt `COMPONENT_GUIDE.md`.
|
||
|