Design im Wandel: Wie SAT1 nutzerfreundlicher wurde.

Die Website des TV Senders SAT1 hat sich über die Jahre stark verändert.

Von 2007 bis heute wird schon auf den ersten Blick ein deutlicher Unterschied erkennbar. Die Website wir klarer, moderner und aufgeräumter.

Schauen wir uns einmal die Unterschiede der Startseiten genau an.

Sat1.de im Jahr 2007

Sat1.de im Jahr 2009

Sat1.de im Jahr 2010

Sat1.de im Jahr 2012

Das Layoutraster hat sich über die Jahre immer mal wieder gewandelt. Wo in 2007 auf ein zweispaltiges Raster gesetzt wird, kommt ab 2009 noch eine Spalte hinzu. Dadurch wirkte die Seite recht voll und etwas unübersichtlich. Heute jedoch wurde die Seite auf nur eine Hauptspalte reduziert, in der die Themen in großen „Boxen“ untereinander aufgebaut sind. Innerhalb dieser Boxen wird eine Dreispaltigkeit eingehalten. Dieses System ein Raster aufzubauen schafft gute Übersichtlichkeit und lässt zusammengehörige Inhalte auch zusammengehörig wirken. Trotzdem besteht ein großer Gestaltungsspielraum innerhalb der „Boxen“.

Bevor ich auf die sehr deutliche Farbveränderung zu sprechen komme, widme ich mich der Navigation und dem Logo.

Logo und Navigation 2007

Logo und Navigation 2009

2007 wurden noch Buttons zum Navigieren verwendet, was für dies Zeit Gang und Gebe war. Die verschieden Navigation-Buttons wurden farblich voneinander getrennt und zweispaltig angeordnet. Den Themen wie Sport, Nachrichten usw. war eine Farbe zugeordnet. Ob dies immer eine gut zum Thema abgestimmte Farbwahl war, bleibt spätestens ab 2009 zu bezweifeln.

Es änderte sich die Darstellung der Navigation von Buttons in Listenform untereinander. Jetzt hatte man auch die Möglichkeit durch den Menüpunkt „Startseite“ direkt zu dieser zu navigieren. Ein wichtiger Bestandteil einer Navigation.

Das bisher verwendete Farbschema wurde erst 2010 vereinfacht. Einzelne Menüpunkte wurden etwas umbenannt und um Neue erweitert. Zum Beispiel der Punkt „TV-Programme“ wurde in die Hauptnavigation integriert, der Begriff „Startseite“ in „Home“ und Sport in den Sendungsnamen „ran“ umgewandelt. Jetzt gliedert sich die Navigation harmonisch in das Gesamtbild ein.

Logo und Navigation 2010

Heute hat die Navigation ein ganz neues Bild bekommen. Sie ist horizontal angeordnet. In der Hauptnavigation spart man Menüpunkte ein, da man in der Unternavigation mehr Inhalt unterbringen kann. Denn bei Mouseover über einen Menüpunkt, fährt sich ein inhaltsbreiter Layer aus, in der alle möglichen Unternavigationspunkte, schriftlich oder bebildert, untergebracht sind. Seit 2010 erwarten Website-Nutzer immer häufiger horizontale Navigationen. Zunächst bei Online-Shops, aber der Trend setzt sich Branchenweit durch.
Mit einer derartigen Navigation lässt sich viel Platz sparen und sie ist nutzerfreundlich, da man nicht durch viele Hierarchieebenen navigieren muss. Bei der farblichen Gestaltung wird hier auf eine dezente Graukombination gesetzt. So wird sie dem schlichten, klaren, neuen Layout angepasst. Zusätzlich erleichtern die größer dargestellte Schrift der Hauptnavigation und ein starker Farbkontrast wie hier das Lesen und erlauben ein zielorientiertes Navigieren. Beides sind zentrale Anforderungen für Barrierefreiheit.

Neben der Navigation hat auch das Logo über die Jahre eine prägnante Veränderung durchgemacht. Alle bringen mit SAT1 den Ball in Verbindung. Die Wortmarke wurde über viele Jahre in Kombination mit dem Ball eingesetzt. Zunächst wurde der Ball als Trennungspunkt zwischen SAT und der 1 verwendet und mit einem starken Schein gefüllt. Durch diesen ließ sich schwer erkennen, dass es sich überhaupt um einen Ball handelt. Eine Trennung von Ball und Wortmarke gab es ab 2009. Der Ball wurde nicht mehr zwischen SAT und 1 platziert, sondern stand groß und auf seine klaren Formen reduziert allein da. Der Ball an sich, gewann dadurch an Wiedererkennung. Aber dennoch musste dieser erstmal ohne die Wortmarke mit SAT1 in Verbindung gebracht werden. 2010, mit dem Wandel kam die optimale Lösung. Das Symbol in Verbindung mit der Wortmarke ist am besten wieder zu erkennen und gut zuzuordnen. Die Wortmarke SAT1 wurde ab 2009 in einer neuen Schrift in Versalien dargestellt und Wort und Zahl durch einen Punkt getrennt. Da ab 2012 sehr stark im Layout reduziert wurde ist wohlmöglich auch das Symbol im Logo eingespart worden. Doch ist das tatsächlich die beste Lösung für die Nutzer, gleich zu erkennen auf welcher Seite sie sich befinden? Grundsätzlich würde ich sagen Nein, aber im Teaser der Seite ist der Ball als Gestaltungselement verwendet worden, sodass ein hoher Widererkennungswert besteht.

Im Jahr 2010 hat offensichtlich ein Relaunch der Website stattgefunden. Ein unübersehbares Merkmal ist vor allem die Farbveränderung. Im neuen Design wird auf Klarheit und Ruhe gesetzt. Die Website wird umrahmt von dezenten Grauflächen und der Inhalt steht auf weißem Untergrund. Oft sehr farbig gestaltete Teaser werden auf grau dezente Flächen und mit Hilfe von dunkelgrauer Schrift, zusammengehörig, in den Seiteninhalt integriert. Da die Themenfarbigkeit mit dem Relaunch entfernt wurde, ist es nicht mehr nötig die einzelnen Teaser farbig dem Thema zuzuordnen. Dadurch wird im Inhaltsbereich sehr viel Farbe gespart und an Übersichtlichkeit gewonnen. Grundsätzlich werden zwei Hauptfarben verwendet. Das dunkle Magenta mit dem in den Jahren zuvor der Hintergrund gestaltet wurde, wird nun deutlich heller und kräftiger eingesetzt. Die Farbe wirkt recht grell und wird ab 2012 wieder etwas verdunkelt.

SAT1 wird noch moderner. 2012 wird wie oben beschrieben, der Inhalt in „Boxen“ unterteilt. Der Header setzt sich zusammen aus der Hauptnavigation und einer Bühne in der SAT1 als TV Sender, durch den Ball und die angebotene Programmübersicht deutlich erkennbar.

Die innerhalb der Boxen platzierten Teaser, werden je nach Thema und Umfang mit einer horizontalen Navigation versehen. Zum Beispiel gibt es Videos zu verschiedenen Themen, die man sich so direkt in der Box anzeigen lassen kann.

Horizontale Navigation innerhalb der Box

In den kleineren Teaserboxen sind hin und wieder mehrere Inhalte zum Thema untergebracht. Zum Beispiel bei den Unterhaltungsnews.
Mit Hilfe einer Ziehharmonikafunktion finden alle Inhalte im Teaser Platz und der Nutzer kann sie sich per Mouseover anzeigen lassen.

Ziehhramonika-System

Fazit:
Das Ziel eines Relaunches sollte es doch sein die Website nutzerfreundlicher zu gestalten und optisch ansprechender zu machen. Ein Augenmerk sollte dabei möglichst auf die Barrierefreiheit gelegt werden. Sat1 ist es über die Jahre recht gut gelungen alle Punkte miteinander zu vereinen.
Die Rasterveränderung auf eine Hauptspalte und der Darstellung des Inhalts in Boxen tat der mit sehr recht viel Inhalt gefüllten Website gut und brachte durch zusammengehörig wirkende Inhalte Ordnung und Ruhe ins das Layout.
Ein ganz wichtiger Punkt der Veränderung, ist die Navigation. Durch die Reduktion von Menüpunkten und die horizontale Darstellung wird eher die Erwartung der Nutzer erfüllt. Die Unterbringung der Unternavigation in Form Text und Bild, in einem Layer ist sehr angenehm zu nutzen. Ein Nutzer muss sich nicht durch tiefe Hierarchien navigieren. Außerdem können mit Hilfe der Bilder im Layer, gezielt Reize gesetzt werden.
Auch im Inhaltsbereich werden effektvolle und platzsparende Funktionen eingesetzt. Die Zieharmonika ist ein hilfreiches Mittel um Platz zu sparen und dem Nutzer den Erhalt von Infomrtioen zu ermöglichen ohne von der Startseite weg zu navigieren.
Alles in allem hat Sat1 in erster Linie die Nutzerfreundlichkeit ihrer Website verbessert. Das neue Erscheinungsbild trägt maßgebend dazu bei.

Zum Projekt „Design im Wandel“:
eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen, unter anderem auch von siebenundzwanzig TV Sendern. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.