Die Reaktionen auf den Bild.de-Relaunch in der letzten März-Woche waren größtenteils heftig, positive Kommentare blieben in der Minderzahl – wie so oft, wenn sich Nutzer vom gewohnten Seitendesign einer Website verabschieden müssen. Ein paar Beispiele aus den Kommentarzonen einschlägiger Websites (wie etwa meedia.de) zeigen deutlich, dass die Nutzergemeinde vor allem eine Unübersichtlichkeit des veränderten Auftritts kritisiert:

Ich kenne keine große News-Seite, die so unübersichtlich wie die neue Bild.de ist.

Es wirkt alles so, als wenn man mehr Nachrichten innerhalb weniger Fläche unterbringen wollte.

Alleine auf der Startseite 10 Karusselle, die automatisch durchschalten, dazu ein animierter Teaser zur Landtagswahl und diverse animierte Werbebanner – spontan fällt mir keine Website ein, die unaufgeräumter und/oder unruhiger ist als das neue Bild.de. Das alte Design eingeschlossen.

Schlimm…

Die Seite ist so unglaublich unübersichtlich geworden…ein Flashfilm jagt den nächsten; keine Anhaltspunkte wie und wo man sich befindet…
die Seite ist jetzt so lang, dass ich 2 min. brauche um nach unten zu scrollen.

Woran liegt es, dass diese Eindrücke entstehen?
Um das herauszufinden, wird hier das Startseitenlayout vom 16. April 2011 mit dem Startseitenlayout vom 12. Februar 2011 verglichen. Vorweg ist anzumerken: Bild.de hatte am 12.02.2011 ein eher untypisches Layout. Wegen der aktuellen Nachrichtenlage (kurz nach dem verheerenden Erdbeben in Japan) gab es auf der Startseite an diesem Tag einen Zusatzaufmacher am Seitenkopf und damit eine längere Startseite als üblich. Um die Analyse nicht zu verfälschen, ist dieser Zusatzaufmacher für die Analyse aus dem Screenshot gelöscht. Um den Aufwand für diese Analyse in Grenzen zu halten, wird jeweils der Abschnitt der ersten 3500 Pixel betrachtet.

Hier sind die Bild.de-Screenshots inklusive Blickachsen dokumentiert.

Für die Detail-Analyse wird auf die im Layout entstehenden Blickachsen zwischen den Illustrationselementen der Website zurückgegriffen.

Blickachsen verbinden die blicklenkenden Elemente beliebiger Layouts (wie: Fotos, Grafiken, Überschriften, Farbelemente, Animationen) und strukturieren ein Netz von Blickachsen, auf dem die Nutzerblicke in der Scanphase tendenziell über die Seite geführt werden.

Blickachsen geben also Hinweise auf die wahrscheinlichen (nicht auf die faktischen) Blickwege im gerade betrachteten Layout. Ähnlich wie bei der Fluchtlinienanalyse liefern sie allerdings mit vergleichsweise geringem Analyseaufwand substanzielle Indizien für die wahrgenommene Ruhe beziehungsweise die Unruhe eines Seitenlayouts. Oder auch für die visuelle Haftkraft bestimmter Layoutflächen. Neben den Blickachsen gibt es natürlich auch andere Faktoren, die für die emotionale Wahrnehmung einer Webseite eine Rolle spielen. Sie bleiben hier außer Betracht.

Die Seitenlänge
Warum also wird das neue Startseitenlayout auf Bild.de als eher unübersichtlich bewertet? Fakt ist: An der Seitenlänge kann es nicht liegen. Im neuen Design hat die Startseite eine Länge von 8209 Pixeln, im alten Design eine Länge von 8638 Pixeln – die neue Startseite ist also kürzer als die Vorgängerversion.

Die Fotos
Das alte Seitenlayout zeigt auf den ersten 3500 Pixeln knapp 30 Fotos, das neue Seitenlayout zeigt nur 20 Fotos in Formatgrößen oberhalb von 80×80 Pixeln (kleinere Formate gelten als nicht blickverlaufsrelevant). Mit dem Relaunch wurde die Anzahl der Fotos also verringert. Weniger Fotos schaffen jedoch nicht zwingend ein ruhigeres Seitenbild. Es kommt auch auf die Anzahl unterschiedlicher Formate an. Und hier wird im Vergleich der Seiten deutlich, dass es im alten Seitenlayout nur 6 unterschiedliche Formate gibt, im neuen dagegen 13. Die Bild.de-Verantwortlichen haben also versucht, ihre Fotoformate stärker zu variieren. Schaut man sich zusätzlich die Fotopositionen an, dann fällt auf, dass die Fotos im alten Layout mehrheitlich in der breiteren Hauptspalte laufen. Im neuen Layout dagegen wird dieser zweispaltige Umbruch viel häufiger durchbrochen, vermutlich um die Seite im Layout bewusst aufzulockern. Im Ergebnis ist das Startseitenlayout damit variabler konstruiert als bislang – und genau deshalb wird es jetzt als unruhig empfunden. Hier liegt wohl ein wesentlicher Grund für die von vielen Nutzern kritisierte neue Unübersichtlichkeit.

Die Ressorts
Die vertikale Hierarchie der Ressorts ist weitgehend unverändert. Im alten Layout sah sie auf den ersten 3500 Pixeln so aus:

Aufmacher-Rotation
Top-Nachrichten-Linkfläche
Politik und Wirtschaft
News
Der Tag in Bildern
Unterhaltung
Sport

Im neuen Seitenlayout sieht die Ressortfolge jetzt so aus:

Aufmacher-Rotation
Meldungen
News
Der Tag in Bildern
Politik
Unterhaltung
Video
Sport

Die Änderungen in der Ressort-Hierarchie erscheinen also eher marginal. Umbauten gibt es bei den Kurznachrichten: Newsticker und Top-Nachrichten-Linkfläche sind zu einem Meldungen-Fenster verdichtet worden. Und die drei Kurz-Newsteaser des alten Layouts (unterhalb des Aufmachers) sind im neuen Layout einer dreiteiligen Sportnachrichten-Rotation gewichen. Das Ressort Sport wird damit deutlich stärker als Kernkompetenz akzentuiert. Das Ressort News steht in der Folge jetzt oberhalb des Ressorts Politik, vorher war es umgekehrt. Neu ist das Video-Ressort in der Hauptspalte, das zuvor auf kleinerer Fläche in der Randspalte stand – ein klarer Hinweis auf die Bild.de-Strategie, die Nutzer noch intensiver über verweilzeitverlängernde Videostoffe zu binden. Insgesamt wirken die Umbauten in der Ressortfolge eher moderat und können kaum als Grund für die verbreitet empfundene Unübersichtlichkeit herangezogen werden.

Die Rotationen
Die prominenteste Änderung liegt sicher in den zusätzlichen Teaser-Rotationen quer über die gesamte Seite: Statt nur einer Rotation am Seitenkopf, hat jetzt jedes Hauptressort eine eigene Rotation. Auf den jeweils gerade aktiv präsentierten Teaser wird durch eine rote Teaserhintergrundfarbe und einen zugehörigen Pfeilverweis hingewiesen. Das sind visuell sehr prominente Blicklenkungsinstrumente, die zusammen mit der Animation eine hohe Stickyness (Haftkraft) erzeugen sollen.

Das Problem dabei ist: Ähnlich wie bei zu viel Fettsatz in einem Text kann auch die Wirkung von Teaser-Rotationen ins Gegenteil umschlagen. Wenn beispielsweise in einem Text sehr viele Wörter fett gesetzt werden, verliert die Fettung ihre Prominenz. Bei den Rotationen ist es im Grunde nicht anders: Hier müssen die Nutzer während des Überfliegens innehalten, wenn sie alle Teaserbilder einmal gesehen haben wollen – und büßen ihre Zeitsouveränität ein.

Am Seitenkopf mag das – einmalig – für viele Nutzer noch akzeptabel sein. Bei zu vielen Rotationen kann der Schuss aber auch schnell nach hinten losgehen: Die wenigsten Nutzer werden im überfliegenden Lesen alle Loops in den Rotationen komplett abwarten wollen oder alternativ mit dem Mauszeiger erkunden. Tendenziell werden sie ihre Rezeption der Rotationsbilder meist abbrechen und deshalb als Eindruck mitnehmen, dass die Startseite mit dem bislang üblichen Zeitinvest nicht mehr vollständig erfasst werden kann. Das Überfliegen geht also nicht mehr so schnell wie im alten Layout. Es dauert jetzt gezwungenermaßen länger, die Startseitenthemen zu erfassen. Gerade dieser Aspekt erklärt, warum einige Nutzer – trotz der kürzeren Startseite – den Eindruck haben, dass sie jetzt für das Überfliegen der Startseite mehr Zeit verbrauchen (müssten).

Die Blickachsen
Die Anzahl und die Positionen der Blickachsen zeigen zwei Dinge: Im neuen Layout gibt es weniger Blickachsen, sodass die Seite eigentlich aufgeräumter wirken könnte. Gleichzeitig sind die Blickachsen aber auch breitflächiger gestreut, sie sind nicht mehr in der linksbündigen Hauptspalte des alten Layouts konzentriert. Das ist ein Indiz dafür, dass die Nutzer im Überfliegen der Seite jetzt mehr Fläche zu durchmustern haben, um alle wesentlichen Themenangebote mindestens peripher gesehen zu haben. Ihr kognitiver Aufwand für das Themenerfassen ist im neuen Seitenlayout also relativ höher.

Fazit
Alles in allem sind also die zusätzlichen Fotoformate, das Durchbrechen der bislang sehr streng gehaltenen Spaltengrenze und die vielen Rotationen dafür verantwortlich, dass die neue Bild.de-Startseite eher unübersichtlich wirkt. Was die Fotoformate und das variantenreichere Seitenlayout anbelangt, können die Macher auf einen Gewöhnungseffekt setzen. Was allerdings die Rotationen anbelangt: Da gibt es ein strukturelles Zuviel des Guten. Startseiten informierender Websites werden meist nicht länger betrachtet als 15 bis maximal 30 Sekunden. Auf Bild.de ist ein Erfassen gerade der wichtigsten Themen (in den Rotationen) in dieser kurzen Zeitspanne einfach nicht mehr möglich.

Weiterführende Links

Die Bild.de-Screenshots mit eingezeichneten Blickachsen

Auch wenn das Musikfernsehen tot ist – das Musikvideo war nie lebendiger, schreibt die Zeit. Und verweist darauf, dass sich das Popvideo im Netz sich zur interaktiven Form wandelt. “Noch nie in der Geschichte des Genres gab es eine solche ästhetische Umwälzung”, so Rabea Weihser auf Zeit Online.

Das erscheint zwar etwas arg in kräftigen Farben gemalt, trotzdem ist das Beispiel The Wilderness Downtown ein ungewöhnliches Modell: “Gib den Namen deiner Heimatstadt ein. Dann drücke auf Play, und die Straßen deines Gedächtnisses werden zur Kulisse eines Musikvideos. Ein dunkler Läufer macht sich auf den Weg, virtuelle Vögel bevölkern die Dächer, animierte Bäume brechen durch den Asphalt vor deiner Haustür. Du bist Teil dieses Videos.” Genau. Und jeder kann es selbst ausprobieren.

Regisseur Chris Milk hat hier ein musikunterlegtes Popup-Potpourri aus Browserfenstern inszeniert, lädt dazu Bilddaten aus Google Street View und vorproduzierte Videosequenzen in die Popups. Und im Ergebnis wird der Bildschirm zum Fenster auf ein personalisiertes Pointilistychon, auf ein mehrteiliges Fragmentebild.

Das Eigentliche rückt in dieser Performance allerdings eher an den Rand: Der Song We used to wait von Arcade Fire wird mehr oder weniger zum Audioteppich degradiert. Aber das ist in manch anderen, weniger interaktiven Musikvideos wohl auch so.

Weiterführende Links

http://www.thewildernessdowntown.com/
(empfohlen für den Chrome-Browser)

Ein Storyboard ist so etwas wie die papierene Vorab-Version eines filmischen Werks: Mit feinem Strich und manchmal auch mit Tusche wird darin als Zeichnung entworfen, was später einmal als bewegtes Bild über die Kino-Leinwände oder über Fernsehbildschirme flimmern soll.

Für die Dreharbeiten ist das ungemein nützlich, denn das Storyboard liefert allen Beteiligten den Masterplan: Sämtliche Szenen eines Films sind auf den Papierseiten bis ins Detail ausgearbeitet – nach Art eines großformatigen Loseblatt-Comics inklusive der Anweisungen beispielsweise für die Kamerapositionen, für die Kameraeinstellungen oder für die Bewegungsrichtungen der Schauspieler.

Zu sehen bekommen die Kinozuschauer diese sehenswerten Storyboards meist nicht. Nach Drehschluss wandern sie in Schubladen, Kartons oder Archive und das war es dann.

Nicht so in Emden: Die dortige Kunsthalle Emden präsentiert ab 16. April 2011 (bis 17. Juli 2011) ausgewählte Storyboards weltbekannter Filme, aus bahnbrechenden Werken wie etwa Vom Winde verweht, Apocalypse Now oder Matrix. Die gemeinsam mit der Deutschen Kinemathek kuratierte Ausstellung “Zwischen Film und Kunst – Storyboards von Hitchcock bis Spielberg” führt in 17 Storyboard-Kapiteln durch 80 Jahre Filmgeschichte. Die Exponate sind Leihgaben aus Deutschland, Frankreich, England und diversen Archiven der USA. Eine Zeichnung zu Taxi Driver stammt aus dem Privatarchiv von Martin Scorsese – er hat sie selbst angefertigt.

Als besonderes Bonbon können sich die Besucher der Ausstellung von Han Solo alias Indiana Jones alias Harrison Ford über Hintergründe informieren lassen: Wolfgang Pampel, deutsche Synchronstimme des Hollywood-Stars, hat den Audioguide eingesprochen.

Weiterführende Links:

Kunsthalle Emden

Bildergalerie zur Ausstellung auf ZEIT Online

Es ist zwar nicht neu, aber auch nicht gerade weithin bekannt: Wer einen Deeplink auf eine bestimmte Szene in einem YouTube-Video setzen will (statt auf den Anfang des Videos), braucht dazu nur einen Timecode ans Ende der Video-URL anzuhängen.

Der Zusatz sieht dann beispielsweise so aus: #t=1m30s. In diesem Fall würde der URL-Zusatz das Video an der Zeitmarke 1:30 min starten.

Hier gibt’s zum Ausprobieren ein Beispiel: Wer auf diesen Link klickt, springt direkt zur Schluss-Pointe eines Waldorf und Statler-Videos.

Weiterführende Links

Die Youtube-Dokumentation: Links zu bestimmten Szenen in einem Video

Videos gehören längst zum Standard im Web und sind bei den Nutzern beliebt. Gerade Publikumsmedien wie Bild.de nutzen die bewegten Bilder, um die Verweilzeiten auf ihren kurztextlastigen Webseiten zu steigern. Nicht ganz zufällig sind auch auf meinen Texten-fürs-Web-Blogseiten immer wieder Videos in die Blogeinträge eingebunden.

Für die Suchmaschinenoptimierung stellt sich mit dem Einbinden von Videos allerdings eine inzwischen dringlicher werdende Herausforderung: Der gesprochene Inhalt kann von einem Suchmaschinen-Crawler nicht indexiert werden. Google ist zwar nicht blind, dafür aber taub.

Der Video-Inhalt bleibt deshalb für die SEO ungenutzt, er verpufft ins Web-Nirwana. Für die Anbieter ist das mehr als bedauerlich: Im Grenzfall ist eine Webseite mit eingebettetem Video für eine Suchergebnisliste nicht relevanter als eine thematisch identische Webseite ohne eingebettetes Video.

Eine Lösung bieten jene Dienstleister, die das gesprochene Wort als Inhalt eines Videos verschriftlichen und als videoflankierendes Element anbieten. Durch das Transkript wird der Video-Inhalt für die Suchcrawler zugänglich und kann in die Relevanzbewertung einfließen. Und noch besser: Wie bei anderen Texten auch, können die Nutzer das Transkript überfliegen, noch ehe sie sich für den Videostart entscheiden. Manche Video-Transkripte erlauben es auch, eine Textstelle anzuklicken und das Video dann direkt an der zugehörigen Stelle zu starten. Nicht zu vergessen: Auch für hörbehinderte Menschen Videos per Transkript zugänglich und damit interessant.

Überall dort, wo Preroll-Werbeformate für die Website-Vermarktung keine Rolle spielen, sind solche Services sinnvoll. Ein Beispiel für einen solchen Video-Transkriptionsservice ist Speakertext:

Und dies ist das Transkript zum Video (Speakertext liefert es üblicherweise als interaktiven Text in einem eigenen Fenster aus):

Let’s talk about the Internet.

The Internet started off as a web of text documents, but as it matured and technology advanced, people started using it to share pictures, and music, and videos. But search engines like Google can still only see and understand text.

If you’re someone who is serious about putting video on the Web, this is a big problem for you. SpeakerText is a new service for video publishers that turns video into text and puts your videos on Google’s radar.

SpeakerText detects all the videos on your site and loads an interactive transcript plugin––called the SpeakerBar––beneath each video that’s been transcribed. The SpeakerBar shows you the full video text and automatically highlights each sentence as the video plays.

You can use the SpeakerBar to scroll through the full transcript and click on the text to skip backwards and forwards through the video.

You can even use the SpeakerBar to search for quotes within the video itself. The SpeakerBar makes it easy for people to share specific moments from inside the videos on your website.

If you copy a quote from the SpeakerBar and paste it into a rich text editor like a blog post or an email, the quote becomes a link–called a QuoteLink––that takes people back to your website and starts playing the video at the time cue where the quote appeared.

People can also use the SpeakerBar to share the quotes they like and link back to them on social networking sites like Facebook and Twitter.

SpeakerText is easy to install and works with popular publishing platforms like WordPress, and video sharing sites like YouTube, Blip.tv and Brightcove. To learn more, visit SpeakerText.com