Weniger anzeigen ≠ bessere UX · Lektion 4

01 / DIE DESIGNENTSCHEIDUNG

Gleiche Daten. Unterschiedliche Wege.

Du gestaltest ein Dashboard zur Materialverwaltung mit drei Informationsebenen: Gruppe, Untergruppe und Materialwert. Auf Desktop passen mehrere Cards nebeneinander. Auf dem Smartphone entsteht daraus eine längere Liste.

Wechsle zwischen „Alle Werte“ und „Progressiv“. Probiere zwei Aufgaben: Welche Gruppe hat die größere Gesamtsumme? Und: Vergleiche Material 1 in Linie A, Linie B und Bereich C. Welche Ansicht hilft dir bei welcher Aufgabe?

MATERIALÜBERSICHT

Dashboard

Fiktive Daten · kg

Gruppensummen bleiben sichtbar. Öffne die Details, wenn du einzelne Materialwerte brauchst.

Produktion

2 Untergruppen

367 kg

Linie A

208 kg

Material 1: 123 kg
Material 2: 85 kg

Linie B

159 kg

Material 1: 98 kg
Material 2: 61 kg

Lager

2 Untergruppen

390 kg

Alle Werte sind fiktiv. Die Aufteilung des Lagers in Bereich C und D wurde für dieses Lernbeispiel ergänzt. Geöffnete Gruppen bleiben beim Ansichtswechsel erhalten; nach einem Neuladen startet die Vorschau wieder mit geöffneter Produktion und geschlossenem Lager.

Die progressive Variante priorisiert die Gruppensummen: Produktion mit 367 kg und Lager mit 390 kg. Für diese Frage musst du keine Details öffnen. Um einzelne Materialwerte über Gruppen hinweg zu vergleichen, brauchst du dagegen zusätzliche Schritte.

Die vollständige Variante macht alle Werte direkt erreichbar. Auf kleinen Displays verlangt sie dafür mehr Scrollen und Sucharbeit. Beide Darstellungen sind eigene, fiktive Lernbeispiele und wurden nicht mit Nutzern getestet.

02 / DIE AUFGABE ENTSCHEIDET

Progressive Disclosure ist keine Platzspartechnik.

Progressive Disclosure verschiebt nachrangige Informationen oder Funktionen auf eine weitere Ebene, die bei Bedarf geöffnet wird. Entscheidend ist die Trennung zwischen dem, was Menschen regelmäßig brauchen, und dem, was sie nur gelegentlich benötigen. Nielsen Norman Group: Progressive Disclosure.

Relevanz: Welche Informationen sind für die wichtigste Aufgabe sofort nötig?
Häufigkeit: Welche Details werden regelmäßig und welche nur gelegentlich gebraucht?
Entdeckbarkeit: Erkennen Menschen, dass weitere Inhalte vorhanden sind und wie sie diese öffnen?

Ein sinnvoller Kompromiss kann sein, Gruppensummen und kritische Statusinformationen sichtbar zu lassen und selten benötigte Details aufzuklappen. Eine eingeklappte Gruppe muss bereits etwas Nützliches sagen – ein Titel allein reicht für die Materialübersicht nicht.

Unsere Vorschau erlaubt mehrere geöffnete Gruppen gleichzeitig. Ein Accordion, das beim Öffnen einer Gruppe automatisch eine andere schließt, würde den Vergleich zusätzlich erschweren. Wähle dieses Verhalten nicht nur, weil es ein bekanntes Pattern ist.

03 / DEINE CHALLENGE · 10 MINUTEN

Zwei mobile Entwürfe. Eine begründete Wahl.

Gestalte in Figma zwei Ansichten bei 375 px Breite oder implementiere sie in React. Verwende für beide Varianten dieselben Materialdaten.

Nutzeraufgabe · 3 Minuten: Lege fest, was die Person erreichen möchte: etwa die größere Gruppensumme finden oder Materialwerte mehrerer Untergruppen vergleichen. Benenne, welche Information sie dazu braucht.
Design · 5 Minuten: Entwirf eine vollständige und eine progressive Darstellung mit Gruppe, Untergruppe und Materialwerten. Achte auf Informationshierarchie, konsistente Abstände und erkennbare Interaktionen.
Entscheidung · 2 Minuten: Wähle eine Variante für deine Aufgabe. Begründe sie und benenne einen konkreten Nachteil, der trotzdem bleibt.

Bonus für React

Nutze echte Buttons, eindeutige IDs und aria-expanded. Über aria-controls ordnest du dem Button seinen Inhaltsbereich zu. hidden blendet geschlossene Inhalte aus. Beim Öffnen kann der Fokus auf dem Button bleiben; Enter und Leertaste müssen die Gruppe bedienen können. W3C: Disclosure-Pattern.

Die unten gezeigte Referenz nutzt useId(), statt IDs aus Gruppennamen abzuleiten. Damit bleiben auch mehrere Instanzen mit gleichen Namen auf derselben Seite eindeutig.

04 / EINE MÖGLICHE MUSTERLÖSUNG

Vergleiche erleichtern, statt Details verstecken.

Unsere Beispielaufgabe lautet: „Vergleiche täglich Material 1 in Linie A, Linie B und Bereich C.“ Für diesen Fall würde ich eine gemeinsame Vergleichsansicht anbieten. Eine Tabelle ist dabei ein möglicher Entwurf, kein universeller Ersatz für die Gruppenübersicht.

Musterlösung mit Vergleichsansicht öffnen

Kennzahl vergleichen

Material 1 in allen Untergruppen, in Kilogramm
Gruppe	Untergruppe	Material 1 (kg)
Produktion	Linie A	123
Produktion	Linie B	98
Lager	Bereich C	140
Lager	Bereich D	110

Einheitliche Einheit, eine gemeinsame Zahlenspalte, alle Untergruppen sichtbar. Weitere Kennzahlen sind über die Auswahl erreichbar.

Warum diese Variante?

Die benötigten Werte bleiben gleichzeitig erreichbar. Für Material 1 muss keine Gruppe geöffnet werden. Auf dem Smartphone sind die Zeilen direkt untereinander angeordnet.
Eine Kennzahl, eine Einheit. Alle Werte stehen in derselben Zahlenspalte. Gruppe und Untergruppe bleiben als Kontext erhalten.
Die Reduktion folgt der Aufgabe. Andere Kennzahlen sind über die Auswahl erreichbar. Das ist ebenfalls eine Form von Disclosure – diesmal liegt das häufig benötigte Material direkt im Vordergrund.
Der Nachteil bleibt sichtbar. Mehrere unterschiedliche Kennzahlen gleichzeitig zu vergleichen erfordert hier einen Wechsel. Wer regelmäßig Material 1 und 2 nebeneinander braucht, benötigt eine andere Vergleichsansicht.

Wann wäre die progressive Gruppenansicht passender?

Wenn die Person hauptsächlich die größere Gruppensumme finden und nur gelegentlich Details prüfen möchte. Dann liefern 367 kg und 390 kg sofort die entscheidende Information; Materialwerte können nachgeordnet sein. Kritische Warnungen dürften trotzdem nicht unbemerkt in geschlossenen Gruppen verschwinden.

Wie würdest du die Entscheidung prüfen?

Gib beiden Varianten dieselbe Aufgabe und beobachte, ob Personen die Werte korrekt finden, welche Gruppen sie öffnen und wo sie suchen oder zurückspringen. Erfasse zum Beispiel richtige Antworten und die Zeit bis zum vollständigen Vergleich. Ein niedrigerer Klickwert allein beweist keine bessere UX.

React-Code und CSS des Lernbeispiels ansehen

Der Code enthält die beiden Dashboard-Ansichten, die ergänzten fiktiven Daten und die Vergleichstabelle der Musterlösung. Die CSS-Datei wird vom React-Modul importiert.

coaching-disclosure-dashboard.tsx

"use client";

import { useId, useState } from "react";
import "./coaching-disclosure-dashboard.css";

// Fictitious exercise data. The storage breakdown supplements the source example.
export const materialGroups = [
  { name: "Produktion", subgroups: [
    { name: "Linie A", material1: 123, material2: 85 },
    { name: "Linie B", material1: 98, material2: 61 },
  ] },
  { name: "Lager", subgroups: [
    { name: "Bereich C", material1: 140, material2: 80 },
    { name: "Bereich D", material1: 110, material2: 60 },
  ] },
] as const;

type MaterialGroup = (typeof materialGroups)[number];
type Metric = "material1" | "material2" | "total";
const metricLabels: Record<Metric, string> = {
  material1: "Material 1", material2: "Material 2", total: "Untergruppensumme",
};

function MetricGroup({ group, progressive, initiallyOpen }: {
  group: MaterialGroup; progressive: boolean; initiallyOpen: boolean;
}) {
  const [open, setOpen] = useState(initiallyOpen);
  const id = useId();
  const contentId = `${id}-details`;
  const titleId = `${id}-title`;
  const visible = !progressive || open;
  const total = group.subgroups.reduce((sum, row) => sum + row.material1 + row.material2, 0);
  return <section className="material-group" aria-labelledby={titleId}>
    <div className="material-group-header">
      <div><h4 id={titleId}>{group.name}</h4><p>{group.subgroups.length} Untergruppen</p></div>
      <strong className="material-total">{total} <span>kg</span></strong>
      {progressive && <button type="button" className="material-disclosure" aria-expanded={open} aria-controls={contentId} aria-label={`${open ? "Details ausblenden" : "Details anzeigen"}: ${group.name}`} onClick={() => setOpen(value => !value)}>{open ? "Weniger" : "Details"} <span aria-hidden="true">{open ? "−" : "+"}</span></button>}
    </div>
    <div id={contentId} hidden={!visible} className="material-subgroups">
      {group.subgroups.map(row => <div className="material-subgroup" key={row.name}>
        <div className="material-subgroup-header"><h5>{row.name}</h5><strong>{row.material1 + row.material2} kg</strong></div>
        <dl><div><dt>Material 1</dt><dd>{row.material1} kg</dd></div><div><dt>Material 2</dt><dd>{row.material2} kg</dd></div></dl>
      </div>)}
    </div>
  </section>;
}

export function CoachingDisclosureDashboard() {
  const [progressive, setProgressive] = useState(true);
  return <div className="material-demo">
    <div className="material-mode" role="group" aria-label="Darstellung der Materialübersicht">
      <button type="button" aria-pressed={!progressive} onClick={() => setProgressive(false)}>Alle Werte</button>
      <button type="button" aria-pressed={progressive} onClick={() => setProgressive(true)}>Progressiv</button>
    </div>
    <div className="material-dashboard">
      <div className="material-dashboard-heading"><div><p className="material-kicker">MATERIALÜBERSICHT</p><h3>Dashboard</h3></div><span>Fiktive Daten · kg</span></div>
      <p className="material-mode-description">{progressive ? "Gruppensummen bleiben sichtbar. Öffne die Details, wenn du einzelne Materialwerte brauchst." : "Alle Gruppen, Untergruppen und Materialwerte sind ohne Aufklappen sichtbar."}</p>
      <div className="material-group-grid">{materialGroups.map((group, index) => <MetricGroup key={group.name} group={group} progressive={progressive} initiallyOpen={index === 0} />)}</div>
    </div>
    <p className="material-demo-note">Alle Werte sind fiktiv. Die Aufteilung des Lagers in Bereich C und D wurde für dieses Lernbeispiel ergänzt. Geöffnete Gruppen bleiben beim Ansichtswechsel erhalten; nach einem Neuladen startet die Vorschau wieder mit geöffneter Produktion und geschlossenem Lager.</p>
  </div>;
}

export function CoachingMaterialComparison() {
  const [metric, setMetric] = useState<Metric>("material1");
  const id = useId();
  return <div className="material-comparison">
    <label htmlFor={id}>Kennzahl vergleichen</label>
    <select id={id} value={metric} onChange={event => setMetric(event.target.value as Metric)}>
      <option value="material1">Material 1</option><option value="material2">Material 2</option><option value="total">Untergruppensumme</option>
    </select>
    <table><caption>{metricLabels[metric]} in allen Untergruppen, in Kilogramm</caption>
      <thead><tr><th scope="col">Gruppe</th><th scope="col">Untergruppe</th><th scope="col">{metric === "total" ? "Summe" : metricLabels[metric]} (kg)</th></tr></thead>
      <tbody>{materialGroups.flatMap(group => group.subgroups.map(row => <tr key={`${group.name}-${row.name}`}><td>{group.name}</td><th scope="row">{row.name}</th><td>{metric === "total" ? row.material1 + row.material2 : row[metric]}</td></tr>))}</tbody>
    </table>
    <p>Einheitliche Einheit, eine gemeinsame Zahlenspalte, alle Untergruppen sichtbar. Weitere Kennzahlen sind über die Auswahl erreichbar.</p>
  </div>;
}

coaching-disclosure-dashboard.css

.material-demo,.material-comparison{max-width:860px;margin-top:24px;color:#1c2633}
.material-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.material-mode button{border:1px solid #738095;border-radius:6px;padding:10px 16px;min-height:44px;font-size:13px;line-height:1.6;background:white}
.material-mode button[aria-pressed=true]{color:white;border-color:#2558ed;background:#2558ed}
.material-dashboard{background:#eef1f7;border:1px solid #d1d8e5;border-radius:12px;padding:24px}
.material-dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.material-dashboard p.material-kicker{font:9px/1.8 monospace;letter-spacing:.1em;color:#536681}
.material-dashboard-heading h3{font-size:26px;line-height:1.3;font-weight:500;margin:8px 0 0}
.material-dashboard-heading>span{font-size:11px;color:#536681;line-height:1.8}
.material-dashboard p.material-mode-description{font-size:13px;line-height:1.8;color:#536174;margin-top:16px;max-width:620px}
.material-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-top:22px}
.material-group{background:white;border:1px solid #c7d0df;border-radius:10px;overflow:hidden;min-width:0}
.material-group-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px}
.material-group-header>div{flex:1}
.material-group-header h4{font-size:17px;font-weight:600;line-height:1.6;margin:0}
.material-group-header p{font-size:11px;line-height:1.8;color:#536174;margin-top:2px}
.material-total{font-size:25px;line-height:1.3;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.material-total span{font-size:13px;color:#536174}
.material-disclosure{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;width:100%;border-top:1px solid #d5ddea;padding-top:12px;color:#254ab5;font-size:12px;line-height:1.8;text-decoration:underline;text-underline-offset:4px}
.material-disclosure>span{font-size:18px;text-decoration:none}
.material-subgroups{border-top:1px solid #d5ddea;padding:0 20px}
.material-subgroup{padding:18px 0}
.material-subgroup+.material-subgroup{border-top:1px solid #e0e5ef}
.material-subgroup-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;line-height:1.7}
.material-subgroup-header h5{font-size:14px;font-weight:500;margin:0}
.material-subgroup-header strong{font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.material-subgroup dl{margin-top:12px}
.material-subgroup dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.8;color:#536174;margin-top:6px}
.material-subgroup dd{color:#253147;font-variant-numeric:tabular-nums;white-space:nowrap}
.material-demo p.material-demo-note{font-size:12px;line-height:1.8;color:#536174;margin-top:16px}
.material-comparison{background:white;border:1px solid #cbd4e4;border-radius:10px;padding:24px}
.material-comparison>label{display:block;font-size:13px;font-weight:500;margin-bottom:10px;line-height:1.8}
.material-comparison>select{display:block;min-height:46px;max-width:100%;padding:10px 32px 10px 12px;border:1px solid #737e90;border-radius:6px;background:#fff;font-size:14px;color:#253147}
.material-comparison table{border-collapse:collapse;table-layout:fixed;width:100%;margin-top:20px;font-size:14px;line-height:1.8}
.material-comparison caption{text-align:left;font-size:12px;color:#536174;padding-bottom:12px}
.material-comparison :is(td,th){padding:12px 10px;border-bottom:1px solid #d5ddea;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.material-comparison thead th{background:#eef2fa;font-size:12px;font-weight:500}
.material-comparison tbody th{font-weight:500}
.material-comparison :is(th,td):last-child{text-align:right;font-variant-numeric:tabular-nums}
.material-comparison>p{font-size:13px;line-height:1.8;color:#536174;margin-top:16px}
.material-demo :is(button,select):focus-visible,.material-comparison select:focus-visible{outline:3px solid #2558ed;outline-offset:3px}
@media(max-width:640px){.material-dashboard,.material-comparison{padding:18px}.material-group-grid{grid-template-columns:1fr;gap:14px}.material-group-header{padding:18px}.material-subgroups{padding:0 18px}.material-dashboard-heading h3{font-size:24px}.material-dashboard-heading>span{font-size:10px}.material-mode button{font-size:12px;padding:10px 14px}.material-comparison :is(td,th){padding:10px 5px;font-size:11px}.material-comparison caption{font-size:11px}.material-comparison>select{font-size:13px}.material-total{font-size:26px}}

05 / REFLEXION

Was passiert nach dem ersten Aufklappen?

Menschen vergleichen täglich Werte aus drei Untergruppen. Würdest du weiterhin auf aufklappbare Gruppen setzen? Welche Alternative erleichtert genau diese Aufgabe?
Sollte sich das Dashboard zuletzt geöffnete Gruppen merken? Welche Vorteile entstehen – und welche Erwartungen oder Probleme könnten daraus folgen?

Mögliche Antworten zur Reflexion ansehen

Ein häufig benötigter Vergleich verdient einen direkten Weg.

Eine gemeinsame Tabelle, eine auf die Vergleichsaufgabe zugeschnittene Liste oder eine gezielte Auswahl relevanter Untergruppen kann das wiederholte Öffnen ersetzen. Wichtig ist, welche Kennzahlen gleichzeitig benötigt werden. Die Musterlösung priorisiert eine Kennzahl; bei einem anderen Vergleichsziel wäre das zu wenig.

Gespeicherte Zustände sind eine bewusste Produktentscheidung.

Erinnerte Gruppen können wiederholtes Aufklappen sparen. Nach einem Projektwechsel könnten alte Zustände aber unpassend sein, und auf gemeinsam genutzten Geräten könnte eine Person die Ansicht einer anderen übernehmen. Lege fest, ob Einstellungen nur für die Sitzung, pro Projekt oder pro Konto gelten. Ein sichtbares Zurücksetzen und weiterhin sichtbare kritische Informationen helfen, Überraschungen zu vermeiden.

Unsere Vorschau speichert nichts dauerhaft. Ein Wechsel zwischen „Alle Werte“ und „Progressiv“ erhält die aktuellen Gruppen innerhalb der Seite; ein Neuladen setzt sie zurück.

DEIN MERKSATZ

Die beste Informationshierarchie ist nicht die mit den wenigsten sichtbaren Elementen.

Sie ist diejenige, die Menschen für ihre konkrete Aufgabe die wenigste unnötige Arbeit abverlangt.