Komfortabel durch Weblog-Einträge, Produktlisten und Suchergebnisse navigieren

Im Beitrag Blog-Navigation: Paging spricht Dirk Schürjohann ein Thema an, das leider noch viel zu wenig Aufmerksamkeit genießt. Es geht um die Navigation in ellenlangen Listen von Einträgen, die in mehrere Dokumente aufgebrochen werden. Diese Notwendigkeit findet sich in Weblogs und Foren genauso wie auf News- und Shopping-Seiten sowie bei Suchfunktionen jeglicher Art.

Dirks Empfehlungen kann ich mich nur anschließen. Er fängt bei einer überdurchschnittlichen Seitennavigation an und verbessert diese. Sein Resultat ist folgendes:

Leider hängen die meisten Seitennavigationen weit hinter dem, was Dirk als verbesserungswürdige Basis nimmt. Vor einiger Zeit habe ich solche Navigationen gesammelt und bin dabei auf verschiedene Typen gestoßen, die »Seiten« zum Teil völlig unterschiedlich denken. Obwohl ich schon lange im Web unterwegs bin, verwirren mich Seitennavigationen immer wieder. Es gibt anscheinend dutzende Interface-Pattern für ein und dieselbe Funktion – hier fehlen einfach Best Practises. Deshalb möchte ich verschiedene Beispiele im Detail besprechen.

Einfache Seitennavigation – Pfeile und Richtungen

Oft sieht man nur folgende minimale Navigation:

Die scheint mir besonders spartanisch. Nun gibt es diese Grundvariante in verschiedenen Ausführungen. Das »Back« und »Next« wird etwa durch Pfeile ersetzt:

Sprechender und intuitiver scheint mir diese sprachlich-grafische Mischung:

Für eine verwirrende Variante halte ich diese:

»Letzte Seite« wird zwar im Kontext klar (es ist die vorherige gemeint), wird in anderen derartigen Navigationen jedoch mit völlig unterschiedlicher Bedeutung verwendet (die letzte aller Seiten, das äußerste Ende).

Zwei konkurrierende Konzepte – Vorschlag zur Ungüte

In den genannten Navigationen wird eine Logik transportiert, die alles andere als selbstverständlich ist. Das ist bemerkenswert: Seiten werden in einer horizontalen Folge gesehen, wobei links außen bei Eins angefangen wird. Diese Analogie scheint mir sehr brauchbar: Wir lesen Bücher von links nach rechts und blättern Seiten in einem Buch in dieser Richtung.

Weblogs listen ihre Beiträge üblicherweise chronologisch absteigend auf, sodass man mit der Seitennavigation immer tiefer in die Vergangenheit gelangt. Weblogs sind damit anders als ein Buch angeordnet. Bei einem Buch (mit konventionellen Erzähltechniken) lesen wir von der Vergangenheit in die Zukunft. Seite 2 baut auf Seite 1 auf. Bei Weblogs baut Seite 1 gegebenfalls auf Seite 2 auf.

Dieser Fakt scheint die Welt der Seitennavigationen völlig durcheinander zu bringen.

Zunächst einmal gibt es Navigationen, die die Eigenart der chronologischen Auflistung betonen:

Das halte ich für logisch und folgerichtig. Dummerweise ist das alles andere als eine selbstverständliche Konvention. Zahlreiche Weblogs (offenbar die Standard-Templates von Wordpress und Textpattern) nutzen andere Benennung und kehren das ganze um:

In der Tat werden hier die zwei Denkweisen, Buch und Weblog, gemischt. Die älteren Meldungen sind hier tatsächlich »links«, die Seite mit den neuesten Einträgen ist die äußerste rechte in einer horizontalen Folge! Das ist inkonsistent und kontraintuitiv, weil die einzelnen Einträge auf einer Seite natürlich weblog-typisch chronologisch absteigend geordnet sind. Das ist für mich äußerst missverständlich.

Ist alt = links und neu = rechts oder umgekehrt? Es gibt diese beiden widerstreitenden Auffassungen, die dazu führen, dass man nicht einfach auf einen Pfeil unten rechts klicken kann, wenn man ältere Weblog-Einträge sehen möchte. Man muss genau hinsehen, was der Link bedeutet, und manchmal muss man ihn eben links unten suchen.

Meiner Meinung nach bedarf es hier einer Vereinheitlichung und ich finde es nur nachteilig, dass hier zwei verschiedene Suppen gekocht werden. Ich finde das bereits beschriebene Modell ganz stimmig. Noch einmal illustriert:

Gemäß diesem Modell ist ein Weblog wie ein Buch geordnet: von oben nach unten und von links nach rechts. Der Unterschied ist jedoch, dass die Einträge nach unten und nach rechts hin älter werden.

Komfortablere Navigationen – Zahlenspiele

Erst wenn diese Grundfrage geklärt ist, kommen wir zur Seitennavigation, die die Position in der Folge anzeigt. Zunächst eine, die eine Übersicht gibt, wo man sich gerade befindet, und wieviele Einträge auf wievielen Seiten gesplittet werden:

Das gefällt mir schon viel besser als die bloßen Links Vorherige/Nächste. Allerdings fehlt hier der chronologische Aspekt. Ansonsten ist das einer meiner Favoriten.

Beim obigen Beispiel sind alle Zeichen Links, die aktuelle Seite ist farblich hervorgehoben. Dies halte ich für ein ziemliches Negativbeispiel und um einiges verwirrender als das Linkpaar in den Beispielen darüber.

Während die Anführungsstriche « und » als Symbol für Pfeil nach links und rechts noch erkennbar sind, ist zunächst einmal nicht klar, dass «« für einen Sprung zur ersten Seite steht und »» auf die letzte Seite verweist. Diese Symbolik gibt es zwar grob im Audio- und Video-Player-Umfeld, da haben wir es aber mit Doppelpfeilen zum Spulen und Doppenpfeilen mit Strich zum Anspielen des nächsten Tracks zu tun. Zudem sind die Linkflächen extrem klein, die Abstände gering und die Links «« und « sind schwer optisch unterscheidbar (sie sehen zusammen aus wie ein großer Pfeil).

Dieses Chaos macht folgendes Beispiel perfekt:

Hier ist die Bedeutung von Pfeilen und Doppelpfeilen kurzerhand umgekehrt. Doppelpfeil für vorige bzw. nächste Seite, einfacher Pfeil zum Sprung an den Anfang bzw. ans Ende. Mein Fazit: Die Pfeil-Symbolik ist brauchbar, solange sie eindeutig ist. Also möglichst keine Doppelpfeile verwenden.

So langsam kommen wir in den Bereich, der sich Dirks Ausgangsbeispiel nähert. Ganz ohne zusätzliche Links auf die vorherige und nächste Seite kommt dieses Exemplar aus:

Positiv daran fällt mir daran die starke räumliche Trennung der Zahlen durch | auf.

Die minimalistische Gestaltung nach der konservativen Parole »Blauer Link mit Unterstrich, alles andre wolln wir nich!« hat hier immerhin den Effekt, dass die Zahlen als eigenständige Links erkennbar werden - für diejenigen, die Seitennavigationen noch nicht kennen, ist das durchaus ein Vorteil. Die Klickfläche bleibt dennoch winzig, der Abstand ist gering und das Wörtchen »zurück« erscheint auch dann, wenn es unnütz ist. Das Wort »weiter« scheint mir wenig sprechend zu sein, »nächste Seite« wäre verständlicher.

Zuletzt zwei Beispiele, die schon dicht an Dirks Grundlage grenzen:

Beim ersten der beiden hat die Weblog-Software mitgedacht: Aus den beiden direkt nebeneinander stehenden Links « und 1, die auf dieselbe Seite zeigen, wurde ein Link gemacht. Die Hervorhebung der aktuellen Seite mit Klammerung mag vielleicht nicht optimal sein, aber die Idee ist gut.

Auf diesem vergleichsweise hohen Erkenntnisstand setzen nun Dirks Verbesserungsvorschläge an.

Warum überhaupt Seitennavigationen?

Kein Blog ohne Seitennavigation, denkt man. Stimmt aber nicht, es gibt durchaus viele Blogs, die auf eine schier endlose Seitenauflistung ihrer vollständigen Beiträge verzichten und Zugriffe auf das Archiv anders regeln. Dazu gehört etwa dieses Weblog, das auf der Startseite ein paar Einträge vollständig zeigt, dann einige mit Überschrift und Kurzbeschreibung und zuletzt einfach auf eine Archivseite zeigt, die ein wenig Interaktivität durch Filterung bietet. (Das möchte ich hier nicht als besonders gelungenes Beispiel hinstellen, zumal wir mit den Begrenzungen unser Weblog-Software zu kämpfen haben.)

Ein recht schönes Beispiel in dieser Kategorie scheint mir folgende Archiv-Navigation zu sein):

Hier gibt es keine »Seiten«, sondern Monatsübersichten, die dann gegebenenfalls untereinander verlinkt sind. Das eignet sich natürlich nicht für alle Weblogs, denn bei einer bestimmten Anzahl und Länge der Einträge werden Monatsübersichten unübersichtlich. Zusammen mit einer Navigation nach Kategorien oder Tags scheint mir das aber eine brauchbare Alternative zur Seitennavigation, die die Inhalte ebenfalls schnell und komfortabel zugänglich macht.

Nachtrag: Kürzlich sind auch folgende englischsprachige Artikel zum Thema erschienen, die mir jetzt erst aufgefallen sind:

• Pagination 101 / Rules for good pagination
• Pagination Gallery: Examples And Good Practices
• Usability of Pagination Links