Pagination vs. Infinite Scroll

Pagination vs. Infinite Scroll bezeichnet die Designentscheidung zwischen seitenbasierter Inhaltsaufteilung mit expliziter Navigation und dem kontinuierlichen Nachladen von Inhalten beim Scrollen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Seitennavigation vs. endloses Scrollen, Virtuelles Scrollen, Load More

Was ist Pagination vs. Infinite Scroll?

Die Frage, ob Inhalte in diskrete Seiten aufgeteilt oder kontinuierlich nachgeladen werden sollen, ist eine der am meisten diskutierten Designentscheidungen im UX-Bereich. Beide Muster haben fundamentale Auswirkungen auf Nutzungsverhalten, Erreichbarkeit und technische Implementierung. Die Antwort hängt stark vom Nutzungskontext ab: Was für einen Social Feed perfekt funktioniert, ist für eine Produktsuche eine Accessibility-Katastrophe.

Erklärung

Pagination: Kontrolle durch Segmentierung

Pagination teilt eine Liste in nummerierte Seiten auf und gibt Nutzern explizite Kontrolle darüber, wo sie sich befinden und wie sie navigieren. Die klassische Pagination zeigt Seitenummern, Vor-/Zurück-Buttons und oft die Gesamtanzahl der Seiten.

Stärken der Pagination:

• Ortsgedächtnis: Nutzer können sich merken "das Produkt war auf Seite 3" und direkt zurücknavigieren
• Footer-Erreichbarkeit: Der Seitenfuß mit Kontakt, Impressum, etc. ist immer zugänglich
• Suchmaschinenoptimierung: Jede Seite hat eine eigene URL mit stabilen Inhalten — ideal für SEO
• Mentale Belastung: Nutzer wissen, wie viele Elemente existieren ("287 Ergebnisse, 10 pro Seite = 29 Seiten")
• Accessibility: Screen-Reader-Nutzer und Tastaturnutzer können seitenbasierte Listen deutlich besser navigieren

Schwächen der Pagination:

• Zusätzliche Klicks zum Weiterblättern unterbrechen den Lesefluss
• Auf mobilen Geräten sind kleine Paginierungskontrollen schwer zu treffen
• Bei tiefen Katalogen (Seite 47 von 203) verlieren Nutzer die Orientierung

Infinite Scroll: Engagement durch Kontinuität

Infinite Scroll lädt automatisch neue Inhalte, wenn der Nutzer das Ende der aktuellen Liste erreicht (oder einen "Mehr laden"-Button betätigt). Aza Raskin popularisierte das Muster 2006 für Tumblr — und bereute es später öffentlich als eine der gefährlichsten Designentscheidungen seiner Karriere.

Stärken des Infinite Scroll:

• Nahtloser Flow: Kein Unterbrechen des Browsens durch Seitenklicks
• Höheres Engagement: Social-Media-Plattformen setzen es ein, um Verweildauer zu maximieren
• Mobile-freundlich: Wischen ist natürlicher als Klicken auf Paginierungskontrollen
• Content-Discovery: Nutzer stolpern über Inhalte, die sie nicht aktiv gesucht haben

Schwächen des Infinite Scroll:

• Footer-Problem: Nutzer können den Seitenfuß nie erreichen, wenn ständig neuer Inhalt nachlädt
• Kein Ortsgedächtnis: Nach einem Seitenreload beginnt der Scroll von vorne
• Accessibility-Desaster: Screen Reader haben massive Probleme mit dynamisch nachgeladenen Inhalten ohne korrekte ARIA-Live-Regionen
• Kognitive Erschöpfung: Keine natürliche Pause signalisiert dem Gehirn nie "fertig"
• SEO-Nachteile: Nicht alle nachgeladenen Inhalte werden von Suchmaschinen indexiert

Load More als Kompromiss

Der "Mehr laden"-Button (auch "Progressive Loading") kombiniert Vorteile beider Muster: Nutzer triggern das Nachladen aktiv, es gibt einen stabilen Footer, und die URL-Struktur kann beibehalten werden. Google Images und Pinterest nutzen dieses Hybridmuster erfolgreich.

Accessibility-Anforderungen

Bei Infinite Scroll sind folgende ARIA-Implementierungen zwingend:

• aria-live="polite" auf dem Inhaltscontainer, damit Screen Reader neue Einträge ankündigen
• Fokusmanagement: Nach dem Laden müssen neue Items tastaturerreichbar sein
• Eine Möglichkeit zum "Anhalten" des automatischen Nachladens (WCAG 2.1, Kriterium 2.2.2)

Beispiele

1. Google Suche: Pagination für die Hauptsuchergebnisse — der Kontext erfordert Ortsgedächtnis und stabile URLs. Jede Ergebnisseite ist verlinkbar und indexierbar.
2. Instagram / TikTok: Infinite Scroll für den Feed — maximales Engagement, keine natürlichen Endpunkte, bewusst eingesetzt zur Verweildauer-Steigerung.
3. Amazon Produktsuche: Pagination mit bis zu 400 Ergebnissen auf 20 Seiten. Nutzer können auf Seite zurücknavigieren, URL enthält den Seitenparameter (?page=3).
4. Spotify (Suchergebnisse): Load More / Progressive Loading — erste 20 Treffer, Button "Mehr anzeigen". Der Footer (Datenschutz, etc.) bleibt immer erreichbar.
5. Pinterest: Masonry-Grid mit Infinite Scroll, aber mit "Zurück nach oben"-Button und gespeichertem Scroll-Zustand. Einer der besseren Infinite-Scroll-Implementierungen bezüglich UX.

In der Praxis (Figma-Umsetzung)

Pagination-Komponente:

1. Auto-Layout (Horizontal), Items: Previous-Button, Zahlen 1–N, Next-Button
2. Varianten: state: default, state: active (aktuelle Seite), state: disabled (Prev auf Seite 1)
3. Nummern-Dots für kompakte Mobile-Variante (... 3 [4] 5 ...)
4. Min-Touch-Target: 44 × 44 px pro Seiten-Button

Infinite Scroll Prototyp: In Figma lässt sich Infinite Scroll mit Overflow-Scrolling und gestapelten Frames simulieren. Echter Infinite-Scroll-Prototyp ist mit Figma allein nicht möglich — nutze Framer oder ProtoPie für interaktive Demos.

Load More Button: Sekundärer Button, zentriert, mit optionalem Loading-Spinner-State (loading: true). Darunter Platzhalter für Footer-Inhalte, um die Erreichbarkeit zu demonstrieren.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Für welche Inhalte ist Infinite Scroll geeignet? Infinite Scroll eignet sich für Content-Feeds ohne klares Ziel: Social Media, News-Streams, Discovery-Features. Es ist ungeeignet für zielorientierte Suchen, wo Nutzer ein spezifisches Item finden und wiederfinden müssen (E-Commerce, Dokumentensuche, Support).

Wie viele Items sollten auf einer Pagination-Seite erscheinen? Studien empfehlen 10–25 Items pro Seite als optimalen Bereich. Weniger als 10 erzeugt zu viel Klickarbeit, mehr als 50 überfordert die visuelle Verarbeitung. Für Produkt-Grids mit großen Vorschaubildern sind 16–24 Items üblich.

Verwandte Einträge

• Filter und Sorting UI — Listeneinschränkung und -sortierung
• Card-Pattern — Darstellung von Listeninhalten
• Skeleton Loader — Ladeplaceholder beim Nachladen

Weiterführend

• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.
• Nielsen Norman Group (2018). Infinite Scrolling Is Not for Every Website. nngroup.com.
• Raskin, A. (2009). Infinite Scroll: Time Well Spent? humanetechnology.com (Originaltext).
• W3C (2023). WCAG 2.1 Success Criterion 2.2.2: Pause, Stop, Hide. w3.org.