Vorräte Settings — Redesign Concepts

Atlas · 2026-04-10 · Mealplan Design System · 5 Concepts

Diagnosed Problems (current A3/D3)

Concept 01 Accordion Categories

Categories are collapsed by default. A count badge shows selected/total at a glance. Tap to expand any category — all others stay collapsed. One category in focus at a time.

Mobile — 320px
← Einstellungen
Vorräte

Wähle deine regelmäßig vorhandenen Zutaten.

Gemüse 7 / 18
Möhren Zwiebeln Knoblauch Zucchini Aubergine Paprika Spinat Tomaten Lauch Brokkoli Kohl Sellerie Gurke
Milchprodukte 4 / 12
Gewürze 0 / 24
Öle & Fette 2 / 6
Getreide & Körner 0 / 9

Automatisch gespeichert.

Desktop — 640px (settings column)
← Einstellungen
Vorräte

Wähle deine regelmäßig vorhandenen Zutaten. Automatisch gespeichert.

Gemüse 7 / 18
Möhren Zwiebeln Knoblauch Zucchini Aubergine Paprika Spinat Tomaten Lauch Brokkoli Kohl Sellerie
Milchprodukte 4 / 12
Gewürze 0 / 24
Öle & Fette 2 / 6

Trade-off: Solves visual overload immediately — only one category is in view at a time. The Alle/Keine actions eliminate bulk-select friction. Count badges answer "where do I still need to configure?" at a glance. Risk: accordion interaction adds a tap per category visit; power users who want a full overview lose it. Works best when categories are <8. Keyboard nav via Enter/Space on row headers.

Concept 02 Category Sidebar

Left panel: sticky category list with count badges — acts as a mini-nav. Right panel: the selected category's full chip cloud. One category in focus, full list visible. Mobile collapses to top tabs (scrollable).

Mobile — horizontal tab strip
← Einstellungen
Vorräte
Gemüse 7
Milch 4
Gewürze 0
Öle 2
Gemüse — 7 gewählt
Möhren Zwiebeln Knoblauch Zucchini Aubergine Paprika Spinat Tomaten Lauch Brokkoli Kohl Sellerie Gurke Blumenkohl
Desktop — sidebar + content panel
Kategorien
Gemüse 7
Milchprodukte 4
Gewürze 0
Öle & Fette 2
Getreide 0
Fleisch & Fisch 3
Backwaren 1
Gemüse — 7 von 18 gewählt
Möhren Zwiebeln Knoblauch Zucchini Aubergine Paprika Spinat Tomaten Lauch Brokkoli Kohl Sellerie Gurke Blumenkohl Kohlrabi Rote Bete Fenchel Erbsen
Automatisch gespeichert · 23 Vorräte insgesamt

Trade-off: Best scalability — the sidebar grows gracefully to 15+ categories without visual breakdown. The "23 Vorräte insgesamt" footer answers the comprehension question for the whole household. Active/inactive category coloring (green-tint bg + green-dark text) matches the existing nav convention exactly. Risk: Two-panel layouts can feel over-engineered for simple tasks. Mobile tab strip truncates long category names — needs abbreviation strategy.

Concept 03 Search-First

Search bar dominates the top. Below it: a single scrollable list with sticky category headers (like iOS Contacts). Searching filters in real-time — category headers collapse when their section is empty. For power users and anyone who knows what they want.

Mobile — with active search
← Einstellungen
Vorräte
Par
Käse & Milchprodukte
Parmesan
Parmesan gerieben
Gewürze
Paprika edelsüß
3 Treffer für „Par"

Automatisch gespeichert.

Desktop — idle state (no search)
← Einstellungen
Vorräte
23 gewählt

Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.

Zutat suchen …
Gemüse
Möhren Zwiebeln Knoblauch Zucchini Aubergine Paprika Spinat Tomaten
Milchprodukte
Butter Milch Joghurt Sahne Parmesan Mozzarella
Gewürze
Salz Pfeffer Kreuzkümmel Paprika edelsüß Kurkuma

Trade-off: Fastest path for users who know what they want. Search cuts through all category hierarchy instantly. The checklist row style in search results (vs chips) is intentional — it's denser and keyboard-navigable (arrow keys + Space). The idle state preserves the chip cloud so casual browsing stays familiar. Risk: Two different interaction patterns (chips vs checklist rows in search) add cognitive load. The sticky-header list can be hard to test cross-browser.

Concept 04 Checklist Table

Abandon chips entirely. A single scrollable table: category, ingredient name, checkbox. Sorted by category. Extremely keyboard-friendly, screen-reader native, and far denser — 40 ingredients fit in the same space as 10 chips.

Mobile — 320px
← Einstellungen
Vorräte

23 gewählt · automatisch gespeichert

Suchen …
Gemüse 7 / 18
Möhren
Zwiebeln
Aubergine
Spinat
Milchprodukte 4 / 12
Butter
Joghurt
Desktop — two-column table
← Einstellungen
Vorräte
23 gewählt

Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.

Zutat suchen …
Gemüse 7 / 18
Möhren
Zwiebeln
Aubergine
Spinat
Zucchini
Milchprodukte 4 / 12
Butter
Milch
Joghurt
Sahne

Trade-off: Highest information density. Excellent keyboard navigation (tab to checkbox, space to toggle). Screen readers get a native checklist — no ARIA juggling needed. The two-column desktop layout keeps categories side by side without the chip-cloud imbalance problem. Risk: Loses the "selection feels satisfying" quality of chip toggling — a checkbox is functional, not delightful. Row highlight (green-tint bg) on checked rows restores some of that signal. May feel clinical for a consumer cooking app.

Concept 05 Enhanced Current

Keep the chip paradigm — it works. Add three targeted fixes: (1) category count badges + Alle/Keine micro-actions inline, (2) a collapsible "overflow" per category beyond 8 chips, (3) a global count in the header. Zero new navigation patterns to learn.

Mobile — current feel, fixed overload
← Einstellungen
Vorräte
23 gewählt

Automatisch gespeichert.

Gemüse 7 / 18
Möhren Zwiebeln Knoblauch Paprika Tomaten Brokkoli Zucchini Aubergine
Gewürze 0 / 24
Salz Pfeffer Kreuzkümmel Kurkuma Zimt Paprika Koriander Thymian
Öle & Fette 2 / 6
Olivenöl Rapsöl Kokosöl Butter Ghee Sesamöl
Desktop — 3-col grid, enhanced
← Einstellungen
Vorräte
23 Vorräte gewählt

Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.

Gemüse 7/18
Möhren Zwiebeln Knoblauch Paprika Tomaten Brokkoli Zucchini Aubergine
Gewürze 0/24
Salz Pfeffer Kreuzkümmel Kurkuma Zimt Paprika Thymian Oregano
Öle & Fette 2/6
Olivenöl Rapsöl Kokosöl Butter Ghee Sesamöl

Trade-off: Lowest risk, smallest diff — the three components (CategorySection, StapleChip, StaplesManager) need only minor additions. No new navigation paradigm to learn. Count badges on category headers answer the comprehension question. The "+N weitere…" overflow trigger caps visual height per category. Alle/Keine bulk actions land where the eye already is (next to the label). This is the recommendation for a first iteration — it fixes the acute pain without a redesign. Concepts 01 or 02 are step-2 if the dataset grows substantially larger.