it-swarm-eu.dev

Best Practice für Paginierung

Ich bin mir nicht sicher, wie ich am besten mit einer Paginierung umgehen soll, die ich für eine Tabelle ausführen muss, die möglicherweise sehr groß werden könnte (mehr als 5.000 Zeilen).

Meine erste Frage ist, ob die Anzahl der pro Seite angezeigten Zeilen nur vom Layout bestimmt wird oder ob auch die Anzahl der Seiten berücksichtigt wird. Soll ich zum Beispiel sagen: <1000 zeige 20 Zeilen,> = 1000 zeige 30 Zeilen?

Die nächste Frage ist, wie man am besten zwischen den Seiten navigiert, vorausgesetzt, der Benutzer hat die Tabelle so weit wie möglich gefiltert und es bleiben 50 Seiten mit Informationen übrig. Sollte er ein Eingabefeld erhalten, um zu Seite 45 zu springen? Oder sollten die Schaltflächen zum Überspringen (1) (5) ausreichen? Derzeit weiß ich nicht, wie der Endbenutzer die Tabellen verwenden wird, daher bin ich mir nicht sicher, welche Option er zuerst ausprobieren soll.

Hat jemand gute Beispiele für Paginierung, die er richtig teilen könnte? Ich bin immer auf der Suche nach gutem Referenzmaterial!

25
Toby

Dies kann eine Paginierung sein oder auch nicht, aber hier ist, wie ich Paginierung in meiner Web-App mache:

|< First, << Previous, Page [5] of 12, Next >>, Last >|

Die äußeren vier Optionen sind Links, während die Page [5] of 12 ist ein Formular mit dem [5] als Eingabefeld. Für Benutzer mit aktiviertem JavaScript verstecke ich die Schaltfläche "Senden" und sende das Formular beim Ereignis "Unfokus" oder drücke den Tastendruck. Der Benutzer hat die Option, wie viele Zeilen er anzeigen möchte, die er aus einem Dropdown-Menü auswählen kann: 10, 20, 50, 100, Alle. Zusätzlich zur Paginierung biete ich auch das Sortieren und Filtern der Ergebnisse an, obwohl dies möglicherweise nicht in jeder Situation sinnvoll ist.

Bearbeiten:

Hier ist ein Ausschnitt aus einem Modell unserer Web-App, um Ihnen eine bessere Vorstellung zu geben. In dieser Version wurden die Wörter in den Schaltflächen weggelassen, werden jedoch nach einer leichten Verzögerung als Tooltip beim Hover angezeigt. Möglicherweise stellen Sie jedoch fest, dass das Beibehalten der Wörter zu einer höheren Benutzerfreundlichkeit führt.

Virtuosi Media's Pagination Example

Ein paar andere Dinge, auf die Sie hinweisen sollten:

  • Die Schaltflächen "Erste" und "Vorherige" wurden deaktiviert, da es sich um die erste Seite handelt.
  • Das Blau zeigt aktive Schaltflächen an (ich muss dieses spezielle Thema durch eine Farbprüfung ausführen, um sicherzustellen, dass farbenblinde Benutzer einen Unterschied feststellen können).
  • Die Tasten bleiben immer erhalten, auch wenn sie deaktiviert sind. Dies gibt der Schnittstelle Konsistenz.
  • Aufgrund der Skalierung habe ich ein Eingabefeld anstelle eines Dropdown-Auswahlfelds ausgewählt. Wenn Sie 3000 Seiten haben, möchten Sie nicht nach unten scrollen, um eine Seite zu finden
  • Die Paginierung ist in einer singulären visuellen Komponente gruppiert, um Ähnlichkeit im Zweck anzuzeigen.
27
Virtuosi Media

Entschuldigung für eine solche Antwort, aber es kommt darauf an . Welche Art von Inhalten haben Sie und wonach sucht der Benutzer? Was sind die Ziele des Benutzers? Ist es eine Website oder eine Anwendung?

In vielen Fällen können Sie die Paginierung beispielsweise durch unendliches Scrollen vermeiden (siehe Suchergebnisse von Google-Bildersuche ).

Das Problem mit der Paginierung ist, dass die Seiten selbst keine Bedeutung haben. Warum sollte ich zu Seite 45 gehen? Warum nicht 38? Wenn der Inhalt sortiert ist, können Sie versuchen, Seiten aussagekräftige Namen zu geben (z. B. Buchstaben eines Alphabets oder Datumsbereichs oder alles andere, was Sinn macht). Die Anzahl der Zeilen pro Seite sollte so groß wie möglich sein, da das Scrollen normalerweise eine viel bessere Erfahrung bietet als das Navigieren durch Seiten (dies ist jedoch keine allgemeine Regel und es gibt einige Ausnahmen).

Und für die Beispiele und bewährten Praktiken hier ein großartiger Artikel .

12
Kostya

Im Allgemeinen bestimmen Sie die Anzahl der Elemente pro Seite anhand der folgenden Kriterien:

  • Welche Art von Daten zeige ich an und wie lange würde eine bestimmte Anzahl von Elementen die Seite machen?
  • Welche Konsequenzen haben X-Elemente auf der Seite für die Leistung der App?
  • Möchte ich Benutzern erlauben, die Anzahl der pro Seite angezeigten Elemente anzupassen?
  • Wenn ich mich für die Navigation zwischen Seiten interessiere (wird es einem Benutzer beispielsweise wichtig sein, zu einer bestimmten Seite Nr. 512 zu gelangen?), Wie wirkt sich die Anzahl der Elemente pro Seite auf die Navigationsfähigkeit der Paginierung aus?
  • Welche Paginierungskontrollen stehen mir zur Verfügung?

Wenn Sie die obigen Fragen beantworten, führen sie gut zu Antworten auf Ihre zweite Frage. Die Paginierung ist ein Produkt der Daten, die Sie haben, und der Anzahl der Elemente, die Sie anzeigen. Mein Rat ist zu bestimmen, ob Ihre Benutzer angeben möchten, welche Seite sie anzeigen möchten. Sie können dies herausfinden, indem Sie Benutzertests durchführen und darüber nachdenken, welche Art von Informationen aufgelistet werden. Beispielsweise sind Suchergebnisse selten spezifisch genug, um "Ich möchte zu Seite 47 gehen" sagen zu können, da sie normalerweise nach einem kryptischen, undurchsichtigen Algorithmus sortiert sind. Wenn Sie jedoch beispielsweise Namen in alphabetischer Reihenfolge auflisten, kann es sehr intuitiv sein, auf Seite 47 zu gehen.

In ähnlicher Weise kann der angezeigte Datentyp auch die Navigation beeinflussen, und Sie möchten möglicherweise das facettierte Navigationsdesignmuster berücksichtigen, um die Dinge zu vereinfachen. In dem Beispiel, das ich gerade über alphabetische Namen gegeben habe, können Sie die Paginierung in Betracht ziehen, indem Sie Buchstaben (A | B | C | D usw.) und Seiten in jedem Buchstaben verwenden, wenn Sie viele Daten haben.

Konkret:

  • Ich empfehle nicht, den Benutzern zu viel spezifische Kontrolle zu geben, es sei denn, Sie wissen, dass dies das ist, was sie wollen
  • Bieten Sie stattdessen eine Auffüllung der aktuellen Seite an (1 .. 7 8 [9] 10 11 .. 28).
  • Fügen Sie die erste und die letzte Seite ein, wenn Sie algorithmisch sortieren, es sei denn, Sie können dies aus Leistungsgründen nicht.
  • Berücksichtigen Sie beim algorithmischen Sortieren verschiedene Sortieroptionen (z. B. das Umkehren der Sortierreihenfolge) - abhängig vom Datentyp

Beispiele für richtig gemachte Paginierung:

  • Flickr - klare Unterscheidung zwischen ausgewähltem, inaktivem und Verbindungsstatus; zugängliche Farben; gepolsterte Links mit guten Klickzielen; gute Polsterung um die aktuelle Seite; nicht übermäßig komplex. Ein persönlicher Favorit.
  • Funda.nl - Niederländische Immobilienwebsite mit großartigem, einfachem und leicht lesbarem Design, das sich auch in der Paginierung widerspiegelt
  • Bing - kein BS, minimalistisches Typografie-Design, was bedeutet, dass die Paginierung sehr subtil und gleichzeitig einfach zu bedienen ist
  • Google (offensichtlich) - irgendwie knifflig, aber trotz vieler Optionen fühlt es sich immer noch einfach an und zaubert sogar ein Lächeln auf Ihr Gesicht
  • Chris Messina hat ein paar gute Aufnahmen von Paginierung in seinem Design Patterns Album auf Flickr.
6
Rahul

Paginierungsmuster:

Was Ihre erste Frage betrifft - ich bin ein Fan von Konsistenz (und die meisten Benutzer auch). Verwirren Sie den Benutzer nicht und lassen Sie ihn darüber nachdenken, warum er diesmal mehr Zeilen sieht ... Sie können ihn sogar "Elemente pro Seite" auswählen lassen, was sehr häufig und nützlich ist.

3
Dan Barak

Benutzer bevorzugen das Scrollen als das Blättern. Es ist viel einfacher, das Scrollrad zu bedienen, als auf kleine Navigationslinks zu zielen.

Morea über Paging vs. Scrolling

1
Miki