Undo statt „Bist du sicher?“

01 / BESTÄTIGUNG ODER UNDO? · 3 MINUTEN

Was kann nach der Aktion noch korrigiert werden?

Eine abgeschlossene Aufgabe soll aus der Projektansicht verschwinden. Ein Produkt fragt jedes Mal „Bist du sicher?“. Ein anderes archiviert sie ohne zusätzliche Bestätigung und bietet „Rückgängig“ an. Beide können die Aufgabe erfüllen; die passende Absicherung hängt von ihren Folgen ab.

Bei einer häufigen, risikoarmen und zuverlässig reversiblen Aktion kann Undo eine zusätzliche Entscheidung vermeiden. Bei einer unumkehrbaren Aktion mit weitreichenden Folgen reicht eine kurz sichtbare Rückgängig-Schaltfläche dagegen nicht. Entscheidend sind Schadenshöhe, Reversibilität, Häufigkeit und Erwartbarkeit.

• Aufgabe archivieren: Direkt ausführen, Undo anbieten und ein erreichbares Archiv zur späteren Wiederherstellung erhalten.
• Filter zurücksetzen: Meist direkt ausführen; eine wiederherstellbare Auswahl kann bei aufwendigen Konfigurationen helfen.
• Einzelne Notiz löschen: Ein Papierkorb mit Wiederherstellung ist ein möglicher Schutz.
• Projekt mit 42 Aufgaben dauerhaft löschen: Folgen konkret nennen und eine bewusste Bestätigung ermöglichen.
• Unwiderrufliche Zahlung auslösen: Den Auftrag vor Abschluss überprüfbar machen und ausdrücklich bestätigen lassen.

Das sind kontextabhängige Gestaltungsvorschläge, keine universellen Regeln. Auch ein Archiv kann problematisch sein, wenn Berechtigungen, Abhängigkeiten oder nachgelagerte Prozesse eine Wiederherstellung verhindern.

02 / DEINE CHALLENGE · 8 MINUTEN

Zwei Aktionen, zwei UX-Strategien.

Gestalte in Figma oder React ein Projektmanagement-Dashboard mit zwei Interaktionen: Eine einzelne abgeschlossene Aufgabe archivieren und ein Projekt mit 42 Aufgaben und 8 Anhängen dauerhaft löschen.

1. Risikoanalyse · 2 Minuten: Entscheide, was ohne Rückfrage geschehen darf und wann eine Bestätigung nötig ist. Begründe die Entscheidung anhand der Folgen.
2. Design · 4 Minuten: Entwirf Undo-Feedback für das Archivieren und einen Bestätigungsdialog für die Projektlöschung. Achte auf konkrete Buttontexte, Folgenbeschreibung und Fokusführung.
3. Randfälle · 2 Minuten: Zeige den Zustand bei einem Netzwerkfehler, nach dem Ende des Undo-Hinweises und nach mehreren Archivierungen hintereinander.

Prüfe deinen Entwurf mit der Tastatur. Welche Wiederherstellung bleibt erreichbar, wenn jemand die Kurzmeldung nicht rechtzeitig bemerkt? Was passiert, wenn die Aktion noch läuft? Ein gut gestalteter Hinweis ersetzt keine verlässliche Wiederherstellung.

03 / EINE MÖGLICHE MUSTERLÖSUNG

Die Meldung darf verschwinden. Der Ausweg bleibt.

Die Aufgabenansicht und die Projektlöschung sind zwei getrennte, fiktive Beispiele. Du kannst archivieren, rückgängig machen und aus dem Archiv wiederherstellen. Die Löschsimulation betrifft ein separates Beispielprojekt und keine echten Daten.

"use client";

import { useEffect, useId, useReducer, useRef, useState } from "react";
import { coachingTaskViews, coachingUndoReducer, initialCoachingTasks, initialUndoState, type UndoAction } from "@/lib/coaching-undo";
import "./coaching-undo-demo.css";

export function CoachingUndoDemo() {
  const [state, dispatch] = useReducer(coachingUndoReducer, undefined, initialUndoState);
  const [pending, setPending] = useState(false);
  const busy = useRef(false);
  const focusAfterRequest = useRef<HTMLElement | null>(null);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [failNext, setFailNext] = useState(false);
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [projectDeleted, setProjectDeleted] = useState(false);
  const dialog = useRef<HTMLDialogElement>(null);
  const cancelButton = useRef<HTMLButtonElement>(null);
  const tasksHeading = useRef<HTMLHeadingElement>(null);
  const projectHeading = useRef<HTMLHeadingElement>(null);
  const id = useId();
  const views = coachingTaskViews(state);
  const lastTask = initialCoachingTasks.find(task => task.id === state.history.at(-1));
  useEffect(() => () => { if (timer.current !== null) clearTimeout(timer.current); }, []);
  useEffect(() => {
    if (!pending && focusAfterRequest.current) {
      focusAfterRequest.current.focus();
      focusAfterRequest.current = null;
    }
  }, [pending]);

  function perform(operation: () => void, success: string, target: "tasks" | "project" = "tasks") {
    if (busy.current) return;
    busy.current = true; setPending(true); setError(""); setMessage("");
    const shouldFail = failNext;
    setFailNext(false);
    // A bounded local delay simulates a request. No network call is made.
    timer.current = setTimeout(() => {
      timer.current = null; busy.current = false;
      focusAfterRequest.current = target === "project" ? (shouldFail ? cancelButton.current : projectHeading.current) : tasksHeading.current;
      setPending(false);
      if (shouldFail) {
        setError("Simulierter Netzwerkfehler. Die Aktion wurde nicht ausgeführt. Deine Daten bleiben unverändert; du kannst erneut versuchen.");
        return;
      }
      operation(); setMessage(success);
    }, 450);
  }
  function taskAction(action: UndoAction, success: string) { perform(() => dispatch(action), success); }
  function openDelete() { setError(""); dialog.current?.showModal(); cancelButton.current?.focus(); }
  function resetDemo() {
    if (busy.current) return;
    dispatch({ type: "reset" }); setProjectDeleted(false); setFailNext(false); setError(""); setMessage("Lernbeispiel zurückgesetzt."); tasksHeading.current?.focus();
  }
  return <div className="undo-demo">
    <p className="undo-demo-note">Fiktive Aufgaben, nur lokaler Zustand. Die Anfrage wird mit 450 ms Wartezeit simuliert. Es gibt keine Verbindung zu einer Projektverwaltung; beim Neuladen beginnt das Beispiel neu.</p>
    <label className="undo-failure"><input type="checkbox" checked={failNext} disabled={pending} onChange={event => setFailNext(event.target.checked)} /> Nächste Aktion als Netzwerkfehler simulieren</label>
    <section className="undo-task-panel" aria-labelledby={`${id}-tasks`}><p className="undo-kicker">BEISPIELPROJEKT · INTERFACE-POLITUR</p><h3 id={`${id}-tasks`} tabIndex={-1} ref={tasksHeading}>Projektaufgaben</h3><p className="undo-demo-note">{views.active.length} {views.active.length === 1 ? "abgeschlossene Aufgabe" : "abgeschlossene Aufgaben"} in der aktiven Ansicht.</p>
      {views.active.length > 0 ? <ul className="undo-task-list">{views.active.map(task => <li key={task.id}><span>{task.title}</span><button type="button" disabled={pending} aria-label={`${task.title} archivieren`} onClick={() => taskAction({ type: "archive", id: task.id }, `„${task.title}“ archiviert. Rückgängig oder Wiederherstellen im Archiv ist möglich.`)}>Archivieren</button></li>)}</ul> : <p className="undo-empty">Alle Beispielaufgaben sind archiviert. Du kannst sie unten einzeln wiederherstellen.</p>}
      <p className="undo-status" role="status" aria-atomic="true">{pending ? "Simulierte Anfrage läuft …" : message}</p><p className="undo-error" role="alert">{error}</p>
      {lastTask && <aside className="undo-notice" aria-label="Letzte Archivierung rückgängig machen"><p>Zuletzt archiviert: <strong>{lastTask.title}</strong></p><button type="button" disabled={pending} onClick={() => taskAction({ type: "undo" }, `„${lastTask.title}“ wiederhergestellt.`)}>Rückgängig</button><button type="button" disabled={pending} className="undo-quiet" onClick={() => { dispatch({ type: "dismiss" }); setMessage("Undo-Hinweis ausgeblendet. Alle archivierten Aufgaben bleiben im Archiv wiederherstellbar."); tasksHeading.current?.focus(); }}>Undo-Hinweis ausblenden (Test)</button><p className="undo-demo-note">Der Hinweis verschwindet nicht automatisch. Der Testbutton simuliert sein Ende. Frühere Archivierungen bleiben ebenfalls im Archiv erreichbar.</p></aside>}
      <section className="undo-archive" aria-labelledby={`${id}-archive`}><h4 id={`${id}-archive`}>Archiv ({views.archived.length})</h4>{views.archived.length > 0 ? <ul className="undo-task-list">{views.archived.map(task => <li key={task.id}><span>{task.title}</span><button type="button" disabled={pending} aria-label={`${task.title} wiederherstellen`} onClick={() => taskAction({ type: "restore", id: task.id }, `„${task.title}“ aus dem Archiv wiederhergestellt.`)}>Wiederherstellen</button></li>)}</ul> : <p className="undo-demo-note">Noch keine Aufgabe archiviert.</p>}</section>
    </section>
    <section className="undo-danger-zone" aria-labelledby={`${id}-project`}><p className="undo-kicker">SEPARATES BEISPIELPROJEKT</p><h3 id={`${id}-project`} tabIndex={-1} ref={projectHeading}>Website Relaunch</h3>{projectDeleted ? <><p>Die Löschung wurde im Lernbeispiel ausgeführt. Hier gibt es kein Undo für das Projekt. „Lernbeispiel zurücksetzen“ startet die Simulation neu.</p></> : <><p>42 Aufgaben · 8 Anhänge. Diese fiktiven Mengen beschreiben die Folgen im Dialog; sie sind kein echter Datenbestand. Die drei Aufgaben oben gehören zu einem anderen Beispielprojekt.</p><button type="button" disabled={pending} className="undo-danger" onClick={openDelete}>Projekt dauerhaft löschen …</button></>}</section>
    <button type="button" disabled={pending} className="undo-reset" onClick={resetDemo}>Lernbeispiel zurücksetzen</button>
    <dialog ref={dialog} className="undo-confirm-dialog" aria-labelledby={`${id}-confirm-title`} aria-describedby={`${id}-consequences`} onCancel={event => { if (busy.current) event.preventDefault(); }}>
      <div className="undo-dialog-content"><h3 id={`${id}-confirm-title`}>„Website Relaunch“ dauerhaft löschen?</h3><p id={`${id}-consequences`}>Das gesamte Beispielprojekt mit 42 Aufgaben und 8 Anhängen wird entfernt. Diese Aktion lässt sich in diesem Ablauf nicht rückgängig machen. Archivieren und Undo der einzelnen Aufgaben oben sind davon getrennt.</p><p>Nur eine lokale Simulation: Es werden keine echten Daten gelöscht.</p><p className="undo-error" role="alert">{error}</p><p role="status" aria-atomic="true" className="undo-demo-note">{pending ? "Löschsimulation läuft. Bitte kurz warten …" : ""}</p><div className="undo-confirm-actions"><button type="button" ref={cancelButton} disabled={pending} className="undo-cancel" onClick={() => dialog.current?.close()}>Abbrechen</button><button type="button" disabled={pending} className="undo-danger" onClick={() => perform(() => { setProjectDeleted(true); dialog.current?.close(); }, "Beispielprojekt gelöscht. Kein Undo für diese Aktion verfügbar.", "project")}>Beispielprojekt dauerhaft löschen</button></div></div>
    </dialog>
  </div>;
}

.undo-demo{max-width:860px;min-width:0;margin-top:24px}
.lesson-content .undo-demo-note,.undo-dialog-content .undo-demo-note{font-size:12px;line-height:1.8;color:#536174;margin-top:12px}
.undo-failure{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.8;min-height:44px;margin:20px 0;cursor:pointer}
.undo-failure input{width:18px;height:18px;flex-shrink:0;accent-color:#2558ed;margin-top:4px}
.undo-task-panel,.undo-danger-zone{padding:24px;border:1px solid #c5d0e2;border-radius:12px;background:#f3f6fb;margin-top:20px;min-width:0}
.lesson-content .undo-kicker{font:9px/1.9 monospace;color:#536174;letter-spacing:.08em;margin:0}
.lesson-content .undo-task-panel h3,.lesson-content .undo-danger-zone h3{font:500 26px/1.4 system-ui,sans-serif;margin:12px 0 0;scroll-margin-top:110px}
.undo-task-list{list-style:none;padding:0;margin:18px 0 0}
.undo-task-list li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 0;border-top:1px solid #cbd5e5}
.undo-task-list li>span{font-size:15px;line-height:1.7;flex:1 1 220px;overflow-wrap:anywhere}
.undo-demo button,.undo-confirm-dialog button{min-height:44px;padding:10px 14px;border:1px solid #748199;border-radius:7px;background:white;color:#263851;font-size:13px;line-height:1.7;max-width:100%;overflow-wrap:anywhere}
.lesson-content .undo-status{font-size:14px;line-height:1.8;color:#27477e;margin-top:16px}
.lesson-content .undo-error,.undo-dialog-content .undo-error{font-size:13px;line-height:1.8;color:#96351c;margin-top:12px}
.undo-status:empty,.undo-error:empty{margin:0}
.undo-notice{padding:20px;border:1px solid #aebfe5;background:#e5edff;border-radius:8px;margin-top:18px}
.lesson-content .undo-notice>p{font-size:14px;line-height:1.8;margin:0 0 12px}
.undo-notice button{margin:4px 8px 4px 0}
.undo-notice button:first-of-type{background:#2558ed;border-color:#2558ed;color:white}
.undo-demo button.undo-quiet{background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;padding-left:0}
.undo-archive{margin-top:24px;padding-top:20px;border-top:1px solid #bdc9dd}
.lesson-content .undo-archive h4{font-size:17px;font-weight:600;margin:0}
.lesson-content .undo-empty{font-size:14px;line-height:1.8;margin-top:20px}
.undo-danger-zone{border-color:#d8b4a8;background:#fff9f6}
.lesson-content .undo-danger-zone>p:not(.undo-kicker){font-size:14px;line-height:1.8;margin-top:12px;color:#536174}
.undo-danger-zone button{margin-top:18px}
.undo-demo button.undo-danger,.undo-confirm-dialog button.undo-danger{background:#a83620;border-color:#a83620;color:white}
.undo-demo button.undo-reset{margin-top:20px}
.undo-demo button:disabled,.undo-confirm-dialog button:disabled{opacity:.6;cursor:wait}
.undo-confirm-dialog{position:fixed;inset:0;margin:auto;width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #aebdd6;border-radius:14px;background:white;color:#172131;overflow:auto;overscroll-behavior:contain}
.undo-confirm-dialog::backdrop{background:#101a30a6}
.undo-dialog-content{padding:24px}
.undo-dialog-content h3{font:500 25px/1.4 system-ui,sans-serif;margin:0}
.undo-dialog-content p{font-size:14px;line-height:1.8;color:#536174;margin-top:16px}
.undo-confirm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.undo-confirm-actions button{flex:1 1 160px}
.undo-confirm-dialog button.undo-cancel{border:2px solid #2558ed;color:#2048bc;font-weight:600}
.undo-demo :is(button,input,h3):focus-visible,.undo-confirm-dialog button:focus-visible{outline:3px solid #2558ed;outline-offset:3px}
@media(max-width:640px){.undo-task-panel,.undo-danger-zone,.undo-dialog-content{padding:18px}.undo-notice{padding:16px}.undo-task-list li>span{flex-basis:100%}.undo-task-list button{width:100%;text-align:left}}

export const initialCoachingTasks = [
  { id: "dashboard", title: "Dashboard überarbeiten" },
  { id: "navigation", title: "Mobile Navigation testen" },
  { id: "review", title: "Designreview abschließen" },
] as const;
export type UndoState = { archived: string[]; history: string[] };
export type UndoAction = { type: "archive"; id: string } | { type: "restore"; id: string } | { type: "undo" } | { type: "dismiss" } | { type: "reset" };
export function initialUndoState(): UndoState { return { archived: [], history: [] }; }
export function coachingUndoReducer(state: UndoState, action: UndoAction): UndoState {
  if (action.type === "reset") return initialUndoState();
  if (action.type === "dismiss") return { ...state, history: [] };
  if (action.type === "archive") {
    if (!initialCoachingTasks.some(task => task.id === action.id) || state.archived.includes(action.id)) return state;
    return { archived: [...state.archived, action.id], history: [...state.history, action.id] };
  }
  const id = action.type === "undo" ? state.history.at(-1) : action.id;
  if (!id || !state.archived.includes(id)) return state;
  return { archived: state.archived.filter(value => value !== id), history: state.history.filter(value => value !== id) };
}
// Original records stay intact. Both views preserve their original relative order.
export function coachingTaskViews(state: UndoState) {
  return {
    active: initialCoachingTasks.filter(task => !state.archived.includes(task.id)),
    archived: initialCoachingTasks.filter(task => state.archived.includes(task.id)),
  };
}

04 / SICHERHEIT UND ZUGÄNGLICHKEIT

Undo ist eine Fähigkeit des Systems.

Eine Snackbar ist zunächst nur eine Rückmeldung. Für echtes Undo müssen Daten und Aktion wiederherstellbar sein. In einer Anwendung mit Serverzustand musst du unter anderem zwischen bestätigtem Fehlschlag und unbekanntem Ergebnis unterscheiden. Ein Timeout beweist nicht, dass nichts passiert ist. Prüfe den Zustand, bevor du eine riskante Aktion unkontrolliert wiederholst.

WCAG 2.2, Erfolgskriterium 3.3.4, fordert für die dort genannten folgenreichen Vorgänge mindestens einen geeigneten Schutz: Reversibilität, eine Fehlerprüfung mit Korrekturmöglichkeit oder Überprüfung und Bestätigung. Dazu gehören unter anderem bestimmte Änderungen und Löschungen gespeicherter, nutzerkontrollierter Daten. Das Kriterium verlangt keinen Bestätigungsdialog für jede kleine Änderung. W3C: Error Prevention.

Eine automatisch verschwindende Meldung sollte nicht der einzige Zugang zur Wiederherstellung sein. Zeitlimits können Menschen ausschließen, die länger zum Lesen oder Bedienen brauchen. Eine erreichbare Alternative ohne Zeitdruck verhindert, dass der verschwundene Hinweis die Handlungsmöglichkeit beendet. W3C: Timing Adjustable.

Die Erfolgsmeldung wird mit role="status", ein Fehler mit role="alert" ausgegeben. Der Bestätigungsdialog bleibt modal, führt den Fokus zur vorsichtigeren Aktion und gibt ihn beim Abbrechen zurück. Diese Grundlagen knüpfen an Lektion 8 an; eine Exit-Animation ist für diese Übung nicht erforderlich. W3C: Modal Dialog Pattern.

05 / REFLEXION · 3 MINUTEN

Wie bleibt Korrektur auch später möglich?

Eine wichtige Aufgabe wurde versehentlich gelöscht.

Die Snackbar ist nach fünf Sekunden weg. Verlängerst du sie, bietest du einen Papierkorb an oder fragst du vor jeder Löschung nach?

Wie vergleichst du Undo mit Bestätigungsdialogen?

Beschreibe eine Testaufgabe, die nicht nur Geschwindigkeit misst. Wie würdest du Fehlentscheidungen und deren Korrektur beobachten?

Dein Selbstcheck

• Sind Folgen und Reversibilität vor der Aktion verständlich?
• Bleibt Wiederherstellung ohne Kurzmeldung erreichbar?
• Erhalten mehrere Archivierungen ihre eigenen Datensätze?
• Bleibt der bisherige Zustand bei einem bestätigten Fehlschlag erhalten?
• Gehen Fokus und Tastaturzugang nach dem Entfernen einer Zeile nicht verloren?