Design Critique: Erkennst du die wichtigsten UI-Probleme?

01 / DESIGN REVIEW · 3 MINUTEN

Welche Entscheidung unterstützt dieses Dashboard?

Die wichtigste Nutzeraufgabe lautet: „Erkennen, ob die CO₂-Bilanz kritisch ist und welche Maßnahmen erforderlich sind.“ Betrachte den folgenden fiktiven Entwurf zuerst ungefähr 30 Sekunden. Notiere, was du verstehst und was du für eine Entscheidung noch wissen müsstest. Lies erst danach weiter.

Der Prototyp ist eine statische Illustration, kein bedienbares Produkt. Seine Zahlen, Markenbezeichnung und Daten sind erfunden. Beurteile ihn an der genannten Aufgabe, nicht daran, ob du selbst eine andere Schrift oder Rundung bevorzugen würdest.

02 / DEINE CHALLENGE · 7 MINUTEN

Welche drei Probleme behebst du zuerst?

Wähle drei Bereiche und ordne sie nach Priorität. Begründe für jeden eine konkrete Nutzerwirkung und eine mögliche Verbesserung. Ein auffälliger Stilbruch muss nicht das größte Problem sein; ein unklarer Messwert oder eine nicht erreichbare Aktion kann die Aufgabe vollständig verhindern.

Für deine Begründung hilft diese Kette: Beobachtung → mögliche Folge → Verbesserung → Prüfung. Beispiel: „Der Umsatz ist visuell am stärksten gewichtet. Dadurch könnte die Emissionsbewertung zu spät auffallen. Ich stelle Emissionen, Zielabweichung und nächste Aktion zuerst dar und prüfe, ob Menschen den Status korrekt erkennen.“ Das ist eine überprüfbare Hypothese, keine behauptete Nutzerbeobachtung.

03 / UMSETZUNG IN FIGMA ODER REACT · 3 MINUTEN

Eine Karte, die eine Entscheidung vorbereitet.

Gestalte eine verbesserte CO₂-Karte mit klarer Hierarchie, nachvollziehbarem Vergleichszeitraum und verständlicher Risikobewertung. Kläre zuerst, welche Messgröße und welcher Zielwert tatsächlich gelten. Ein roter statt grüner Pfeil allein löst die fehlende Bedeutung nicht.

"use client";

import { useEffect, useId, useRef, useState, type FormEvent } from "react";
import { Info } from "lucide-react";
import { critiqueTopics, moveCritiqueTopic, toggleCritiqueTopic, type CritiqueTopicId } from "@/lib/coaching-design-critique";
import "./coaching-design-critique.css";

export function CoachingFlawedDashboard() {
  const id = useId();
  return <figure className="critique-reference"><figcaption>Bewusst fehlerhafter Designprototyp · fiktive Werte · alle dargestellten Bedienelemente sind unbewegliche Illustrationen.</figcaption><div className="critique-dashboard">
    <p className="critique-brand">ECOMETRICS / OVERVIEW</p><div className="critique-dash-heading"><div><h3>Dashboard</h3><p>Ihre aktuellen Kennzahlen</p></div><span className="critique-fake-select">Oktober 2026 ▾</span></div>
    <div className="critique-kpis"><section className="critique-revenue" aria-labelledby={`${id}-revenue`}><h4 id={`${id}-revenue`}>Umsatz</h4><strong>84.520 €</strong><span>↗ +8,2 %</span></section><section className="critique-emissions" aria-labelledby={`${id}-emissions`}><h4 id={`${id}-emissions`}>CO₂-Ausstoß</h4><strong>8.540kg</strong><span>▲ +18 %</span></section><section aria-labelledby={`${id}-offset`}><h4 id={`${id}-offset`}>Kompensation</h4><strong>6.280</strong><span>kg CO₂</span></section><section aria-labelledby={`${id}-energy`}><h4 id={`${id}-energy`}>Energie</h4><strong>12.400</strong><span>kWh</span></section></div>
    <div className="critique-chart"><div><h4>CO₂ Entwicklung</h4><span className="critique-fake-more">Mehr →</span></div><svg viewBox="0 0 640 140" role="img" aria-label="Eine nach rechts steigende blaue Linie. Es sind keine Achsenwerte, Zeitpunkte oder Legende angegeben."><path d="M0 30H640M0 70H640M0 110H640" fill="none" stroke="#dfe5f0" /><path d="M10 115L90 100L170 108L250 70L330 80L410 45L490 52L570 20L630 10" fill="none" stroke="#426cf4" strokeWidth="4" /></svg></div>
    <div className="critique-dash-footer"><span>Zuletzt aktualisiert: 06:45</span><span className="critique-fake-report">Bericht erstellen</span></div>
  </div></figure>;
}

export function CoachingCritiquePriorities() {
  const [selection, setSelection] = useState<CritiqueTopicId[]>([]);
  const [reason, setReason] = useState("");
  const [notice, setNotice] = useState("");
  const [compared, setCompared] = useState(false);
  const feedback = useRef<HTMLHeadingElement>(null);
  const ranking = useRef<HTMLHeadingElement>(null);
  const id = useId();
  useEffect(() => { if (compared) feedback.current?.focus(); }, [compared]);
  function toggle(topic: CritiqueTopicId) {
    const next = toggleCritiqueTopic(selection, topic);
    setSelection(next.selection); setNotice(next.notice); setCompared(false);
  }
  function submit(event: FormEvent) {
    event.preventDefault();
    if (selection.length !== 3 || !reason.trim()) { setNotice("Wähle genau drei Probleme und begründe ihre Wirkung auf die Nutzeraufgabe."); setCompared(false); return; }
    setNotice(""); setCompared(true);
  }
  return <form className="critique-priorities" onSubmit={submit} noValidate>
    <fieldset aria-describedby={`${id}-selection-hint ${id}-notice`}><legend>Wähle deine Top 3</legend><p className="critique-note" id={`${id}-selection-hint`}>Wähle genau drei Bereiche. Ihre Reihenfolge kannst du anschließend ändern.</p><p className="critique-count" role="status" aria-atomic="true">{selection.length}/3 gewählt</p>{critiqueTopics.map(topic => <label className="critique-choice" key={topic.id}><input type="checkbox" checked={selection.includes(topic.id)} onChange={() => toggle(topic.id)} /><span>{topic.label}</span></label>)}</fieldset>
    {selection.length > 0 && <div className="critique-ranking"><h3 ref={ranking} tabIndex={-1}>Deine Reihenfolge</h3><ol>{selection.map((topicId, index) => { const topic = critiqueTopics.find(item => item.id === topicId)!; return <li key={topicId}><span>{index + 1}. {topic.label}</span><div><button type="button" disabled={index === 0} aria-label={`${topic.label}: Priorität erhöhen`} onClick={() => { setSelection(current => moveCritiqueTopic(current, topicId, -1)); setCompared(false); ranking.current?.focus(); }}>↑</button><button type="button" disabled={index === selection.length - 1} aria-label={`${topic.label}: Priorität senken`} onClick={() => { setSelection(current => moveCritiqueTopic(current, topicId, 1)); setCompared(false); ranking.current?.focus(); }}>↓</button></div></li>; })}</ol></div>}
    <label className="critique-reason-label" htmlFor={`${id}-reason`}>Warum diese drei zuerst? Nenne die Nutzerwirkung und eine konkrete Verbesserung.</label><textarea id={`${id}-reason`} rows={4} value={reason} onChange={event => { setReason(event.target.value); setCompared(false); setNotice(""); }} aria-describedby={`${id}-reason-hint ${id}-notice`} /><p className="critique-note" id={`${id}-reason-hint`}>Dein Freitext bleibt lokal und wird nicht automatisch bewertet. Die Rückmeldung ist eine begründete Vergleichsperspektive, keine Punktzahl.</p><p className="critique-error" id={`${id}-notice`} role="alert">{notice}</p><button type="submit" className="critique-primary">Mit Musterpriorisierung vergleichen</button>
    {compared && <section className="critique-feedback" aria-labelledby={`${id}-feedback`}><h3 id={`${id}-feedback`} ref={feedback} tabIndex={-1}>Eine mögliche fachliche Priorisierung</h3><p>Für die Aufgabe „kritische CO₂-Bilanz erkennen und Maßnahmen ableiten“ würde ich zuerst den Datenkontext klären, dann die Bewertung verständlich machen und die visuelle Priorisierung daran ausrichten.</p><ol>{[...critiqueTopics].filter(topic => topic.priority !== null).sort((a, b) => a.priority! - b.priority!).map(topic => <li key={topic.id}><strong>{topic.label}</strong><p>{topic.explanation}</p></li>)}</ol><h4>Deine Auswahl im Kontext</h4><ul>{selection.map(topicId => { const topic = critiqueTopics.find(item => item.id === topicId)!; return <li key={topicId}><strong>{topic.label}</strong><p>{topic.explanation}</p></li>; })}</ul><p>Eine andere Reihenfolge kann gut begründet sein. Wenn ein Control den Zugang zu einer nötigen Maßnahme verhindert oder ein Diagramm die Entscheidung trägt, kann dessen Korrektur Vorrang haben. Prüfe deine Begründung: Welches Fehlverständnis oder Hindernis beseitigt die Änderung?</p></section>}
  </form>;
}

export function CoachingCritiqueSolution() {
  const [large, setLarge] = useState(false);
  const [context, setContext] = useState(false);
  const id = useId();
  return <div className="critique-solution"><label className="critique-choice"><input type="checkbox" checked={large} onChange={event => setLarge(event.target.checked)} /> Text der Musterkarte auf 200 %</label><p className="critique-note">Zusätzliche Beispielannahmen: Die Quelle liefert kg CO₂e für den gesamten Beispielmonat Oktober 2026. Ein fiktives Monatsziel von höchstens 8.000 kg CO₂e ist vereinbart. Das ist keine aus dem ursprünglichen Dashboard ableitbare Tatsache und keine Umrechnung von CO₂ in CO₂e.</p>
    <section className={`critique-good-kpi${large ? " has-large-text" : ""}`} aria-labelledby={`${id}-title`}><div className="critique-good-header"><h3 id={`${id}-title`}>CO₂-Ausstoß</h3><button className="critique-info" type="button" aria-label={context ? "Datenkontext ausblenden" : "Datenkontext anzeigen"} aria-expanded={context} aria-controls={`${id}-context`} onClick={() => setContext(value => !value)}><Info size={20} aria-hidden="true" /></button></div><p className="critique-period">Beispielmonat Oktober 2026</p><p className="critique-good-value"><strong>8.540</strong>{" "}<span>kg CO₂e</span></p><p className="critique-good-trend">18 % mehr als im September 2026</p><p className="critique-risk"><strong>Prüfen: Monatsziel überschritten</strong><span>540 kg CO₂e über dem Beispielziel von 8.000 kg CO₂e.</span></p><div id={`${id}-context`} hidden={!context} className="critique-context"><p>Die Werte sind fiktiv. Als Vergleich nehmen wir für September gerundet 7.237 kg CO₂e an; die Veränderung ist gerundet. Beide Monate verwenden im Beispiel dieselbe Abgrenzung. Im Original sind diese Angaben offen.</p><p>Der Wert bezeichnet hier Bruttoemissionen. Eine Kompensationsangabe wird nicht davon abgezogen. Datenqualität, Produktionsmenge und Ursachen müssen gesondert geprüft werden.</p></div><details className="critique-measures"><summary>Maßnahmen prüfen</summary><ol><li>Vollständigkeit und Abgrenzung der Daten prüfen.</li><li>Veränderung nach Quellen oder Prozessen untersuchen.</li><li>Mit Verantwortlichen passende Maßnahmen und einen Prüfzeitpunkt festlegen.</li></ol><p>Vorgeschlagener Prüfablauf, keine automatisch ermittelte Ursache oder nachgewiesene Einsparung.</p></details></section>
    <p className="critique-note">Die Textoption vergrößert nur die Beispielkarte. Prüfe zusätzlich 320 CSS-Pixel und Browserzoom. Das Beispiel ersetzt keinen vollständigen Accessibility-Test.</p>
  </div>;
}

.critique-reference{margin:24px 0 0;max-width:960px;min-width:0}
.critique-reference figcaption{font-size:12px;line-height:1.8;color:#536174;margin-bottom:12px}
.critique-dashboard{padding:24px;border:1px solid #c7d0e0;border-radius:12px;background:#f0f3fa;font-family:system-ui,sans-serif;color:#26364d}
.lesson-content .critique-brand{font:10px/1.8 monospace;letter-spacing:.08em;margin:0;color:#536174}
.critique-dash-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:20px 0}
.lesson-content .critique-dash-heading h3{font:600 24px/1.4 system-ui,sans-serif;margin:0}
.lesson-content .critique-dash-heading p{font-size:13px;line-height:1.8;color:#536174;margin:8px 0 0}
.critique-fake-select{display:inline-block;padding:5px 8px;border:1px solid #c2cbdc;border-radius:4px;background:white;font-size:11px;line-height:1.7}
.critique-kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px}
.critique-kpis>section{padding:18px 14px;background:white;border:1px solid #d0d8e7;border-radius:8px;min-width:0;overflow-wrap:anywhere}
.lesson-content .critique-kpis h4{font:500 12px/1.6 system-ui,sans-serif;margin:0;color:#536174}
.critique-kpis strong{display:block;font-size:25px;font-weight:500;line-height:1.4;margin-top:20px}
.critique-kpis span{display:block;font-size:12px;line-height:1.8;margin-top:8px}
.critique-kpis .critique-revenue{background:#e4ebff;border-color:#b4c4f0}
.critique-kpis .critique-revenue strong{font-size:34px;font-weight:750}
.critique-kpis .critique-revenue span,.critique-kpis .critique-emissions span{color:#227448}
.critique-kpis .critique-emissions strong{font-size:22px;line-height:1.4;margin-top:26px}
.critique-chart{border:1px solid #d0d8e7;border-radius:8px;background:white;margin-top:20px;padding:18px}
.critique-chart>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lesson-content .critique-chart h4{font-size:14px;line-height:1.8;margin:0;font-weight:500}
.critique-fake-more{font-size:10px;line-height:1.6;color:#3457a5}
.critique-chart svg{display:block;width:100%;height:auto;max-height:160px;margin-top:18px}
.critique-dash-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:10px;line-height:1.8;color:#536174}
.critique-fake-report{background:#2558ed;color:white;padding:6px 10px;border-radius:4px}
.critique-priorities{max-width:860px;border:1px solid #c5d0e3;padding:24px;border-radius:12px;background:white;margin-top:24px;min-width:0}
.critique-priorities fieldset{border:0;padding:0;min-width:0}
.critique-priorities legend{font-size:20px;font-weight:500;line-height:1.6}
.lesson-content .critique-count{font-size:13px;line-height:1.8;color:#34559a;margin-top:10px}
.critique-choice{display:flex;align-items:flex-start;gap:12px;padding:14px 0;min-height:44px;font-size:14px;line-height:1.8;cursor:pointer;overflow-wrap:anywhere}
.critique-choice input{width:18px;height:18px;flex-shrink:0;accent-color:#2558ed;margin-top:3px}
.critique-priorities fieldset .critique-choice{border-bottom:1px solid #d9dfeb}
.critique-priorities button{min-height:44px;padding:10px 14px;border:1px solid #748198;border-radius:6px;font-size:13px;line-height:1.7;background:white;color:#253850;max-width:100%;overflow-wrap:anywhere}
.critique-priorities button.critique-primary{background:#2558ed;border-color:#2558ed;color:white;margin-top:16px}
.critique-priorities button:disabled{opacity:.45;cursor:not-allowed}
.lesson-content .critique-ranking h3{font-size:18px;line-height:1.6;margin:24px 0 12px;scroll-margin-top:110px}
.critique-ranking ol{list-style:none;padding:0;margin:0}
.critique-ranking li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #d9dfeb;padding:12px 0}
.critique-ranking li>span{font-size:13px;line-height:1.8;flex:1 1 220px;overflow-wrap:anywhere}
.critique-ranking li>div{display:flex;gap:8px}
.critique-ranking button{min-width:44px}
.critique-reason-label{display:block;font-size:14px;line-height:1.8;font-weight:500;margin:24px 0 10px}
.critique-priorities textarea{display:block;width:100%;max-width:100%;min-width:0;padding:12px;border:1px solid #748198;border-radius:7px;font-size:15px;line-height:1.8;resize:vertical}
.lesson-content .critique-note{font-size:12px;line-height:1.8;color:#536174;margin-top:12px}
.lesson-content .critique-error{font-size:13px;line-height:1.8;color:#963c23;margin-top:12px}
.critique-error:empty{margin:0}
.critique-feedback{padding:20px;border-left:3px solid #2558ed;background:#edf2ff;margin-top:24px}
.lesson-content .critique-feedback h3{font-size:21px;line-height:1.6;margin:0 0 12px;scroll-margin-top:110px}
.lesson-content .critique-feedback h4{font-size:16px;line-height:1.8;font-weight:600;margin-top:24px}
.lesson-content .critique-feedback p,.lesson-content .critique-feedback li{font-size:14px;line-height:1.8}
.critique-feedback :is(ol,ul){padding-left:20px;margin-top:16px}
.critique-feedback li+li{margin-top:18px}
.critique-solution{margin-top:24px;min-width:0}
.critique-good-kpi{max-width:520px;padding:24px;border:1px solid #bdcbe3;border-radius:12px;background:#f4f7fd;color:#1e304c;font:16px/1.7 system-ui,sans-serif;margin-top:24px;overflow-wrap:anywhere}
.critique-good-kpi.has-large-text{font-size:32px}
.critique-good-header{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.lesson-content .critique-good-header h3{font:500 1em/1.6 system-ui,sans-serif;margin:0;overflow-wrap:anywhere}
.critique-info{display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;flex-shrink:0;border:1px solid #8b9fbe;border-radius:7px;background:white;color:#284c8b}
.lesson-content .critique-period{font-size:.75em;line-height:1.8;color:#536174;margin-top:8px}
.lesson-content .critique-good-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:1em;line-height:1.5;margin:20px 0 0;color:#1e304c;font-variant-numeric:tabular-nums}
.critique-good-value strong{font-size:2em;line-height:1.2;font-weight:700;max-width:100%}
.critique-good-value>span{font-size:.875em;line-height:1.8;color:#44536c}
.lesson-content .critique-good-trend{font-size:.875em;line-height:1.8;color:#8f351d;margin-top:16px}
.lesson-content .critique-risk{border-left:3px solid #b34c2e;padding-left:12px;font-size:.8125em;line-height:1.8;color:#8f351d;margin-top:12px}
.critique-risk>span{display:block;color:#44536c;margin-top:8px}
.critique-context{border-top:1px solid #cbd6e8;margin-top:20px;padding-top:8px}
.lesson-content .critique-context p{font-size:.8125em;line-height:1.8;margin-top:12px;color:#44536c}
.critique-measures{border-top:1px solid #cbd6e8;margin-top:24px;padding-top:8px}
.critique-good-kpi .critique-measures summary{min-height:44px;padding:10px 0;font-size:.875em;line-height:1.8;cursor:pointer;color:#2449a8}
.critique-measures ol{padding-left:20px;margin-top:12px}
.lesson-content .critique-measures :is(li,p){font-size:.8125em;line-height:1.8;color:#44536c}
.critique-priorities :is(button,input,textarea,h3):focus-visible,.critique-solution :is(button,input,summary):focus-visible{outline:3px solid #2558ed;outline-offset:3px}
@media(max-width:900px){.critique-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.critique-dashboard,.critique-priorities,.critique-good-kpi{padding:16px}.critique-kpis{grid-template-columns:1fr}.critique-feedback{padding:16px}.critique-kpis .critique-revenue strong{font-size:34px}}

export const critiqueTopics = [
  { id: "hierarchy", label: "Visuelle Priorisierung der KPI-Karten", priority: 3, explanation: "Der Umsatz dominiert, obwohl die Aufgabe die CO₂-Überwachung ist. Die wichtigste Kennzahl, ihre Bewertung und der nächste Schritt sollten zuerst erfassbar sein." },
  { id: "meaning", label: "Farben und Bedeutung der Trends", priority: 2, explanation: "Das grüne Plus bei Emissionen kann als Entwarnung gelesen werden. Erst mit einem bekannten Ziel ist eine Bewertung begründet; zusätzlich zur Farbe braucht sie Text." },
  { id: "chart", label: "Verständlichkeit und Aussagekraft des Diagramms", priority: null, explanation: "Ohne Skala, Zeitraum und Bedeutung der Linie lässt sich keine belastbare Entwicklung ablesen. Wenn gerade diese Entwicklung die Entscheidung trägt, kann das Diagramm zu deinen ersten drei Problemen gehören." },
  { id: "controls", label: "Größe und Erkennbarkeit der Bedienelemente", priority: null, explanation: "Kleine oder unklare Ziele erschweren die Bedienung. Wenn sie Menschen an der zentralen Aufgabe hindern, haben sie Vorrang. Der statische Entwurf allein zeigt noch keine gemessene Trefferfläche oder Fehlerrate." },
  { id: "typography", label: "Zahlenformatierung, Einheiten und Typografie", priority: null, explanation: "Abstände und eindeutige Einheiten sind wichtig. Unklare Messgrößen oder Einheiten gehören zur inhaltlichen Klärung ganz nach oben; reine typografische Unruhe wäre hier nachrangig." },
  { id: "context", label: "Zeiträume, Datenkontext und Vergleichswerte", priority: 1, explanation: "Ohne Messzeitraum, Vergleichsbasis, Ziel und klare Einheit kann niemand seriös entscheiden, ob 8.540 kritisch sind. Diese Grundlage würde ich zuerst klären." },
] as const;
export type CritiqueTopicId = typeof critiqueTopics[number]["id"];
export function toggleCritiqueTopic(selection: CritiqueTopicId[], id: CritiqueTopicId) {
  if (selection.includes(id)) return { selection: selection.filter(value => value !== id), notice: "" };
  if (selection.length >= 3) return { selection, notice: "Du hast bereits drei Probleme gewählt. Entferne zuerst eines, um ein anderes aufzunehmen." };
  return { selection: [...selection, id], notice: "" };
}
export function moveCritiqueTopic(selection: CritiqueTopicId[], id: CritiqueTopicId, direction: -1 | 1) {
  const index = selection.indexOf(id);
  const target = index + direction;
  if (index < 0 || target < 0 || target >= selection.length) return selection;
  const next = [...selection];
  [next[index], next[target]] = [next[target], next[index]];
  return next;
}

04 / ACCESSIBILITY PRÜFEN

Mindestmaß und Gestaltungsentscheidung unterscheiden.

WCAG 2.2 AA nennt in Erfolgskriterium 2.5.8 für Pointer-Ziele grundsätzlich 24 × 24 CSS-Pixel, mit definierten Ausnahmen – etwa ausreichendem Abstand, einer gleichwertigen Alternative oder bestimmten Inline-Zielen. Die sichtbare Icongröße ist nicht automatisch die Größe des bedienbaren Ziels. W3C: Target Size (Minimum).

Für den Info-Button wählt die Musterlösung 40 × 40 px als großzügigere Gestaltungsentscheidung. Andere Bedienelemente erhalten mindestens 44 px Höhe. Diese Werte sind keine pauschale WCAG-AA-Vorgabe. Prüfe zusätzlich Erkennbarkeit, Abstände, Fokus und tatsächliche Bedienbarkeit.

Die Statusbewertung nutzt Text zusätzlich zur Farbe. Für sinntragende Farbe verlangt WCAG 1.4.1 eine weitere visuelle Vermittlung. Ein zugänglicher Name allein ersetzt diese sichtbare Information nicht. W3C: Use of Color.

Teste die Karte bei 320 CSS-Pixeln Breite und zusätzlich mit 400 % Browserzoom ausgehend von 1280 CSS-Pixeln. Für gewöhnliche vertikal scrollende Inhalte entspricht das der Breite, die das Reflow-Kriterium betrachtet. Informationen und Funktionen sollen ohne zweidimensionales Scrollen erhalten bleiben; für Inhalte, die ein zweidimensionales Layout benötigen, bestehen Ausnahmen. Die Tests sind keine Aufforderung, einen bereits 320 px breiten Viewport noch einmal auf 400 % zu vergrößern. W3C: Reflow.

Prüfe auch den geöffneten Datenkontext, die Maßnahmenliste und den Fokusindikator. Die eingebaute 200-%-Textoption ist eine Entwurfshilfe und ersetzt diese Browserprüfungen nicht.

05 / REFLEXION · 2 MINUTEN

Priorisierung braucht ein Ziel und Belege.

Der Umsatz soll die größte Kennzahl bleiben.

Der Product Owner begründet das mit der wirtschaftlichen Bedeutung. Wie argumentierst du, wenn die primäre Nutzeraufgabe die Überwachung der CO₂-Bilanz ist?

Nur eine Verbesserung ist möglich: Trendfarbe oder Icon-Buttons?

Welche wählst du zuerst? Welche Information fehlt dir, um das fundiert zu entscheiden?

Dein Selbstcheck

• Bezieht sich jede Kritik auf die zentrale Nutzeraufgabe?
• Trennst du beobachtbare Eigenschaften von vermuteter Nutzerwirkung?
• Sind Zeitraum, Einheit und Bewertungsgrundlage geklärt?
• Kannst du erklären, warum deine Top 3 zuerst kommen?
• Hast du eine konkrete Änderung und einen Prüfweg formuliert?