C3 — Abwechslungs-Analyse · Rework

Recipe App · 3 Mockup-Variationen · Aktuell: technische Tages-Codes, keine Rezeptnamen, kein direkter Tausch

Entwurf
Erstellt: 2026-04
Variationen: 3
Screen: C3
Problem

Die aktuelle Seite zeigt Warnungen wie "MON, WED — erwäge einen Tausch". Der Planer muss selbst nachschlagen, welches Gericht an Montag und Mittwoch geplant ist, und dann manuell zum Planer navigieren um zu tauschen. Zwei Probleme:

1. Keine Rezeptnamen — Tag-Codes statt echter Gerichte. 2. Kein direkter Tausch — der Planer muss die Seite verlassen, zurück zum Planer, das richtige Gericht suchen und dann tauschen.

V1
Variation 1
Erweiterte Karten
Minimale Änderung: bestehende gelbe Karten bleiben, aber der Text wird durch strukturierte Zeilen ersetzt — eine pro betroffenem Gericht, mit Wochentag, Rezeptname und "Tauschen →" Link. Score-Bereich und Layout bleiben unverändert.
Mobile · 320px
9:41●●●
‹
Abwechslungs-Analyse
5.8 / 10 Verbesserbar
Bewertung im Detail
Quellen-Vielfalt4 / 10
Zutaten-Überschneidung7 / 10
Aufwandsbalance8 / 10
Hinweise
Tofu mehrfach diese Woche
MoTofu-Gemüse-Pfanne
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Paprika in mehreren Gerichten
DiPaprika-Linsen-Eintopf
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
📅
Plan
🛒
Einkauf
🍳
Rezepte
📊
Analyse
Desktop · 1040px
Planung
📅 Wochenplan
🛒 Einkaufsliste
🍳 Rezepte
Haushalt
⚙️ Einstellungen
Planer / Abwechslungs-Analyse
5.8 / 10 Verbesserbar
Bewertung im Detail
Quellen-Vielfalt4 / 10
Zutaten-Überschneidung7 / 10
Aufwandsbalance8 / 10
Hinweise
Tofu mehrfach diese Woche
MoTofu-Gemüse-Pfanne
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Paprika in mehreren Gerichten
DiPaprika-Linsen-Eintopf
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Design-Notizen V1
  • Geringster Umbauaufwand — nur VarietyWarningCards.svelte ändert sich, keine Layout-Umstrukturierung.
  • Behält die bekannte Score-Hierarchie bei: Zahl oben, dann Detail, dann Hinweise.
  • Schwachstelle: Hinweise sind trotzdem am Ende der Seite versteckt — auf kurzen Telefon-Bildschirmen muss gescrollt werden, bevor der Planer die Tausch-Links sieht.
  • Die Sub-Scores bleiben immer sichtbar, auch wenn der Planer nur die Tausch-Aktionen braucht.
V2
Variation 2 · Empfohlen
Aktions-Liste
Hinweise rücken nach oben — direkt unter dem Score. Der Planer sieht sofort, was zu tun ist. Sub-Scores wandern in ein ausklappbares "Bewertung im Detail" (native <details>, kein JS). Kompakterer Score-Hero gibt Hinweisen mehr Raum.
Mobile · 320px
9:41●●●
‹
Abwechslungs-Analyse
5.8 / 10
Verbesserbar
2 Hinweise
Tofu mehrfach diese Woche
MoTofu-Gemüse-Pfanne
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Paprika in mehreren Gerichten
DiPaprika-Linsen-Eintopf
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Bewertung im Detail
Quellen-Vielfalt4 / 10
Zutaten-Überschneidung7 / 10
Aufwandsbalance8 / 10
📅
Plan
🛒
Einkauf
🍳
Rezepte
📊
Analyse
Desktop · 1040px
Planung
📅 Wochenplan
🛒 Einkaufsliste
🍳 Rezepte
Haushalt
⚙️ Einstellungen
Planer / Abwechslungs-Analyse
5.8 / 10
Verbesserbar — 2 Hinweise
4
Quellen
7
Zutaten
8
Aufwand
Hinweise
Tofu mehrfach diese Woche
MoTofu-Gemüse-Pfanne
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Paprika in mehreren Gerichten
DiPaprika-Linsen-Eintopf
Tauschen →
MiTofu-Curry mit Reis
Tauschen →
Design-Notizen V2
  • Hinweise erscheinen direkt unter dem Score — kein Scrollen nötig auf typischen Telefon-Bildschirmen.
  • Kompakter Score-Strip auf Mobile spart ~80px gegenüber dem aktuellen großen Hero — mehr Raum für die eigentlichen Tausch-Aktionen.
  • Desktop: Sub-Scores werden als kompakte Zahlen-Spalte in die Score-Leiste integriert — kein separater Abschnitt mehr nötig.
  • Native <details> auf Mobile braucht kein JavaScript; funktioniert auch ohne hydration.
  • "2 Hinweise" im Score-Strip auf Desktop gibt dem Planer sofort Kontext, ohne zu scrollen.
V3
Variation 3
Hinweise zuerst
Invertiertes Layout: die Seite öffnet mit den konkreten Problem-Karten — groß und klar. Score und Breakdown erscheinen darunter als unterstützende Information. Jede Warnung ist eine eigenständige "Aufgaben-Karte" mit prominentem Tausch-Button statt Link.
Mobile · 320px
9:41●●●
‹
Abwechslungs-Analyse
Was zu tun ist
Quellen-Wiederholung
Tofu an 2 Tagen
Montag
Tofu-Gemüse-Pfanne
Tauschen
Mittwoch
Tofu-Curry mit Reis
Tauschen
Zutaten-Überschneidung
Paprika an 2 aufeinanderfolgenden Tagen
Dienstag
Paprika-Linsen-Eintopf
Tauschen
Mittwoch
Tofu-Curry mit Reis
Tauschen
Gesamt-Score
5.8 / 10 · Verbesserbar
Aufschlüsselung anzeigen
Quellen-Vielfalt4 / 10
Zutaten-Überschneidung7 / 10
Aufwandsbalance8 / 10
📅
Plan
🛒
Einkauf
🍳
Rezepte
📊
Analyse
Desktop · 1040px
Planung
📅 Wochenplan
🛒 Einkaufsliste
🍳 Rezepte
Haushalt
⚙️ Einstellungen
Planer / Abwechslungs-Analyse
Was zu tun ist
Quellen-Wiederholung
Tofu an 2 Tagen
Montag Tofu-Gemüse-Pfanne
Tauschen
Mittwoch Tofu-Curry mit Reis
Tauschen
Zutaten-Überschneidung
Paprika an 2 aufeinanderfolgenden Tagen
Dienstag Paprika-Linsen-Eintopf
Tauschen
Mittwoch Tofu-Curry mit Reis
Tauschen
Score
5.8 / 10
Verbesserbar
Aufschlüsselung
Quellen4 / 10
Zutaten7 / 10
Aufwand8 / 10
Design-Notizen V3
  • Klarer Fokus: Das erste, was der Planer sieht, ist "Was zu tun ist" — keine Score-Hierarchie die von der Aktion ablenkt.
  • Prominente "Tauschen"-Buttons (gefüllt, dunkelgelb) statt Links — erhöht die Tipp-Fläche auf Mobile und macht die Aktion offensichtlicher.
  • Voller Wochentag ("Montag" statt "Mo") — lesbarer, besonders auf Desktop.
  • Schwachstelle: Wenn es keine Hinweise gibt (Score ≥ 9), wirkt die Seite leer — der Score müsste dann nach oben rücken. Erfordert einen separaten Empty-State.
  • Höherer Umbauaufwand gegenüber V1 und V2 — die Page-Struktur ändert sich grundlegend.
Vergleich
Kriterium V1 Erweiterte Karten V2 Aktions-Liste ★ V3 Hinweise zuerst
Rezeptnamen sichtbar ✓ Ja ✓ Ja ✓ Ja, prominent
Direkter Tausch Link Link Button (größere Tap-Fläche)
Hinweise sichtbar ohne Scrollen Nein (Score + Breakdown zuerst) Ja (direkt unter kompaktem Score) Ja (ganz oben)
Umbauaufwand Niedrig Mittel Hoch
Layout-Änderung Keine Score kompakter, Details kollabierbar Grundlegende Umstrukturierung
Empfehlung Wenn schnelle Lieferung Prio Empfohlen ★ Wenn Aktions-Fokus Prio