Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

This commit is contained in:
Torsten Schulz (local)
2026-03-19 14:44:04 +01:00
parent 4442937ebd
commit 9d44a265ca
67 changed files with 5426 additions and 1099 deletions

389
docs/USABILITY_AUDIT_U1.md Normal file
View File

@@ -0,0 +1,389 @@
# UX Audit U1
## Ziel
Dieser Audit bildet Phase U1 des Bedienbarkeitskonzepts ab. Er dient als priorisierte Arbeitsgrundlage fuer die eigentliche UX-Ueberarbeitung.
Untersucht wurden:
- Shell und Navigation
- Einstieg ohne Login
- Registrierung/Login
- Forum
- Vokabeltrainer
- Falukant
- Admin
- Match3/Minigames
## Bewertungslogik
- `P1`: blockiert Kernnutzung oder fuehrt sehr leicht zu Fehlbedienung
- `P2`: verlangsamt oder verkompliziert Kernnutzung merklich
- `P3`: Konsistenz-, Lesbarkeits- oder Komfortproblem
- `P4`: Feinschliff
## Gepruefte Hauptaufgaben
1. Einloggen und Einstieg verstehen
2. Registrieren
3. Forum finden, Thema erstellen und lesen
4. Vokabelsprache finden, anlegen, abonnieren und lernen
5. Falukant-Status erfassen und Folgeaktion auswaehlen
6. Admin-Nutzer oder Match3-Daten bearbeiten
7. Match3 starten, pausieren und Kampagnenstatus verstehen
## Ergebnisuebersicht
- P1: 4 Punkte
- P2: 11 Punkte
- P3: 13 Punkte
- P4: 6 Punkte
## P1-Probleme
### P1-1: Historische innere Scrollkonzepte in Teilbereichen
Bereiche:
- Falukant
- Admin
- Minigames
Beobachtung:
- Mehrere Views arbeiten weiterhin mit eigenen `contenthidden/contentscroll`-Strukturen innerhalb des bereits scrollbaren App-Contents.
- Das fuehrt zu falschen Sticky-Bezuegen, abgeschnittenen Bereichen und inkonsistenter Scrolllogik.
Risiko:
- Nutzer verlieren Orientierung.
- statische Leisten oder Footer/Header verhalten sich unerwartet.
Empfehlung:
- alle View-internen Scrollcontainer systematisch inventarisieren
- entscheiden, welche Bereiche echte lokale Scrollflaechen brauchen und welche komplett auf die Shell-Scrolllogik gehen
### P1-2: Fehler- und Erfolgsfeedback ist nicht konsistent genug
Bereiche:
- Auth
- Settings
- Admin
- Vokabeltrainer
Beobachtung:
- Mischung aus `alert`, MessageDialog, ErrorDialog, DialogWidget-internem Feedback und stillen `console.error`-Pfaden.
- Beispiel: [RegisterDialog.vue](/mnt/share/torsten/Programs/YourPart3/frontend/src/dialogues/auth/RegisterDialog.vue) nutzt fehleranfaellig `errrorDialog` statt eines klar vereinheitlichten Feedbackpfads.
Risiko:
- Nutzer verstehen nicht sicher, ob eine Aktion fehlgeschlagen ist oder erfolgreich war.
- Fehler werden in einzelnen Flows inkonsistent oder gar nicht sichtbar.
Empfehlung:
- gemeinsames Feedbacksystem definieren
- `success`, `warning`, `error`, `info`, `loading` als einheitliche Muster durchziehen
### P1-3: Formvalidierung erfolgt oft zu spaet oder zu unsichtbar
Bereiche:
- Registrierung
- Account-Settings
- Admin
- Falukant-Formulare
Beobachtung:
- viele Formulare validieren erst beim Absenden
- Feldfehler sitzen selten direkt am Eingabepunkt
- Pflichtlogik ist nicht durchgaengig erkennbar
Risiko:
- hohe Reibung beim Ausfuellen
- Wiederholschleifen und Frust bei laengeren Formularen
Empfehlung:
- Validierung naeher ans Feld bringen
- Pflichtfelder, Eingabeformat und Fehltext systematisch sichtbar machen
### P1-4: Komplexe Arbeitsflaechen haben zu wenig gefuehrte Primaeraktionen
Bereiche:
- Falukant
- Admin Match3
Beobachtung:
- Fachflaechen zeigen viele Optionen gleichzeitig, ohne klare Priorisierung.
- Beispiel: [MinigamesView.vue](/mnt/share/torsten/Programs/YourPart3/frontend/src/views/admin/MinigamesView.vue) ist funktionsreich, aber als Bearbeitungsfluss kaum gefuehrt.
Risiko:
- Nutzer verstehen den naechsten sinnvollen Schritt nicht.
- Bedienfehler in fachlich dichten Bereichen steigen.
Empfehlung:
- pro komplexer View den eigentlichen Arbeitsfluss definieren
- Primaeraktionen, Sekundaeraktionen und Expertenaktionen sichtbarer trennen
## P2-Probleme
### P2-1: Hauptnavigation ist funktional, aber noch nicht ausreichend auf Aufgaben priorisiert
Beobachtung:
- Navigation ist technisch konsistenter als vorher, aber die inhaltliche Priorisierung der Menuepunkte ist noch stark historisch gewachsen.
- Der Unterschied zwischen Kernzielen und Tiefenfunktionen ist nicht deutlich genug.
Empfehlung:
- Menueaufbau gegen echte Nutzungsszenarien pruefen
- seltene Spezialpunkte staerker entlasten
### P2-2: Login-Einstieg ist reich an Inhalt, aber nicht maximal fokussiert
Beobachtung:
- [NoLoginView.vue](/mnt/share/torsten/Programs/YourPart3/frontend/src/views/home/NoLoginView.vue) erzaehlt Produkt und Zugang parallel.
- Fuer Erstnutzer ist die Seite informativ, aber die eigentliche Primaerhandlung konkurriert mit vielen Begleitinhalten.
Empfehlung:
- Zugangspfad noch klarer vom Story-Bereich trennen
- Login, Registrierung und Passwort-Reset als zusammenhaengenden Entscheidungsraum denken
### P2-3: Registrierung ist bedienbar, aber noch nicht robust genug gefuehrt
Beobachtung:
- [RegisterDialog.vue](/mnt/share/torsten/Programs/YourPart3/frontend/src/dialogues/auth/RegisterDialog.vue) ist funktional, aber nutzt wenig Hilfetext, kaum Inline-Validierung und schwer lesbare Fehlerpfade.
Empfehlung:
- Feldgruppen strukturieren
- Passwortlogik und Sprachwahl klarer erklaeren
- Fehler am Feld statt nur global rueckmelden
### P2-4: Forum hat guten Einstieg, aber zu wenig Orientierung im Schreiben-und-Lesen-Wechsel
Beobachtung:
- [ForumView.vue](/mnt/share/torsten/Programs/YourPart3/frontend/src/views/social/ForumView.vue) mischt Themenliste und Neuerstellung in einem einfachen Toggle.
- Es fehlt eine staerkere Fuehrung, wann man lesen und wann man schreiben soll.
Empfehlung:
- Schreibmodus staerker vom Lesemodus absetzen
- Entwurf, Abbruch und Rueckkehr klarer machen
### P2-5: Vokabeltrainer ist funktional breit, aber als Lernpfad noch nicht klar genug
Beobachtung:
- Anlegen, Abonnieren, Kapitel, Kurs, Lektion und Uebung sind einzeln verbessert, bilden aber noch keinen vollkommen klaren End-to-End-Lernpfad.
Empfehlung:
- Informationsarchitektur entlang von:
- entdecken
- beitreten
- lernen
- ueben
- bearbeiten
### P2-6: Falukant ist visuell stark, aber in taeglichen Routineablaeufen noch nicht effizient genug
Beobachtung:
- Statusleiste und Einstiege sind besser, aber Arbeitsablaeufe ueber mehrere Unterseiten bleiben kognitiv schwer.
Empfehlung:
- Top-5-Routinen definieren
- dafuer direkte Folgeaktionen aus Status und Uebersichten anbieten
### P2-7: Admin-Flaechen haben zu wenig gemeinsame Bedienlogik
Beobachtung:
- einzelne Admin-Seiten sind moderner, aber Such-, Editier- und Speichermuster unterscheiden sich weiterhin.
Empfehlung:
- gemeinsames Admin-Muster fuer Suche, Detailansicht, Editieren und Speichern definieren
### P2-8: Match3 hat gute Spieloberflaeche, aber Meta-Interaktion ist noch zu verstreut
Beobachtung:
- Spielstatus, Levelbeschreibung, Statistiken und Steuerung konkurrieren um Aufmerksamkeit.
Empfehlung:
- klare Prioritaet:
- Spielbrett
- aktuelles Ziel
- verbleibende Zuege
- Meta-Infos nur sekundär
### P2-9: Rueckwege sind nicht ueberall gleich gut sichtbar
Bereiche:
- Vokabel-Unterseiten
- Forum-Themen
- Falukant-Unterseiten
- Admin-Details
Empfehlung:
- gemeinsames Rueckwegmuster definieren
- nicht nur einzelne Buttons, sondern konsistente Bereichsorientierung
### P2-10: Leere Zustände sind nicht systematisch genug
Beobachtung:
- teilweise vorhanden, aber sehr uneinheitlich in Ton, Handlungsangebot und Sichtbarkeit.
Empfehlung:
- Standard fuer:
- keine Daten
- keine Treffer
- noch nicht gestartet
- keine Berechtigung
### P2-11: Mobile Nutzbarkeit ist verbessert, aber nicht abschließend entlang echter Kernaufgaben geprüft
Empfehlung:
- echter Geräte-/Viewport-Durchgang entlang der Kernszenarien
## P3-Probleme
### P3-1: Button-Semantik und Farblogik sind noch nicht vollkommen systematisch
Beobachtung:
- globale Buttons sind modernisiert, lokale Altvarianten bestehen weiter.
### P3-2: Teilweise alte Feld- und Listenmuster in Spezialbereichen
### P3-3: Headline-Hierarchien sind nicht in allen Ansichten gleich klar
### P3-4: Dialoginhalte wirken je nach Bereich unterschiedlich dicht
### P3-5: Tabellen haben uneinheitliche Leselogik und Aktionsplatzierung
### P3-6: In einigen Bereichen ist unklar, welche Aktion primaer und welche optional ist
### P3-7: Beta-/Systemhinweise koennen in Teilen ruhiger und weniger redundant werden
### P3-8: Einige Views nutzen sehr lange vertikale Inhaltsflaechen ohne Zwischenanker
### P3-9: Inline-Hilfen und Tooltips sind in komplexen Bereichen noch unterentwickelt
### P3-10: Touch-/Hover-Verhalten ist nicht in allen Spezialviews gleich robust
### P3-11: Message- und Error-Wording ist noch nicht konsistent
### P3-12: Manche Dialoge und Formulare sind auf Desktop gut, aber auf enger Breite nur ausreichend
### P3-13: Such- und Filterbereiche koennten staerker standardisiert werden
## P4-Punkte
### P4-1: Mikrointeraktionen in Karten, Listen und Toolbars weiter harmonisieren
### P4-2: Badge- und Statusdarstellungen semantisch weiter schaerfen
### P4-3: Fokus- und Hover-Zustaende in Spezialkomponenten weiter angleichen
### P4-4: Editorbereiche visuell und bedienlogisch weiter vereinheitlichen
### P4-5: Leichte Textkuerzungen fuer schnellere Scanbarkeit in Hero-Bereichen
### P4-6: Weitere Feinarbeit an Footer/Fensterleiste in langen Nutzungssessions
## Bereichsspezifische Kurzbewertung
### Shell und Navigation
- deutlich verbessert
- noch offen: inhaltliche Priorisierung, Rueckwege, Endabnahme kleiner Screens
### Einstieg ohne Login
- stark verbessert
- noch offen: Zugangspfad fokussierter gegen Story-Inhalt absetzen
### Registrierung/Login
- funktional ok
- UX-seitig noch zu wenig gefuehrt und rueckmeldearm
### Forum
- guter Ueberblick, aber Schreib-/Lesefluss noch nicht ideal getrennt
### Vokabeltrainer
- optisch konsistent, aber noch kein vollkommen klarer End-to-End-Lernpfad
### Falukant
- visuell stark, fachlich noch der anspruchsvollste Bedienbereich
### Admin
- einzelne Ansichten verbessert, gemeinsame Admin-Bedienlogik fehlt noch
### Minigames
- Match3 solide, aber Status-/Metaebene kann bedienlogisch weiter fokussiert werden
## Priorisierte Umsetzung nach U1
### Paket U1-A
- Feedbacksystem vereinheitlichen
- Formularvalidierung sichtbar machen
- Scroll- und Sticky-Logik historischer Sonderfaelle bereinigen
### Paket U1-B
- Navigation und Rueckwege nach Aufgaben priorisieren
- Leere Zustände und Systemzustände standardisieren
### Paket U1-C
- Vokabeltrainer-Lernpfad schärfen
- Falukant-Routinen entschlacken
- Admin-Bedienmuster vereinheitlichen
### Paket U1-D
- Mobile Kernaufgaben-Endabnahme
- Konsistenz-Feinschliff auf P3/P4-Niveau
## Fazit
Die App ist gestalterisch deutlich weiter als vor dem Redesign, aber bedienlogisch noch nicht auf demselben Reifegrad. Die größten UX-Hebel liegen nicht mehr in Farben oder Layout, sondern in:
- konsistentem Feedback
- klareren Aufgabenflüssen
- sichtbarerer Validierung
- entschlackten Fachbereichen
- sauberer Priorisierung von Aktionen
Phase U1 ist damit abgeschlossen. Die naechste sinnvolle Arbeitsphase ist `U2: Shell, Navigation und Feedback`.