Vorräte Settings — Redesign Concepts
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.
Wähle deine regelmäßig vorhandenen Zutaten.
Automatisch gespeichert.
Wähle deine regelmäßig vorhandenen Zutaten. Automatisch gespeichert.
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.
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).
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.
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.
Automatisch gespeichert.
Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.
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.
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.
23 gewählt · automatisch gespeichert
Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.
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.
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.
Automatisch gespeichert.
Automatisch gespeichert. Gilt ab der nächsten Einkaufsliste.
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.