122 lines
6.6 KiB
Markdown
122 lines
6.6 KiB
Markdown
# UI/UX-Audit Pyramid (2026-10-08)
|
||
|
||
Grundlage: Code-Analyse der Navigation + automatische Screenshot-Tour
|
||
`integration_test/ui_audit_tour_test.dart` (35 Zustände, Handy 1080×2340 und
|
||
PC 1600×1000, zwei Testkonten, Bilder in `build/ui_audit/`, `p_*` = Handy,
|
||
`d_*` = PC). Neu erzeugen:
|
||
|
||
```
|
||
$env:PYRAMID_PROFILE_DIR="$env:USERPROFILE\.pyramid-autopilot\profile1"
|
||
flutter test integration_test/ui_audit_tour_test.dart -d windows
|
||
```
|
||
|
||
## 1. Wie die Navigation heute funktioniert
|
||
|
||
Vier Zustände steuern, was man sieht (`lib/core/app_state.dart`):
|
||
|
||
| Zustand | Werte | Wirkung |
|
||
|---|---|---|
|
||
| `activeSpaceIdProvider` | `dms`, `rooms`, Space-ID | welche Liste links/unten steht |
|
||
| `activeRoomIdProvider` | Raum-ID oder leer | welcher Chat offen ist |
|
||
| `viewModeProvider` | `chat`, `voice` | Hauptbereich zeigt Chat **oder** Anrufansicht |
|
||
| `activeModalProvider` | `none`, `settings`, `search` | Overlay |
|
||
|
||
**Handy:** Hamburger öffnet ein schmales Seitenmenü (unbeschriftet: Logo =
|
||
Chats, orangenes „R“ = Räume, Space-Kürzel, „+“, Zahnrad). Darunter die
|
||
Liste; ein Chat gleitet darüber; „Anruf“ ist ein weiterer Vordergrund.
|
||
**PC:** Leiste (Spaces) + Liste + Hauptbereich (+ Mitglieder rechts).
|
||
|
||
Was wohin führt:
|
||
- Liste → Chat (alle Listen), Sprachkanal antippen → beitreten (Mini-Leiste
|
||
unten), nochmal antippen → verlassen.
|
||
- Chat-Kopf (nur DM) → Anruf/Video → Anrufansicht. **Gruppen: kein Anruf.**
|
||
- ⋮ (Handy) → Suche, Mitglieder. PC-Kopf: Threads (ohne Funktion), Anheften,
|
||
Suche, Mitglieder.
|
||
- Mini-Leiste → Anrufansicht; Anrufansicht „Minimieren“ → zurück zum Chat.
|
||
- Zahnrad (Profilbalken unten **und** Seitenmenü) → Einstellungen.
|
||
|
||
## 2. Sackgassen und tote Elemente (alle behoben, siehe 5.)
|
||
|
||
| # | Wo | Was passiert | Schwere |
|
||
|---|---|---|---|
|
||
| S1 | Gegenseite legt auf / Anruf scheitert / Sprachkanal bricht ab | Ansicht bleibt auf „Anruf“: englische Leerseite „No active call – Join a voice room“, Handy ohne Zurück (p_18) | hoch |
|
||
| S2 | dieselbe Leerseite | LiveKit-Fehlermeldung wird dort nicht angezeigt (stiller Fehler) | hoch |
|
||
| S3 | Gruppenchat (Handy + PC) | kein Anruf-Knopf – Gruppenanruf-Code nicht erreichbar (p_06, d_06) | hoch |
|
||
| S4 | PC-Chatkopf „Threads“ | Knopf ohne Funktion | mittel |
|
||
| S5 | Space betreten (PC) | rechts nur „Wähle einen Chat aus“, letzter/erster Kanal öffnet nicht (d_04) | mittel |
|
||
| S6 | Anruf läuft (PC) | Steuerung doppelt: Anrufansicht + Mini-Leiste links (d_15) | niedrig |
|
||
|
||
## 3. Befunde nach Bereich
|
||
|
||
**Listen**
|
||
- Haupt-Navigation am Handy versteckt im Seitenmenü, Symbole unbeschriftet
|
||
und teils kryptisch (orangenes „R“-Dreieck für „Räume“) (p_02).
|
||
- „Räume“ listet auch alle Kanäle aus Spaces → doppelt; Sprachkanäle hängen
|
||
ohne Überschrift unten, sehen anders aus als Chats (p_03, p_17).
|
||
- Suchfeld ohne Lupe, eingerückter Text.
|
||
- Profilbalken unten + Anruf-Leiste (zweizeilig) belegen am Handy ~25 % der
|
||
Höhe (p_12, p_17).
|
||
|
||
**Chats**
|
||
- Gruppen sehen aus wie „#Kanal“ (Kopf, Liste) statt wie Gruppen.
|
||
- Leerer Chat englisch („No messages yet“), PC-Leerzustand halb englisch.
|
||
- Mitgliederliste: eckige Avatare (sonst rund), man selbst nicht als „Du“.
|
||
|
||
**Anrufe**
|
||
- Anrufansicht für reine Sprachanrufe: riesige schwarze Video-Kachel mit
|
||
Initial (p_15). Eigene Kachel zeigt „D“ (von „Du“) statt eigenem Avatar.
|
||
Keine Gesprächsdauer.
|
||
- Kopf-Symbole „Hero/Grid“ und „Minimieren“ unklar (englische Tooltips).
|
||
- Mini-Leiste „VOICE CONNECTED“ (englisch) auch bei 1:1-Anrufen; Mikro/Kopfhörer
|
||
lila gefüllt = „an“ – liest sich wie Warnung; in der Anrufansicht ist die
|
||
Logik umgekehrt (rot = stumm).
|
||
- Annehmen-Fenster: Platzhalter-Symbol statt Avatar, kein „Sprach-/Videoanruf“.
|
||
|
||
**Allgemein**
|
||
- Englische Reste (Bildschirm-Auswähler erledigt; Anrufansicht, Leerzustände).
|
||
- Statusleisten-Streifen in anderer Farbe über Overlays (p_07, p_09).
|
||
- „Tastaturkürzel“ in den Handy-Einstellungen.
|
||
|
||
## 4. Konzept: modern, aufgeräumt, übersichtlich
|
||
|
||
Leitlinie: **WhatsApp für Chats, Discord für Server/Sprachkanäle** – beides
|
||
in einer klaren Struktur, nichts doppelt, kein Zustand ohne Weg zurück.
|
||
|
||
1. **Navigation Handy:** untere Leiste mit beschrifteten Tabs statt
|
||
Seitenmenü – *Chats* (DMs + Gruppen zusammen, nach Aktivität), *Server*
|
||
(Spaces als Karten → Kanäle, Sprachkanäle mit Live-Teilnehmern), *Du*
|
||
(Profil, Status, Einstellungen). Profilbalken unten entfällt.
|
||
2. **Listen:** einheitliche Kacheln; Space-Kanäle gruppiert in „Textkanäle“ /
|
||
„Sprachkanäle“; Sprachkanal-Kachel zeigt Teilnehmer-Avatare; Kanäle eines
|
||
Spaces erscheinen nicht zusätzlich unter „Räume“.
|
||
3. **Anruf-Logik (ein Modell):** 1:1-Anruf, Gruppenanruf (Gruppenchat) und
|
||
Sprachkanal (Server) teilen eine Anrufansicht und eine kompakte
|
||
„Anruf-Pille“. Anruf endet → automatisch zurück zum Chat, mit kurzem
|
||
Hinweis („Anruf beendet · 3:12“).
|
||
4. **Anrufansicht:** Sprachanruf = große runde Avatare mit Sprech-Ring,
|
||
Name, Dauer (wie WhatsApp/Discord); Video/Bildschirm = Kacheln bzw.
|
||
großes Bild + Filmstreifen. Steuerung einheitlich: neutral = an,
|
||
rot durchgestrichen = aus.
|
||
5. **Visuell:** runde Avatare überall (echte Bilder), Kopfzeilen mit Avatar +
|
||
Untertitel (Mitgliederzahl/online), Leerzustände mit Handlung („Schreib die
|
||
erste Nachricht“), ruhigere Flächen (Karten statt Linien), einheitliche
|
||
Abstände/Radien, vollständig deutsch.
|
||
|
||
## 5. Sofort behoben (diese Runde)
|
||
|
||
S1–S6, englische Reste in Anruf/Leerzuständen, Annehmen-Fenster mit Avatar
|
||
und Anrufart, eigene Kachel mit eigenem Avatar, „Du“ in der Mitgliederliste,
|
||
„Tastaturkürzel“ nur am PC – Details in PROGRESS.md.
|
||
|
||
## 6. Bernds Entscheidungen (2026-10-09) und Umsetzung (0.1.42)
|
||
|
||
| Frage | Entscheidung | Umsetzung |
|
||
|---|---|---|
|
||
| Navigation Handy | Seitenmenü; untere Leiste als Mockup zum Vergleich | Einstellung „Navigation“ (Standard Seitenmenü), `layout/mobile_tabs.dart`, Vergleichsbild `build/ui_vergleich/1_navigation_vergleich.png` |
|
||
| Chatliste | Alles in „Chats“ | DMs + Gruppen ohne Server zusammen, Filter-Chips; Server-Kanäle nur im Server |
|
||
| Gruppenanruf | Anruf + Beitreten-Karte | Knopf im Gruppenkopf, Start-Nachricht (Push), Karte „Gruppenanruf läuft · Beitreten“ |
|
||
| Anrufansicht | animierte, aneinandergedrückte Bubbles → (2026-10-10) „aufgeblasene“ Formen bis an die Fensterränder, erst nur Kontur | `call_ui/inflated_layout.dart` + `view/bubble_stage.dart`, Kacheln umschaltbar, Vorschau `integration_test/call_bubbles_demo_test.dart` |
|
||
|
||
Noch offen aus §4: einheitliche Hinweis-Meldungen (Snackbar-Stil), kompaktere
|
||
Anruf-Pille, Abschnitts-Überschriften Text/Sprache in Server-Listen.
|