9.3.2 Kennzeichnen Sie Paging-Links und die aktuelle Position deutlich

Hintergrund

Oftmals wird der durchaus sehr wichtigen Pagination optisch und auch strukturell nicht genügend Gewicht zugestanden. Schlecht gestylte Ketten von Links (z.B. 1 2 3 4 5 … 12) sind schwer zu benutzen, da die Klickfläche zu klein ist die Links zu nahe beieinander liegen.

Die aktuelle Seite der Pagination sollte visuell und im Code deutlich ersichtlich sein, damit die BenutzerInnen jederzeit wissen, auf welcher Seite sie sich gerade befinden.

Maßnahmen

• Bieten Sie große Linkflächen, z.B. durch ausreichend Padding in den Links und lassen Sie zwischen den Paging-Links genug Abstand.
• Unterstreichung der Links ist nicht unbedingt notwendig, deutlicher ist z.B. ein Rahmen um einzelne Paging-Links oder Hintergrundfarben bei der gerade aktiven Seite.
• Markieren Sie die aktuelle Seite deutlich und verlinken Sie diese nicht.
• Bieten Sie vor- und zurück-Links an, sowie Links zur ersten und letzten Seite. Links zur ersten und letzten Seite sollten am Anfang und Ende der Liste stehen.

Wer profitiert davon?

• NutzerInnen mit motorischen Einschränkungen, die eine große Linkfläche benötigen um die Links zu treffen.
• Sehbehinderte NutzerInnen (insbesondere mit Zoom-Software), denen die visuelle Orientierung auf den umfangreichen Ergebnislisten schwer fällt und die deshalb die Pagination leicht übersehen könnten.
• NutzerInnen mit wenig Interneterfahrung.

Beispiele

geizhals.at: Die Paging Links sind zwar logisch angeordnet, aber die Linkflächen sehr klein.

amazon.de: Die Klickflächen sind hier zwar nicht immer hervorgehoben, aber beim Hovern mit der Maus wird die Seitenzahl gut hervorgehoben (leider fehlt hier der Tastaturfokus).