Trefferlisten vor- und zurückblättern – Best Practices und Empfehlungen für die ideale Paginierung

Täglich durchforsten wir Trefferlisten und versuchen, das „richtige“ Resultat aus den meist überzähligen Ergebnissen herauszupicken. Ganz egal, ob wir Google, Amazon oder eBay benutzen – immer sind Trefferlisten irgendeiner Art im Einsatz.

Die Paginierung (engl. „Pagination“) kommt immer dann zum Tragen, wenn dem Benutzer eine grosse Trefferzahl aufgestückelt präsentiert werden soll. Gleichzeitig liefert sie Angaben darüber, wie gross die Trefferzahl insgesamt ist und wie viele Treffer der Benutzer bereits angeschaut/abgearbeitet hat.

Damit jede Trefferliste benutzerfreundlich wird, sollten einige grundlegenden Eigenschaften vorherrschen. Folgende Bestandteile sollten dem Benutzer immer zur Verfügung gestellt werden:

1. Die aktuell angewählte Seite
Wie bei der Seitennavigation, so muss der Benutzer auch bei der Paginierung immer die aktuell angewählte Seite sehen können. Diese sollte entsprechend visuell ausgezeichnet werden und ist nicht durch den Benutzer anklickbar.

3158-1-paginierung.png

Beispiel aus dem Web: eBay

3166-ebay-paginierung.jpg

2. Anklickbare Seitenzahlen
Alle sichtbaren Seitenzahlen sind (bis auf die aktuelle Seite) anklickbar.

3159-2-paginierung.png

Beispiel aus dem Web: Google

3167-google-paginierung.jpg

3. Buttons zum vor- und zurückblättern
Nebst den Seitenzahlen kann der Benutzer auch auf die – möglichst als Pfeile aufbereiteten – Buttons vor- und zurückblättern. Die Buttons sollten immer angezeigt werden, auch wenn ein vor- oder zurückblättern aufgrund der aktuellen Seite nicht möglich ist. Befindet sich der Besucher beispielsweise auf Seite 1, so ist der Button zum zurückblättern zwar sicht- jedoch nicht klickbar (z.b. ausgegraut).

3158-1-paginierung.png
3160-3-paginierung.png

Beispiel aus dem Web: Amazon

3168-amzn-paginierung.png

4. Die insgesamt gefundenen Resultate resp. generierten Seiten
Da die Trefferliste in den meisten Fällen aufgrund einer Suchanfrage entstanden ist, müssen dem Besucher auch die so total gefundenen Treffer („es wurden n Treffer für ‚Suchbegriff‘ gefunden“) und generierten Seiten („Seite n von n“) präsentiert werden. Mit dieser Angabe kann der Benutzer – sofern gewollt – die Suchanfrage verfeinern, um schon von vornherein weniger und deshalb exaktere Resultate zu erhalten.

3161-4-paginierung.png

Beispiel aus dem Web: eBay

3169-ebayseite-paginierung.png

5. „rollender“ gleichbleibender Seitenbereich zum Anklicken
Bewegt sich der Benutzer in den Seiten vor oder zurück, sollte sich der wählbare Bereich immer gleichmässig mitbewegen. Dabei ist die Anzahl der anklickbaren Seiten (z.B. 1 bis 7, 7 bis 13) immer gleich gross und die aktuell angewählte Seite befindet sich in der Mitte der Liste.

3162-5-paginierung.png

Beispiel aus dem Web: Yahoo!

3170-yahoo-paginierung.png

6. Speziallfall Artikel und Produkte: Wählbare Artikel pro Seite
Werden von Benutzer Produkte oder Artikel gesucht, so werden diese Resultate meistens in einem Raster mit einer fixen Spaltenanzahl dargestellt. Damit der Benutzer die Anzahl der Artikel mit einem Klick erhöhen kann, sollten ihm die entsprechenden Alternativen via Button (kein Dropdown!) angeboten werden.

3163-6-paginierung.png

Beispiel aus dem Web: Thinkgeek

3172-tg-paginierung2.png

7. Paginierung oben und unten mit allen Funktionen anbieten
Sämtliche verfügbaren Funktionen (siehe obige Punkte 1 bis 6) sollten dem Benutzer auf einer Resultatseite unter- und oberhalb der Resultateliste angeboten werden. Gerade bei Benutzern, welche den Seiteninhalt rasch von oben nach unten nach oben überfliegen ist diese Doppelung wirksam.

Zusatz: Suchformular und gesuchten Begriff auf der Resultatseite wiederholen
Suche und die Darstelllung von Suchresultaten ergeben an und für sich schon eine Menge separater Artikel. An dieser Stelle soll nur darauf hingewiesen werden, dass auf der Ergebnisseite sowohl der gesuchte Begriff als auch das Suchformular (inkl. dem eingegebenen Begriff) wiederholt werden sollten. Zusammen mit Tipp 7 ergibt sich folgende – sehr generische und keineswegs durchdesignte (!), aber funktionale Webseite:

3165-7-paginierung-thumb-500x543-3164.png

Hinweis: Nebst der Paginierung setzen immer mehr Seiten das „Continuous Scrolling“ ein. Dabei werden beim Erreichen des unteren Seitenrandes Inhalte/Treffer nachgeladen (automatisch oder durch einen Klick des Benutzers). Mehr dazu (insbesondere zu Vor- und Nachteilen) in einem späteren Artikel.