{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "fehlerseite-leerzustand",
 "name": "Fehlerseite und Leerzustände",
 "name_en": "404 page, no-results and empty states",
 "kurz": "404-Seite, Suche ohne Treffer und leere Bereiche mit Haltung: klare Überschrift ohne Schuld, „Meintest du“ aus Adresse oder Tippfehler, Filter-Hinweise mit Trefferzahl, Leerzustand erst nach dem Laden und mit erstem Schritt.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "freundlich",
  "klar",
  "persönlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "svg",
  "intl"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Drei Zustände, die jede Seite hat und die oft vergessen werden: die 404-Seite, die Suche ohne Treffer und leere Bereiche wie eine leere Merkliste oder „noch kein Kurs“. Jeder Zustand sagt klar, was los ist, ohne Schuld beim Besucher, und bietet einen echten Ausweg: Suche mit Vorschlägen, ein „Meintest du“, beliebte Ziele, Kontakt. Leere Bereiche erklären, wie sie sich füllen, und zeigen den ersten Schritt.",
  "warum_es_wirkt": "Ein Fehler oder eine leere Fläche ist ein Moment, in dem Besucher abspringen. Eine Seite mit Haltung und einem passenden Vorschlag macht daraus einen Umweg statt einer Sackgasse. Baymard nennt Seiten ohne Treffer ohne Weiterweg eine unnötige Sackgasse; laut NN/g sollen leere Zustände den Systemstatus zeigen, etwas lehren und direkt zur nächsten Aufgabe führen.",
  "wann_einsetzen": "Auf jeder Website: 404-Seite als eigene Vorlage. Bei Suche und Filtern (Kurse, Produkte, Termine, Stellen). In Kundenbereichen mit Merkliste, Warenkorb, Buchungen oder Lernfortschritt.",
  "wann_nicht": "Witzige Fehlerseiten ohne Ausweg. „Hoppla“-Sprache bei ernsten Themen (Praxis, Kanzlei, Behörde). Leerzustände, die während des Ladens erscheinen: erst laden, dann „leer“ melden.",
  "varianten": [
   "404-Seite mit Suche, „Meintest du“ aus der falschen Adresse und beliebten Zielen",
   "Suche ohne Treffer mit Schreibkorrektur, Filter-Hinweisen und beliebten Themen",
   "Leerer Bereich (Merkliste, Meine Kurse) mit Lernhinweis und erstem Schritt",
   "Fehler beim Laden mit „Erneut versuchen“ (Netzwerk, Server)"
  ],
  "umsetzung": "404: Der Server liefert Status 404 (nicht 200 mit Fehlertext) und einen eigenen title. Aus dem Pfad der falschen Adresse Wörter bilden und mit Kurs-Titeln abgleichen; der beste Treffer wird als „Meintest du“ angeboten, bei sicherem Treffer besser serverseitig umleiten (301). Suche mit role=combobox, aria-expanded und Vorschlagsliste (role=listbox), Pfeiltasten und Enter. Keine Treffer: Wörter mit Levenshtein-Abstand ≤ 2 gegen den Wortschatz der Kurse prüfen und „Meintest du“ mit Trefferzahl anbieten; für jeden aktiven Filter die Zahl „ohne diesen Filter“ zeigen. Trefferzahl in aria-live=polite. Leerer Bereich: erst Skeleton mit aria-busy, dann Leerzustand mit Erklärung, Umrissen der künftigen Inhalte und einem Hauptknopf. Füllt sich der Bereich (Herz bei einem Vorschlag), wechselt er ohne Seitenwechsel. Texte in Haltung der Marke, aber ohne Schuld beim Besucher.",
  "mobil": "Eine Spalte. Suchfeld oben und groß, Vorschläge als Liste mit großen Zeilen. Beliebte Ziele als Liste statt Kacheln. Die Leerzustände stehen untereinander, der Hauptknopf in voller Breite.",
  "reduzierte_bewegung": "Zustände wechseln ohne Einblenden und ohne Feder, Skeleton ohne Schimmer.",
  "barrierefreiheit": "Eine h1 je Zustand, die sagt, was passiert ist. Trefferzahl und Zustandswechsel per aria-live=polite. Suche als Combobox mit Pfeiltasten, Enter und Esc. Skeleton mit aria-busy und unsichtbarem „Lädt“. Illustrationen sind dekorativ (aria-hidden). Keine Farbe als einziges Signal, keine roten Warntexte. Fokus nach dem Wechsel auf die neue Überschrift."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
  "dauer_ms": "150 UI, 300 Zustandswechsel, 500 Einblenden des Leerzustands, 450 Feder nur beim Merken",
  "stagger_ms": "60",
  "distanz": "12px beim Einblenden",
  "sonstiges": "Feder cubic-bezier(0.34, 1.56, 0.64, 1) nur für den Erfolgsmoment (Kurs gemerkt). Werte aus dem Rezept kurs-coaching-lernweg (Brilliant easeOutQuint, kurze Dauern).",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kurs-coaching-lernweg"
 },
 "kurve": {
  "bezier": [
   0.22,
   1.0,
   0.36,
   1.0
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Page not found pages",
   "url": "https://design-system.service.gov.uk/patterns/page-not-found-pages",
   "auszeichnung": "",
   "beobachtung": "H1 „Page not found“, klare Sätze ohne Schuldzuweisung („If you typed the web address, check it is correct.“), Kontakt nur wenn hilfreich. Keine Breadcrumbs, kein Fachjargon wie „404“ in der Überschrift, kein „Oops“, kein roter Warntext.",
   "art": "website"
  },
  {
   "seite": "Baymard Institute: 5 Proven Strategies for Improving „No Results“ Pages",
   "url": "https://baymard.com/blog/no-results-page",
   "auszeichnung": "",
   "beobachtung": "Etwa die Hälfte der Shops bietet auf Seiten ohne Treffer kaum Weiterwege. Empfehlungen: verwandte Kategorien, alternative Suchen mit Vorschau, persönliche Empfehlungen, Telefon und Chat, beliebte Artikel. Suchtipps allein helfen kaum.",
   "art": "artikel"
  },
  {
   "seite": "Nielsen Norman Group: Designing Empty States in Complex Applications",
   "url": "https://nngroup.com/articles/empty-state-interface-design",
   "auszeichnung": "",
   "beobachtung": "Drei Regeln (Kate Kaplan, 2021): Systemstatus zeigen (leer, lädt oder Fehler, nie „keine Einträge“ während des Ladens), Lernhinweise geben, direkte Wege zur Hauptaufgabe anbieten.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GOV.UK Design System: Page not found pages",
   "url": "https://design-system.service.gov.uk/patterns/page-not-found-pages"
  },
  {
   "titel": "NN/g: Designing Empty States in Complex Applications",
   "url": "https://nngroup.com/articles/empty-state-interface-design"
  }
 ],
 "kombinierbar_mit": [
  "skeleton-shimmer",
  "command-palette-und-ki-suche",
  "einblenden-starting-style",
  "like-herz-burst",
  "flip-zustandswechsel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind Leitlinien (GOV.UK, NN/g) und Forschung (Baymard). GOV.UK rät von „404“ in der Überschrift und von Humor ab; die Demo setzt „Fehler 404“ nur als kleines Label und bleibt freundlich, aber sachlich."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "404-Seite, Suche ohne Treffer und leere Bereiche mit Haltung: klare Überschrift ohne Schuld, „Meintest du“ aus Adresse oder Tippfehler, Filter-Hinweise mit Trefferzahl, Leerzustand erst nach dem Laden und mit erstem Schritt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint); Feder cubic-bezier(0.34, 1.56, 0.64, 1) nur beim Merken",
   "dauer_ms": "150 UI (Knöpfe, Chips, Hover), 300 Zustandswechsel und Vorschlagsliste, 500 Einblenden des Zustands, 450 Herz-Puls, 900 Laden (Skeleton) bis zum Leerzustand",
   "stagger_ms": "60 je Block beim Einblenden",
   "distanz": "12px von unten beim Einblenden; Herz scale 1 → 1.35 → 1.12",
   "suche": "Treffer: jedes Wort ist Wortanfang in Titel oder Schlagworten; Korrektur: Levenshtein ≤ 2 ab 4 Buchstaben gegen den Wortschatz der Kurse; je aktivem Filter die Zahl ohne ihn",
   "adresse": "Wörter aus dem Pfad (ohne Zahlen, ≥ 4 Buchstaben), bester Kurs nach Zahl gemeinsamer Wörter",
   "typo": "h1 Bricolage Grotesque 700 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem)/1.05 opsz 96; Text Onest 17px/1.6; Randnotizen Shantell Sans INFM 40, BNCE 0",
   "farben": "Grund #f3f5f9, Karte #fff, Tinte #141414, Marke #4f5fe0, Erfolg #10a86c (nur Häkchen, Fortschritt), Gelb #f7c325 (Start-Badge, Schild)"
  },
  "ausloeser": "klick",
  "touch": "Eine Spalte unter 900 px, Illustration unter dem Text und kleiner. Vorschläge und Chips mit größeren Zeilen (14 px bzw. 10 px Polster). Suchknopf unter dem Feld, Hauptknopf im Leerzustand in voller Breite.",
  "reduziert": "Kein Einblenden, kein Versatz, keine Feder; der Weg in der Illustration steht still, das Skeleton schimmert nicht und weicht nach 300 ms dem Leerzustand.",
  "korrekturen": {},
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept kurs-coaching-lernweg, erfundene Online-Akademie Kursbogen von Svenja Döhler aus Coburg (Kurse für Selbstständige). Drei Zustände als Varianten über ?v=404|keine-treffer|leer. Alles echt bedienbar: Combobox mit Pfeiltasten, Enter führt in die Suche, Tippfehler-Korrektur „Exel Pivot“ → „Excel Pivot“, Filter mit „ohne Filter“-Zahl, Merkliste füllt sich per Herz und leert sich wieder. Vorführung: gedachter Finger tippt und schreibt. Auf echten Seiten liefert der Server für die Fehlerseite Status 404. Quellen: design-system.service.gov.uk, baymard.com, nngroup.com. AD-Review 02.11.2026: Note 4. Vorname Henrike kam schon in drei Demos vor, jetzt Svenja Döhler; Pult rechts unten und schmaler. Zugang 02.11.2026: 320 px: Fehler-Raster unter 900 px mit minmax(0, 1fr) statt 1fr. Gestrichelter Lernweg der 404-Illustration läuft 3 × 1,6 s (4,8 s) und steht dann (WCAG 2.2.2), in der Galerie-Vorführung weiter endlos. Kontrastmodus: Knöpfe mit Rahmen ButtonText.",
  "varianten": [
   {
    "id": "404",
    "name": "Seite nicht gefunden",
    "wann": "Jede Website: eigene Vorlage für tote Links, umbenannte Kurse, Produkte oder Leistungen; mit „Meintest du“ aus der Adresse.",
    "werte": {
     "aufbau": "Label „Fehler 404“, h1 ohne Fachwort, Adresse, Meintest-du-Karte, Suche als Combobox, 4 beliebte Ziele",
     "illustration": "Lernweg mit Abbruch und Umweg, Strich 6/9 läuft 1,6 s linear, 3 Durchläufe (4,8 s), dann still; in der Vorführung endlos"
    }
   },
   {
    "id": "keine-treffer",
    "name": "Suche ohne Treffer",
    "wann": "Kurs-, Produkt-, Termin- oder Stellensuche mit Filtern: Tippfehler und zu enge Filter auffangen.",
    "werte": {
     "wege": "Meintest du (Levenshtein ≤ 2) mit Trefferzahl, je Filter „ohne Filter“ mit Zahl, sonst „Alle Kurse“",
     "extra": "Beliebte Themen als Chips, 3 beliebte Kurse, Kontakt mit Antwortzeit"
    }
   },
   {
    "id": "leer",
    "name": "Leerer Kundenbereich",
    "wann": "Merkliste, Warenkorb, Buchungen, Meine Kurse: Leerzustand mit Lernhinweis und erstem Schritt, der sich ohne Seitenwechsel füllt.",
    "werte": {
     "laden": "Skeleton 900 ms mit aria-busy, dann leer",
     "leer": "2 gestrichelte Umrisse der künftigen Einträge, Text, ein Hauptknopf",
     "merken": "Herz-Puls 450 ms Feder, Zähler im Kopf wird Markenfarbe"
    }
   }
  ]
 }
}