Mein Designprozess zur optimalen Pagination

Wie ist der Weg zur richtigen Pagination und warum bin ich ihn so gegangen?

Eine Pagination scheint auf den ersten Blick ein einfach zu gestaltendes Element zu sein. Und es stimmt, sie kann sehr einfach gehalten werden. Trotzdem gibt es einige Punkte die man unbedingt beachten sollte. Deshalb habe ich meinen Denkprozess zur perfekten Pagination hier festgehalten.

1. Elemente einer Seitennummerierung bestimmen

Darin sind grundlegend erstmal alle Elemente enthalten, die eine vernünftige Seitennummerierung haben sollte.

• Es gibt die Seitenzahlen.
• Ein vor und zurück Button.
• Es ist möglich, die erste und letzte Seite mit einem Klick zu erreichen.
• Eine Beschreibung zeigt, wo man sich gerade befindet.

Als Designer fallen mir aber sofort ein paar grundlegende Dinge auf:

• Alle Elemente sind gleichstark im Vordergrund und es wird nicht ersichtlich, wer eine höhere Priorität hat.
• Die aktuelle Seitenzahl unterscheidet sich nicht gut genug von den Anderen.
• Wenn wir uns momentan auf Seite 1 befinden, warum ist dann der Link zur ersten Seite zu sehen? Genauso muss der Zurück-Button erst ab Seite 2 eingeblendet werden.
• Wenn „vor“ und „zurück“ Text-Links darstellen und deshalb unterstrichen sind, warum ist die aktuelle Seitenzahl dann auch unterstrichen? Eigentlich müssten alle anderen Seitenzahlen unterstrichen sein, denn Seite eins ist nicht klickbar und stellt deshalb auch keinen Link dar.

2. Wichtige Elemente hervorheben

Manche Elemente sind wichtiger als andere. Um zwischen ihnen unterscheiden zu können, helfen Schriftgröße, Farbe und Form.

Veränderungen Vorteile:

• Die aktuelle Seitenzahl wurde durch eine andere Schriftgröße und Farbe hervorgehoben.
• Bestimmte Elemente werden erst angezeigt, wenn sie benötigt werden.
• Die Beschreibung, auf welcher Seite man sich befindet, ist zwar hilfreich, sehe ich aber nicht so stark im Vordergrund wie die anderen Elemente. Deshalb habe ich sie von der Größe und Farbe reduziert und somit in den Hintergrund gestellt.
• Die Links außerhalb der Seitenzahlen wurden in Button umgewandelt

Veränderungen Nachteile:

• Die Button unterscheiden sich in ihrer Funktion, jedoch nicht im Aussehen.
• Die Button stehen stark im Vordergrund, was die Seitenzahlen untergehen lässt.
• Es sind mir noch zu viele Elemente auf der Seite.

3. Auf das Nötigste reduzieren

Durch welche gestalterischen Elemente kann man andere ersetzen? Was muss wirklich zu sehen sein und auf was kann man verzichten?

Veränderungen Vorteile:

• Ich habe die „vor“ und „zurück“ Button in richtungweisende Pfeile ersetzt. Vorteil: Sie unterscheiden sich dadurch von anderen textlastigen Button wie „erste“ und „letzte“.
• Die Seitenbeschreibung befindet sich nicht mehr überhalb der Seitenzahlen, sondern darunter. So ist sie immer noch sichtbar, fällt aber nicht mehr als erstes Element ins Auge. Primär sollen dadurch mehr die Seitenzahlen hervorgehoben werden.
• Warum brauche ich Links die auf die erste und letzte Seite führen, wenn ich sie doch durch die entsprechenden Seitenzahlen ersetzten kann? Das gibt dem User zusätzlich eine genauere Beschreibung, wie viele Seiten tatsächlich vorhanden sind.
• Die „vor“ und „zurück“ Button stehen dadurch mehr für sich.

Veränderungen Nachteile:

Die Elemente wurden schon stark reduziert, das ist gut.

• Trotzdem empfinde ich auf den ersten Blick, dass noch zu viele unterschiedliche Gestaltungselemente vorhanden sind.
• Das führt dazu, dass das Auge nicht richtig weiß, wohin es zuerst schauen soll. Es müsste also mehr Ordnung rein.
  

4. Feinschliff

Viele würden diesen Schritt vielleicht überspringen und wären mit dem Ergebnis in Schritt drei zufrieden. Aber ich liebe es, Details auszuarbeiten und zu schauen, ob es nicht doch noch besser geht. Denn genau das macht letztendlich den Unterschied aus. Und die Probleme, die ich im vorherigen Schritt erkannt habe, kann man durch rumprobieren verbessern. Es ist nur manchmal schwer, sich letztendlich für eine Variante zu entscheiden. Da hilft oft auch ein einfacher Usability Test.

Veränderungen Vorteile Variante 1:

• Die Rahmen der Button wurden entfernt. Das gibt den Pfeilen einen größeren Bezug zu den Seitenzahlen.
• Die drei Punkte zwischen der ersten und letzten Seite sind ebenfalls Nebeninfos und können deshalb, wie die Seitenbeschreibung auch, ausgegraut werden.
• Die Pfeile werden durch den Text „Vor“ und „Zurück“ unterstützt. Das gibt außerdem der Seitenbeschreibung einen Halt.
• Es haben sich zwei Ebenen gebildet, die das Auge leicht voneinander trennen kann. Oben die wichtigen Infos und unten die nebensächlichen Beschreibungen.

Eine gute Variante, die man sicherlich auch in vielen Designs einsetzen kann. Ich habe mich jedoch für die nachfolgende entschieden:

Begründung Vorteile Variante 2:

• Optimal für mehrsprachige Seiten. Dadurch fallen alle Texte weg und es bleiben nur noch selbsterklärende Elemente zurück.
• Das Design ist noch reduzierter und spart Platz.
• Man konzentriert sich nur noch auf das Nötigste und wird nicht abgelenkt.
• Die Seitenbeschreibung ist überflüssig, da diese im Prinzip schon durch die Zahl der ersten und letzten Seite präsentiert wird.
• Die Button heben sich sichtlich als eigene Elemente ab.

Pagination für Mobilgeräte optimieren

Der klickbare Bereich der Seitenzahlen und Button muss groß genug sein, um sie auch mit der Hand bedienen zu können. Dafür sollten die Flächen eine minimum Größe von 44 x 44 Points/Pixel haben. Vergrößert man so den Abstand zwischen den Seitenzahlen, wird außerdem die Lesbarkeit verbessert und man kann ausschließen, dass sich nicht aus Versehen jemand verklickt.

Die optimale Seitennummerierung:

Für kleinere Bildschirmgrößen

Auf vielen Mobilgeräten gibt es einfach keinen Platz für eine Menge Seitenzahlen. Deshalb muss hier auf das Wesentliche zurückgegriffen werden:

• Einen vor und zurück Button.
• Eine Beschreibung für die aktuelle Seitenzahl
• Die Möglichkeit, wieder auf die erste Seite zurückzukehren.

Optional kann auch ein Button zur letzten Seite integriert werden. Der Link zurück zur ersten Seite ist jedoch wichtiger, da es sich dort oft um den am meisten gesuchten Inhalt handelt.

In diesem Fall sind die Button rot, damit sie sofort als das Haupt-Navigationselement ins Auge fallen.

Zusammengefasst

Dieser Prozess hat mir gezeigt, welche Elemente in einer Pagination wirklich notwendig sind und wie weit man diese reduzieren kann, so dass sie trotzdem noch optimal bedienbar sind. Auch wenn es ein kleiner Bereich in einem Layout ist, hat er doch einen großen Einfluss darauf, ob ein Besucher überhaupt die nächsten Seiten anklickt, oder nicht.

Damit die Pagination mit dem restlichen Layout harmoniert, müssen noch Farben, Textgrößen und Design angepasst werden.

Bei einer Pagination muss folgendes beachtet werden:

• Die Pagination muss sofort ins Auge fallen.
• Es muss direkt ersichtlich sein, auf welcher Seite man sich befindet → Style muss sich dementsprechend von den inaktiven Seitenzahlen unterscheiden.
• Elemente mit Hilfe von Farbe, Form und Textgröße unterscheiden.
• Klickbare Flächen müssen groß genug sein, um sie auch mit der Hand bedienen zu können.
• Genügend Platz zwischen den Zahlen lassen → Verbessert die Lesbarkeit und schließt aus, dass man sich nicht aus Versehen verklickt.
• Dem User einen „Vor“ und „Zurück“ Button anbieten → von den Seitenzahlen abheben und einen eigenen Style geben.
• Erste und letzte Seite muss schnell erreichbar sein (dafür brauch es keinen extra Text/Button).
• Texte durch Symbole ersetzen → Multi-language Support.
• Die Navigation muss intuitiv sein.