Die Aufteilung von Inhalt auf getrennte Seiten ist in der Buchbindung notwendig, da der Platz auf Blättern beschränkt ist und in Computerprogrammen und auf Webseiten hilfreich um Inhalte zu strukturieren, die ansonsten inhaltlich nicht strukturiert werden können. Auf Shopportalen findet man die Paginierung vor allem auf Suchergebnisseiten und Kategorieseiten. Die Implemetierung ist allerdings noch immer nicht wirklich richtig standardisiert und wird recht stiefmütterlich behandelt. Sieht man die verschiedenen Varianten von Paginierung, so könnte man glauben, dass sich irgendjemand mal irgendwas ausdenkt und das dann hoffentlich schon irgendwie funktioniert. Man kann es nicht verübeln, denn gerade auf Suchergebnisseiten wird die Verwendung von Seiten durch Suggest-Vorschläge bei der Eingabe der Suche und Filter- und Sortiermöglichkeiten auf der Suchergebnisseite immer weniger genutzt. Laut Jakob Nielsen schauen Benutzer sich nur die erste Suchseite an und schauen nahezu nie auf die folgenden Seiten (Search: Visible and Simple - Jakob Nielsen). Neben der Paginierung tritt auch immer mehr die Alternative des "Endlosen Scrollens" in den Vordergrund, bei der am Seitenende weitere Inhalte asynchron nachgeladen werden. Trotzdem sollte die Paginierung meiner Meinung nach nicht außer Acht gelassen werden. Gerade wenn ein Besucher noch keine genaue Vorstellung hat, was er sucht und einfach mal sich inspirieren lassen und im Shop stöbern möchte, kann eine gute Paginierung sinnvoll sein. Welche Stolpersteine bei der Paginierung beachtet werden sollten und welche Vor- und Nachteile die Paginierung im Vergleich zum Endlosen Scrollen hat möchte ich Ihnen in diesem Artikel etwas näher bringen.

Richtlinien

Im Laufe der Zeit haben sich einige Richtlinien etabliert, die die Benutzbarkeit der Paginierung gewährleisten und auf jeden Fall bei einer Paginierung gegeben sein sollten.

Klickbare Fläche

Gerade einstellige Zahlen bieten eine relativ kleine Klickfläche. Deshalb ist es wichtig diese Fläche zu erweitern, so dass der Nutzer nicht so schnell daneben klicken kann. Auch ein Abstand zwischen den einzelnen Seitenzahlen sollte eingehalten werden, so dass verhindert wird, dass der Nutzer aus Versehen auf die falsche Seite klickt.
Empfehlenswert ist es dem Nutzer die klickbare Fläche deutlich zu zeigen und entweder diese einzurahmen oder mit einer unterschiedlichen Farbe zum Hintergrund zu hinterlegen. So wird dem Nutzer deutlich gemacht, in welchem Bereich er zur Seite kommt, welcher Bereich nicht klickbar ist und ab wann der Link der nächsten Seite anfängt.

Markierung der aktuellen Seite

Damit der Nutzer den Überblick behält, auf welcher Seite er sich gerade befindet, sollte diese Seite sich deutlich von den anderen Seiten abheben. Da man sich schon auf der Seite befindet, sollte diese auch nicht verlinkt sein und dies auch erkennbar sein.

“Weiter” und “Zurück” Navigation

Neben den Seitenzahlen sollte auch eine Möglichkeit geboten werden direkt zur nächsten oder vorherigen Seite zu springen. Oft sieht man hierfür Pfeile, die das Blättern zur nächsten oder vorherigen Seite symbolisch darstellen sollen. Gerade für Einsteiger könnte dies nicht direkt verständlich sein und ein unterstützendes Wording hilfreich sein.

Optimierungsmöglichkeiten

Neben den relativ etablierten Richtlinien gibt es auch einige Diskussionspunkte bei denen man eigentlich nicht zu einem eindeutigen Ergebnis kommen kann, sondern vielmehr für seine eigene Zielgruppe verproben sollte, was am besten funktioniert.

Unterstreichung der Links

Während eine Unterstreichung von Links unter normalen Umständen empfehlenswert ist, kann diese je nach Design bei Seitenzahlen störend wirken. Ist zum Beispiel die Zahl schon in Linkfarbe umrandet, so ist es nur störend zusätzlich eine Unterstreichung vorzunehmen. Die Umrandung signalisiert schon deutlich, dass die Seitenzahl ein Link ist und damit ein klickbares Element. Die Unterstreichung wirkt nur unruhig und die Darstellung wird unübersichtlich.
Auch bei der Anzeige von vielen Seitenzahlen wirkt die Unterstreichung unruhig. Die Aneinanderreihung von Seitenzahlen sollte dem Nutzer schon deutlich machen, dass diese ausgewählt werden können.

Verlinkung zur ersten und letzten Seite

Ein Link zur ersten Seite ist in keinem Fall verkehrt, allerdings sollte man den Sinn und Intention des Nutzers hinterfragen.
Bei einer Suchanfrage zum Beispiel sollten die relevantesten Ergebnisse zur Suchanfrage auf den ersten Seiten erscheinen. Das heißt auf der letzten Seite sollte also das Produkt stehen, welches zur Suchanfrage die geringste Relevanz besitzt. Das Interesse auf die letzte Seite zu klicken ist in diesem Fall also relativ gering.
Anders sieht es aus, wenn der Nutzer auf Kategorieseiten stöbern möchte. Eine Anzeige wie viel Seiten vorhanden sind ist in diesem Fall für den Nutzer von Interesse. Diese Anzeige kann durch die Darstellung der letzten Seite in der Paginierung abgedeckt werden.

Position der Verlinkung zur ersten und letzten Seite

Oft wird die Verlinkung der ersten und letzten Seite als Klammer um die Paginierung gesetzt. Aus Sicht der Usability scheint diese Lösung einleuchtend zu sein. Analog zum Videorekorder wird “Forward” und “Backward” (“Seite vor” und “Seite zurück”) umklammert von “Fast-Forward” und “Fast-Backward” (“Erste Seite” und “Letzte Seite”).
Allerdings nimmt diese Variante viel Platz weg, den man eventuell dem Nutzer für mehr Auswahl von Seiten zur Verfügung stellen könnte.
Platzsparender wäre hier die Variante die erste und letzte Seite innerhalb der Seitenzahlen immer anzuzeigen.

Paginierung vs. Endlos Scrollen

Immer häufiger wird anstelle einer Paginierung das Endlos Scrollen verwendet. Dabei wird weiterer Inhalt asynchron nachgeladen, sobald man das Ende des bestehenden Inhalts erreicht hat.
Vorteil diese Variante ist, dass der Fluss in dem sich der Nutzer beim Scrollen befindet nicht durch das Umspringen auf die nächste Seite unterbrochen wird. Es wird direkt Inhalt nachgeladen und der Nutzer kann weiterscrollen.

Ist der Inhalt allerdings relativ lang, so kann der Nutzer auch ziemlich lange scrollen und der Inhalt davor ist nicht mehr gegliedert und dadurch relativ unübersichtlich.

Paginierung kombiniert mit asynchronem Nachladen

Die Vorteile der Paginierung und des Endlosen Scrollens können auch kombiniert werden. Anstatt bei einem Seitenwechsel die Seite komplett neu zu laden, könnte lediglich der neue Inhalt der nächsten Seite asynchron nachgeladen werden und der bestehende Rahmen bleibt bestehen.
Der Onlineshop Asos (asos.de) hat diese Möglichkeit vorbildlich umgesetzt und scrollt bei einem Seitenwechsel an den Anfang der Produktauflistung und nicht wie bei einem Neuladen der Seite an den Anfang der kompletten Seite.
So kann der Fokus des Nutzers auf den Produkten bestehen bleiben.

Fazit

Werden die Richtlinien eingehalten, so erhält man eine gute Ausgangsbasis für eine gut benutzbare Paginierung.
Andere Faktoren wie Verlinkung der letzten Seite sollten mit Blick auf die Intention des Nutzers optimiert werden.
Asynchrones Nachladen von Inhalten kann den Fluss des Nutzers beim Durchblättern der Seiten erhöhen und so die positiven Eigenschaften des Endlosen Scrollens mit den Vorteilen einer Paginierung kombinieren.
Interessant wäre es auch einen umgekehrten Ansatz zu testen. Sobald beim Endlosen Scrollen Inhalt nachgeladen wird, wird unterhalb des bestehenden Inhalts eine Sprungmarke gesetzt, mit der man zum vorherigen oder darauffolgenden Inhalt springen kann.

Weiterführende Quellen:

Usability of Pagination Links – Jesper Rønn-Jensen
Pagination Gallery: Examples And Good Practices – Smashing Magazine
In search of the ultimate pagination – wolfslittlestore
Infinite Scrolling Best Practices – UX Movement