it-swarm.com.de

Bestes Tabellen-Paginierungsmuster für ein mobiles Browser-Erlebnis

Das dominante UI-Muster für die Paginierung umfasst eine Liste von Zahlen.

<< Erste <Zurück 1 ... 4 5 6 7 8 9 10 ... 27 Weiter> Letzte >>

manchmal mit einem "+10" -Link und/oder einem numerischen Textfeld "Springen zu".

Einige Elemente dieses Musters erscheinen mir "fischig":

  1. Die häufigste Aktion (Weiter) wird zwischen zwei Links vergraben, die beide auf dieselbe (letzte) Seite verweisen
  2. Zurück und Weiter, die nach Modus in Beziehung zu stehen scheinen (Erkundung ohne ein bestimmtes Ziel), sind weit voneinander entfernt
  3. In ähnlicher Weise sind First und Last weit voneinander entfernt, obwohl sie auch über den üblichen vorherigen Akt des Zurückverfolgens verwandt zu sein scheinen (z. B. möchte ich den ältesten Datensatz, also sortiere ich chronologisch und gehe dann zur ersten oder letzten Seite, je nachdem, ob aufsteigend oder absteigend ist die Standardsortierreihenfolge)
  4. Es ist sehr günstig, 2 oder 3 Seiten in beide Richtungen zu springen, obwohl ich mich wundern würde, wenn dies nicht wirklich ein Edge-Fall wäre. Ist es wirklich so viel häufiger als 5 oder 10 vorwärts oder rückwärts zu springen oder zu einer bestimmten Seite zu springen?

Meine erste Frage ist:

Gibt es Benutzerrecherchen, die das dominante UI-Muster unterstützen? Sind alle Elemente für eine effektive Navigation in paginierten Tabellen gleichermaßen erforderlich?

Die Frage wird in einem mobilen Browserkontext kritisch, da die vorherrschenden Richtlinien für die Touch-Oberfläche mindestens 26 Pixel (bei 164 ppi) empfehlen - obwohl Apple empfiehlt mindestens 44 Pixel) .

Um dieses Paginierungsmuster an diese Schnittstellenrichtlinien anzupassen, wird viel Platz auf dem Bildschirm beansprucht.

Die zweite Frage lautet also:

Welcher Teil dieses Musters kann sicher zugunsten größerer Berührungsziele abgeworfen werden? Können wir zum Beispiel die Liste der Nummern sicher aufgeben, um ein benutzergesteuertes Menü "Zur Seite gehen" mit allen Seitenzahlen aufzunehmen?

Das Drahtgitter unten ist ein mögliches alternatives Muster, das die Fischigkeit oben vermeidet und 40x40 px Ziele hat. Mobile browser-friendly table pagination pattern

8
Justin

Geben Sie dem Benutzer bei einer mobilen Erfahrung zunächst nicht zu viele Dinge zur Auswahl. Ein Gitter klingt nett, aber als jemand, der neu in der ganzen Sache ist, werde ich ein paar Minuten damit spielen, bevor ich es herausfinde.

hier ist ein einfaches Muster, das ich für die Paginierung verwende. Es ist benutzerfreundlich (in den meisten Fällen) und meine Entwickler lieben mich, weil ich (mit Funktionen) für ein einfaches Dienstprogramm auf einer Seite nicht über Bord gehe.

  1. geben Sie die erste und letzte Seitensprungoption an (geben Sie die letzte Seitennummer an).
  2. geben Sie ein Textfeld an, in das der Benutzer eine Nummer eingeben kann
  3. geben Sie eine UI-Option an, um zu wählen, wie diese Nummer behandelt werden soll, d. h. gehen Sie zu +/- Seiten (meine Kunden waren von dem Sprung um -5 Seiten begeistert, obwohl er besser ist als der nächste/vorherige).
  4. eine Taste, um zu springen (/ Achselzucken, warum nicht)

Einfache Seitennavigationsidee für Mobile/Touch-Oberfläche (Drahtmodell):

enter image description here

2
Rayraegah

Ich würde mich eher für einen horizontalen Schieberegler als für das Menü mit allen Seitenzahlen entscheiden. Dies hätte den Vorteil, dass Sie visuell sehen können, wie weit Sie durch die Ergebnisse sind, und dass Sie auch um kleine oder große Beträge vor- und zurückspringen können. Noch besser wäre ein vertikaler Schieberegler rechts auf der Seite, da dies die Richtung ist, in die die Seite wahrscheinlich scrollen wird. Eine Art Bildlaufleisten-Paginator - aber einer, mit dem Sie einen großen Betrag vorwärts/rückwärts springen können, anstatt eine unendliche Bildlaufidee zu laden.

Obwohl ich Ihren Problemen mit den häufig gesehenen Paginatoren zustimme, weiß ich nicht, wie intuitiv Ihr Design sein würde.

<< >> < [grid] >
0
alex stacey

warum paginieren, wenn Sie beschleunigen und ziemlich schnell zum gewünschten Punkt mit einem Muster wie den Kontakten oder der Musik auf dem iPhone scrollen können? Die Paginierung wird hauptsächlich auf dem Desktop verwendet, da das Scrollen weitaus schlechter ist als auf der Touch-Oberfläche.

0
Chris

Ich habe das gleiche Problem für unsere Websites untersucht. Die Paginierungsmuster, die ich vor 10 Jahren verwendet habe, sind im mobilen Bereich ziemlich schrecklich. Ein kurzer Blick auf einige US-Katalogseiten zeigt verschiedene Ansätze. Die einfachste Version wäre wahrscheinlich eine Anzeige der Anzahl der Ergebnisse oder Seiten und eine Schaltfläche "Mehr laden". Der Trend scheint darin zu bestehen, präzise Paginierungskontrollen zugunsten grundlegender Typkontrollen abzuschaffen. Siehe Beispiele unten.

(Dell
EMS
Lands End

0
RobC