From c297403506859e630b21a0c2e93180ae718b9a77 Mon Sep 17 00:00:00 2001 From: Marcel Raddatz Date: Thu, 9 Apr 2026 16:00:02 +0200 Subject: [PATCH] docs(specs): add 3 mockup variations for E4 variety settings screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit V1: Structured sections (toggles + segmented weight controls, low effort) V2: Context preset chips (Omnivor/Vegetarisch/Vegan) with live score preview — recommended V3: Rule cards with inline examples showing exact penalty impact Co-Authored-By: Claude Sonnet 4.6 --- specs/frontend/e4-variety-settings.html | 1138 +++++++++++++++++++++++ 1 file changed, 1138 insertions(+) create mode 100644 specs/frontend/e4-variety-settings.html diff --git a/specs/frontend/e4-variety-settings.html b/specs/frontend/e4-variety-settings.html new file mode 100644 index 0000000..86183e0 --- /dev/null +++ b/specs/frontend/e4-variety-settings.html @@ -0,0 +1,1138 @@ + + + + + + Recipe App — E4 Variety Settings · 3 Mockups + + + + +
+ + +
+
+

E4 — Vielfalt-Einstellungen

+

Recipe App · 3 Mockup-Variationen · Atlas UI-Persona

+
+
+ Entwurf
+ Erstellt: 2026-04
+ Variationen: 3
+ Journey: J9 · Screen E4 +
+
+ + + +
+
Kontext
+

+ E4 ist die neue Einstellungsseite für den Vielfalt-Algorithmus. Sie wird von E1 (Settings Hub) aus aufgerufen und ist nur für Planer zugänglich. Das Kernproblem: Die Standard-Konfiguration bestraft Protein-Wiederholungen, was für vegetarische Haushalte unfair ist — Tofu, Eier und Hülsenfrüchte wiederholen sich strukturell häufiger, weil die Auswahl geringer ist. Die drei Variationen zeigen unterschiedliche Ansätze zwischen "technisch präzise" und "kontext-geführt". +

+

+ Alle Variationen zeigen sowohl die mobile Ansicht (320px) als auch die Desktop-Ansicht (Sidebar + Hauptbereich). Die Desktop-Ansicht nutzt den gleichen Sidebar-Layout wie E1 und E2. +

+
+ + + +
+
+
V1
+
+
Variation 1
+
Strukturierte Sektionen
+
Klassisches Settings-Layout: zwei klare Sektionen (Typen-Toggles + Strafgewichte) mit beschrifteten Segmented-Controls. Kein Schnickschnack — der erfahrene Planer findet sofort alles. Geringer Entwicklungsaufwand, da alle Komponenten bereits im System vorhanden sind.
+
+
+ +
+ + +
+
Mobile · 320px
+
+
9:41●●●
+
+ +
+
← Einstellungen
+
Vielfalt
+
+ +
+ + +
+
+
Wiederholungs-Typen
+
Welche Tags lösen Warnungen aus?
+
+
+
+
+
Protein
+
Tofu, Ei, Hülsenfrüchte …
+
+
+
+
+
+
Küche
+
Pasta, Asiatisch, Mexikanisch …
+
+
+
+
+
+ + +
+
+
Strafgewichte
+
Wie stark wirkt sich jeder Verstoß aus?
+
+
+
+
+
Tag-Wiederholung
+
Gleicher Typ an aufeinanderfolgenden Tagen
+
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
+
Zutaten-Überschneidung
+
Gleiche Zutaten an aufeinanderfolgenden Tagen
+
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
+
Letzte Wochen
+
Rezepte aus dem Kochverlauf
+
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
+
Doppelte Rezepte
+
Gleiches Rezept mehrfach im Plan
+
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
+ +
Auf Standard zurücksetzen
+
+ + +
+
📅
Plan
+
🛒
Einkauf
+
🍳
Rezepte
+
⚙️
Einstellungen
+
+
+
+
+ + +
+
Desktop · 1040px
+
+ +
+ +
+
Planung
+
📅 Wochenplan
+
🛒 Einkaufsliste
+
🍳 Rezepte
+
Haushalt
+
⚙️ Einstellungen
+
+
+ +
+
+
+
Einstellungen › Vielfalt-Einstellungen
+
Vielfalt-Einstellungen
+
+
+
+
+ + +
+
+
Wiederholungs-Typen
+
Welche Tags lösen Warnungen aus?
+
+
+
+
+
Protein
+
Tofu, Ei, Hülsenfrüchte, Fisch …
+
+
+
+
+
+
Küche
+
Pasta, Asiatisch, Mexikanisch …
+
+
+
+
+
+ + +
+
Tipp
+
Vegetarische Haushalte haben weniger Protein-Quellen zur Auswahl. Deaktiviere Protein, damit Tofu oder Eier an aufeinanderfolgenden Tagen die Vielfalt nicht reduzieren.
+
+ +
+ + +
+
+
+
Strafgewichte
+
Wie stark wirkt sich jeder Verstoß auf die Punktzahl aus?
+
+
+
+
+
Tag-Wiederholung
+
Gleicher Typ (z.B. Küche) an aufeinanderfolgenden Tagen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Zutaten-Überschneidung
+
Gleiche Zutaten an aufeinanderfolgenden Tagen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Letzte Wochen
+
Rezepte aus den letzten 14 Tagen Kochverlauf
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Doppelte Rezepte
+
Gleiches Rezept mehrfach im Wochenplan
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Auf Standard zurücksetzen
+
+
+
+
+
+ +
+ +
+
Design-Notizen V1
+
    +
  • Alle Komponenten (Toggle, Segmented Control, Grp-Block) sind bereits im Design-System vorhanden — minimaler Entwicklungsaufwand.
    • +
  • Desktop: 2-Spalten-Grid oben (Typen + Tipp-Karte) gibt dem Tipp-Text Raum ohne die Seite zu verlängern.
    • +
  • Protein-Toggle ist standardmäßig auf "Aus" gesetzt im Mockup — zeigt den empfohlenen Zustand für vegetarische Haushalte.
    • +
  • Schwachstelle: Keine direkte Verbindung zwischen den Einstellungen und der Score-Auswirkung sichtbar — der Planer muss selbst zurück zu C3 navigieren, um den Effekt zu sehen.
    • +
  • Auto-Save bei jeder Interaktion; kein Speichern-Button. "Auf Standard zurücksetzen" öffnet einen Bestätigungsdialog.
    • +
+
+
+ + +
+ + + +
+
+
V2
+
+
Variation 2 · Empfohlen
+
Kontext-Preset + Feineinstellungen
+
Der Planer wählt zuerst den Haushaltskontext (Omnivor / Vegetarisch / Vegan). Das setzt alle Einstellungen automatisch auf sinnvolle Werte — kein Nachdenken über Gewichte nötig. Für fortgeschrittene Anpassungen gibt es ein ausklappbares "Erweiterte Einstellungen"-Panel. Zeigt auch live, wie der Score des aktuellen Plans mit den neuen Einstellungen aussehen würde.
+
+
+ +
+ + +
+
Mobile · 320px
+
+
9:41●●●
+
+
+
← Einstellungen
+
Vielfalt
+
+ +
+ + +
+
+
Mit diesen Einstellungen
+
8.2
+
vorher 5.8 / 10
+
+
📈
+
+ + +
Haushaltskontext
+
+
+
🥩
+
Omnivor
+
Alle Tags aktiv
+
+
+
🥦
+
Vegetarisch
+
Protein deaktiviert
+
+
+
🌱
+
Vegan
+
Protein deaktiviert
+
+
+ + +
Aktive Einstellungen
+
+
Protein: Aus
+
Küche: An
+
Zutaten: Mittel
+
Duplikate: Hoch
+
+ + +
+
+
Erweiterte Einstellungen
+
▾
+
+
+
+
+
Küche
+
Küchen-Wiederholungen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Zutaten
+
Überschneidungen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Duplikate
+
Gleiches Rezept im Plan
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+ +
Auf Standard zurücksetzen
+
+ +
+
📅
Plan
+
🛒
Einkauf
+
🍳
Rezepte
+
⚙️
Einstellungen
+
+
+
+
+ + +
+
Desktop · 1040px
+
+
+ +
+
Planung
+
📅 Wochenplan
+
🛒 Einkaufsliste
+
🍳 Rezepte
+
Haushalt
+
⚙️ Einstellungen
+
+
+
+
+
+
Einstellungen › Vielfalt-Einstellungen
+
Vielfalt-Einstellungen
+
+
+
+
+ + +
+
Haushaltskontext
+
+
+
🥩
+
Omnivor
+
Alle Tags aktiv
+
+
+
🥦
+
Vegetarisch
+
Protein deaktiviert
+
+
+
🌱
+
Vegan
+
Protein deaktiviert
+
+
+ +
+
+
Erweiterte Einstellungen
+
▾
+
+
+
+
+
Küche-Wiederholungen
+
Gleiche Küche an aufeinanderfolgenden Tagen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Zutaten-Überschneidung
+
Gleiche Zutaten an aufeinanderfolgenden Tagen
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Letzte Wochen
+
Kochverlauf der letzten 14 Tage
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+
Doppelte Rezepte
+
Gleiches Rezept mehrfach im Plan
+
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+
+ +
Auf Standard zurücksetzen
+
+ + +
+
+
+
Mit diesen Einstellungen
+
8.2 / 10
+
vorher 5.8 — +2.4 Punkte
+
+
📈
+
+ +
Aktive Regeln
+
+
+ Protein-Wiederholung + Deaktiviert +
+
+ Küchen-Vielfalt + Mittel +
+
+ Zutaten-Überschneidung + Niedrig +
+
+ Letzte Wochen + Mittel +
+
+ Doppelte Rezepte + Hoch +
+
+
+ +
+
+
+
+
+ +
+ +
+
Design-Notizen V2
+
    +
  • Der Score-Preview-Banner ist das stärkste Feature von V2: der Planer sieht sofort, welchen Effekt die Einstellungen auf seinen aktuellen Plan haben — ohne zu C3 navigieren zu müssen. Der Server berechnet die Simulation mit den noch nicht gespeicherten Einstellungen.
    • +
  • Die drei Kontext-Chips (Omnivor / Vegetarisch / Vegan) sind der primäre Interaktionspunkt. Die meisten Planer müssen keine "Erweiterten Einstellungen" anfassen.
    • +
  • Technische Umsetzung des Score-Previews: Endpoint-Simulation mit temporären Gewichten (nicht persistent), ähnlich wie die bestehende /v1/week-plans/{id}/variety-score?simulate=true-Logik.
    • +
  • Erweiterungsidee: Ein vierter Chip "Individuell" erscheint automatisch, sobald der Planer die erweiterten Einstellungen manuell verändert hat.
    • +
  • Schwachstelle: Der Score-Preview benötigt einen separaten Backend-Aufruf. Wenn kein aktueller Plan existiert, sollte ein sinnvoller Fallback angezeigt werden ("Kein Plan für diese Woche").
    • +
+
+
+ + +
+ + + +
+
+
V3
+
+
Variation 3
+
Regelkarten mit Beispielen
+
Jede Bewertungsregel bekommt eine eigene Karte mit konkretem Beispiel, das zeigt, was genau bestraft wird. Der Planer versteht sofort, warum eine Regel relevant (oder irrelevant) ist. Deaktivierte Karten werden ausgegraut — der Planer sieht auf einen Blick, welche Regeln aktiv sind.
+
+
+ +
+ + +
+
Mobile · 320px
+
+
9:41●●●
+
+
+
← Einstellungen
+
Vielfalt
+
+ +
+ + +
+
+
+
🥚
+
+
Protein-Wiederholung
+
Gleiche Protein-Quelle an aufeinanderfolgenden Tagen
+
+
+
+
+
+ + +
+
+
+
🍝
+
+
Küchen-Vielfalt
+
Gleiche Küche an aufeinanderfolgenden Tagen
+
+
+
+
+
+
Pasta Mo · Pasta Di → −1.5 Pkt
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+ + +
+
+
+
🫑
+
+
Zutaten-Überschneidung
+
Gleiche Zutat an aufeinanderfolgenden Tagen
+
+
+
+
+
+
Paprika Mo · Paprika Di → −0.3 Pkt
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+ + +
+
+
+
📋
+
+
Doppelte Rezepte
+
Gleiches Rezept mehrfach im Wochenplan
+
+
+
+
+
+
Pasta Bolognese 2× → −2.0 Pkt
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+ + +
+
+
+
📅
+
+
Letzte Wochen
+
Rezepte der letzten 14 Tage im Plan
+
+
+
+
+
+
Chili letzte Woche · Chili diese Woche → −1.0 Pkt
+
+
Niedrig
+
Mittel
+
Hoch
+
+
+
+ +
Auf Standard zurücksetzen
+
+ +
+
📅
Plan
+
🛒
Einkauf
+
🍳
Rezepte
+
⚙️
Einstellungen
+
+
+
+
+ + +
+
Desktop · 1040px
+
+
+ +
+
Planung
+
📅 Wochenplan
+
🛒 Einkaufsliste
+
🍳 Rezepte
+
Haushalt
+
⚙️ Einstellungen
+
+
+
+
+
+
Einstellungen › Vielfalt-Einstellungen
+
Vielfalt-Einstellungen
+
+
+
+ +
+ + +
+
+
+
🥚
+
+
Protein-Wiederholung
+
Gleiche Protein-Quelle an aufeinanderfolgenden Tagen · Deaktiviert
+
+
+
+
+
+ + +
+
+
+
🍝
+
+
Küchen-Vielfalt
+
Gleiche Küche an aufeinanderfolgenden Tagen
+
+
+
+
+
+
Pasta Mo · Pasta Di → −1.5 Pkt
+
Niedrig
Mittel
Hoch
+
+
+ + +
+
+
+
🫑
+
+
Zutaten-Überschneidung
+
Gleiche Zutat an aufeinanderfolgenden Tagen
+
+
+
+
+
+
Paprika Mo · Paprika Di → −0.3 Pkt
+
Niedrig
Mittel
Hoch
+
+
+ + +
+
+
+
📋
+
+
Doppelte Rezepte
+
Gleiches Rezept mehrfach im Wochenplan
+
+
+
+
+
+
Pasta Bolognese 2× → −2.0 Pkt
+
Niedrig
Mittel
Hoch
+
+
+ + +
+
+
+
📅
+
+
Letzte Wochen
+
Rezepte der letzten 14 Tage im aktuellen Plan
+
+
+
+
+
+
Chili letzte Woche · Chili diese Woche → −1.0 Pkt
+
Niedrig
Mittel
Hoch
+
+
+ + +
+
Auf Standard zurücksetzen
+
+ +
+
+
+
+
+ +
+ +
+
Design-Notizen V3
+
    +
  • Das Mono-Code-Beispiel in jeder Karte ("Pasta Mo · Pasta Di → −1.5 Pkt") macht das Algorithmus-Verhalten greifbar — der Planer muss keine Doku lesen, um zu verstehen, was eine Regel tut.
    • +
  • Deaktivierte Karten werden auf 65% Opacity ausgegraut und zeigen kein Gewicht-Control — weniger visuelles Rauschen, klarer Status auf einen Blick.
    • +
  • Desktop 2-Spalten-Grid funktioniert gut bis 5 Regeln. Wenn künftig weitere Regel-Typen hinzukommen, bleibt die Struktur skalierbar ohne Layout-Änderung.
    • +
  • Schwachstelle: Kein Score-Preview (anders als V2). Die Auswirkungen werden erst klar, wenn der Planer zu C3 navigiert. Könnte mit einem Banner unter dem Grid ergänzt werden.
    • +
  • Schwachstelle für mobile: 5 Karten nacheinander ergeben eine sehr lange Seite. Erwägen, deaktivierte Karten ganz an das Ende zu schieben.
    • +
+
+
+ + + +
+
Variationsvergleich
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KriteriumV1 SektionenV2 Preset ★V3 Regelkarten
LernkurveMittel — vertraut für Settings-erfahreneNiedrig — drei Chips, alles erledigtNiedrig — jede Regel erklärt sich selbst
Direkte Score-AuswirkungNicht sichtbarLive-Preview ✓Nicht sichtbar
EntwicklungsaufwandNiedrigMittel (+Simulation-Endpoint)Mittel
ErklärungswertGering (nur Label)Mittel (Kontext-Beschreibung)Hoch (Beispiele) ✓
SkalierbarkeitGut — neue Zeile in TabelleMittel — neue Presets brauchen ÜberlegungGut — neue Karte im Grid ✓
EmpfehlungWenn schnelle Lieferung PrioEmpfohlen für v1 ★Gut als v2-Iteration auf V2
+ +
+
Empfehlung Atlas
+
    +
  • V2 (Kontext-Preset) ist die empfohlene Variation für v1. Der Live-Score-Preview schafft sofortiges Feedback — der Planer muss nicht raten, ob eine Einstellung den erhofften Effekt hat.
    • +
  • V2 + V3 lassen sich gut kombinieren: Presets für den Einstieg (V2 oben), Regelkarten als "Erweiterte Einstellungen" darunter (V3-Stil) statt des abstrakten Segmented-Controls.
    • +
  • V1 ist die richtige Wahl, wenn der Simulation-Endpoint nicht in diesem Sprint umgesetzt werden kann — er lässt sich später ohne Layout-Änderung ergänzen.
    • +
+
+
+ +
+ +