Galerie Navigation: zwischen Bildern blättern

Nicht jeder Besucher betritt Ihre Galerie durch die Haustür. Wer über eine Suchmaschine oder einen geteilten Link kommt, landet oft mitten in einer Kategorie, etwa bei den Fotos vom Herbstmarkt, und kennt weder die Startseite noch die übrigen Alben. Ob er sich dann zurechtfindet, hängt an ein paar unscheinbaren Bausteinen: einem Hinweis, wo er gerade ist, einem Weg zum nächsten Bild und einem Weg hinaus. Zusammen bilden sie die Galerie-Navigation. Sie fällt kaum auf, solange sie funktioniert, und sehr deutlich, sobald ein Baustein fehlt.

Galerie-Navigation in der Lightbox: Seebrücke mit Weiter-Schaltfläche, Zähler Bild 2 von 4 und Schließen unter dem Foto

Zwei Ebenen der Galerie-Navigation

Eine Bildergalerie hat fast immer zwei Stockwerke, und jedes braucht seine eigene Wegführung. Das obere Stockwerk sind die Seiten: eine Übersicht mit allen Alben und je Album eine Seite mit Vorschaubildern. Hier bewegt sich der Besucher von Seite zu Seite, die Adresse im Browser ändert sich, und die Zurück-Taste funktioniert wie überall im Netz. Das untere Stockwerk ist die große Ansicht. Sie öffnet sich meist als Lightbox über der Albumseite, und dort wird nicht mehr zwischen Seiten gewechselt, sondern zwischen Bildern einer Serie.

Viele Probleme entstehen, weil die beiden Ebenen verwechselt werden. Ein Besucher, der in der großen Ansicht die Zurück-Taste drückt, erwartet die Albumseite und landet womöglich ganz woanders. Ein Besucher, der auf der Albumseite nach Pfeilen zum nächsten Album sucht, findet keine, weil die Pfeile erst in der großen Ansicht erscheinen. Eine gute Galerie-Navigation macht deshalb auf jeder Ebene sichtbar, wohin der nächste Schritt führt.

Welche Frage jeder Baustein beantwortet

Jedes Bedienelement einer Galerie beantwortet eine Frage, die sich der Besucher stellt, meist ohne sie auszusprechen. Fehlt das Element, bleibt die Frage offen, und das merkt man an seinem Verhalten.

Baustein	beantwortet	fehlt er, dann
Pfad wie „Übersicht » Herbstmarkt“	Wo bin ich, und gibt es noch mehr?	verlassen Besucher, die über einen Link kamen, die Seite nach einem Album
Blätterflächen oder Pfeile	Wie komme ich zum nächsten Bild?	wird jedes Bild einzeln geöffnet und geschlossen
Zähler wie „Bild 7 von 24“	Wie viel kommt noch?	bricht man bei langen Serien früher ab
Schließen, dunkle Fläche, Esc	Wie komme ich wieder raus?	greifen Besucher zur Zurück-Taste und verlassen die Galerie
Vorschauleiste in der großen Ansicht	Kann ich direkt zu Bild 18 springen?	bleibt nur Weiterklicken oder Schließen und neu wählen

Nicht jede Galerie braucht alle fünf. Ein Album mit zwölf Fotos kommt ohne Vorschauleiste gut aus, weil die Übersicht ohnehin auf einen Bildschirm passt. Den Pfad und einen klaren Ausgang sollte dagegen jede Galerie haben, auch die kleinste.

Maus, Finger und Tastatur verhalten sich verschieden

Eine Galerie-Navigation, die am Rechner tadellos wirkt, kann auf dem Handy rätselhaft sein. Der häufigste Grund sind Bedienelemente, die erst beim Überfahren mit der Maus erscheinen. Am Rechner sieht der Besucher den Pfeil, sobald er über die rechte Bildhälfte fährt. Auf dem Touchscreen gibt es kein Überfahren, also sieht er auch keinen Pfeil und muss erraten, dass ein Tipp auf die Bildhälfte weiterführt. Ein kurzer Hinweis wie „Zum Blättern rechts oder links auf das Bild tippen“ über der Galerie hilft hier mehr als jede Gestaltung.

Wer mit der Tastatur arbeitet, hat andere Erwartungen. Er möchte mit den Pfeiltasten blättern und mit Esc schließen, und er rechnet damit, dass die Tab-Taste ihn durch die Bedienelemente der offenen Ansicht führt. Gerade der letzte Punkt ist bei vielen Lightbox-Lösungen nicht erfüllt: Der Tastaturfokus bleibt auf der Seite dahinter, und Tab springt zum nächsten Vorschaubild hinter der dunklen Fläche. Testen Sie Ihre Galerie deshalb einmal ganz ohne Maus. Lässt sich ein Album öffnen, durchblättern und wieder verlassen, ist das Wichtigste geschafft.

So funktioniert die Galerie-Navigation im Bildergalerie-Script

Auch hier gibt es die beiden Stockwerke. Das obere führt durch die Seiten: Die Startseite bildergalerie.php zeigt alle Kategorien als Kacheln in der Reihenfolge, in der sie angelegt wurden. Die ganze Kachel ist anklickbar, der Link darin heißt „Bilder anzeigen...“. Er öffnet die Kategorie unter einer eigenen Adresse wie bildergalerie.php?kid=3, die Sie direkt verlinken können.

Über den Bildern steht der Navigationspfad „Sie befinden sich: Bildergalerie-Übersicht » Herbst“, der Link „Bildergalerie-Übersicht“ führt zurück. Abschalten lässt er sich unter „Einstellungen“ im Abschnitt „Kategorieseiten“ mit „Navigationspfad anzeigen“ (Standard: Ja). Bei „Nein“ setzt die Galerie stattdessen unter die Bilder den Link „« Zurück zur Übersicht“, ein Rückweg bleibt also immer. Gibt es die Kategorie einer Adresse nicht mehr, etwa nach dem Löschen, leitet die Galerie zur Startseite um.

Das untere Stockwerk ist die große Ansicht. Ein Klick auf ein Vorschaubild öffnet die Lightbox, und alle Bilder der Kategorie bilden eine Serie, durch die man blättert. Wie die Wege zusammenhängen, zeigt die Wegkarte: Durchgezogene Pfeile führen tiefer hinein, gestrichelte wieder hinaus.

Animierte Wegkarte der Galerie-Navigation: von der Startseite über die Kachel zur Kategorie, per Klick in die Lightbox und weiter zu Bild 2 oder 4, zurück über Esc und den Navigationspfad, gelöschte Kategorie leitet zur Startseite um — Hinein, blättern, hinaus: Jeder Weg in der Galerie hat einen sichtbaren Rückweg.

In der Lightbox führt ein Klick oder Tipp auf die rechte Bildhälfte weiter, auf die linke zurück. Am Rechner gehen auch Pfeil rechts und N bzw. Pfeil links und P. Geschlossen wird mit Esc, X, C oder O, mit „Schließen“ unter dem Bild oder einem Klick auf die dunkle Fläche. Die Pfeilgrafiken erscheinen nur beim Überfahren mit der Maus. Am ersten Bild führt die linke Hälfte nirgendwohin, am letzten die rechte, die Serie beginnt also nicht von vorn. Unter dem Bild stehen die Bildbeschreibung und der Zähler, etwa „Bild 3 von 24“. Eine Vorschauleiste gibt es nicht, ebenso wenig Wischgesten.

Die Texte von Zähler und Schaltflächen stammen aus den Optionen labelImage, labelOf, labelPrev, labelNext und labelClose in js/lightbox.js. Ändern lassen sie sich ohne Eingriff in diese Datei über window.LightboxOptions in der Vorlage tpl/bildergalerie.html. „Vorheriges Bild“ und „Nächstes Bild“ dienen zugleich als Beschriftung für Screenreader. Den Tastaturfokus holt die Lightbox allerdings nicht zu sich: Wer mit Tab weitergeht, landet zuerst bei den Vorschaubildern hinter der dunklen Fläche. Zum Blättern sind die Pfeiltasten deshalb der bessere Weg.

Praxisfall: eine Kategorie mit 120 Bildern

Seiten teilt die Galerie nicht auf. Alle Vorschaubilder einer Kategorie stehen auf einer Seite, in der Reihenfolge des Hochladens. Bei 120 Bildern und dem Standardwert 2 unter „Vorschaubilder pro Zeile“ entstehen 60 Reihen. Ist jede Reihe auf dem Handy rund 180 Pixel hoch, sind das etwa 10.800 Pixel oder gut 15 Bildschirmhöhen, wer das Ende sucht, wischt lange. Stellen Sie 5 Bilder pro Zeile ein, bleiben am Monitor 24 Reihen. Ist das Fenster schmaler als fünf Vorschaubilder nebeneinander, verkleinert die Galerie die Bilder, statt umzubrechen. Auf dem Handy bis 600 Pixel Breite gelten dagegen immer zwei Spalten, dort bleibt es bei 60 Reihen.

Wirksamer ist deshalb das Teilen. Bis etwa 40 Bilder bleibt eine Kategorie überschaubar, darüber lohnt eine Aufteilung nach einem Merkmal, das Besucher verstehen, etwa nach Tag, Ort oder Programmpunkt. „Sommerfest Aufbau“, „Sommerfest Nachmittag“ und „Sommerfest Abend“ mit je 40 Fotos sind leichter zu durchsuchen als ein Album mit 120 Bildern in zeitlicher Folge, und jede Kategorie bekommt eine eigene Kachel und Adresse. Wer die Galerie-Navigation selbst ausprobieren will, kann das Bildergalerie-Script kostenlos herunterladen.

Häufige Fragen

Ob am Desktop, am Handy oder per Tastatur: Bei der Bedienung der Galerie tauchen immer wieder dieselben praktischen Fragen auf.

Wie bediene ich die Galerie mit der Tastatur?

In der geöffneten großen Ansicht blättern Pfeil rechts und Pfeil links, Esc schließt sie wieder. Im Bildergalerie-Script funktionieren zusätzlich N und P zum Blättern sowie X, C und O zum Schließen. Öffnen lässt sich ein Bild, indem Sie mit Tab auf ein Vorschaubild gehen und Enter drücken.

Wie groß sollten die Schaltflächen für die Bedienung am Handy sein?

Rechnen Sie mit mindestens 44 × 44 Pixeln für alles, was mit dem Finger getroffen werden soll. Kleinere Flächen führen zu Fehltipps, vor allem bei Schließen-Kreuzen in der Ecke. Im Bildergalerie-Script ist die Blätterfläche jeweils eine ganze Bildhälfte. Verkleinern Sie bei eigenen Anpassungen in css/lightbox.css die Schaltfläche „Schließen“ nicht.

Welche Bedienelemente gehören zur Galerie-Navigation?

Auf der Ebene der Seiten ein Pfad oder Zurück-Link zur Übersicht, auf der Ebene der großen Ansicht Flächen oder Pfeile zum Blättern, ein Zähler und ein deutlicher Ausgang. Eine Vorschauleiste und Wischgesten sind Zugaben für große Alben. Das Bildergalerie-Script hat beide nicht, dort blättert man durch Antippen der Bildhälften.

Was passiert mit einem Link auf eine gelöschte Kategorie?

Im Bildergalerie-Script leitet die Galerie Adressen wie bildergalerie.php?kid=7 auf die Startseite um, wenn es die Kategorie nicht mehr gibt. Bei kid=0, negativen Zahlen oder Text zeigt sie gleich die Startseite. Besucher landen also nie auf einer Fehlerseite, sondern in der Übersicht aller Kategorien.