Konversionsbooster Teil 5: Die Paginierung

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.

Konversionsbooster Paginierung - Zalando

Klare Kennzeichnung der Klickfläche bei Zalando

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.

Konversionsbooster Paginierung - Boobbaby

Deutliche Kennzeichnung der ausgewählten Seite bei boobbaby

“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.

Konversionsbooster Paginierung - Asos

Pfeil und Bezeichnung für vor- und zurückblättern bei Asos

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.

Konversionsbooster Paginierung - Otto

Unterstreichungen wirken unruhig bei Otto

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.

Konversionsbooster Paginierung - Threadless

Anzeige der ersten und letzten beiden Seiten bei threadless

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.

Asynchrones Nachladen bei 7trends

Asynchrones Nachladen bei 7trends

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

  • Teilen
Manuel Ressel Manuel Ressel Manuel Ressel ist Conversion Designer bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Folgen Sie ihm auf Twitter oder besuchen Sie seinen Blog Conversion Design.

, , , , , , ,

8 Reaktionen auf  “Konversionsbooster Teil 5: Die Paginierung”

Kommentare

  1. Mich würde interessieren, welche Akzeptanz Blätterkataloge (Flash, PageFlip,…) haben. Hier muss man keinem das Blättern erklären und es ist wie im richtigen Leben. Zudem können Seiten und somit Artikeldarstellungen gezoomt werden, ohne das man großartige Klimmzüge machen muss. In einem Blätterkatalog blättert man ganz intuitiv weiter, keine Mensch bleibt hier auf erster Seite.

  2. Dieser Artikel gefällt mir. Gut finde ich auch die Idee, bei einem Seitenwechsel an den Anfang der Produktauflistung zu springen (wie bei Asos) und nicht an den Anfang der kompletten Seite (wie bei einem Neuladen der Seite). Dies habe ich gleich heute umgesetzt.

  3. @ Volker: Blätterkataloge sind mir nur als Umsetzung des Original-Katalogs bekannt und nicht als Ersatz für Kategorie- oder Suchseiten. Die Bedienung ist wohl eher hakelig. Das Blättern ist wesentlich anstrengender und mit mehr Mühe verbunden als einfach auf einen Link zu klicken. Möchte man eine Beschreibung zu einem Artikel muss man meistens reinzoomen und dann wieder rauszommen, wenn man weiterblättern möchte. Also sind Blätterkataloge eher benutzerunfreundlich. Das Blättern ist eher eine Spielerei als eine wirklich intuitive und einfache Bedienung.

    @Christian Rothe: Freut mich, wenn ich Ihnen Anregungen für Ihren Shop liefern konnte. Ihre Umsetzung unterscheidet sich allerdings noch in kleinen allerdings sehr wichtigen Details zu dem Beispiel von Asos.
    Bei einem Seitenwechsel bei Asos “fährt” das Bild von unten nach oben zum Anfang der Produkte. Der Nutzer kann dadurch nachvollziehen, was gerade passiert, nämlich dass für ihn automatisch an den Anfang der Produkte gescrollt wird.
    Bei Ihrer Umsetzung läd die Seite neu und dann “springt” das Bild direkt zum Anchor-Tag. Dieser “Hüpfer” wirkt sehr unruhig und der Nutzer kann nicht sofort nachvollziehen, was passiert ist.

  4. @Manuel Ressel: Vielen Dank für die prompte Rückmeldung und die konstruktive Kritik. Natürlich ist die Asos-Implementierung sehr elegant und besser als meine Lösung. Bestimmt haben sich die Entwickler dort mehr als die 30 Minuten Zeit genommen, die ich heute dafür übrig hatte.

    Doch: Der Nutzen, den Käufer nach einem Seitenwechsel sofort wieder mitten ins Geschehen zu lenken (z.B. zu den Produkten), war für mich so groß und einleuchtend, dass ich sofort damit loslegen wollte.

    Der Nutzen wird nämlich besonders offensichtlich, wenn Sie hier einmal an den Marken- und Eigenschafts-Filtern herumklicken: http://www.laufstar.de/index.php/cat/c54_Laufbekleidung.html

    Wenn Sie hier einen Klick machen, landen Sie wieder bei der Box mit den Filtern und bekommen sofort eine Rückmeldung / Quittung, das Ihr Klick zu einer Veränderung geführt hat. Sie müssen nicht lange danach suchen.

    Eine elegante Lösung für meinen Shop wäre es bestimmt, nach dem Laden der nächsten Seite per Javascript automatisch sanft zu dem Anchortag zu “fahren”. Mit etwas Geduld und Javascript-Gefummel bekommt man dies sicherlich gut hin.

  5. Ich finde das direkte Springen sehr gut. Das sanfte presudo-scrollen nervt mich eher, das hat vielleicht etwas mit Kontrollverlust zu tun. Ich denke, die 30-Minuten-Umsetzung hat den optimalen Kosten-Nutzen-Effekt…

  6. @Christian Rothe:
    Richtig, bei den Filtern ist die Umsetzung gut, weil ich nach dem Klick wieder dort hin komme, wo ich vorher war und kann direkt weiterarbeiten.

    @André Morys:
    Eigentlich liegt der Kontrollverlust doch gerade beim “Springen” vor. Ich befinde mich ganz unten auf der Seite und möchte eine Seite weiter. Klicke ich auf den Link, lädt die Seite neu und ich sehe nur noch, wie die Seite irgendwo hin springt. Im ersten Moment weiß ich nicht, was passiert ist. Durch den “Scroll-Effekt” erhalte ich Feedback, wo ich mich befinde und was gerade passiert. Dieses Feedback erhalte ich beim Springen nicht und die Orientierungslosigkeit kommt dem Kontrollverlust gleich.

    Hier ein weiterführender Link dazu:
    http://dev.opera.com/articles/view/improving-the-usability-of-within-page-l/

  7. Steve D. Steve D.

    N’abend,

    also der Beitrag zum Thema Pagination hat mir sehr gut gefallen. Ein paar mehr Beispiele für gute bzw. schlechte Umsetzungen hätten noch gut getan. Auch die Möglichkeiten der Umsetzung sind vielseitig, z. B. Kombination aus Schaltflächen & Dropdowns bzw. Eingabefeldern.

    Zum Thema asos und “Springen” … mir gefällt die Umsetzung sehr gut, wobei ich das zwischenzeitliche Nachladen (Gründe egal) beim Zurückspringen aus der Produkt-Detailansicht zur Gesamtübersicht als störend empfinde. Es wird ganz kurz die erste Seite angezeigt, obwohl man schon ein paar Seiten weiter war.

    Zu der Umsetzung bei laufstar … für eine halbe Stunde ganz gut, aber finde ich es zu unruhig, teilweise hektisch – erstens durch den abrupten Seitenwechsel plus das leicht verzögerte Spring zum Anker. Dies wird dadurch bedingt, dass ich als User kein Feedback erhalte (= nicht auf das Verhalten “vorbereitet” werde) und somit das Ganze etwas dem gelernten Verhalten, sprich Seitenwechsel = Beginn am Seitenanfang, widerspricht. Vllt. würde beim Seitenwechsel ein “Softscrolling” zum Anker den Gesamteindruck mildern/verbessern.

    Gruß Steve

Trackbacks/Pingbacks

  1. [...] zaghaft als Ersatz für die Paginierung auf Kategorieseiten verwendet. Beide Systeme haben Ihre Vor- und Nachteile. Ob das asynchrone Nachladen von Inhalten von der jeweiligen Zielgruppe schon verstanden und [...]

Hinterlassen Sie einen Kommentar