{
"$schema": "../../schema.json",
"schema": "fundus/1",
"id": "paginierung-mehr-laden",
"name": "Mehr laden mit Rückkehr an die Stelle",
"name_en": "Load more for product lists with URL state and back-button position",
"kurz": "Produktliste lädt in Schüben über einen echten Link ?seite=n nach, Fokus springt auf den ersten neuen Eintrag, und wer ein Produkt öffnet und zurückgeht, landet wieder genau dort, mit Fokus darauf; dazu Fortschritt, Fehler mit Erneut versuchen und Automatik mit Grenze.",
"kategorie": "Sektionen & Funktionen",
"kategorie_slug": "sektionen",
"kategorie_nr": 16,
"bau_chat": "D",
"prioritaet": "D",
"trendstatus": "etabliert",
"belegstatus": "quellenbelegt",
"website_belege": 0,
"stimmung": [
"ruhig",
"präzise"
],
"stimmung_roh": [
"klar",
"funktional",
"ruhig"
],
"technik": [
"css",
"vanilla-js",
"history-api",
"intersection-observer",
"intl"
],
"technik_gruppen": [
"css",
"js"
],
"leistungskosten": "niedrig",
"steckbrief": {
"beschreibung": "Eine Produkt- oder Ergebnisliste lädt in Schüben nach. Der Knopf „12 weitere laden“ ist ein echter Link auf ?seite=2, funktioniert also auch ohne JavaScript und für Suchmaschinen. Mit JavaScript hängen die neuen Einträge an, der Fokus springt auf den ersten neuen, die URL merkt sich den Stand. Wer ein Produkt öffnet und mit der Zurück-Taste zurückkommt, landet wieder genau bei diesem Produkt, mit Fokus darauf, statt oben in der Liste. Dazu ein Fortschritt („24 von 46“), ein Fehlerzustand mit „Erneut versuchen“ und ein Ende mit „Nach oben“.",
"warum_es_wirkt": "Laut Baymard ist „Load more“ in Shops die bessere Wahl als Seitenzahlen oder endloses Scrollen, aber über 90 % der untersuchten Shops setzen die Rückkehr von der Produktseite falsch um (Smashing Magazine 2016). Wer nach dem Zurück wieder oben landet, sucht neu und bricht öfter ab, auf dem Telefon besonders. Ein Link statt eines reinen Knopfs hält die Liste auffindbar und teilbar.",
"wann_einsetzen": "Produktlisten im Shop und im Laden-Sortiment, Fahrzeug- und Immobilienbestand, Stellenlisten, Ergebnislisten nach Filter, Projektarchive. Überall, wo man aus der Liste in eine Detailseite und wieder zurück geht.",
"wann_nicht": "Für News und Blog mit Jahr-Archiv nimm news-uebersicht-archiv. Für weniger als 20 Einträge ganz ohne Nachladen. Kein endloses Scrollen ohne Grenze, sonst ist der Footer nicht erreichbar.",
"varianten": [
"Knopf: Weitere laden als Link mit Fokus auf den ersten neuen Eintrag",
"Automatisch: lädt beim Scrollen bis zu einer Grenze (z. B. 36), danach Knopf, Footer bleibt erreichbar",
"Rückkehr: Zurück von der Detailseite stellt Stand, Position und Fokus wieder her"
],
"umsetzung": "Server liefert ?seite=n mit allen Einträgen von 1 bis n (12 je Schub), damit ein geteilter Link und ein Neuladen den Stand zeigen. Der Knopf ist ; JavaScript fängt den Klick ab, zeigt drei Skelett-Kacheln, lädt den nächsten Schub (fetch, hier simuliert), hängt ihn an, setzt die URL per history.replaceState (Zurück verlässt die Liste weiter normal) und setzt den Fokus mit preventScroll auf den Link des ersten neuen Eintrags; role=status sagt „12 weitere geladen, 24 von 46“. Vor dem Öffnen eines Produkts speichert die Liste {seite, id} in sessionStorage. Beim Laden der Liste (load und pageshow, auch aus dem bfcache) und history.scrollRestoration = 'manual': ist ein Eintrag gespeichert, die Kachel mit scrollIntoView({block: 'center'}) zeigen, ihren Link fokussieren, kurz markieren und den Eintrag löschen. Fehler beim Nachladen: Satz und Knopf „Erneut versuchen“ an derselben Stelle, Fokus bleibt. Automatisch: IntersectionObserver auf einem Wächter 600 px vor dem Ende lädt bis zur Grenze, danach der Knopf. Ende: „Alle 46 angezeigt“ und „Nach oben“.",
"mobil": "Zwei Spalten, Knopf in voller Breite, Fortschritt darüber. Die Rückkehr wiegt auf dem Telefon am meisten, weil Scrollen dort langsam ist. Automatik nur mit Grenze, damit Footer und Kontakt erreichbar bleiben.",
"reduzierte_bewegung": "Neue Einträge erscheinen ohne Versatz, Sprünge ohne weiches Scrollen, die Markierung nach der Rückkehr ist ein fester Rahmen statt eines Pulses.",
"barrierefreiheit": "Nach dem Nachladen Fokus auf den ersten neuen Eintrag, Ansage mit Anzahl und Stand. Nach der Rückkehr Fokus auf das zuletzt geöffnete Produkt. Der Knopf bleibt ein Link mit klarem Text („12 weitere Tees laden“), aria-busy während des Ladens. Skelette sind aria-hidden. Fehler als Text mit Knopf, nicht nur als Farbe."
},
"messwerte": {
"easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
"dauer_ms": "300 neue Kacheln, 40 Versatz, 150 Hover, 1200 Markierung nach der Rückkehr",
"stagger_ms": "40",
"distanz": "neue Kacheln translateY 12 px",
"sonstiges": "12 je Schub (Baymard: 10 bis 30), Automatik bis 36, Wächter 600 px vor dem Ende",
"herkunft": "eigene Festlegung",
"quelle": "Rezept d2c-produkt-zuerst (token-toggle-asymmetrisch), Schubgrößen nach Smashing Magazine 2016"
},
"kurve": {
"bezier": [
0.16,
1.0,
0.3,
1.0
],
"css": "cubic-bezier(0.16, 1, 0.3, 1)",
"name": "expo.out",
"dauer_ms": 300
},
"gesehen_bei": [
{
"seite": "Baymard Institute: Return Users to the Same Place in the Product List",
"url": "https://baymard.com/blog/return-same-place",
"auszeichnung": "",
"beobachtung": "Artikel vom 17.11.2020 (Mark Crowley), abgerufen 05.11.2026 über eine Spiegel-Adresse: 13 % der Benchmark-Shops springen nach dem Zurück an den Listenanfang. Bei Load more soll jeder Klick die URL aktualisieren (history.pushState), damit Zurück die richtige Position lädt; Rückkehr an das zuletzt angeklickte Produkt.",
"art": "artikel"
},
{
"seite": "Smashing Magazine: Infinite Scrolling, Pagination Or Load More Buttons?",
"url": "https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/",
"auszeichnung": "",
"beobachtung": "Artikel vom 01.03.2016 (Christian Holst, Baymard), abgerufen 05.11.2026: Load more mit Nachladen schneidet am besten ab, Kategorien 10 bis 30 Produkte je Schub, nach 50 bis 100 Produkten ein Knopf. Über 90 % der Shops mit Load more machen die Rückkehr falsch; ohne Ressourcen dafür lieber Seitenzahlen.",
"art": "artikel"
}
],
"tutorials": [
{
"titel": "MDN: History.scrollRestoration",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration"
},
{
"titel": "web.dev: Back/forward cache",
"url": "https://web.dev/articles/bfcache"
}
],
"kombinierbar_mit": [
"facettenfilter-ergebnisliste",
"produktkarte-bildwechsel",
"karte-ganzflaechig-klickbar",
"skeleton-shimmer",
"news-uebersicht-archiv",
"fahrzeugbestand-feed-teaser",
"stellen-karriere"
],
"urls": {
"detail": "https://cecodesign.de/lab/fundus/sektionen/paginierung-mehr-laden/",
"meta": "https://cecodesign.de/lab/fundus/sektionen/paginierung-mehr-laden/meta.json",
"demo": "https://cecodesign.de/lab/fundus/sektionen/paginierung-mehr-laden/demo"
},
"herkunft": {
"quelldateien": [
"Recherche Runde 4, 04.11.2026"
],
"pruefnotizen": [
"Recherche Runde 4: „Mehr laden“ stand nur in news-uebersicht-archiv. Dieses Muster deckt den allgemeinen Fall für Produkt- und Ergebnislisten ab und ergänzt die Rückkehr an die Stelle, den Link statt Knopf, Fehler und Automatik mit Grenze.",
"Baymard empfiehlt pushState je Klick; die Demo nutzt replaceState, damit Zurück die Liste verlässt und nicht Schub für Schub abbaut. Beide Wege stellen den Stand nach der Rückkehr her.",
"Keine Website mit beobachteter Umsetzung geöffnet; Belege sind Fachartikel."
]
},
"bau": {
"status": "fertig",
"kurz": "Produktliste lädt in Schüben über einen echten Link ?seite=n nach, Fokus springt auf den ersten neuen Eintrag, und wer ein Produkt öffnet und zurückgeht, landet wieder genau dort, mit Fokus darauf; dazu Fortschritt, Fehler mit Erneut versuchen und Automatik mit Grenze.",
"demo": true,
"abhaengigkeiten": [],
"werte": {
"easing": "cubic-bezier(0.16, 1, 0.3, 1) neue Kacheln, Balken, Markierung; cubic-bezier(0.7, 0, 0.84, 0) schließen (token-toggle-asymmetrisch, Rezept d2c-produkt-zuerst)",
"dauer_ms": {
"neue_kachel": 300,
"versatz": 40,
"hover": 150,
"markierung": 1200,
"laden_simuliert": 450,
"markierung_bleibt": 4000
},
"stagger_ms": 40,
"distanz": "neue Kacheln translateY 12 px → 0; Dose bei Hover −4 px; Markierung box-shadow 0 → 6 → 2 px",
"schub": "12 je Schub, Automatik bis 36 (Wächter rootMargin 600 px), danach Knopf; 46 Einträge",
"url": "?seite=n per history.replaceState, Server liefert 1 bis n; Produkt öffnet ?produkt=id als echte Navigation",
"rueckkehr": "sessionStorage {seite, id, v} beim Klick; beim Laden und bei pageshow (bfcache): Liste bis zur nötigen Seite, scrollIntoView center, Fokus mit preventScroll, Markierung, Ansage „Zurück bei …, Platz n von 46“; history.scrollRestoration manual",
"knopf": "Link , Pille 52 px #212121, Text „12 weitere Tees laden“, aria-busy beim Laden, Fehler „Erneut versuchen“",
"stand": "„24 von 46 Tees“ plus Balken 220 × 3 px",
"preis": "Endpreis inkl. MwSt., 100 g mit Grundpreis je kg, zzgl. Versand",
"typo": "H1 Young Serif clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); Name Instrument Sans 600 1.0625rem; Preis tabular-nums",
"farben": "#F5F4F1 Grund, #ECE9E2 Kachel, #212121 Text und Knopf, #636362 leise, #B3261E Fehler",
"vorfuehrung": "nachladen, zur ersten neuen Kachel, Produkt 17 öffnen (ohne echte Navigation), zurück mit Markierung; Schleife"
},
"ausloeser": "klick",
"touch": "Zwei Spalten, Knopf in voller Breite, Preis und Grundpreis untereinander. Die Rückkehr an die Stelle hilft auf dem Telefon am meisten. Automatik lädt nur bis 36, damit der Footer erreichbar bleibt.",
"reduziert": "Neue Kacheln erscheinen ohne Versatz, kein weiches Scrollen, kein Schimmern der Skelette, Markierung als fester Rahmen.",
"korrekturen": {},
"geprueft": "04.11.2026",
"notiz": "Welt: Rezept d2c-produkt-zuerst, erfundenes Teekontor Blattwerk in Aurich mit 46 Sorten als eigene SVG-Teedosen. Abgrenzung zu news-uebersicht-archiv (Weitere laden, Seitenzahlen, Jahr-Archiv für News): hier der allgemeine Fall für Produkt-, Fahrzeug-, Stellen- und Ergebnislisten mit Rückkehr von der Detailseite an dieselbe Stelle und Fokus (Baymard 2020, Smashing 2016), Link statt Knopf, Fehlerzustand und Automatik mit Grenze. Rückweg geprüft: Liste, nachladen, Produkt öffnen, Browser-Zurück → ?seite=2 und Fokus auf dem Produkt. Pult: Variante und „Laden schlägt fehl“. Gebaut am 05.11.2026 (Runde 4). Selbsturteil 4.",
"varianten": [
{
"id": "knopf",
"name": "Knopf",
"wann": "Shop, Laden-Sortiment, Fahrzeug- und Immobilienbestand, Stellen: Nutzer entscheidet selbst, wann mehr kommt.",
"werte": {
"laden": "nur per Knopf (Link ?seite=n)"
}
},
{
"id": "automatisch",
"name": "Automatisch bis zur Grenze",
"wann": "Bildlastige Sortimente (Mode, Tee, Keramik), viel Stöbern: lädt beim Scrollen bis 36, dann Knopf, damit Footer und Kontakt erreichbar bleiben.",
"werte": {
"laden": "IntersectionObserver, rootMargin 600 px",
"grenze": "36 Einträge, danach Knopf",
"fokus": "bleibt beim automatischen Laden, wo er ist"
}
}
]
}
}