E2 — Mitglieder

5 Design-Variationen · Desktop-first · Route /members · Journey J7

Version: 1.0
Screen: E2
Journey: J7
Actor: Planner
Last updated: 2026-04

The members page is a rarely-visited, high-trust page. The planner opens it when the household changes — a new partner joins, a family member needs access removed. The household is typically 2–4 people. Five variations explore the range from a simple list to a panel-based layout. The recommended variation for v1 is V1 (Roster list) — fewest moving parts, matches the access frequency, household size, and task urgency.

Five design variations

Roster-Liste

Lineares Listenformat. Alle Mitglieder als Zeilen mit Avatar, Name, Rolle und Beitrittsdatum. Ausstehende Einladungen darunter. Minimale kognitive Last für eine seltene Aufgabe.

Mitglieder

Marcel Raddatz

Beigetreten 14. Januar 2026

Planner

⋯

Sarah Raddatz

Beigetreten 15. Januar 2026

Mitglied

⋯

Tom Meier

Beigetreten 3. März 2026

Mitglied

⋯

Ausstehende Einladungen · 1

inv_x8K2j

Läuft ab in 2 Tagen

Mobile · 390px

Mitglieder

Marcel Raddatz

Planner · Seit 14.1.26

⋯

Sarah Raddatz

Mitglied · Seit 15.1.26

⋯

Tom Meier

Mitglied · Seit 3.3.26

⋯

Einladungen · 1

inv_x8K2j2 Tage

Design-Entscheidungen

Planner-Avatar in Grün (--green-tint), Mitglieder-Avatar in Blau (--blue-tint) — Rollenfarben konsistent mit den Rollenbadges in der Spec.
Kebab-Menü (⋯) öffnet ein Kontextmenü mit "Zugang entziehen". Destructive action erfordert Bestätigung mit Mitgliedsnamen.
Ausstehende Einladungen haben einen gelben Ablauf-Badge wenn ≤ 3 Tage verbleiben, grau wenn mehr Zeit bleibt.
Auf Mobile: "Einladen"-Button als Kompakt-CTA im Seitenkopf (kein großes Hero-Element) — die Seite ist keine Onboarding-Seite, sondern eine Management-Seite.

Kachelraster

Jedes Mitglied als eigenständige Kachel mit großem Avatar-Kreis, Name, Rolle und Datum. Eine "+" Kachel mit gestricheltem Rand fungiert als Invite-CTA. Visuelle, scannable Übersicht.

Geeignet ab 4+ Mitgliedern

Desktop · 1200px

Mitglieder

Marcel Raddatz

14. Jan 2026

Planner

Sarah Raddatz

15. Jan 2026

Mitglied

Tom Meier

3. Mär 2026

Mitglied

Einladen

Mobile · 390px

Mitglieder

Marcel R.

Planner

Sarah R.

Mitglied

Tom M.

Mitglied

Einladen

Design-Entscheidungen

Kachelgröße funktioniert nur bis ca. 6 Mitgliedern — ab 7+ muss auf Liste zurückgefallen werden. Für die typische Haushaltsgröße (2–4) unnötig visuell.
Die "+" Einladen-Kachel mit gestricheltem Rahmen ist ein etabliertes Muster für "leerer Slot zum Hinzufügen" — sofort verständlich ohne Label-Erklärung.
Schlechter als V1 für Remove-Aktionen: Die Entfernen-Aktion ist auf der Kachel nicht sichtbar — man muss sie irgendwo verstecken (Hover-State, Kontextmenü). Auf Mobile nicht erreichbar ohne Tap-Geste.

Split-Panel

Geteilte Ansicht: links die Mitgliederliste, rechts das Einladungs-Management-Panel. Auf Desktop zeigt das rechte Panel immer den aktuellen Invite-Status. Auf Mobile: Tab-Navigation zwischen den beiden Bereichen.

Für Haushalte mit häufigen Mitgliederwechseln

Desktop · 1200px

Mitglieder 3

Marcel Raddatz

Planner

Sarah Raddatz

Mitglied

Tom Meier

Mitglied

Mitglied einladen

Teile diesen Link per WhatsApp, SMS oder E-Mail. Der Empfänger erstellt ein Konto und tritt automatisch dem Haushalt bei.

https://mealprep.app/join/inv_x8K2j

Ausstehende Einladungen · 1

inv_x8K2j 2 Tage

Mobile · 390px (Tab-Navigation)

Mitglieder

Marcel Raddatz

Planner

Sarah Raddatz

Mitglied

Tom Meier

Mitglied

Design-Entscheidungen

Das rechte Panel zeigt immer den Invite-Status — kein Modal, kein Navigationsschritt. Gut für Haushalte, die regelmäßig neue Mitglieder onboarden (z. B. Wohngemeinschaften).
"Entfernen" ist im linken Panel direkt sichtbar als Text-Link in Fehlerfarbe — kein verstecktes Kebab-Menü. Spart einen Schritt, erhöht aber das Risiko eines versehentlichen Taps auf Mobile.
Mobile Tab-Navigation: Tabs mit Unterstrich-Indikator. Die "Mitglieder"-Seite ist der Default. "Einladen"-Tab zeigt das Invite-Panel mit Link-Generator und ausstehendem Invite.
Nachteil: Mehr UI-Fläche für eine seltene Funktion (Invite). Für Haushalte mit 2 Personen wirkt das Panel überdimensioniert.

Datentabelle

Tabellarisches Format mit sortierbaren Spalten: Name, Rolle, Beigetreten, Status, Aktionen. Inline-Aktionen statt Kontextmenü. Kompakt und informationsdicht.

Für Power-User · Viele Mitglieder

Desktop · 1200px

Mitglieder

Name ↕	Rolle	Beigetreten ↕	Status	Aktionen
MR Marcel Raddatz	Planner	14. Jan 2026	Aktiv	—
SR Sarah Raddatz	Mitglied	15. Jan 2026	Aktiv
TM Tom Meier	Mitglied	3. Mär 2026	Aktiv
? inv_x8K2j	—	—	Ausstehend · 2 Tage

Mobile · 390px (Karten-Fallback)

Mitglieder

Marcel Raddatz

Planner · 14. Jan 2026

Sarah Raddatz

Mitglied · 15. Jan 2026

Tom Meier

Mitglied · 3. Mär 2026

inv_x8K2jAusstehend · 2 Tage

Design-Entscheidungen

Ausstehende Einladungen als Tabellenzeilen mit grauem Hintergrund und "?" Avatar — visuell klar von aktiven Mitgliedern getrennt, ohne eigenen Abschnitt zu benötigen.
Sortierbare Spalten (↕) nur auf Desktop sinnvoll — bei 2–4 Mitgliedern keine echte Notwendigkeit. Für Wohngemeinschaften mit 6+ Personen relevant.
Mobile Fallback: Karten statt Tabelle. Tabellen-Layouts kollabieren auf kleinen Bildschirmen schlecht — Karten sind das korrekte Muster für den selben Inhalt auf Mobile.

Erweiterbare Zeilen

Liste mit progressiver Offenlegung. Jede Mitgliederzeile lässt sich aufklappen, um Detailinfos und Aktionen zu zeigen. Kompakte Standardansicht, Details bei Bedarf — kein Seitennavigation nötig.

Gute Balance zwischen V1 und V4

Desktop · 1200px (Sarah-Zeile aufgeklappt)

Mitglieder

Marcel Raddatz

Planner

Details ▼

Sarah Raddatz

Mitglied

Details ▲

Beigetreten 15. Januar 2026 · Zugang zu Planer (Lesen) und Einkauf

Tom Meier

Mitglied

Details ▼

Einladungen · 1

inv_x8K2j2 Tage

Mobile · 390px

Mitglieder

Marcel Raddatz

Planner

▼

Sarah Raddatz

Mitglied

▲

Seit 15. Januar 2026 · Lesen + Einkauf

Tom Meier

Mitglied

▼

Design-Entscheidungen

Der "Zugang entziehen"-Button ist erst nach dem Aufklappen sichtbar — eine natürliche Bestätigungsbarriere ohne expliziten Bestätigungsdialog für das erste Tap.
Aufgeklappte Zeile erhält leichten Surface-Hintergrund (--color-surface) zur visuellen Abgrenzung vom Rest der Liste.
Besser als V1 wenn die Entfernen-Aktion prominent sein soll, aber nicht permanent sichtbar. Schlechter als V1 wenn maximale Einfachheit das Ziel ist.
Auf Mobile: "▼" Chevron als Tap-Target — muss mindestens 44×44px sein. Den gesamten Zeilenbereich tapbar machen ist vorzuziehen.

Machine-readable spec — E2 Mitglieder

Authoritative implementation reference for the /members page. Use before building any component for this route.

/* E2 Members page — implementation rules
 * 1.  Recommended variation: V1 (Roster list). Simplest, lowest overhead, matches household size 2–4.
 * 2.  Avatar colours: Planner = --green-tint bg + --green-dark text. Member = --blue-tint bg + --blue-dark text. Initials only.
 * 3.  Role badges: same colour pairing as avatars. border-radius: --radius-full. font-size: 11px. font-weight: 500.
 * 4.  The planner cannot remove themselves — no remove action on the Planner's row ever.
 * 5.  Pending invites: show expiry in --yellow-tint + --yellow-text when ≤ 3 days remaining, --color-subtle + --color-text-muted otherwise.
 * 6.  Remove action is destructive — requires a confirmation dialog with the member's name before execution.
 * 7.  Invite mechanism: generate a link/code. Copy to clipboard. No email delivery system in v1.
 * 8.  Expired invites: show "Abgelaufen" state. Provide one-tap regeneration — do not require re-opening an invite flow.
 * 9.  Household members can view this page in read-only mode (no invite button, no remove actions, no pending invites section).
 * 10. Desktop sidebar: "Mitglieder" item is active, under "Haushalt" section. Mobile: "Einstellungen" tab is active.
 * 11. WCAG 2.2 AA: avatar initials need 4.5:1 contrast. Role badge text needs 4.5:1 contrast. Confirm before implementing.
 */

Element	Value / Rule	Notes
Avatar
Size	40px × 40px (desktop) · 36px × 36px (mobile)	border-radius: 50%
Planner colour	bg --green-tint · text --green-dark	Contrast OK: #2E6E39 on #E8F5EA ≈ 6.1:1
Member colour	bg --blue-tint · text --blue-dark	Contrast OK: #0C447C on #E6F1FB ≈ 7.4:1
Content	First letter of first + last name (uppercase)	Max 2 characters
Role badge
Shape	border-radius: --radius-full · padding: 3px 10px	font-size: 11px · font-weight: 500
Planner	bg --green-tint · color --green-dark	Label: "Planner"
Member	bg --blue-tint · color --blue-dark	Label: "Mitglied"
Invite / pending
Expiry badge — urgent (≤3d)	bg --yellow-tint · color --yellow-text	"Läuft ab in N Tagen"
Expiry badge — normal	bg --color-subtle · color --color-text-muted	"Läuft ab am DD. MMM"
Code font	font-family: --font-mono · font-size: 13px	Invite codes are monospace
Interactions
Remove action	Confirmation dialog required	Dialog must show member name. Irreversible — member loses access immediately.
Copy invite link	navigator.clipboard.writeText()	Show transient "Kopiert!" feedback (checkmark, 2s)
Regenerate invite	POST /household/invite — returns new code	Old code is immediately invalidated
Responsive
Desktop (≥1024px)	224px sidebar + full content area	Active sidebar item: Mitglieder (Haushalt section)
Mobile (<768px)	No sidebar · bottom nav · "Einstellungen" tab active	V3 mobile uses tab bar within page, not app bottom nav tabs