20 KiB
20 KiB
PORTA UI-Enhancements (Team-Meeting Inputs, 2026-04-07)
Beschreibung und Kontext
Quelle: Transkript POL-Weekly vom 7. April 2026 (c-work/1-plan/input2026-04-ui-enhancement-inbputs.txt). Philipp Graf und Dominic Largo haben PORTA als echte Erstnutzer (KMU-Perspektive, nicht IT-heavy) getestet; Patrick Motsch und das Team haben Anforderungen präzisiert.
Produkt: PowerOn PORTA — Multi-Tenant SaaS mit AI-Agent-Workspace, siehe wiki/README.md.
Business-Treiber: Die Hürde bis zur ersten sinnvollen Interaktion muss sinken. Ohne klare Userführung und sichtbares Vertrauen springen potenzielle Kunden ab, bevor sie den Mehrwert (ein Abo statt vieler, Datenkontrolle, Schweizer Gegenpartei) erleben. Das UI ist explizit als Aushängeschild und Human-Reaction-Hebel genannt.
Abhängigkeiten: Copy und rechtliche Zulässigkeit für Marken-/Partner-Hinweise; Billing-Daten müssen für Transparenz-UI verfügbar sein (Gateway/Billing bereits teilweise vorhanden laut Diskussion).
Risiko bei Nicht-Umsetzung: Weiterhin hohe Abbruchrate nach Login; AI-Workspace wirkt «versteckt» in typischen Fensterbreiten; Vertrauen bleibt abstrakt statt greifbar.
Fokus und kritische Details
Aus dem Meeting extrahierte UI/UX-Schwerpunkte
| Thema | Nutzerstimme / Intention | Konsequenz für UI |
|---|---|---|
| Vertrauen & Substanz | Nicht primär ISO-Badge; wichtig ist z. B. «Daten hosted in der Schweiz» (konkreter Anbieter/Standort sichtbar) | Trust-Badges/Copy: Hosting-Ort, ggf. Anbietername; kurze, scanbare Vertrauenszeile |
| Marken- & Partneranker | Swiss Registered (®) am Logo; «Recommended by» mit wenigen, kuratierten Partnern (Valion, PamoCreate, Swiss AI Association, Prescos, Soha Treuhand) | Footer/Landing/Login: Partner-Strip; Markenhinweis konsistent |
| Erste Datenanbindung | Sorge: «Baue ich Scheisse?» — Encoding/Sicherheit nicht fühlbar | Onboarding-Microcopy: Read-only/sichere Verbindung, «nichts kaputtmachen», Rollback/Wiederherstellung wo zutreffend |
| AI-Workspace: Eingabe finden | «Wo tippe ich die Frage?» — kleines Fenster, Plus, Hover; Vergleich zu Cloud/ChatGPT mit klarem Fragebalken | Primäre Prompt-Zeile dominant; sekundäre Aktionen nicht vor Eingabe verstecken |
| Layout / Viewports | Schmales Fenster (nicht Mobile, nicht Wide): Chat/Input verschwindet praktisch | Breakpoints testen; Mobile (hoch/schmal) vs Desktop (breit) als zwei klare Modi; mittlere Breiten nicht vernachlässigen |
| Neuer Chat / Kontext | Erwartung: schnell «neuer Chat» wie gewohnt; fehlte als klare Handlung | Sichtbarer CTA «Neuer Chat» / Kontext-Reset analog Erwartung aus Chat-Tools |
| Datei / Prompt | Drag-in-Prompt erwünscht; Entdeckbarkeit war mühsam | Klare Dropzone oder Hinweis in leerem Zustand |
| Pricing & Billing Auffindbarkeit | Erste Session: «Wo steht das Pricing?» Pfad Admin → Benutzer → Billing wirkt versteckt | Ersteinstieg: Link oder Teaser zu Kosten/Guthaben; ggf. leere States mit «So siehst du dein Budget» |
| Informationsdichte | «Flut der Informationen oder der Logik» — Berufsalltag vs. zu viel parallel | IA: Schichten, progressive Offenlegung; weniger gleichzeitig auf Startscreens |
Kritische Details
- Int vs. Prod: Tester war teils auf falscher Instanz — für UX-Tests einheitliche Test-Links kommunizieren (Prozess, nicht nur UI).
- Rollen: Admin vs. User — Billing nur für Admins sichtbar; Empty States für User müssen trotzdem Orientierung geben («Frag deinen Admin»), ohne frustrierende Sackgassen.
- Recht/Marken: Partner-Logos und Formulierungen «Recommended by» mit Partnern abstimmen.
Ziel und Nicht-Ziele
Ziel:
- Nach Login und im AI-Workspace ist die primäre Eingabe (Frage/Prompt) in typischen Viewports sofort erkennbar.
- Vertrauen ist ohne Deep-Dive erfassbar: Schweizer Hosting-Hinweis, Marken-/Partner-Elemente wie im Meeting skizziert.
- Onboarding zur ersten Connector-/Datenaktion reduziert Angst («sicher verbinden») durch klare Kurztexte.
- Billing/Usage ist für berechtigte Rollen auffindbarer; erste Orientierung zu Kosten ohne Graben durch Administration.
- Responsive Verhalten für schmale Desktop-Fenster und Mobile ist konsistent definiert und getestet.
Explizit NICHT:
- Neues Produkt-Splitting (z. B. «Teamspot») oder komplette Pricing-/Usage-Modelle neu erfinden — nur UI/IA/Discoverability und Anbindung an bestehende Billing-Fakten.
- ISO-Zertifizierung als Projekt; höchstens spätere Verknüpfung zu Compliance-Docs in
e-compliance/. - Vollständige Ersetzung der Produktstory zu externen LLM-Abos (Copy kann ergänzt werden, kein Marketing-Whitepaper im Scope).
Betroffene Module
- Frontend Nyla: AI-Workspace-Layout, globale Shell (Login/Landing), Navigation/Empty States, ggf. Trust-Strip-Komponente, Breakpoints.
- Gateway: nur falls neue/angereicherte Felder für Trust-Copy (Hosting-Text) oder Billing-Summary für Dashboard nötig — zunächst statische/config-gestützte Copy prüfen.
- DB-Migration: nein (voraussichtlich).
- Platform / Wiki: nach Release
b-reference/frontend-nyla/architecture.mdoderplatform/navigation.mdbei Routing-Änderungen.
Codebase-Audit (Ist-Zustand, frontend_nyla)
Stand: Abgleich mit Repo-Pfaden unter poweron/frontend_nyla/src/. Tiefergehende Systemregeln: b-reference/frontend-nyla/architecture.md, Navigation: b-reference/platform/navigation.md.
Bereits vorhanden (positiv)
| Bereich | Was existiert | Wo im Code |
|---|---|---|
| 3-Spalten-Workspace | Links UnifiedDataBar (Chats / Dateien / Quellen), Mitte ChatStream + WorkspaceInput, rechts Activity/Preview; resize handles; Collapse links/rechts |
pages/views/workspace/WorkspacePage.tsx |
| Mobile (≤1024px) | Oberleiste «Workspace | Activity |
| Dateien per Drag | Overlay «Dateien hier ablegen» auf der gesamten Center-main-Fläche; Upload + pendingFiles |
WorkspacePage.tsx (onDragEnter/Drop auf <main>) |
| Prompt-Zeile | Textarea, + Datei, optional Quellen-Picker, Provider-Multi-Select, Voice, Send/Stop; @file Autocomplete |
pages/views/workspace/WorkspaceInput.tsx |
| Drag auf Prompt-Bereich | Nur application/tree-items (Baum) und application/chat-id (Chat-Referenz) — kein natives File-Drop im Input-Wrapper (Dateien laufen über Parent-main) |
WorkspaceInput.tsx (_handlePromptDragOver / _handlePromptDrop) |
| Neuer Chat | workspace.resetToNew an UDB gebunden; in Chats-Tab Toolbar Button + mit title="Neuer Chat" |
WorkspacePage.tsx → UnifiedDataBar → ChatsTab.tsx |
| Billing-Funktionalität | BillingDataView: Tabs Übersicht / Statistik / Transaktionen, Balance Cards, Hinweis auf Admin-Pfad für Aufladung |
pages/billing/BillingDataView.tsx, hooks/useBilling.ts, api/billingApi.ts |
| Guthaben im UI | User-Menü: Eintrag «Guthaben» → /billing/transactions |
components/Navigation/UserSection.tsx |
| Quellen / Verbindungen | Ausführlicher SourcesTab (Browse, Active Sources, Neutralize) |
components/UnifiedDataBar/SourcesTab.tsx |
| Login | Logo, Credentials, Microsoft/Google, Registrierung, Kurz-Disclaimer KI/Datenschutz | pages/Login.tsx, Login.module.css |
| Rechtstexte | Modal «Rechtliche Hinweise» + Links zu statischen HTML-Seiten | UserSection.tsx |
Konkrete Issues (Lücken vs. Meeting-Feedback)
| # | Problem | Ursache im Code / Verhalten |
|---|---|---|
| I1 | Eingabe wirkt «versteckt» | Chat-Fläche frisst vertikal Platz; Prompt unten, enges Fenster + zwei Sidebars → Mittelspalte wird sehr schmal (>1024px, beide Sidebars offen). Kein Empty-State in ChatStream, der die Eingabe einrahmt oder zur Aktion führt. |
| I2 | «Wo tippe ich?» / kein ChatGPT-Balken | Textarea ist funktional, aber Placeholder auf Englisch (Type a message...); visuell keine «Hero»-Eingabe. Sekundäraktionen (+, 🔗, Voice, Provider) stehen in einer Zeile neben dem Feld — bei wenig Breite wirkt das «nur ein Plus». |
| I3 | Neuer Chat unsichtbar | Nur + in ChatsTab Toolbar; wenn linke Spalte eingeklappt oder Mobile-User nicht auf Tab «Chats» wechselt, fehlt ein zentrale CTA in der Mitte. |
| I4 | Schmale Desktop-Breite (ca. 1025–1280px) | isMobile ist false, also beide Sidebars standardmäßig aktiv (280px + 320px + Handles). Zentrum flex: 1, minWidth: 0 — Eingabe bleibt im DOM, wirkt aber «Wischiwaschi» oder abgeschnitten. Meeting: «A4-Fenster» genau diese Zone. |
| I5 | Dateien: Entdeckbarkeit | Vollflächen-Drop existiert, aber ohne dauerhaften Hinweis im leeren Chat; Nutzer erwarten oft Drop direkt auf das Textfeld. |
| I6 | Vertrauen / Schweiz / Partner | Login: kein Hosting-Hinweis, kein Partner-Strip, kein ® am Logo in der UI (nur Bildasset — rechtlich/Marken separat klären). Compliance-Texte eher in e-compliance/ und statischen HTML, nicht scanbar auf Login. |
| I7 | Billing / Pricing Auffindbarkeit | Funktional stark (BillingDataView), aber Einstieg primär: Nav-Baum (GET /api/navigation, siehe Gateway NAVIGATION_SECTIONS) + verstecktes User-Menü «Guthaben». Kein Dashboard-Teaser nach erstem Login. |
| I8 | Connector-Sorge | SourcesTab ist technisch mächtig, aber ohne kuratierte Erstnutzer-Copy («Verbindung ist read-only / nichts kaputt») am Einstieg — Meeting-Thema «baue ich Scheisse». |
| I9 | Informationsdichte | Workspace + UDB + rechte Spalte parallel; kein progressives Onboarding in der Mitte (ausser globalem OnboardingWizard nach Google). |
Umsetzungsplan (integriert)
Ziele: Issues I1–I9 adressieren, ohne Billing-Logik oder Gateway-Tarife neu zu erfinden. Reihenfolge nach Aufwand × Wirkung für KMU-Erstnutzung.
Phase A — Quick Wins (1–3 Tage)
| Task | Änderung | Dateien / Hinweise |
|---|---|---|
| A1 | Placeholder + primäre Labels DE (und i18n Keys, falls locales für Workspace genutzt werden soll) |
WorkspaceInput.tsx — z. B. «Frage stellen oder @Dateiname für Kontext» |
| A2 | Empty State in der Mitte: kurzer Titel, Bullet «Hier unten Frage eingeben», «Dateien auf die Fläche ziehen», Button Neuer Chat (ruft onCreateNew/resetToNew — Props von WorkspacePage durchreichen) |
ChatStream.tsx + optionell schmale Props von WorkspacePage.tsx |
| A3 | Neuer Chat zusätzlich: Button in der mittleren Kopfzeile (nur Desktop) oder neben Mobile-«Workspace»-Leiste, sichtbar ohne UDB | WorkspacePage.tsx |
| A4 | Billing-Hinweis für Nicht-Admins: ein Zeiler im Empty State oder unter Prompt mit Link zu Hilfe («Guthaben: Administrator») — Text mit BillingDataView / BalanceCard abgleichen |
ChatStream oder WorkspacePage, Copy-only |
Phase B — Layout & Breakpoints (3–5 Tage)
| Task | Änderung | Dateien / Hinweise |
|---|---|---|
| B1 | Zwischen-Breakpoint (z. B. ≤1280 oder ≤1360): automatisch linke und/oder rechte Sidebar einklappen oder nur eine Sidebar standardmäßig offen, damit mindestens ~480px für die Mittelspalte garantiert sind |
WorkspacePage.tsx — useEffect auf innerWidth + lokaler State, dokumentierte Schwellwerte |
| B2 | Optional: minWidth auf <main> mit «Seite zu schmal»-Hinweis statt silent squeeze |
WorkspacePage.tsx |
| B3 | Visuelle Hierarchie Prompt: Eingabezeile leicht hervorgehoben (Schatten/Rand), ggf. erste Zeile höher (minHeight) |
WorkspaceInput.tsx oder ausgelagertes CSS Module |
| B4 | E2E/Visuell: Viewports 1100 / 1200 / 1280 / 1440 in Testplan festhalten | Playwright oder manuelle Matrix |
Phase C — Vertrauen & Marketing-UI (2–4 Tage, abhängig von Legal)
| Task | Änderung | Dateien / Hinweise |
|---|---|---|
| C1 | Wiederverwendbare TrustFooter / TrustStrip: Zeile Hosting Schweiz (Formulierung mit Legal abgleichen — ggf. Verweis auf e-compliance/security-overview.md) |
Neue Komponente unter components/, einbinden in Login.tsx, optional Register, optional MainLayout Footer |
| C2 | Recommended by — statische Logos/Links (max. 5) nur nach Partner-Freigabe | Gleiche Komponente; Assets unter public/ |
| C3 | Swiss ® am Logo nur nach Markenfreigabe — sonst Textlink «Marke» | Login.module.css / Layout-Logo |
| C4 | SourcesTab oder erster Besuch «Quellen»: ein Info-Banner (1–2 Sätze) zu sicherer Verbindung / keine Zerstörung von Quelldaten — mit Product Owner fact-checken | SourcesTab.tsx oben |
Phase D — Billing-Discovery (2–3 Tage)
| Task | Änderung | Dateien / Hinweise |
|---|---|---|
| D1 | Nach Login: einmaliger Banner oder Home-Teaser «Guthaben & Nutzung» mit Link zu /billing/transactions (nur wenn Route erlaubt — Permission prüfen wie andere Nav-Items) |
MainLayout.tsx, App.tsx Home-Route, oder dedizierte HomePage — je nachdem wo Landing liegt |
| D2 | Optional: kleine Balance-Zahl in UserSection neben Avatar (nur wenn API schon geladen wird und Mandate eindeutig) — Performance/UX mit useBilling prüfen |
UserSection.tsx |
| D3 | Gateway: Navigations-Label/Reihenfolge für Billing in «Meine Sicht» nach oben ziehen (wenn gewünscht) — kein Frontend-Workaround ohne Backend | gateway NAVIGATION_SECTIONS / mainSystem.py (siehe Wiki navigation.md) |
Phase E — Feinschliff (laufend)
| Task | Änderung |
|---|---|
| E1 | WorkspaceInput: optional natives File im Prompt-onDragOver/Drop spiegeln (gleiche Logik wie WorkspacePage._uploadAndAttach) — dann expliziter Drop auf Eingabe |
| E2 | i18n: alle neuen Strings in locales/ |
| E3 | Nach Merge: b-reference/frontend-nyla/architecture.md um Workspace-UX-Notizen ergänzen |
Abhängigkeiten & Risiken
- D3 erfordert Gateway-Deploy und gehört fachlich zu «IA», nicht nur CSS.
- C1–C3 müssen mit Legal/Marketing sign-off; keine konkreten Hosting-Anbieter-Namen ohne Vertragslage.
- D1 braucht klare Regel, wann der Banner nicht nervt (localStorage
dismissed).
Entscheidungen
| Datum | Entscheidung | Begründung |
|---|---|---|
| 2026-04-07 | Plan aus Meeting-Transkript abgeleitet; Fokus UI/UX, nicht Pricing-Tarife | Entscheidungen zu Tarifen und Modellen sind separat zu treffen |
| 2026-04-07 | Codebase-Audit gegen frontend_nyla — Umsetzung in Phasen A–E |
Issues I1–I9 und bestehende Bausteine im Dokument festgehalten |
Weitere Einträge nach UX-Review und Abstimmung Partner/Hosting-Formulierung.
Umsetzungs-Checkliste
Die detaillierte Aufgabenzerlegung steht in Umsetzungsplan (Phasen A–E). Hier die Cross-Cutting-Checks:
Phase A (Quick Wins)
- A1:
WorkspaceInput.tsx— DE-Placeholder / Copy - A2:
ChatStream.tsx+ Props — Empty State + Kurzhelp - A3:
WorkspacePage.tsx— «Neuer Chat» sichtbar ohne UDB - A4: Copy für Nicht-Admins (Guthaben)
Phase B (Layout)
- B1–B2:
WorkspacePage.tsx— Zwischen-Breakpoint / Sidebar-Strategie - B3:
WorkspaceInput.tsx— visuelle Hierarchie Eingabe - B4: Viewport-Testmatrix dokumentiert
Phase C (Trust)
- C1–C3: Trust-Komponente + Login/Register/Layout — Legal OK
- C4:
SourcesTab.tsx— Sicherheits-Banner
Phase D (Billing-Discovery)
- D1: Home / nach Login — Teaser-Link Billing
- D2: optional
UserSection.tsx— Balance-Snippet - D3: optional Gateway —
NAVIGATION_SECTIONSBilling-Prominenz
Phase E / Plattform
- E1: optional File-Drop auf Prompt synchron zu
WorkspacePage - E2:
locales/*für neue Strings - E3: Wiki
b-reference/frontend-nyla/architecture.mdaktualisieren
Querschnitt
- API-Endpunkte: nur bei D2/D3 oder neuen Summary-APIs nötig
- DB-Migration: nein (Planstand)
- RBAC: Billing-Routen nur anzeigen wenn wie heute erlaubt
- Neutralisierung: nur Copy in C4, kein Verhalten
- Navigation / Routing: nur bei D1/D3
- Billing-Impact: Darstellung/Auffindbarkeit, keine Tariflogik
Akzeptanzkriterien
| # | Kriterium (Given-When-Then) | Prio |
|---|---|---|
| 1 | Given ein eingeloggter User ohne verbundene Datenquellen, When er den AI-Workspace öffnet (Desktop ≥1280px und Mobile-Viewport), Then ist die Haupt-Eingabe für Prompt/Frage ohne Hover oder Scrollen in den ersten sichtbaren 50 % des Hauptbereichs erkennbar | must |
| 2 | Given schmales Desktop-Fenster (z. B. 900–1024px Breite), When der AI-Workspace angezeigt wird, Then bleibt die Prompt-Eingabe zugänglich (kein «verschwindendes» Chatfenster ohne Alternativlayout) | must |
| 3 | Given Login- oder Startansicht, When der User die Seite scannt (5–10 Sekunden), Then sind mindestens ein Schweiz-Hosting-Hinweis und der Partner-/Recommended-by-Block gemäss kuratierter Liste sichtbar oder mit einem klaren «Vertrauen»-Einstieg erreichbar | should |
| 4 | Given User mit Rolle Admin, When er nach dem ersten Login Orientierung zu Kosten sucht, Then führt ein in der UI sichtbarer Einstieg innerhalb ≤2 Klicks zur Billing-/Usage-Übersicht (bestehender Pfad darf erhalten bleiben, muss aber nicht mehr alleinige Entdeckungsquelle sein) | should |
| 5 | Given AI-Workspace, When der User eine neue Unterhaltung beginnen will, Then ist eine explizite «Neuer Chat»- oder gleichwertige Handlung sichtbar und erklärt sich ohne externe Doku | should |
| 6 | Given leerer Chat ohne Nachrichten, When der User eine Datei einbinden will, Then ist erkennbar, ob und wie Drag-and-Drop in den Prompt funktioniert (Text oder Dropzone) | could |
Testplan
| ID | AC | Art | Automatisiert | Repo-Pfad | Status |
|---|---|---|---|---|---|
| T1 | 1,2 | e2e / manuell Viewports | teilweise | frontend_nyla — WorkspacePage.tsx bei 1100/1200/1280/1440px |
pending |
| T2 | 3 | manuell UX-Review | nein | — | pending |
| T3 | 4 | manuell Rolle Admin | nein | — | pending |
| T4 | 5,6 | manuell Explorer/Safari/Edge | nein | — | pending |
Links
- Input: input2026-04-ui-enhancement-inbputs.txt
- Produkt-Überblick: README.md
- Frontend-Referenz: b-reference/frontend-nyla/architecture.md
- Navigation API: b-reference/platform/navigation.md
- Billing (Backend-Kontext): b-reference/gateway/billing.md
- Compliance (Copy-Grundlage): e-compliance/security-overview.md
Code (Haupt-Einstiegspunkte, Repo frontend_nyla)
-
src/pages/views/workspace/WorkspacePage.tsx— Layout, Mobile, Drag-Drop, UDB -
src/pages/views/workspace/WorkspaceInput.tsx— Prompt, Anhänge, STT -
src/pages/views/workspace/ChatStream.tsx— Nachrichtenliste -
src/components/UnifiedDataBar/ChatsTab.tsx— Chat-Liste,+Neuer Chat -
src/components/UnifiedDataBar/SourcesTab.tsx— Verbindungen / Quellen -
src/pages/Login.tsx— Login-Shell -
src/components/Navigation/UserSection.tsx— Guthaben-Menü -
src/pages/billing/BillingDataView.tsx— Nutzer-Billing -
PR: …
-
Issue: …
Abschluss
- b-reference/ aktualisiert (
frontend-nyla/architecture.md, ggf.platform/navigation.md) - TOPICS.md aktualisiert (falls neues Thema «Trust-UI» o. ä.)
- Dieses Dokument →
z-archive/verschoben (nach Release)