Attraktive Bildpräsentation – Teil 1

Detailarme Bilder in Briefmarkengröße gehören zum grauen Alltag im Netz. Dabei kann ein Bild bekanntlich für mehr als tausend Worte stehen. Dass es auch anders, vor allem attraktiver geht, zeigen große ebenso wie weniger bekannte Vertreter. Bilderpräsentationen, die Spaß machen und eine Website aufwerten.

Die Online-Dependance von Die ZEIT wählt als Navigationselement für ihre Fotogalerie die Analogie einer Bibliothek. Der Nutzer „geht“ von Etage zu Etage und findet dort jeweils eine Fotoausstellung.

Die aktuelle Ausstellung ist im ersten Stock. An der „Fassade“ der Bibliothek ist ein exemplarisches Bild zu sehen.

Die Gebäudeanalogie wird in der Fotopräsentation konsequent durchgehalten. Usability-Guru Jakob Nielsen bekäme zwar angesichts eines horizontal zu scrollenden Screens weitere graue Haare, jedoch sind die der Reihe nach gehängten Fotos stimmig und entsprechen dem realen Besuch einer Ausstellung.

Zur Realitätsnähe trägt auch die dreidimensionale Anmutung und Türen, durch die der Ausstellungsbesucher die einzelnen Räume betritt, bei. Unter jedem Bild ist ein Link zur Vita des Fotografen angebracht. Jedes Foto lässt sich in der Großansicht, hinter der auch eine wirklich deutlich größere Version zum Vorschein kommt, näher studieren.

Die Großansicht wurde mit einem Javascript-Popup realisiert. Popup-Blocker könnten hier den Ausstellungsgenuss trüben. Kleines Manko. Hat der Besucher sich an allen Fotos auf einer Etage satt gesehen und möchte zur nächsten Etage gehen, muss er unter Umständen das Aufsichtspersonal fragen, denn die Navigationstreppe versteckt sich unterhalb der Fotopräsentation und ist selbst auf einem 19 Zoll-Monitor nur teilweise zu erkennen.

Per Mausklick kann sich Besucher schnell von Ausstellungsraum zu Ausstellungsraum „beamen“..

Die Galerie von Die ZEIT ist ein Paradebeispiel für eine ansprechende Foto-Präsentation. Besonders wohl fühlen wird sich der entdeckerische Nutzer, den unkonventionelle Navigationskonzepte herausfordern. Künstler könnten mit der Raumanalogie auf ihren Internetpräsenzen Werke spannend ins rechte Licht rücken.

Der Tag in Bildern
Der Stern begleitet die wichtigsten Themen und Ereignisse eines Tages mit einer chronologischen Bilderschau, die sowohl im Headerbereich als auch am Ende jeder Seite des Nachrichtenmagazins beworben wird. Im Headerbereich begnügen sich die Layout-Strategen mit einer eher unauffälligen Grafik links neben dem Suchfeld. Am Seitenende wird der Leser prominenter mit einer Thumbnail-Vorschau der letzten fünf Bilder zum Klicken eingeladen.

Direkt neben dem Suchfeld ist der „Tag in Bildern“ ein optionaler Zugang zu Informationen.

Aus Usability-Sicht schade ist, dass ganz gleich auf welches der Vorschaubilder der Mausklick erfolgt, immer nur das zuletzt in die Bilderschau eingespeiste Motiv zum Vorschein kommt.

Die Bilderschau glänzt mit einer Zeitleiste aus kleinen Quadraten, die stellvertretend für ein Bild stehen. Datum und Trennlinien grenzen die Tagesstrecken voneinander ab. Als navigatorische Alternative kann der Leser die gewohnten Vor- und Zurück-Links zum Blättern verwenden.

Der Tag in Bildern. Ohne Grafikschnickschnack, dezent im Corporate Design des Gesamtauftritts.

Textlich flankiert werden die Bilder durch Bildunterschriften und Teaser, Appetitanreger, die einen Klick auf den darunter stehenden Link zum Langartikel provozieren sollen. Die Bilderschau ist somit keine Einbahnstraße, sondern ein visuelles Navigationselement, welches zu weiterführenden Informationen überleitet und dazu dient, den Leser möglichst lange im eigenen, werbevermarkteten Angebot zu halten.

Wer seinen Cursor weiter suchend über die Stern-Seite bewegt, der findet das „Liebes Leben“, eine Form der Bildpräsentation, die auch für alle Homepagebetreiber jenseits nackter Haut eine sprudelnde Inspirationsquelle darstellt. Der Einstieg erfolgt über die letzten drei Fotostrecken, angerissen durch ein repräsentatives Bild, den Namen des Fotografen und dem Thementitel.

Die ausgewählte Fotostrecke öffnet sich in einem Extra-Fenster, während im Hintergrund die erste Übersichtsseite von „Liebes Leben“ geladen wird.

Die Fotogalerie

1. Fotostrecken-Navigation
Der Nutzer hat die Wahl. Entweder er sieht sich die Bilder der Reihe nach an, klickt dazu auf das Einzelbild, benutzt den „Vor“-Link. Oder er wählt gezielt eines aus der Thumbnail-Vorschau aus, die passend zum Fotografen-Sujet in Form eines Negativstreifens gestaltet ist. Die Thumbnails sind groß genug um zu sehen, ob sich ein Besuch lohnt. Alternativ geht es auch im „Blindflug“ durch Klick auf eine Zahl – die Anzahl der Zahlen verrät gleichzeitig den Umfang der Fotostrecke. Am Ende des Bildstreifens kann der Besucher Informationen zum Fotografen abrufen.

2. Servicefunktion
Falls dem User ein Bild aus der Fotostrecke so gut gefällt, dass er es gerne einem anderen empfehlen würde, kann er das ohne in sein E-Mail-Programm wechseln zu müssen, mittels der „Foto versenden“-Funktion tun, die auf jeder Seite unterhalb des Bildes zur Verfügung steht.

3. Pull-Down Fotografen-Liste
Der Wechsel zu anderen Fotostrecken kann über das Pull-Down im Header erfolgen. Die Fotografen sind dort in chronologischer Reihenfolge gelistet. Nur einen dekorativen oder typografischen Zweck erfüllt der „Go“-Button rechts neben dem Pull-Down. Er wird nie benötigt, da die Auswahl eines Fotografen automatisch einen Seitenwechsel auslöst.

4. Übersichtsseiten
Übersichtsseiten runden die verschiedenen Auswahlmöglichkeiten der Fotostrecken ab. Hier kann der Besucher gezielter als beim Pull-Down weitere Serien auswählen. Kleine Anreißertexte mit weiterführenden Links versuchen neben den bereits bekannten Thumbnails zum Klicken zu animieren. Wer auf „mehr“ klickt, erhält nicht etwa mehr Text, sondern landet ebenso wie bei der Auswahl eines Thumbnails auf dem ersten Bild der Fotostrecke.

Als weiteres Schmankerl könnte bei jedem Seitenwechsel ein anderes Header-Bild erscheinen.

Die Internetausgabe des bilderlastigen Magazins gibt durch eine vielseitige und ansprechende Präsentation ihres Bildmaterials Anschauungsunterricht für Webworker. Über die reine Bildpräsentation hinausgehen die „Bilder des Tages“ als Ergänzung zur textbasierten Navigation. Dies steht nicht nur einer Medienseite gut zu Gesicht, sondern jeder Firma mit einem Newsbereich oder einer Firmenchronologie. Sehr schön ließen sich so zudem Produktneuheiten auf einen Blick präsentieren.

Erstveröffentlichung 18.01.2006