Pagination – Seitennavigation und Inhaltsaufteilung im UI-Design

Pagination (Seitennavigation) ist eine UI-Komponente, die große Inhaltsmengen in nummerierte Seiten aufteilt und dem Nutzer die Navigation zwischen diesen Seiten ermöglicht.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Seitennavigation, Paginierung, Seitenumbruch-Navigation, Page Navigator

Was ist Pagination?

Pagination löst das fundamentale Problem großer Datenmengen: Eine Liste mit 10.000 Produkten oder 500 Suchergebnissen auf einmal zu laden und anzuzeigen, würde die Performance zerstören und Nutzer überfordern. Pagination teilt diese Mengen in handhabbare Einheiten (z. B. 20 Einträge pro Seite) und bietet eine Schnittstelle zur Navigation durch diese Einheiten. Zusätzlich kommuniziert sie dem Nutzer die Gesamtmenge und aktuelle Position.

Erklärung

Varianten

Numbered Pagination (Klassisch): Eine Reihe von Seitenzahlen mit Vor/Zurück-Pfeilen. Nutzer sehen den Gesamtumfang, können direkt zu einer bestimmten Seite springen. Empfohlen für Suchergebnisse, Produktlisten, Tabellen.

Truncated Pagination: Bei vielen Seiten werden nicht alle Zahlen angezeigt: ◄ Zurück 1 2 3 ... 47 48 49 Weiter ►. Erste und letzte Seiten immer sichtbar, mittlerer Bereich um die aktuelle Seite herum, Rest als „...". Standard für die meisten Implementierungen.

Simple Previous/Next: Nur Vor- und Zurück-Buttons ohne Seitenzahlen. Für einfache, chronologische Inhalte (Blog-Posts, News) bei denen der direkte Sprung zu Seite n nicht nötig ist.

Infinite Scroll: Kein expliziter Navigations-Button – neue Inhalte laden automatisch, wenn der Nutzer das Ende der Seite erreicht. Typisch für Social Feeds (Instagram, Twitter/X). Vorteil: Nahtlose Erfahrung. Nachteil: Kein Footer erreichbar, Position nicht speicherbar, Back-Button-Problem.

Load More Button: Manuell ausgelöster Infinite Scroll – ein Button lädt die nächste Portion nach. Guter Kompromiss: Kontrolle beim Nutzer, kein Footer-Problem, Back-Button-freundlich.

Cursor-Based Pagination: Technisches Konzept (API-seitig): Statt Seitenzahlen werden „Cursor"-Marker verwendet. Wichtig bei Live-Daten (neue Einträge verschieben Seitenzuordnungen nicht). Für den Nutzer meist als Previous/Next oder Load More sichtbar.

Anatomie der Numbered Pagination

• Previous Button: ◄ oder ← Zurück – deaktiviert auf Seite 1
• Page Number Items: Klickbare Zahlen, aktuelle Seite hervorgehoben
• Ellipsis / Truncation: „..." für ausgelassene Seitenbereiche
• Next Button: ► oder Weiter → – deaktiviert auf letzter Seite
• Optional: Page Size Selector: Dropdown für „20 / 50 / 100 Einträge pro Seite"
• Optional: Go To Page Input: Direkteingabe einer Seitenzahl
• Optional: Results Counter: „Zeige 21–40 von 523 Ergebnissen"

States der Pagination Items

Seitengröße bestimmen

Empfohlene Einträge pro Seite je nach Kontext:

• Produktlisten (visuell): 20–30 Items (Grid-Layout)
• Suchergebnisse (text-basiert): 10–20 Einträge
• Datentabellen: 25–50 Zeilen
• Admin-Listen: 50–100 Einträge (Power-User)

Accessibility (WCAG 2.1)

• <nav aria-label="Seitennavigation"> als Wrapper
• Pagination-Liste als <ul> mit <li> Elementen
• Aktuelle Seite: aria-current="page" auf dem aktuellen Seiten-Link
• Previous/Next-Buttons: aria-label="Vorherige Seite" / aria-label="Nächste Seite" (nicht nur Icon)
• Deaktivierte Buttons: aria-disabled="true" (Button bleibt fokussierbar, damit Screenreader sie ankündigt)
• Ellipsis: aria-hidden="true" – nur dekorativer Platzhalter
• Seitenwechsel: aria-live="polite" auf dem Content-Bereich, der sich ändert – Screenreader kündigt neuen Inhalt an
• Fokus nach Seitenwechsel: Zum ersten Element des neuen Inhalts setzen oder zur Pagination-Komponente zurückspringen

Beispiele

1. Google Search – Suchergebnisse: Numbered Pagination am Ende der Suchergebnis-Seite. Maximal 10 Seiten sichtbar, erste/letzte Seite immer erreichbar. Großzügige Linkflächen, aktuelle Seite nicht klickbar aber deutlich hervorgehoben. Goldstandard der Pagination-UX.
2. Amazon – Produktlisten: Truncated Numbered Pagination mit Page-Size-Selector (16/32/48 Ergebnisse). Zeigt oben rechts „1–16 von 1.234 Ergebnissen" – kontextueller Überblick ohne die Seite zu verlassen.
3. Mobile vs. Desktop: Auf Mobile reduziert sich die Pagination oft auf Simple Previous/Next (nur Pfeile + Seitenzahl), da zu viele Seitenzahl-Buttons auf kleinen Screens nicht klickbar sind. Infinite Scroll und Load-More-Button sind mobile-tauglichere Alternativen für Feed-artige Inhalte.
4. Accessibility Best Practice: GOV.UK Pagination-Komponente – korrekte <nav>-Landmarks, aria-label="Page [n]" auf Seiten-Buttons, aria-current="page" auf aktiver Seite, Previous/Next mit vollständigem Text statt nur Icons.
5. Häufiger Fehler: Infinite Scroll ohne „Back"-Funktionalität einsetzen. Nutzer die per Deep-Link auf ein bestimmtes Produkt aus dem 8. Load-More-Batch kommen und dann Zurück drücken, landen wieder am Anfang – Frustration und Conversion-Verlust. Lösung: URL-Parameter mit Positions-Offset oder Session-Storage der Scroll-Position.

In der Praxis

Figma: Pagination als Komponente mit variablem Page-Count via Instanz-Properties. Pagination-Item als Sub-Komponente mit Variants (Default/Current/Hover/Disabled). Ellipsis als eigenes Item. Previous/Next als Icon-Button-Komponente. Auto Layout für dynamische Breitenanpassung.

HTML/CSS-Grundstruktur: ```html <nav aria-label="Suchergebnis-Seitennavigation"> <ul class="pagination"> <!-- Zurück-Button --> <li> <a href="/suche?seite=2" class="pagination-btn pagination-prev" aria-label="Vorherige Seite" rel="prev" > <svg aria-hidden="true">◄</svg> <span class="visually-hidden">Zurück</span> </a> </li>

<li><a href="/suche?seite=1" aria-label="Seite 1">1</a></li> <li><a href="/suche?seite=2" aria-label="Seite 2">2</a></li>

<!-- Aktuelle Seite --> <li> <a href="/suche?seite=3" aria-current="page" aria-label="Seite 3, aktuelle Seite" class="pagination-current" >3</a> </li>

<li><a href="/suche?seite=4" aria-label="Seite 4">4</a></li>

<!-- Ellipsis --> <li aria-hidden="true"><span class="pagination-ellipsis">...</span></li>

<li><a href="/suche?seite=24" aria-label="Seite 24">24</a></li>

<!-- Weiter-Button --> <li> <a href="/suche?seite=4" class="pagination-btn pagination-next" aria-label="Nächste Seite" rel="next" > <svg aria-hidden="true">►</svg> <span class="visually-hidden">Weiter</span> </a> </li> </ul>

<!-- Optional: Ergebniszähler --> <p class="pagination-info" aria-live="polite"> Zeige 41–60 von 478 Ergebnissen </p> </nav> ```

SEO: <link rel="prev" href="..."> und <link rel="next" href="..."> im <head> verbessern Crawling paginierter Inhalte.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie viele Einträge pro Seite sollte ich wählen? Orientiere dich an der Ladezeit und am Nutzungskontext. Produktlisten: 20–24 Items funktioniert gut in einem 3–4-spaltigen Grid. Zu wenig (unter 10) erfordert häufiges Seitenblättern; zu viel (über 50) verlängert Ladezeit und Scrollstrecke. Einen Seitengröße-Selektor (20/50/100) für Power-User anzubieten ist eine nutzerfreundliche Ergänzung.

Wann ist Infinite Scroll besser als Pagination? Infinite Scroll eignet sich für exploratives Browsing ohne klares Ziel: Social Media Feeds, Pinterest-artiges Browsen, Inspiration-Plattformen. Pagination und Load-More sind besser für zielorientierte Suche: Suchergebnisse, Produktlisten, Datentabellen. Die Faustregel: Wenn der Nutzer zu einem bestimmten Ergebnis zurückkehren oder eine URL teilen möchte, ist Pagination die sicherere Wahl.

Verwandte Einträge

• Navigation Bar
• Breadcrumb
• Skeleton Loader
• Sidebar Navigation

Weiterführend

• Nielsen Norman Group – „Infinite Scrolling vs. Pagination": nngroup.com/articles/infinite-scrolling-tips
• Material Design 3 – Lists (Pagination): m3.material.io
• Google Developers – Pagination Best Practices (SEO): developers.google.com/search
• WAI-ARIA Authoring Practices – Navigation Pattern: w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation