UX/UI Analyse · Oikos · April 2026

# Was funktioniert gut —
und was bremst Oikos aus

70 % Mobile-PWA · 30 % Desktop · 11 Module · Vanilla JS · Kein Build-Step

4
Kritische Probleme
(sofort beheben)
5
Hohe Priorität
(nächster Sprint)
4
Mittlere Priorität
(Backlog)
🔴 Kritisch — direkt sichtbare UX-Brüche
🧭
Sidebar 1024–1279 px: Icons ohne Labels oder Tooltips
Bei der häufigsten Desktop-Auflösung zeigt die Sidebar nur Icons — kein Tooltip, kein Label. Neue Nutzer können die 11 Module nicht erkennen. Das verletzt das Grundprinzip «nav-label-icon» (HIG/Material).
Keine Discoverability
👆
Modal-Close: 40 px statt 44 px Minimum
`.modal-panel__close` nutzt `--target-md` (40 px). Das iOS-Minimum liegt bei 44 pt. Auf kleinen Displays — gerade beim Schließen tippend — ist das ein spürbares Frustrationspotenzial.
Apple HIG Violation
🔗
Widget-Links: kein Min-Height-Tap-Target
`.widget__link` hat 12 px Text, kein explizites `min-height`. Der effektive Tippbereich ist ~16–18 px — weit unter 44 px. Auf dem Dashboard ist dieser Link auf jedem Widget sichtbar.
Tap-Target < 44 px
🔁
Doppelter FAB: .fab vs .page-fab
In `layout.css` existieren zwei nahezu identische FAB-Klassen (`.fab` und `.page-fab`) mit unterschiedlicher `bottom`-Berechnung. Das erzeugt inkonsistente Positionierung auf verschiedenen Seiten.
Inkonsistente UI
↳ Visuell: Navigation-Problem & Lösung
Ist-Zustand: 1024–1279 px (nur Icons)

Welcher Icon ist "Geburtstage"?

Soll-Zustand: Tooltip bei Hover (min)

Sofort klar durch title-Tooltip

↳ Visuell: Touch-Target Größen
Ist-Zustand: Modal-Close 40 × 40 px
✕
40 × 40 px — 4 px unter iOS-Minimum
Fingertipp ~44–50 px → Fehlklick-Rate steigt
Fix: --target-base (44 px)
✕
44 × 44 px — Apple HIG Minimum
Einzeiler-Fix: `--target-base` statt `--target-md`
🟡 Hohe Priorität — spürbare UX-Einschränkungen
🗂️
Onboarding: 3 Schritte für 11 Module
Neue Nutzer sehen einmalig 3 generische Onboarding-Screens. Module wie Budget, RRule-Wiederholungen oder Google Calendar-Sync werden nie erklärt. Kein Feature-Discovery-Mechanismus danach.
Discoverability
📊
Dashboard-Widgets: keine Reihenfolge-Anpassung
Widgets können ein-/ausgeblendet werden, aber nicht umsortiert. Die Widget-Config speichert nur `{ id, visible }` — kein Reihenfolge-Feld. Für Familien mit verschiedenen Prioritäten ist das stark limitierend.
Personalisierung
↩️
Inkonsistentes Undo-Verhalten
Einige Aktionen zeigen einen Undo-Toast, andere nicht. Es gibt kein zentrales Undo-System. Bei destruktiven Aktionen (z. B. Kontakt löschen) fehlt der Undo-Pfad komplett.
Fehlererholung
📡
Kein sichtbarer Offline-Indikator
Der Service Worker existiert, aber der App-Shell fehlt ein Offline-Banner. Nutzer bemerken den Offline-Zustand erst, wenn eine API-Anfrage fehlschlägt — zu spät.
PWA-Erfahrung
⌨️
Desktop: keine Keyboard Shortcuts
Bei 30 % Desktop-Nutzung fehlen globale Shortcuts. Kein „N" für neue Aufgabe, kein „/" für Suche, kein Escape-Verhalten im globalem Kontext. Power-User müssen alles mit der Maus bedienen.
Desktop-Ergonomie
🟢 Mittlere Priorität — qualitative Verbesserungen
💬
reminders.css global geladen
`reminders.css` wird laut Observations global geladen, nicht lazy. Auf Seiten ohne Reminder-UI werden unnötige Styles geparst. Kein Blocking-Problem, aber vermeidbare CSS-Last.
Performance
🃏
Swipe-Geste: nur Tasks & Shopping
Swipe-Reveal ist für Tasks und Shopping implementiert, fehlt aber bei Kontakten, Notizen und Geburtstagen — obwohl die Interaktion dort genauso wertvoll wäre. Inkonsistente Erwartungshaltung.
Interaktions-Konsistenz
🎨
11 Modulfarben gleichzeitig im Dashboard
Wenn alle Widgets sichtbar sind, treffen 11 verschiedene Akzentfarben aufeinander. Das Dashboard wirkt farblich überladen. Weniger Kontrast zwischen den Modulen würde die Ruhewirkung verbessern.
Visuelle Ruhe
📱
Toast: kein Swipe-to-Dismiss auf Mobile
Toasts können nicht weggewischt werden — nur auto-dismiss oder Undo-Button. Auf Mobile ist Swipe-to-Dismiss eine etablierte Konvention (iOS, Android), deren Fehlen auffällt.
Mobile-Konvention
✨ Was bereits ausgezeichnet ist
🌙 Dark Mode
Private-/Public-Token-Architektur ist mustergültig. Alle Kontrastverhältnisse WCAG-geprüft, Toast-Texte passen sich an.
♿ Accessibility-Schichten
prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, forced-colors — alle implementiert. Selten in selbstgehosteten Apps.
🍎 iOS-PWA-Bewusstsein
100dvh + -webkit-fill-available Fallback, safe-area-inset-*, Flex-Kind statt fixed für Bottom-Nav — solide PWA-Grundlage.
💎 Glass Design System
@supports-basiert mit korrekten webkit-Fallbacks, opake Fallbacks für reduced-transparency. Konsistente Token-Hierarchie.
🎭 Modul-Theming
--active-module-accent + --module-accent System ist elegant. FAB, Nav-Item und Toggles reflektieren automatisch die aktive Seite.
📐 Design Tokens
Vollständige Skala für Farben, Radien, Schatten, Spacing, Typografie. Konsistente Anwendung — kaum Hardcoding gefunden.