Oikos UX/UI Analyse · April 2026

Was funktioniert — was bremst Oikos

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

4
Kritisch
sofort beheben
5
Hohe Priorität
nächster Sprint
4
Mittlere Priorität
Backlog

🔴 Kritisch
🧭
Sidebar 1024–1279 px: Icons ohne Labels/Tooltips
Bei häufigster Desktop-Auflösung sind Modul-Icons ohne jede Beschriftung — kein Tooltip, kein Label. 11 Module sind nicht erkennbar.
Keine Discoverability
👆
Modal-Close: 40 px statt 44 px Minimum
.modal-panel__close nutzt --target-md (40 px). iOS-Minimum ist 44 pt. Auf kleinen Screens spürbares Frustrationspotenzial.
Apple HIG Violation
🔗
Widget-Links: Tap-Target < 44 px
.widget__link: 12 px Text, kein min-height. Effektiver Tippbereich ~16–18 px. Auf jedem Dashboard-Widget vorhanden.
Tap-Target Violation
🔁
Doppelter FAB: .fab vs .page-fab
Zwei nahezu identische FAB-Klassen mit unterschiedlicher bottom-Berechnung erzeugen inkonsistente Positionierung auf verschiedenen Seiten.
Inkonsistente UI
🟡 Hoch
🗂️
Onboarding: 3 Screens für 11 Module
3 generische Steps erklären nicht Budget, RRule-Wiederholungen oder Calendar-Sync. Kein Feature-Discovery danach.
Discoverability
📊
Widget-Reihenfolge nicht anpassbar
Config speichert nur { id, visible } — kein order-Feld. Familien mit verschiedenen Prioritäten können das Dashboard nicht sinnvoll anpassen.
Personalisierung
↩️
Inkonsistentes Undo
Manche Aktionen zeigen Undo-Toast, andere nicht. Kein zentrales Undo-System. Bei Kontakt/Notiz löschen fehlt der Weg zurück.
Fehlererholung
📡
Kein sichtbarer Offline-Indikator
Service Worker existiert, aber kein Offline-Banner in der App-Shell. Nutzer merken Offline erst beim API-Fehler — zu spät.
PWA-Erfahrung
⌨️
Keine Keyboard Shortcuts
30 % Desktop-Nutzung ohne globale Shortcuts. Kein „N" für neu, kein „/" für Suche. Power-User auf Maus angewiesen.
Desktop-Ergonomie
🟢 Mittel
📦
reminders.css global geladen
Wird auf allen Seiten geparst, nicht lazy. Kein Blocking-Problem, aber vermeidbare CSS-Last auf Seiten ohne Reminder-UI.
Performance
👉
Swipe nur Tasks & Shopping
Swipe-Reveal fehlt bei Kontakten, Notizen, Geburtstagen. Inkonsistente Erwartungshaltung im selben App-Kontext.
Interaktions-Konsistenz
🎨
11 Modulfarben gleichzeitig im Dashboard
Wenn alle Widgets sichtbar sind, treffen 11 Akzentfarben aufeinander. Das Dashboard kann farblich überladen wirken.
Visuelle Ruhe
💬
Toast: kein Swipe-to-Dismiss
Toasts sind nicht wegwischbar. Auf iOS/Android ist Swipe-to-Dismiss eine fest etablierte Konvention — ihr Fehlen fällt auf.
Mobile-Konvention

✨ Was bereits ausgezeichnet ist
🌙 Dark Mode Architektur
Private/Public-Token-Pattern ist mustergültig. Alle Kontraste WCAG-geprüft.
♿ 4 A11y-Schichten
reduced-motion, reduced-transparency, prefers-contrast, forced-colors — alle implementiert.
🍎 iOS-PWA-Bewusstsein
100dvh + webkit-Fallback, safe-area-inset, Flex-Kind statt fixed nav.
💎 Glass Design System
@supports-basiert, opake Fallbacks für reduced-transparency, konsistente Token.
🎭 Modul-Theming
--active-module-accent System elegant — FAB, Nav, Toggles spiegeln aktive Seite.
📐 Design Tokens
Vollständige Skala, kaum Hardcoding. Basis für alles weitere.