Navigation - Paginierung


Lange Inhaltsseiten haben immer ein Problem gewesen. Auf der einen Seite möchten wir Ihnen auf der Website setzen alle ihre Inhalte, auf der anderen Seite scrollen Sie durch mehrere Fenster der Inhalt nicht immer eine gute Option. Die Ausnahmen sind Blogs , in denen Benutzer daran gewöhnt, den vertikalen Schieberegler Browser zu verwenden sind. Aber nicht heute Blogs wird das Thema sein. Ich würde schreiben, ein wenig gute Beispiele für den Umgang mit langen Inhalte innerhalb der Website.

Lange Inhalt (content) tritt am häufigsten in der Suchliste, sollten, wo auf der Seite zeigt eine Liste der gefundenen Ergebnisse. In den meisten Fällen sind wir sprechen hier nicht über die Ergebnisse für die Dauer von zwei oder drei Bildschirme, sondern mit Inhalten, konnte, solange die Länge des sichtbaren Raum als ein Dutzend Browser-Fenster zu nehmen.

Ein weiteres Beispiel, wo der Inhalt präsentiert, ist lang, es gibt alle Arten von Seiten News, Produkte (E-Commerce-Anwendungen) oder die Überprüfung bestimmter Sätze (Dateien zum Download, eine Liste von Plugins, etc.).

Die Lösung in der Praxis verwendet werden (und vielleicht auch einer der besseren) ist die Division Motor (Portionierung), uns zu gebrauchen für ein paar-, ein Dutzend Seiten und zeigt sie uns einzeln -. Sogenannte Pagination. Für den folgenden Seiten (Teile von Informationen) in der Regel durch eine Navigationsleiste mit Links (Verweise) auf andere Seiten gehen.

Lösungen gibt es viele. Einige sind besser als andere - wie es geschieht in der Praxis. Im Folgenden finden Sie die interessantesten unter dem Gesichtspunkt der, wie sie umgesetzt werden und die Organisation.

Google

Google ist das erste Beispiel dafür, was ich möchte zitieren. Die meisten von uns wissen wahrscheinlich statndardowy nawigacujny Gurt auf den Suchergebnisseiten bei Google.

g1.jpg

Parallel Liste von Links, fortlaufend nummeriert. Die Seitenzahl gerade betrachten ist mit einer anderen Farbe und nieklikalny hervorgehoben. Alles wäre gut, wenn nicht für die geringe Kontrast zwischen Farben und nieklikalnych anklickbare Elemente. Links haben Stress, der die Möglichkeit ihrer Klicks symbolisiert, und es ist eine gute Lösung. Für den nachfolgenden Seiten, können wir durch Klicken auf einen der Links hervorgehoben numerische oder String "Weiter" gehen.

g2.jpg

Wahrscheinlich bemerkt, dass es keine Möglichkeit hier für eine schnelle Sprünge bei 10, 20 etc Seiten, die den offensichtlichen Nachteil dieses Mechanismus ist. Dodarkowo klickbare Fläche von jeder Partei ist sehr klein (wie der Abstand zwischen ihnen), die weiter behindert Navigation. Besonders deutlich wird dies in der Anzahl der Seiten stieg von 20 Es sollte hier auch erwähnen, die Unfähigkeit, den Übergang zu den ersten und letzten Seiten, die sehr angenehm sein kann für lange Listen von Ergebnissen.

g3.jpg

Letzte Seite (wie der erste) hat nur einen hervorgehobenen Link (Vorherige).

Ein weiterer Nachteil der Lösungen von Google vorgestellt fehlt Prüfplakette Link (Titel). Versäumen Sie nicht, darauf hinzuweisen, tuaj störende Grafik Aufschrift "Goooooooogle", das ist wirklich die Lösung bringt nichts, außer die nächste Dosis von Chaos und verwischen die Transparenz der Schnittstelle.

Mozilla

Mozilla über die vorgeschlagenen Ergänzungen zu Ihren Firefox-Browser statt interessante Lösung, die im Vergleich mit Google, ist es viel besser (obwohl es nicht ustrzegło Fehler).

m1.jpg

m2.jpg

m3.jpg

Wie in diesen Zeichnungen gezeigt, hat Mozilla für die Gesundheit und des Sehvermögens und der Kontrast zusätzlich zur Navigation, kümmerte sich um einen großen Abstand zwischen den einzelnen anklickbare Links und eine große Kiste, die übrigens zu markieren, wenn Sie den Mauszeiger, der zusätzlich einen positiven Effekt auf die Wahrnehmung und die Wahrnehmung dessen, was wir tun . Auf der Minus, aber immer noch gehören die Unfähigkeit, schnell springt (nach mehreren Ergebnissen auf der vorwärts und rückwärts) und der Mangel an Einsatz von textuellen Beschreibungen von Links, wie es der Fall mit Google.

Andere Lösungen

Eine interessante Lösung ist auf der Website, wie vorgeschlagen, ein Blog .

d.jpg

Es erinnert an Mozilla-Lösung unterscheidet sich jedoch noch einige kleinere Details und Verhaltensweisen in Abhängigkeit von der Anzahl der Ergebnisse. Nach einer weiteren Beschreibung und Kommentierung aller Fälle Ich lade Sie zu einer Seite mit Artikel . Ich vermisse in dieser Ausführungsform ähnliche Dinge, die nicht von Mozilla verwendet worden, aber es ist nahezu ideal, und geringfügige Änderungen könnten in der Praxis erfolgreich angewendet werden.

Meiner Meinung nach sollte ein guter Motor für Paginierung die folgenden Empfehlungen:

  • Transparenz und verwendet den Abstand zwischen den Elementen
  • Elemente der aktiven und inaktiven sollten deutlich gekennzeichnet sein
  • Durchklicken Bereich Elemente müssen so groß sein
  • Der Benutzer sollte in der Lage sein, jederzeit auf die erste und letzte Seite der Ergebnisse bewegen
  • Der Benutzer sollte in der Lage sein, schnell zu springen (0 5, 10 oder 20 Elemente) in beide Richtungen auf die lange Liste der Ergebnisse
  • redundante Elemente in der Navigation sollte nicht angezeigt werden
  • Beschreibungen der Links sollten Titel zur Navigation für Menschen mit zu erleichtern screendreaderami
  • Links sollten Stress, was sich positiv auf ihre Wahrnehmung der Benutzer wahrgenommene
  • Reichweite und ist verfügbar, nachdem eine Liste von Links zu Seiten, die Anzahl der Ergebnisse angepasst werden sollte - die optimale Anzahl ist 3-5 Ergebnisse in vor-und rückwärts

Ich konnte aber nicht finden solche Implementierungen. Vielleicht kennen Sie sie?

Hinzugefügt 16. Juni 2008:
Aber ich fand (dank blogowi Szuby Martin), ein großartiges Beispiel dafür, wie man nicht automatisch ein Seitenumbruch Design.

of-dontdothat.png

Ein Beispiel wird gezeigt, hier .

Hinzugefügt 24. Juni 2008:

Die oben genannten Themen sind als die nachfolgenden Artikel behandelt, wenn auch nicht mit allen Aussagen Ich stimme zu:

Hinzugefügt am 23. August 2008:
Ein weiterer Artikel (mehr als Neugierde und ein Mini-Tutorial) handelt von Paging:

Wenn die oben genannten Artikel, den Sie möchten, den RSS-Feed abonnieren und immer auf dem Laufenden mit den neuesten auf dem Blog!

Siehe auch

Bewerten Sie diesen Artikel: słaby...średnidobrybardzo dobryrewelacja! (Nein-Stimmen, so der erste sein!)
Loading ... Loading ...

Informationen und Links

Diskutieren Sie mit Kommentierung, Tracking, was andere denken oder dolinkuj dieses Artikels in Ihrem Blog.


Weitere Artikel

Kommentare lesen

Ein interessanter Eintrag.
Ich empfehle auch meinen Eintrag über
und eine Galerie Paginierung auf http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/

Kommentar schreiben

Nehmt euch einen Moment, um auf diesen Artikel zu kommentieren. Einige grundlegende HTML-Tags sind erlaubt so das Gefühl frei zu verwenden.