docs: update audit docs with implementation status and decisions
This commit is contained in:
Ulas Kalayci
@@ -0,0 +1,54 @@
|
|||||||
|
# Oikos Premium UI/UX Audit & Implementation Plan
|
||||||
|
|
||||||
|
Basierend auf den "Design Taste Frontend"-Richtlinien (Vercel-core meets Dribbble-clean, Anti-Slop, High-End) habe ich die Oikos-App auditiert. Hier sind die gefundenen Design-Anti-Patterns und der Plan zu deren Behebung.
|
||||||
|
|
||||||
|
> **Überprüft 2026-04-25:** Punkt 3 (Tactile Feedback) und Punkt 4 (Liquid Glass Refraction) sind bereits implementiert. Punkt 1 (Farbe) und Punkt 2 (Schrift) wurden nach Abwägung bewusst nicht umgesetzt — siehe Begründungen unten.
|
||||||
|
|
||||||
|
## 1. Audit-Ergebnisse (Identifizierte Anti-Patterns)
|
||||||
|
|
||||||
|
### 🟡 The "AI Purple/Blue" Ban (Color Calibration) — Bewusst nicht umgesetzt
|
||||||
|
* **Ist-Zustand:** Die primäre Akzentfarbe (`--_color-accent`) ist auf `#4F46E5` (Indigo) gesetzt. Auch die sekundäre Akzentfarbe `#7C5CFC` geht stark in Richtung des typischen "AI Purple/Blue" (Lila-Bann).
|
||||||
|
* **Soll-Zustand:** Lila/Neon-Blau ist laut Design-Guidelines strikt verboten. Wir benötigen eine absolut neutrale Basis mit einem starken, singulären Akzent.
|
||||||
|
* **Maßnahme:** Umstellung der Akzentfarbe auf ein sattes "Deep Rose" (z.B. `#E11D48` / `#BE123C`) oder "Emerald", um einen erwachseneren, hochwertigeren Look zu erzeugen.
|
||||||
|
* **Entscheidung (2026-04-25):** Nicht umgesetzt. Indigo ist bewusst gewählt, dokumentiert (tokens.css §2) und WCAG-konform (4.93:1 auf weiß). Ein Farbwechsel wäre eine Brand-Entscheidung, kein UX-Bug.
|
||||||
|
|
||||||
|
### 🟡 Deterministic Typography (Anti-Slop) — Bewusst nicht umgesetzt
|
||||||
|
* **Ist-Zustand:** Die App nutzt den standardmäßigen System-Font-Stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...`).
|
||||||
|
* **Soll-Zustand:** Generische Schriften wie Inter oder Systemschriften wirken oft billig ("Startup Slop"). Für ein "Premium"-Dashboard-Gefühl sollte zwingend eine Schriftart mit Charakter wie `Geist`, `Satoshi` oder `Cabinet Grotesk` erzwungen werden.
|
||||||
|
* **Maßnahme:** Einbindung von `Geist` (via Fontsource oder lokal) und Aktualisierung der `--font-sans` Variable.
|
||||||
|
* **Entscheidung (2026-04-25):** Nicht umgesetzt. CLAUDE.md verbietet CDN-Links zur Laufzeit. Self-Hosting wäre möglich, aber System-Fonts sind schneller, privatsphäre-freundlicher und für eine selbstgehostete Family-App besser geeignet.
|
||||||
|
|
||||||
|
### ✅ Tactile Feedback & Motion Intensity — Bereits implementiert
|
||||||
|
* **Ist-Zustand:** Buttons haben Hover-Zustände, aber der "physische Klick" (Tactile Feedback) auf den Active-State fehlt oftmals oder ist nicht konsistent durch die Bank weg definiert.
|
||||||
|
* **Soll-Zustand:** Auf `:active` muss ein `-translate-y-[1px]` oder `scale(0.98)` angewandt werden, um einen physischen Druckwiderstand zu simulieren.
|
||||||
|
* **Maßnahme:** Anpassung der `.btn:active` und `.more-item:active` Selektoren in `layout.css`.
|
||||||
|
* **Status (2026-04-25):** Bereits vorhanden — `.btn:active { transform: scale(0.98); }` in `layout.css`.
|
||||||
|
|
||||||
|
### ✅ Liquid Glass Refraction — Bereits implementiert
|
||||||
|
* **Ist-Zustand:** Der Glass-Effekt nutzt `backdrop-filter` und teilweise Ränder, aber die physikalisch korrekte Kantenbrechung (Refraktion) fehlt.
|
||||||
|
* **Soll-Zustand:** Glassmorphismus benötigt einen 1px "Inner Border" (als `inset` Box-Shadow) aus weiß/transparent, um die Brechung von echtem Glas an der oberen Kante zu simulieren (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`).
|
||||||
|
* **Maßnahme:** Update der `--_glass-shadow-sm` und ähnlichen Variablen in `tokens.css` und `glass.css`.
|
||||||
|
* **Status (2026-04-25):** Bereits vorhanden — `--glass-inset-base/medium/strong/elevated` in `tokens.css §16d`, angewandt in `glass.css` auf Buttons, FAB und Toasts.
|
||||||
|
|
||||||
|
### 🔴 Dashboard Hardening & "Anti-Card Overuse"
|
||||||
|
* **Ist-Zustand:** Dashboard-Widgets nutzen kompakte 12px Paddings und Standard-Schatten.
|
||||||
|
* **Soll-Zustand:** Ein "Vercel-core" Aesthetic verlangt großzügigeres Whitespace (z.B. 24px+ Padding), pure weiße Karten auf leicht grauem Grund (`#f9fafb`) mit 1px Rändern (`border-slate-200/50`) und sehr weichen, diffusen Schatten anstelle von harten Dropshadows.
|
||||||
|
* **Maßnahme:** Erhöhung des Widget-Paddings und Anpassung der Border- und Shadow-Tokens.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Implementierungsplan (Ausführung)
|
||||||
|
|
||||||
|
Ich werde nun folgende Dateien anpassen, um die oben genannten Mängel zu beheben:
|
||||||
|
|
||||||
|
1. **`index.html`**: Import der Schriftart `Geist` hinzufügen.
|
||||||
|
2. **`public/styles/tokens.css`**:
|
||||||
|
* `--font-sans` auf `"Geist", -apple-system...` ändern.
|
||||||
|
* Akzentfarben (Indigo -> Deep Rose) umbauen.
|
||||||
|
* Schatten für "Liquid Glass" anpassen (Inner Shadow für Refraktion hinzufügen).
|
||||||
|
3. **`public/styles/layout.css`**:
|
||||||
|
* Taktiles Feedback (`transform: scale(0.98) translateY(1px)`) auf alle Buttons im `:active`-Zustand anwenden.
|
||||||
|
4. **`public/styles/dashboard.css`**:
|
||||||
|
* Padding der `.widget__body` und `.widget-greeting` erhöhen, um mehr "Art Gallery/Vercel-core" Whitespace zu schaffen.
|
||||||
|
|
||||||
|
*(Die Ausführung der Änderungen erfolgt im Hintergrund im nächsten Schritt.)*
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
# Oikos UX/UI Audit & Implementation Plan
|
||||||
|
|
||||||
|
## 1. Design-System & Styling
|
||||||
|
|
||||||
|
### Issues Identified
|
||||||
|
1. **Touch Targets Too Small**: `--target-sm: 32px` and `.btn--icon-sm` (36x36px) violate minimum touch target guidelines (44x44px or 48x48px). This causes usability issues on mobile devices (fat-finger syndrome).
|
||||||
|
2. **Duplicated Dark Mode Tokens**: Dark mode CSS variables in `tokens.css` are duplicated across `@media (prefers-color-scheme: dark)` and `[data-theme="dark"]`, creating a maintenance nightmare.
|
||||||
|
|
||||||
|
### Implementation Steps
|
||||||
|
- [x] **Fix Touch Targets**: `--target-base: 44px` Token ergänzt; `.btn--icon-sm` auf `min-height/min-width: var(--target-base)` korrigiert; `--target-sm` bleibt 32px als visuelle Größe (kein Touch-Target).
|
||||||
|
- [ ] **Refactor Theme Tokens**: Bewusst übersprungen — der CSS-native `@media (prefers-color-scheme: dark)`-Block ist eine Stärke (Dark Mode ohne JS). Entfernen würde Nutzer ohne JS ohne Dark Mode lassen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Components & Interaction
|
||||||
|
|
||||||
|
### Issues Identified
|
||||||
|
1. **Mobile Modal Swipe-to-Close Bug**: If a user drags the modal down (`dy > 0`) and then back up (`dy < 0`) without lifting their finger, `dragging` is set to `false`. The `touchend` event is then ignored, leaving the modal stuck out of position.
|
||||||
|
2. **Accessibility (A11y) Violation**: The `.modal-overlay` element uses `role="presentation"` alongside an `aria-label`. `role="presentation"` hides the element from screen readers, conflicting with the label and its function as a clickable close area.
|
||||||
|
3. **Misplaced Utility Functions**: Generic UI helpers (`wireBlurValidation`, `validateAll`, `btnSuccess`, `btnLoading`, `btnError`) are hardcoded in `pages/dashboard.js` instead of a shared utility file.
|
||||||
|
|
||||||
|
### Implementation Steps
|
||||||
|
- [x] **Fix Swipe Bug (`modal.js`)**: `touchmove`-Handler korrigiert — bei `dy < 0` wird Panel auf `translateY(0)` zurückgesetzt, `dragging` bleibt `true`.
|
||||||
|
- [x] **Fix Modal A11y (`modal.js`)**: `role="presentation"` aus `.modal-overlay` entfernt.
|
||||||
|
- [x] **Relocate Utilities**: Bereits erledigt — `wireBlurValidation`, `validateAll`, `btnSuccess`, `btnLoading`, `btnError` sind in `utils/ux.js` (Zeilen 538–620).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Layout, Navigation & Routing
|
||||||
|
|
||||||
|
### Issues Identified
|
||||||
|
1. **FOUC (Flash of Unstyled Content) on Navigation**: In `router.js`, `loadPageStyle` removes the old stylesheet before the new page transition animation (`page-transition--in-right`) completes, causing layout jumps.
|
||||||
|
2. **Missing Focus Trap in Global Search**: The `#search-overlay` does not use the focus trap logic from `modal.js`. Users can tab out of the search overlay into the hidden page below.
|
||||||
|
3. **SVG ID Collision Risk**: The logo generated in `router.js` uses a hardcoded ID (`id="oikos-logo-bg"`) for its gradient. If reused, this will break rendering.
|
||||||
|
|
||||||
|
### Implementation Steps
|
||||||
|
- [ ] **Fix Routing FOUC (`router.js`)**: Kein echter Bug — `style.cleanup()` wird vor `module.render()` aufgerufen, aber die neue Seite startet `opacity: 0`. Kein sichtbares FOUC in der aktuellen Implementierung.
|
||||||
|
- [x] **Add Search Focus Trap (`router.js`)**: Eigenständiger Focus Trap in `openSearch`/`closeSearch` implementiert (ohne modal.js-Kopplung).
|
||||||
|
- [x] **Fix SVG IDs (`router.js`)**: Gradient-ID wird nun mit `Math.random().toString(36)`-Suffix generiert.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Dashboard
|
||||||
|
|
||||||
|
### Issues Identified
|
||||||
|
1. **Wasted Space from Large Empty States**: Empty widgets (e.g., no tasks) render a large "Empty State" UI. On mobile, this pushes populated widgets below the fold.
|
||||||
|
2. **Lack of Visual Feedback in Customization**: Reordering widgets in the customize modal (`rebuildList()`) happens instantly without transition, feeling jarring.
|
||||||
|
|
||||||
|
### Implementation Steps
|
||||||
|
- [ ] **Compact Empty States (`dashboard.js`)**: Offen — `.widget__empty` hat bereits reduziertes Padding (`space-5`), aber kein echtes Row-Layout. Niedrige Priorität.
|
||||||
|
- [ ] **Animate Widget Reordering (`dashboard.js`)**: Offen — View Transition API wäre sinnvoll, aber kein Bug. Niedrige Priorität.
|
||||||
Reference in New Issue
Block a user