Gedanken zur Paginierung

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich habe in letzter Zeit einige zerstreute Gedanken zur Paginierung gehabt, also dachte ich, ich versuche, sie in einem Beitrag zu organisieren. So funktioniert Blogging, oder?

Konsistente Positionierung

Wenn es eine Möglichkeit gibt, sicherzustellen, dass sich Ihre Paginierungsbuttons nicht bewegen, tun Sie es. Es ist eine so angenehme Erfahrung, einfach klicken-klicken-klicken (oder tippen-tippen-tippen) zu können und jedes Mal dasselbe zu tun. Und wenn Sie am Ende ankommen, tut ein weiterer Klick nicht plötzlich etwas anderes (weil Sie jetzt auf einen anderen Button klicken oder auf nichts).

Wenn ein Button für die Positionierung vom anderen abhängt, könnten Sie vielleicht einen deaktivieren und ihn z.B. mit opacity: 0.5; darstellen, um seine Deaktivierung anzuzeigen, oder ihn sogar mit visibility: hidden; ausblenden, aber ihn dennoch im Dokumentenfluss behalten.

Auch die vertikale Positionierung ist wichtig. Es ist schön, wenn die Paginierungsbuttons nicht basierend auf der Höhe beliebiger Inhalte herumspringen. Wenn das unvermeidlich ist, weil sie zum Beispiel unter dem unteren Rand beliebiger Inhalte positioniert sind, vielleicht könnten die Buttons stattdessen oben sein. Oder zusätzlich dazu, was für Inhalte, die Scrollen erfordern, gut ist.

Natürlich sind alle Situationen unterschiedlich, aber vielleicht wäre sogar position: fixed; für einige Paginierungselemente nützlich, um sicherzustellen, dass diese Positionen stabil bleiben.

Text oder nicht?

Was ist die Paginierung Paginierung Vergangenheit? (sagen Sie das 10 Mal schnell). Der Text in den Buttons könnte helfen, das zu verdeutlichen.

„Ältere“
„Neuere“

„Nächste Seite“
„Vorherige Seite“

Vielleicht. Aber was ist mit

„Weniger relevant“
„Relevanter“

„Weniger beliebter Inhalt“
„Beliebterer Inhalt“

Obwohl das vielleicht genau das ist, was die Paginierung tut, ist das irgendwie deprimierend zu sagen. Ich würde eher sagen: Wenn der Grund für die Paginierung ziemlich offensichtlich oder nicht zwingend ist, verwenden Sie einfach Pfeile.

Hier auf Dribbble ist Text unnötig. Es gibt eine Web-Affordance, dass das Klicken auf diesen Pfeil mehr Inhalte anzeigen wird.

Eine Einschränkung für die Nichtanzeige von Text ist die Richtung. Werden Leute Ihre Seite auf einer Seite betreten, auf der in beide Richtungen paginiert werden kann? Wenn das der Fall ist, könnte Text angebracht sein, um Leute zu orientieren, die nicht den Vorteil hatten, auf einer Seite zu starten, auf der nur in eine Richtung paginiert werden konnte.

Richtung

Apropos Pfeile, welche Richtung ist am besten geeignet? Ich neige dazu, festzustellen, dass die meisten Paginierungen mit einem Pfeil beginnen, der nach rechts zeigt. (wie bei Google-Suchergebnissen) Ich habe jedoch gehört, dass dies heiß debattiert wird, mit guten Argumenten auf beiden Seiten. Wenn man an eine Zeitachse denkt, ist diese fast immer von links nach rechts und so würde man beim Paginieren durch die Zeit denken, dass der Pfeil nach links zeigt, wenn man den aktuellsten Inhalt betrachtet. Aber linke Pfeile werden mit dem Zurück-Button assoziiert, der sehr häufig verwendet wird und von Benutzern im Allgemeinen verstanden wird, dass er bedeutet, zu einem zuvor besuchten Bereich zurückzukehren.

Wenn eine gute Chance besteht, dass ein Benutzer Ihre Website auf einer Seite betritt, auf der Sie in beide Richtungen paginieren können, würde ich auf Klarheit setzen und die Buttons beschriften.

URL-Struktur

Paginierung geschieht oft mit URLs, die so aussehen

website.com/page/1/
website.com/page/2/

Das ist nicht schlimm – zumindest ist es sauber. Das Problem ist, dass die URL keine Informationen darüber enthält, was paginiert wird. Aber schlimmer noch, der Inhalt auf diesen Seiten kann sich ändern. Was heute auf Seite 1 ist, könnte morgen auf Seite 3 sein. Das ist bei datumsbasierten Paginierungen super häufig.

Ich habe darüber nachgedacht.

Wir Webentwickler sind immer sehr daran interessiert, URLs am Leben zu erhalten und hassen es, wenn URLs kaputt gehen. Aber ist eine URL, die völlig anderen Inhalt anzeigt als bei ihrer letzten Referenzierung, nicht kaputt? Es kommt darauf an, und es ist vielleicht kein lösbares Problem, je nach Art der Paginierung. Aber es ist wahrscheinlich lösbar für datumsbasierte Paginierung. Das aktuelle Design von Blogs im Gawker-Netzwerk hat Paginierungsbuttons, die Sie zu URLs wie

lifehacker.com/?startTime=1411848000454
lifehacker.com/?startTime=1411749900413

führen. Diese URLs haben über die Zeit wahrscheinlich den gleichen Inhalt, da sie sich auf den Inhalt basierend auf der Veröffentlichungszeit beziehen.

Abhängig von der Veröffentlichungsfrequenz Ihrer Website könnten Ihre Paginierungsbuttons vielleicht Monate, Wochen oder Tage sein, anstatt beliebige Seiten. Das Paginieren von einer Homepage von Inhalten könnte so aussehen

website.com/blog/
website.com/blog/2014/09/
website.com/blog/2014/08/

Dann hätten diese URLs über die Zeit immer den gleichen Inhalt.

Selbst wenn Sie lieber beliebige chronologische, ganzzahlige Paginierungen verwenden, wäre es dann nicht sinnvoll, die Nummern umzukehren? Anstatt 1, 2, 3, um in der Zeit zurückzugehen, sollten die Nummern bei der höchsten Anzahl von Inhalten beginnen, die Sie haben.

website.com/blog/
website.com/blog/page/523/
website.com/blog/page/522/

Ich frage mich, warum das scheinbar nie so gemacht wird. Vielleicht liegt es an der Belastung durch Zähl-Abfragen auf älteren Datenbanksystemen?

Angabe, wie viele, oder nicht?

Apropos Zähl-Abfragen, sollten Sie angeben, wie viel Inhalt es gibt, um ihn zu paginieren? Um das zu tun, müssen Sie wissen, wie viel es gibt, was irgendwann eine Art von Zählung beinhaltet.

<-    Seite 1 von 302    ->

Ist das nützlich? Ich könnte argumentieren, dass es nützlich ist, wenn die Zahl vernünftigerweise nützlich sein könnte. Entweder weil man alles durchsehen könnte, oder weil es einem ein Gefühl für die Breite der Suche gibt, oder weil man das vielleicht für eine API oder so etwas braucht. Es ist wahrscheinlich nicht besonders nützlich bei etwas wie Google, wo es einem sagt, dass es elf-Milliarden-Ergebnisse gefunden hat und sich nur wichtig tut.

Abgesehen von der reinen Anzahl, sollten Sie auch die Möglichkeit haben, weiter in der Paginierung zu springen?

[<-]    [1] ... [5] [6] [7] … [302]    [->]

Ich weiß nicht. Ich habe mich immer etwas vor Paginierungen wie dieser gedrückt, weil sie übermäßig komplex und marginal nützlich erscheinen. Ganz zu schweigen davon, dass sie die konsistente Positionierung erschweren. Sie bieten zwar eine Möglichkeit, zum Anfang oder Ende der Paginierung zu springen, was meiner Meinung nach nützlich sein könnte. Aber die längeren Versionen, die es mir erlauben, 4 Seiten vorzuspringen (aber nicht 6!), scheinen einem Programmierer zu nahe an das Frontend zu lassen =).

Ajax

Paginierung ist die perfekte Art, Dinge ohne einen vollständigen Seitenrefresh zu tun, da es sehr wahrscheinlich ist, dass das Einzige, was sich auf der Seite ändert, die paginierten Inhalte sind. Aber das führt zu neuen Komplexitäten

  • Fügen Sie neue Inhalte am Ende des aktuellen Inhaltsbereichs hinzu?
  • Besteht die Gefahr, dass so viele Inhalte hinzugefügt werden, dass das DOM-Gewicht die Seite verlangsamt? Können Sie Inhalte jederzeit entfernen?
  • Ersetzen Sie alle Inhalte durch neue Inhalte?
  • Wenn ja, sollten Sie zum Anfang dieser neuen Inhalte scrollen? Wie machen Sie das browserübergreifend?
  • Verlieren Sie dadurch Seitenaufrufe? Hat das Auswirkungen auf Ihr Geschäft? Können Sie dies verfolgen oder die gleichen Dinge tun, die Seitenaufrufe für Sie getan hätten (z. B. Anzeigen rotieren)?
  • Bezeichnen Sie die Paginierung anders, z. B. „Mehr Inhalte laden“? Oder ist das Insider-Gerede, das nur Web-Entwickler interessiert?
  • Bieten Sie so Paginierung in beide Richtungen an?
  • Ändern sich die URLs?
  • Kann es mit progressiver Verbesserung angegangen werden, damit die Paginierung immer funktioniert, egal was passiert?

WordPress.com-Themes neigen dazu. Ich habe mir eine Reihe von Themes angesehen und sie haben tendenziell einen Button „Ältere Beiträge“, der neue Inhalte im Ajax-Stil lädt.

In diesem speziellen „Eighties“-Theme gibt es ohne JavaScript überhaupt keine Paginierung. Man kann zu den Inhalten gelangen, da im Footer Links zu den verschiedenen Monaten mit Inhalten vorhanden sind. Scheint mir ein *wenig* halbherziger Ansatz zu sein.

Konsistenz

Was auch immer Sie wählen, seien Sie darin auf Ihrer gesamten Website konsistent.

Gott weiß, dass ich einige dieser Dinge auf meinen Websites implementieren muss.