Der Podcast zum Thema
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenWas ist Pagination?
Pagination (zu Deutsch: Paginierung, Seitenaufteilung) bezeichnet das Aufteilen von Inhalten in einzelne Seiten. Ganz klassisch kennen wir das von Online-Shops:
Pagination von amazon.de
Struktur einer Pagination
Die Pagination soll dabei helfen, eine bessere Übersicht zu behalten und ist daher besonders bei langen Listen (wie Produktkatalogen oder Suchergebnissen) hilfreich.
Paginations sehen immer gleich aus? Nicht ganz. Da die reine Seitennummerierung oft auch mit anderen Elementen einhergeht, ergeben sich viele mögliche Gestaltungsvarianten.
Unterschiedliche Gestaltungsvarianten von Paginations
Seitenzahlen
Die wohl häufigste Methode besteht aus einer Seitennummerierung, die durch Schaltflächen (wie „1“, „2“, „3“ usw.) navigierbar ist.
Beispiel Tailwind Komponente
Wichtig ist dabei eine klare Kennzeichnung der aktiven Seite. Dies sollte nicht nur farblich geschehen, damit auch Personen mit Farbsehschwächen klar erkennen, wo sie sich befinden. Als zusätzlich markierende Elemente kann beispielsweise mit Linien oder Fettungen gearbeitet werden.
„Weiter“ und „Zurück“
Bei einigen gängigen Gestaltungsvarianten kann man durch „Weiter“- und „Zurück“-Buttons blättern, um zur nächsten oder vorherigen Seite zu gelangen. Diese Links bieten eine einfache Möglichkeit, sich durch die Seiten zu bewegen, ohne direkt zu einer bestimmten Seite springen zu müssen. Das erleichtert eine flüssige Navigation und ergänzt sich gut mit der typischen Seitennummerierung. Die Schaltflächen können sowohl mit Text als auch mit Pfeilen markiert sein.
Beispiel Tailwind Komponente mit Pfeilen
Gesamtzahl an Ergebnissen
Die Angabe der Gesamtzahl an Ergebnissen neben der Pagination ist ein hilfreiches UX-Element, das den Usern und Userinnen sofort einen Überblick darüber verschafft, wie viele Inhalte oder Produkte sie insgesamt durchsuchen können.
Tailwind Komponente mit Anzahl Resultate
Kombinierung mit Anzahl von Items
Viele Systeme bieten Nutzenden die Möglichkeit, die Anzahl der Einträge pro Seite anzupassen. Darstellbar ist dies mit einem Dropdown-Menü oder Eingabefeld, in dem die gewünschte Anzahl von Items ausgewählt oder eingegeben werden kann. Ein häufig genutztes Beispiel ist die Wahl zwischen 10, 25, 50 oder 100 Einträgen pro Seite.
WordPress Backend Einstellbarkeit von Einträgen pro Seite
Der große Vorteil: Die Einstellbarkeit ermöglicht eine flexible Anpassung an die individuellen Nutzerbedürfnisse. Während einige eine kompakte Darstellung mit weniger Einträgen bevorzugen, um die Seite schneller zu laden, möchten andere möglichst viele Inhalte auf einmal sehen, um weniger oft blättern zu müssen.
Tipps zur Gestaltung von Paginations
Große klickbare Bereiche: Um die Benutzerfreundlichkeit zu verbessern, sollten die Navigationslinks groß genug gestaltet sein, um sie problemlos anklicken zu können. Dies ist besonders wichtig auf Touchscreen-Geräten, wo präzise Klicks entscheidend sind. (Siehe: www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/)
Vermeidung von Unterstreichungen: Während Unterstreichungen als traditionelles Zeichen für Links gelten, können sie oft altmodisch wirken. Alternativen wie Farbänderungen oder Rahmen können ebenfalls effektiv sein, um Links hervorzuheben, ohne visuell überladen zu wirken.
Hervorhebung der aktuellen Seite: Die klare Kennzeichnung der aktuellen Seite hilft Nutzenden, sich innerhalb der Navigation besser zurechtzufinden. Eine deutliche visuelle Unterscheidung der aktiven Seite sorgt dafür, dass Benutzer:innen nicht die Orientierung verlieren.
Abstände zwischen den Seitenlinks: Eine großzügige Platzierung der Seitennummerierung erleichtert das Auffinden der gewünschten Seite, verbessert die Lesbarkeit und auch die Klickbarkeit bei Nutzung auf mobilen Geräten. Zu dicht beieinanderliegende Links können die Navigation erschweren und visuell unübersichtlich wirken.
Links zur ersten und letzten Seite: Besonders bei langen Listen oder umfangreichen Artikeln sind Links zur ersten und letzten Seite nützlich. Sie sparen Zeit und reduzieren die Anzahl der Klicks, die erforderlich sind, um zu bestimmten Inhalten zu gelangen. (Siehe: www.interaction-design.org/literature/topics/pagination)
„Infinite Scroll“ vs. Pagination?
Als Google im Oktober 2021 auf mobilen Geräten und im Dezember 2022 auf Desktop-PCs kontinuierliches Scrollen (Infinite Scroll) einführte, war das ein großer Schritt hin zu einer moderneren Nutzererfahrung. Doch nur anderthalb Jahre später, seit Juni 2024, kehrt Google zur klassischen Pagination zurück. Hier ist, was du darüber wissen solltest:
Was ist Infinite Scroll?
Infinite Scroll lädt automatisch neue Ergebnisse, während Benutzer:innen nach unten scrollen. Dies wurde erstmals auf mobilen Geräten eingeführt und später auch auf Desktop-PCs ausgeweitet. Die Idee war, eine flüssige und nahtlose Navigation durch Suchergebnisse zu ermöglichen, ohne dass Benutzer:innen manuell auf „nächste Seite“ klicken müssen.
Die Rückkehr zur Pagination
Im Juni 2024 wurde das kontinuierliche Scrollen auf Desktop und Mobile von Google deaktiviert. Stattdessen ist auf Desktop die klassische Pagination zurückgekehrt. Auf Mobile wurde ein „Mehr Suchergebnisse“-Button eingeführt.
Umsetzung der Pagination auf Desktop
Umsetzung der Pagination auf Mobile
Laut Google ermöglicht diese Änderung der Suchmaschine, die Suchergebnisse bei mehr Suchanfragen schneller zu liefern, anstatt automatisch Ergebnisse zu laden, die die Nutzenden nicht ausdrücklich angefordert haben. Zudem soll das automatische Laden von mehr Ergebnissen die Zufriedenheit der Benutzer:innen mit der Google-Suche nicht erhöht haben. (Siehe: https://searchengineland.com/google-dropping-continuous-scroll-in-search-results-443529)
Vergleich Infinite Scroll, Pagination, Mehr laden
„Mehr laden“-Buttons
„Mehr laden“-Buttons stellen eine flexible Alternative zur traditionellen Pagination dar. Sie bieten den Nutzenden die Möglichkeit, zusätzliche Inhalte nach Bedarf zu laden, anstatt durch mehrere Seiten navigieren zu müssen. Dies reduziert die Anzahl der erforderlichen Interaktionen und kann insbesondere auf mobilen Geräten eine benutzerfreundlichere Erfahrung bieten.
Load More mit Fortschrittsanzeige von asos.com
Dennoch sind bei der Implementierung von „Mehr laden“-Buttons einige wesentliche Aspekte zu beachten:
- Klarheit und Sichtbarkeit: Der „Mehr laden“-Button sollte klar sichtbar und an einer konsistenten Stelle auf der Seite platziert werden. Benutzer:innen müssen ihn leicht finden können, um zusätzliche Inhalte zu laden. Eine große, deutlich beschriftete Schaltfläche ist vorzuziehen.
- Feedback und Fortschrittsanzeige: Es ist wichtig, den Besuchenden Feedback darüber zu geben, wie viele weitere Artikel geladen werden und wie viele noch verfügbar sind. Ein Fortschrittsindikator oder eine klare Anzeige der geladenen und verbleibenden Artikel kann dazu beitragen, dass Nutzer:innen sich nicht verloren fühlen und den Überblick behalten.
- Leistung und Ladezeiten: Der Button sollte nur dann aktiviert werden, wenn die Ladezeiten akzeptabel sind. Lange Wartezeiten beim Laden neuer Inhalte (insbesondere bei Produkten mit großen Bildern) können die Nutzererfahrung negativ beeinflussen.
- Zugänglichkeit des Fußbereichs: Ein häufiges Problem bei der Nutzung von „Mehr laden“-Buttons ist das gelegentliche Übersehen des Seitenfußes, der bei unendlichem Scrollen oder häufigem Laden neuer Inhalte nach unten gedrückt wird. Der Button sollte so gestaltet sein, dass er die Erreichbarkeit des Seitenfußes nicht beeinträchtigt.
User Fluss für “Mehr laden”-Buttons
Sowohl Paginations als auch „Mehr laden“ (aber natürlich auch Infinite Scroll) haben ihr Für und Wider. Allerdings ist besonders auf Mobile die Bildschirmfläche eher klein, wodurch der „Mehr laden“-Button zur bequemeren Alternative zur bekannten Seitennummerierung wird.
Mehr oder weniger anstrengend für User?
Pagination beeinflusst die „Interaction Cost“ – die Gesamtheit der mentalen und physischen Anstrengungen, die Benutzer:innen aufwenden müssen, um ihre Ziele zu erreichen. (Siehe: https://www.nngroup.com/articles/interaction-cost-definition/) Während Paginations die kognitive Last reduzieren können, indem sie Inhalte in verdauliche Portionen unterteilen, können sie gleichzeitig auch die Interaction Cost erhöhen. Dies geschieht durch die Notwendigkeit, zwischen Seiten zu navigieren, was zusätzliche Klicks, Scrolling und Gedächtnisaufwand mit sich bringt.
User Fluss bei der Nutzung von Paginations
Insbesondere bei umfangreichen Inhalten kann der zusätzliche Aufwand signifikant sein, da Benutzer:innen mehr Schritte durchlaufen müssen, um alle benötigten Informationen zu finden und zu verarbeiten. Jeder Seitenwechsel bringt potenziell zusätzlichen Aufwand mit sich, was die Benutzererfahrung anstrengender machen kann.
Es ist daher wichtig, eine Balance zu finden, die die Interaction Cost minimiert, während die Vorteile der Segmentierung durch Pagination erhalten bleiben. Eine adaptive und kontextbezogene Gestaltung, die unterschiedliche Benutzerbedürfnisse und -szenarien berücksichtigt, kann helfen, eine optimale Nutzererfahrung zu gewährleisten.
Items bei Website mit Pagination vergleichen
Items bei Website mit “Mehr laden” vergleichen
Vorteile und Nachteile von Paginations
| Vorteile | Nachteile |
| + Kognitive Last: Basierend auf dem Chunking-Prinzip werden Inhalte in kleinere Einheiten strukturiert, wodurch man sich leichter auf die Inhalte der aktuellen Seite konzentrieren kann. |
– Unterbrechung des Benutzerflusses: Nutzer:innen müssen möglicherweise ihre Arbeit unterbrechen, um zu einer anderen Seite zu navigieren, was den Fluss der Informationsaufnahme stören kann. |
| + Einfache Orientierung: Benutzer:innen können sich die Seite merken, auf der sie sind und leicht zurückkehren, um Informationen wiederzufinden. |
– Mehrere Seitenaufrufe erforderlich: Wenn Nutzende Informationen auf verschiedenen Seiten vergleichen müssen, kann dies umständlich werden, da sie zwischen den Seiten hin und her wechseln müssen. |
| + Erwartungsmanagement: Die Pagination zeigt in der Regel auch die Gesamtzahl der Seiten und ihren Fortschritt, was eine klare Menge an Daten vermittelt.(Quelle: https://www.interaction-design.org/literature/topics/pagination) |
– Begrenzte Sicht auf Inhalte: Benutzer:innen sehen nur einen Teil der verfügbaren Inhalte auf einer Seite, Inhalte auf späteren Seiten können übersehen werden. |
Paginations aus der SEO-Perspektive
Die Implementierung von Pagination auf einer Website spielt eine entscheidende Rolle bei der Suchmaschinenoptimierung (SEO). Vor allem bei großen Websites mit vielen Produkt- und Kategorieseiten oder umfangreichen Inhalten ist es wichtig, die Seitenstruktur so zu gestalten, dass Suchmaschinen diese effizient crawlen und indexieren können, ohne Duplicate Content zu erzeugen. (Siehe: https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading?hl=de) Eine unsaubere Umsetzung kann dazu führen, dass nicht alle Seiten korrekt erfasst oder fälschlicherweise als doppelte Inhalte betrachtet werden. Dabei gibt es einige etablierte Methoden und aktuelle Best Practices, die beachtet werden sollten.
„View all“-Lösung
Ein gängiger Ansatz zur Optimierung von Pagination ist die „View All“-Lösung. Bei dieser Methode wird den Usern und Userinnen die Möglichkeit geboten, alle Inhalte einer paginierten Serie auf einer einzigen Übersichtsseite anzuzeigen. Diese Option ist besonders in Online-Shops beliebt, wo Benutzende die Anzahl der Artikel pro Seite anpassen können. (Quelle: https://de.ryte.com/wiki/Pagination/) Google bevorzugt oft solche zusammengefassten Seiten, da sie mehr Übersicht bieten und alle relevanten Inhalte an einem Ort vereinen. Es ist jedoch wichtig, sicherzustellen, dass die Ladezeiten gering bleiben, da eine langsame Übersichtsseite die Nutzererfahrung negativ beeinflussen kann. Um Duplicate Content zu vermeiden, sollte die „View All“-Seite als kanonische Version (rel=”canonical”) markiert werden, sodass die Teilseiten auf diese Seite verweisen und Suchmaschinen diese bevorzugt indexieren.
Wenn eine vollständige Übersichtsseite aufgrund der Menge der Inhalte oder technischer Einschränkungen nicht möglich ist, gibt es Alternativen, die sicherstellen, dass Suchmaschinen die Zusammengehörigkeit der Seiten richtig verstehen. Früher wurden hierfür die Attribute rel=”prev” und rel=”next” verwendet, um die Navigation zwischen paginierten Seiten zu kennzeichnen. Diese sind jedoch mittlerweile veraltet, und Google verlässt sich heute nicht mehr auf diese Angaben. Stattdessen ist es wichtiger, sicherzustellen, dass jede Seite eine eindeutige URL hat und klare Links zwischen den Seiten vorhanden sind. Das erleichtert es den Crawlern, den Inhalt vollständig zu erfassen und korrekt zu indexieren.
Best Practices für SEO-optimierte Pagination
1. Verwendung von href-Links für Seitenverknüpfungen
Um sicherzustellen, dass die Suchmaschinen-Bots alle Seiten einer paginierten Serie finden, sollten klare href-Links verwendet werden. Diese Links sollten zwischen den Seiten verweisen, zum Beispiel durch „Weiter“- und „Zurück“-Links oder durch Seitenzahlen. Es ist wichtig, dass diese Links im HTML-Code als <a href>-Tags vorhanden sind, da der Crawler nur diesen Links folgt und keine JavaScript-Ausführungen für die Navigation nutzt.
2. Einzigartige URLs für jede Seite
Jede Seite innerhalb einer paginierten Serie sollte eine eigene, eindeutige URL haben. Dies kann beispielsweise durch Hinzufügen eines Parameters wie ?page=n erreicht werden. Dadurch können Suchmaschinen wie Google jede Seite als separates Dokument behandeln und indizieren. Es ist wichtig, keine URL-Fragmentbezeichner (z.B. #page2) zu verwenden, da Google diese ignoriert.
3. Canonicals, Indexierung und Vermeidung von Duplikaten
Um Duplicate Content zu vermeiden, ist es wichtig, zwischen Indexmanagement und Crawling zu unterscheiden:
- Indexmanagement: Das rel=”canonical”-Attribut (auch bekannt als Canonical-Tag) spielt eine entscheidende Rolle im Indexmanagement. Es weist Suchmaschinen an, welche Version einer Seite indexiert werden soll. Bei paginierten Inhalten sollte jede Seite ein Canonical-Tag auf sich selbst setzen, damit sie als eigenständiges Dokument indexiert wird und nicht als Duplikat der ersten Seite gilt. Wenn bestimmte Seiten gecrawlt, aber nicht indexiert werden sollen (z. B. Sortier- oder Filtervarianten), kann das noindex-Meta-Tag verwendet werden, um sie von der Indexierung auszuschließen.
- Crawling: Um die Crawlingeffizienz zu verbessern, sollten redundante Seiten, die denselben Inhalt in unterschiedlichen Sortierungen oder Filterungen zeigen, durch die robots.txt-Datei vom Crawling ausgeschlossen werden. Dies verhindert, dass Suchmaschinen-Bots unnötig Zeit und Ressourcen auf diese Seiten verwenden, und stellt sicher, dass der Crawler sich auf die relevanten Inhalte konzentriert.
4. Einsatz von Sitemaps und Google Merchant Center Feeds
Um sicherzustellen, dass die Suchmaschinen alle relevanten Inhalte finden, können in der Suchmaschinenoptimierung Sitemaps oder der Google Merchant Center Feed verwendet werden. Diese Tools helfen dabei, die Struktur der Website besser zu verstehen und alle Produkte oder Artikel zu indexieren, insbesondere wenn JavaScript für das Laden von Inhalten verwendet wird.
Barrierefreiheit bei der Pagination
Eine barrierefreie Pagination ist essenziell, um sicherzustellen, dass alle Nutzenden, einschließlich Menschen mit Behinderungen, bequem durch Inhalte navigieren können. Hier sind einige bewährte Methoden, um die Zugänglichkeit zu verbessern (Siehe: www.a11ymatters.com/pattern/pagination/):
1. Einbettung in ein <nav>-Element
Um Benutzern und Benutzerinnen von Bildschirmlesern deutlich zu machen, dass es sich bei den Links um eine Navigation handelt, sollte die Pagination in ein <nav>-Element eingebettet werden. Dies trennt die Navigationsstruktur visuell von anderen Seitenelementen und macht sie für assistive Technologien erkennbar.
Einbettung in ein nav-Element
2. Deutliche Beschriftung der Links
Jeder Link innerhalb der Pagination sollte mit einem aria-label versehen werden, das die jeweilige Seite beschreibt. Dies ist besonders wichtig für Nutzende von Bildschirmlesern, da sie so verstehen, wohin der Link führt. Ohne diese Beschriftung hören sie möglicherweise nur eine Nummer ohne Kontext.
Deutliche Beschriftung der Links
3. Kennzeichnung der aktuellen Seite
Es ist wichtig, dass Besucher:innen wissen, welche Seite aktuell angezeigt wird. Dies lässt sich durch das Attribut aria-current erreichen, das anzeigt, dass es sich um die aktive Seite handelt.
Aktuelle Seite mit aria-current-Attribut
4. Integration von „Weiter“- und „Zurück“-Links
Sollte die Pagination „Weiter“- und „Zurück“-Links enthalten, müssen auch diese klar beschrieben werden. Auch dafür nutzen wir aria-labels.
“Weiter”- und “Zurück”-Links
Fazit
Pagination spielt eine zentrale Rolle bei der Strukturierung und Navigation von Inhalten auf Websites, besonders wenn es um umfangreiche Datenmengen wie Produktkataloge oder Suchergebnisse geht. Sie verbessert nicht nur die Benutzererfahrung, indem sie Inhalte in verdauliche Portionen unterteilt und die Übersichtlichkeit erhöht, sondern bietet auch wichtige Vorteile in Bezug auf Ladezeiten, Performance und SEO. Gleichzeitig bringt Pagination Herausforderungen mit sich, etwa die Erhöhung der Interaktionskosten und die potenzielle Unterbrechung des Benutzerflusses.
Durch eine durchdachte Gestaltung – von responsiven Layouts bis hin zu klar gekennzeichneten, barrierefreien Navigationselementen – können diese Nachteile jedoch minimiert werden. Die Balance zwischen Pagination und alternativen Methoden wie „Infinite Scroll“ oder „Mehr laden“-Buttons hängt letztlich von den spezifischen Anforderungen der Website und den Erwartungen der Besucher:innen ab.
Eine erfolgreiche Implementierung von Pagination schafft eine harmonische Verbindung zwischen Usability, Performance und Suchmaschinenoptimierung, was zu einer ganzheitlich verbesserten Benutzererfahrung führt.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
5 Stimmen, Bewertung: 4,20 von 5)
